@asgardeo/react 0.13.2 → 0.13.3

package/dist/cjs/index.js

@@ -35,10 +35,11 @@ __export(index_exports, {
   Alert: () => Alert_default,
   AsgardeoContext: () => AsgardeoContext_default,
   AsgardeoProvider: () => AsgardeoProvider_default,
-  AsgardeoRuntimeError: () => import_browser90.AsgardeoRuntimeError,
+  AsgardeoRuntimeError: () => import_browser91.AsgardeoRuntimeError,
   BaseAcceptInvite: () => BaseAcceptInvite_default,
   BaseCreateOrganization: () => BaseCreateOrganization,
   BaseInviteUser: () => BaseInviteUser_default,
+  BaseLanguageSwitcher: () => BaseLanguageSwitcher_default,
   BaseOrganization: () => BaseOrganization_default,
   BaseOrganizationList: () => BaseOrganizationList_default,
   BaseOrganizationProfile: () => BaseOrganizationProfile_default,
@@ -64,12 +65,12 @@ __export(index_exports, {
   DatePicker: () => DatePicker_default,
   Divider: () => Divider_default,
   EmailOtp: () => EmailOtp_default,
-  EmbeddedFlowActionVariant: () => import_browser90.EmbeddedFlowActionVariantV2,
-  EmbeddedFlowComponentType: () => import_browser90.EmbeddedFlowComponentTypeV2,
-  EmbeddedFlowEventType: () => import_browser90.EmbeddedFlowEventTypeV2,
-  EmbeddedFlowTextVariant: () => import_browser90.EmbeddedFlowTextVariantV2,
-  EmbeddedSignInFlowStatus: () => import_browser90.EmbeddedSignInFlowStatusV2,
-  EmbeddedSignInFlowType: () => import_browser90.EmbeddedSignInFlowTypeV2,
+  EmbeddedFlowActionVariant: () => import_browser91.EmbeddedFlowActionVariantV2,
+  EmbeddedFlowComponentType: () => import_browser91.EmbeddedFlowComponentTypeV2,
+  EmbeddedFlowEventType: () => import_browser91.EmbeddedFlowEventTypeV2,
+  EmbeddedFlowTextVariant: () => import_browser91.EmbeddedFlowTextVariantV2,
+  EmbeddedSignInFlowStatus: () => import_browser91.EmbeddedSignInFlowStatusV2,
+  EmbeddedSignInFlowType: () => import_browser91.EmbeddedSignInFlowTypeV2,
   Eye: () => Eye_default,
   EyeOff: () => EyeOff_default,
   FacebookButton: () => FacebookButton_default,
@@ -86,6 +87,7 @@ __export(index_exports, {
   InputLabel: () => InputLabel_default,
   InviteUser: () => InviteUser_default,
   KeyValueInput: () => KeyValueInput_default,
+  LanguageSwitcher: () => LanguageSwitcher_default,
   LinkedInButton: () => LinkedInButton_default,
   Loading: () => Loading_default,
   LogOut: () => LogOut_default,
@@ -131,14 +133,14 @@ __export(index_exports, {
   createPatchOperations: () => import_browser88.createPatchOperations,
   createSignInOption: () => createSignInOption,
   createSignInOptionFromAuthenticator: () => createSignInOptionFromAuthenticator,
-  getActiveTheme: () => import_browser90.getActiveTheme,
+  getActiveTheme: () => import_browser91.getActiveTheme,
   getAllOrganizations: () => getAllOrganizations_default,
   getMeOrganizations: () => getMeOrganizations_default,
   getMeProfile: () => getScim2Me_default,
   getOrganization: () => getOrganization_default,
   getSchemas: () => getSchemas_default,
-  http: () => import_browser90.http,
-  navigate: () => import_browser90.navigate,
+  http: () => import_browser91.http,
+  navigate: () => import_browser91.navigate,
   updateMeProfile: () => updateMeProfile_default,
   updateOrganization: () => updateOrganization_default,
   useAsgardeo: () => useAsgardeo_default,
@@ -959,6 +961,11 @@ var AsgardeoReactClient = class extends import_browser6.AsgardeoBrowserClient {
     const config = await this.asgardeo.getConfigData();
     if (config.platform === import_browser6.Platform.AsgardeoV2) {
       this.asgardeo.clearSession();
+      if (config.signInUrl) {
+        (0, import_browser6.navigate)(config.signInUrl);
+      } else {
+        this.signIn(config.signInOptions);
+      }
       args[1]?.(config.afterSignOutUrl || "");
       return Promise.resolve(config.afterSignOutUrl || "");
     }
@@ -1212,6 +1219,7 @@ var FlowProvider_default = FlowProvider;
 
 // src/contexts/FlowMeta/FlowMetaProvider.tsx
 var import_browser10 = require("@asgardeo/browser");
+var import_i18n = require("@asgardeo/i18n");
 var import_react9 = require("react");
 
 // src/contexts/FlowMeta/FlowMetaContext.ts
@@ -1261,6 +1269,7 @@ var FlowMetaProvider = ({
   const [meta, setMeta] = (0, import_react9.useState)(null);
   const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
   const [error, setError] = (0, import_react9.useState)(null);
+  const [pendingLanguage, setPendingLanguage] = (0, import_react9.useState)(null);
   const hasFetchedRef = (0, import_react9.useRef)(false);
   const fetchFlowMeta = (0, import_react9.useCallback)(async () => {
     if (!enabled) {
@@ -1278,6 +1287,44 @@ var FlowMetaProvider = ({
       setIsLoading(false);
     }
   }, [enabled, baseUrl, applicationId]);
+  const switchLanguage = (0, import_react9.useCallback)(
+    async (language) => {
+      if (!enabled) return;
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await (0, import_browser10.getFlowMetaV2)({
+          baseUrl,
+          id: applicationId,
+          language,
+          type: import_browser10.FlowMetaType.App
+        });
+        if (result.i18n?.translations && i18nContext?.injectBundles) {
+          const flatTranslations = {};
+          Object.entries(result.i18n.translations).forEach(([namespace, keys]) => {
+            Object.entries(keys).forEach(([key, value2]) => {
+              flatTranslations[`${namespace}.${key}`] = value2;
+            });
+          });
+          const bundle = { translations: flatTranslations };
+          i18nContext.injectBundles({ [language]: bundle });
+        }
+        setPendingLanguage(language);
+        setMeta(result);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [enabled, baseUrl, applicationId, i18nContext]
+  );
+  (0, import_react9.useEffect)(() => {
+    if (pendingLanguage && i18nContext?.setLanguage) {
+      i18nContext.setLanguage(pendingLanguage);
+      setPendingLanguage(null);
+    }
+  }, [pendingLanguage, i18nContext?.setLanguage]);
   (0, import_react9.useEffect)(() => {
     if (!hasFetchedRef.current) {
       hasFetchedRef.current = true;
@@ -1290,7 +1337,7 @@ var FlowMetaProvider = ({
     if (!meta?.i18n?.translations || !i18nContext?.injectBundles) {
       return;
     }
-    const metaLanguage = meta.i18n.language || "en";
+    const metaLanguage = meta.i18n.language || import_i18n.TranslationBundleConstants.FALLBACK_LOCALE;
     const flatTranslations = {};
     Object.entries(meta.i18n.translations).forEach(([namespace, keys]) => {
       Object.entries(keys).forEach(([key, value2]) => {
@@ -1311,7 +1358,8 @@ var FlowMetaProvider = ({
     error,
     fetchFlowMeta,
     isLoading,
-    meta
+    meta,
+    switchLanguage
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FlowMetaContext_default.Provider, { value, children });
 };
@@ -1319,50 +1367,112 @@ var FlowMetaProvider_default = FlowMetaProvider;
 
 // src/contexts/I18n/I18nProvider.tsx
 var import_browser11 = require("@asgardeo/browser");
-var import_i18n = require("@asgardeo/i18n");
+var import_i18n2 = require("@asgardeo/i18n");
 var import_react10 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var logger = (0, import_browser11.createPackageComponentLogger)(
   "@asgardeo/react",
   "I18nProvider"
 );
-var I18N_LANGUAGE_STORAGE_KEY = "asgardeo-i18n-language";
+var DEFAULT_STORAGE_KEY = "asgardeo-i18n-language";
+var DEFAULT_URL_PARAM = "lang";
 var detectBrowserLanguage = () => {
   if (typeof window !== "undefined" && window.navigator) {
-    return window.navigator.language || "en-US";
+    return window.navigator.language || import_i18n2.TranslationBundleConstants.FALLBACK_LOCALE;
   }
-  return "en-US";
+  return import_i18n2.TranslationBundleConstants.FALLBACK_LOCALE;
 };
-var getStoredLanguage = () => {
-  if (typeof window !== "undefined" && window.localStorage) {
-    try {
-      return window.localStorage.getItem(I18N_LANGUAGE_STORAGE_KEY);
-    } catch (error) {
-      return null;
-    }
+var deriveRootDomain = (hostname) => {
+  const parts = hostname.split(".");
+  return parts.length > 1 ? parts.slice(-2).join(".") : hostname;
+};
+var getCookie = (name) => {
+  if (typeof document === "undefined") return null;
+  const match = document.cookie.match(
+    new RegExp(`(?:^|; )${name.replace(/([.*+?^${}()|[\]\\])/g, "\\$1")}=([^;]*)`)
+  );
+  return match ? decodeURIComponent(match[1]) : null;
+};
+var setCookie = (name, value, domain) => {
+  if (typeof document === "undefined") return;
+  const maxAge = 365 * 24 * 60 * 60;
+  const secure = typeof window !== "undefined" && window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; Max-Age=${maxAge}; Path=/; Domain=${domain}; SameSite=Lax${secure}`;
+};
+var createStorageAdapter = (strategy, key, cookieDomain) => {
+  switch (strategy) {
+    case "cookie":
+      return {
+        read: () => getCookie(key),
+        write: (language) => {
+          const domain = cookieDomain ?? (typeof window !== "undefined" ? deriveRootDomain(window.location.hostname) : "");
+          if (domain) setCookie(key, language, domain);
+        }
+      };
+    case "localStorage":
+      return {
+        read: () => {
+          if (typeof window === "undefined" || !window.localStorage) return null;
+          try {
+            return window.localStorage.getItem(key);
+          } catch {
+            return null;
+          }
+        },
+        write: (language) => {
+          if (typeof window === "undefined" || !window.localStorage) return;
+          try {
+            window.localStorage.setItem(key, language);
+          } catch {
+            logger.warn("Failed to persist language preference to localStorage.");
+          }
+        }
+      };
+    case "none":
+    default:
+      return { read: () => null, write: () => {
+      } };
   }
-  return null;
 };
-var storeLanguage = (language) => {
-  if (typeof window !== "undefined" && window.localStorage) {
-    try {
-      window.localStorage.setItem(I18N_LANGUAGE_STORAGE_KEY, language);
-    } catch (error) {
-      logger.warn("Failed to store language preference:");
-    }
+var detectUrlParamLanguage = (paramName) => {
+  if (typeof window === "undefined") return null;
+  try {
+    return new URLSearchParams(window.location.search).get(paramName);
+  } catch {
+    return null;
   }
 };
 var I18nProvider = ({
   children,
   preferences
 }) => {
-  const defaultBundles = (0, import_i18n.getDefaultI18nBundles)();
+  const defaultBundles = (0, import_i18n2.getDefaultI18nBundles)();
+  const storageStrategy = preferences?.storageStrategy ?? "cookie";
+  const storageKey = preferences?.storageKey ?? DEFAULT_STORAGE_KEY;
+  const urlParamConfig = preferences?.urlParam === void 0 ? DEFAULT_URL_PARAM : preferences.urlParam;
+  const resolvedCookieDomain = (0, import_react10.useMemo)(() => {
+    if (storageStrategy !== "cookie") return void 0;
+    if (preferences?.cookieDomain) return preferences.cookieDomain;
+    return typeof window !== "undefined" ? deriveRootDomain(window.location.hostname) : void 0;
+  }, [storageStrategy, preferences?.cookieDomain]);
+  const storage = (0, import_react10.useMemo)(
+    () => createStorageAdapter(storageStrategy, storageKey, resolvedCookieDomain),
+    [storageStrategy, storageKey, resolvedCookieDomain]
+  );
   const determineInitialLanguage = () => {
-    const configLanguage = preferences?.language;
-    const storedLanguage = getStoredLanguage();
+    if (preferences?.language) return preferences.language;
+    if (urlParamConfig !== false) {
+      const urlLanguage = detectUrlParamLanguage(urlParamConfig);
+      if (urlLanguage) {
+        storage.write(urlLanguage);
+        return urlLanguage;
+      }
+    }
+    const storedLanguage = storage.read();
+    if (storedLanguage) return storedLanguage;
     const browserLanguage = detectBrowserLanguage();
-    const fallbackLanguage2 = preferences?.fallbackLanguage || "en-US";
-    return configLanguage || storedLanguage || browserLanguage || fallbackLanguage2;
+    if (browserLanguage) return browserLanguage;
+    return preferences?.fallbackLanguage || import_i18n2.TranslationBundleConstants.FALLBACK_LOCALE;
   };
   const [currentLanguage, setCurrentLanguage] = (0, import_react10.useState)(determineInitialLanguage);
   const [injectedBundles, setInjectedBundles] = (0, import_react10.useState)({});
@@ -1371,13 +1481,16 @@ var I18nProvider = ({
       setInjectedBundles((prev) => {
         const merged = { ...prev };
         Object.entries(newBundles).forEach(([key, bundle]) => {
+          const normalizedTranslations = (0, import_i18n2.normalizeTranslations)(
+            bundle.translations
+          );
           if (merged[key]) {
             merged[key] = {
               ...merged[key],
-              translations: (0, import_browser11.deepMerge)(merged[key].translations, bundle.translations)
+              translations: (0, import_browser11.deepMerge)(merged[key].translations, normalizedTranslations)
             };
           } else {
-            merged[key] = bundle;
+            merged[key] = { ...bundle, translations: normalizedTranslations };
           }
         });
         return merged;
@@ -1392,34 +1505,40 @@ var I18nProvider = ({
       merged[languageKey] = bundle;
     });
     Object.entries(injectedBundles).forEach(([key, bundle]) => {
+      const normalizedTranslations = (0, import_i18n2.normalizeTranslations)(
+        bundle.translations
+      );
       if (merged[key]) {
         merged[key] = {
           ...merged[key],
-          translations: (0, import_browser11.deepMerge)(merged[key].translations, bundle.translations)
+          translations: (0, import_browser11.deepMerge)(merged[key].translations, normalizedTranslations)
         };
       } else {
-        merged[key] = bundle;
+        merged[key] = { ...bundle, translations: normalizedTranslations };
       }
     });
     if (preferences?.bundles) {
       Object.entries(preferences.bundles).forEach(([key, userBundle]) => {
+        const normalizedTranslations = (0, import_i18n2.normalizeTranslations)(
+          userBundle.translations
+        );
         if (merged[key]) {
           merged[key] = {
             ...merged[key],
             metadata: userBundle.metadata ? { ...merged[key].metadata, ...userBundle.metadata } : merged[key].metadata,
-            translations: (0, import_browser11.deepMerge)(merged[key].translations, userBundle.translations)
+            translations: (0, import_browser11.deepMerge)(merged[key].translations, normalizedTranslations)
           };
         } else {
-          merged[key] = userBundle;
+          merged[key] = { ...userBundle, translations: normalizedTranslations };
         }
       });
     }
     return merged;
   }, [defaultBundles, injectedBundles, preferences?.bundles]);
-  const fallbackLanguage = preferences?.fallbackLanguage || "en-US";
+  const fallbackLanguage = preferences?.fallbackLanguage || import_i18n2.TranslationBundleConstants.FALLBACK_LOCALE;
   (0, import_react10.useEffect)(() => {
-    storeLanguage(currentLanguage);
-  }, [currentLanguage]);
+    storage.write(currentLanguage);
+  }, [currentLanguage, storage]);
   const t = (0, import_react10.useCallback)(
     (key, params) => {
       let translation;
@@ -2485,49 +2604,63 @@ var useTheme_default = useTheme;
 
 // src/hooks/useTranslation.ts
 var import_browser17 = require("@asgardeo/browser");
+var import_i18n3 = require("@asgardeo/i18n");
+var import_react26 = require("react");
+
+// src/contexts/I18n/ComponentPreferencesContext.ts
 var import_react25 = require("react");
+var ComponentPreferencesContext = (0, import_react25.createContext)(void 0);
+var ComponentPreferencesContext_default = ComponentPreferencesContext;
+
+// src/hooks/useTranslation.ts
 var useTranslation = (componentPreferences) => {
-  const context = (0, import_react25.useContext)(I18nContext_default);
+  const context = (0, import_react26.useContext)(I18nContext_default);
+  const componentPrefs = (0, import_react26.useContext)(ComponentPreferencesContext_default);
+  const contextPreferences = componentPrefs?.i18n;
   if (!context) {
     throw new Error(
       "useTranslation must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider."
     );
   }
+  const effectivePreferences = componentPreferences ?? contextPreferences;
   const { t: globalT, currentLanguage, setLanguage, bundles: globalBundles, fallbackLanguage } = context;
-  const mergedBundles = (0, import_react25.useMemo)(() => {
-    if (!componentPreferences?.bundles) {
+  const mergedBundles = (0, import_react26.useMemo)(() => {
+    if (!effectivePreferences?.bundles) {
       return globalBundles;
     }
     const merged = {};
     Object.entries(globalBundles).forEach(([key, bundle]) => {
       merged[key] = bundle;
     });
-    Object.entries(componentPreferences.bundles).forEach(([key, componentBundle]) => {
+    Object.entries(effectivePreferences.bundles).forEach(([key, componentBundle]) => {
+      const normalizedTranslations = (0, import_i18n3.normalizeTranslations)(
+        componentBundle.translations
+      );
       if (merged[key]) {
         merged[key] = {
           ...merged[key],
           metadata: componentBundle.metadata ? { ...merged[key].metadata, ...componentBundle.metadata } : merged[key].metadata,
-          translations: (0, import_browser17.deepMerge)(merged[key].translations, componentBundle.translations)
+          translations: (0, import_browser17.deepMerge)(merged[key].translations, normalizedTranslations)
         };
       } else {
-        merged[key] = componentBundle;
+        merged[key] = { ...componentBundle, translations: normalizedTranslations };
       }
     });
     return merged;
-  }, [globalBundles, componentPreferences?.bundles]);
-  const enhancedT = (0, import_react25.useMemo)(() => {
-    if (!componentPreferences?.bundles) {
+  }, [globalBundles, effectivePreferences?.bundles]);
+  const enhancedT = (0, import_react26.useMemo)(() => {
+    if (!effectivePreferences?.bundles) {
       return globalT;
     }
     return (key, params) => {
       let translation;
       const currentBundle = mergedBundles[currentLanguage];
-      if (currentBundle?.translations[key]) {
+      if (currentBundle?.translations?.[key]) {
         translation = currentBundle.translations[key];
       }
       if (!translation && currentLanguage !== fallbackLanguage) {
         const fallbackBundle = mergedBundles[fallbackLanguage];
-        if (fallbackBundle?.translations[key]) {
+        if (fallbackBundle?.translations?.[key]) {
           translation = fallbackBundle.translations[key];
         }
       }
@@ -2542,7 +2675,7 @@ var useTranslation = (componentPreferences) => {
       }
       return translation;
     };
-  }, [mergedBundles, currentLanguage, fallbackLanguage, globalT, componentPreferences?.bundles]);
+  }, [mergedBundles, currentLanguage, fallbackLanguage, globalT, effectivePreferences?.bundles]);
   return {
     availableLanguages: Object.keys(mergedBundles),
     currentLanguage,
@@ -2553,7 +2686,7 @@ var useTranslation = (componentPreferences) => {
 var useTranslation_default = useTranslation;
 
 // src/hooks/useForm.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 var useForm = (config = {}) => {
   const {
     initialValues = {},
@@ -2563,15 +2696,15 @@ var useForm = (config = {}) => {
     validateOnBlur = true,
     requiredMessage = "This field is required"
   } = config;
-  const [values, setFormValues] = (0, import_react26.useState)({ ...initialValues });
-  const [touched, setFormTouched] = (0, import_react26.useState)({});
-  const [errors, setFormErrors] = (0, import_react26.useState)({});
-  const [isSubmitted, setIsSubmitted] = (0, import_react26.useState)(false);
-  const getFieldConfig = (0, import_react26.useCallback)(
+  const [values, setFormValues] = (0, import_react27.useState)({ ...initialValues });
+  const [touched, setFormTouched] = (0, import_react27.useState)({});
+  const [errors, setFormErrors] = (0, import_react27.useState)({});
+  const [isSubmitted, setIsSubmitted] = (0, import_react27.useState)(false);
+  const getFieldConfig = (0, import_react27.useCallback)(
     (name) => fields.find((field) => field.name === name),
     [fields]
   );
-  const validateField = (0, import_react26.useCallback)(
+  const validateField = (0, import_react27.useCallback)(
     (name) => {
       const value = values[name] || "";
       const fieldConfig = getFieldConfig(name);
@@ -2586,7 +2719,7 @@ var useForm = (config = {}) => {
     },
     [values, getFieldConfig, requiredMessage]
   );
-  const validateForm = (0, import_react26.useCallback)(() => {
+  const validateForm = (0, import_react27.useCallback)(() => {
     const newErrors = {};
     fields.forEach((field) => {
       const error = validateField(field.name);
@@ -2608,7 +2741,7 @@ var useForm = (config = {}) => {
     };
   }, [fields, validateField, validator, values]);
   const isValid = Object.keys(errors).length === 0;
-  const setValue = (0, import_react26.useCallback)(
+  const setValue = (0, import_react27.useCallback)(
     (name, value) => {
       setFormValues((prev) => ({
         ...prev,
@@ -2629,13 +2762,13 @@ var useForm = (config = {}) => {
     },
     [validateField, validateOnChange]
   );
-  const setValues = (0, import_react26.useCallback)((newValues) => {
+  const setValues = (0, import_react27.useCallback)((newValues) => {
     setFormValues((prev) => ({
       ...prev,
       ...newValues
     }));
   }, []);
-  const setTouched = (0, import_react26.useCallback)(
+  const setTouched = (0, import_react27.useCallback)(
     (name, isTouched = true) => {
       setFormTouched((prev) => ({
         ...prev,
@@ -2656,7 +2789,7 @@ var useForm = (config = {}) => {
     },
     [validateField, validateOnBlur]
   );
-  const setTouchedFields = (0, import_react26.useCallback)(
+  const setTouchedFields = (0, import_react27.useCallback)(
     (touchedFields) => {
       setFormTouched((prev) => ({
         ...prev,
@@ -2665,7 +2798,7 @@ var useForm = (config = {}) => {
     },
     []
   );
-  const touchAllFields = (0, import_react26.useCallback)(() => {
+  const touchAllFields = (0, import_react27.useCallback)(() => {
     const allTouched = fields.reduce((acc, field) => {
       acc[field.name] = true;
       return acc;
@@ -2674,13 +2807,13 @@ var useForm = (config = {}) => {
     const validation = validateForm();
     setFormErrors(validation.errors);
   }, [fields, validateForm]);
-  const setError = (0, import_react26.useCallback)((name, error) => {
+  const setError = (0, import_react27.useCallback)((name, error) => {
     setFormErrors((prev) => ({
       ...prev,
       [name]: error
     }));
   }, []);
-  const setErrors = (0, import_react26.useCallback)(
+  const setErrors = (0, import_react27.useCallback)(
     (newErrors) => {
       setFormErrors((prev) => ({
         ...prev,
@@ -2689,16 +2822,16 @@ var useForm = (config = {}) => {
     },
     []
   );
-  const clearErrors = (0, import_react26.useCallback)(() => {
+  const clearErrors = (0, import_react27.useCallback)(() => {
     setFormErrors({});
   }, []);
-  const reset = (0, import_react26.useCallback)(() => {
+  const reset = (0, import_react27.useCallback)(() => {
     setFormValues({ ...initialValues });
     setFormTouched({});
     setFormErrors({});
     setIsSubmitted(false);
   }, [initialValues]);
-  const handleSubmit = (0, import_react26.useCallback)(
+  const handleSubmit = (0, import_react27.useCallback)(
     (onSubmit) => async (e) => {
       if (e) {
         e.preventDefault();
@@ -2712,7 +2845,7 @@ var useForm = (config = {}) => {
     },
     [values, touchAllFields, validateForm]
   );
-  const getFieldProps = (0, import_react26.useCallback)(
+  const getFieldProps = (0, import_react27.useCallback)(
     (name) => {
       const fieldConfig = getFieldConfig(name);
       return {
@@ -2781,17 +2914,17 @@ var useBranding_default = useBranding;
 // src/components/actions/SignInButton/BaseSignInButton.tsx
 var import_browser21 = require("@asgardeo/browser");
 var import_css5 = require("@emotion/css");
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/primitives/Button/Button.tsx
 var import_browser20 = require("@asgardeo/browser");
 var import_css4 = require("@emotion/css");
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/primitives/Button/Button.styles.ts
 var import_css = require("@emotion/css");
-var import_react27 = require("react");
-var useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled, loading, shape = "square") => (0, import_react27.useMemo)(() => {
+var import_react28 = require("react");
+var useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled, loading, shape = "square") => (0, import_react28.useMemo)(() => {
   const iconSizeMap = {
     large: `calc(${theme.vars.spacing.unit} * 5)`,
     medium: `calc(${theme.vars.spacing.unit} * 4)`,
@@ -3114,8 +3247,8 @@ var import_css3 = require("@emotion/css");
 
 // src/components/primitives/Spinner/Spinner.styles.ts
 var import_css2 = require("@emotion/css");
-var import_react28 = require("react");
-var useStyles2 = (theme, colorScheme, size, color) => (0, import_react28.useMemo)(() => {
+var import_react29 = require("react");
+var useStyles2 = (theme, colorScheme, size, color) => (0, import_react29.useMemo)(() => {
   const spinnerColor = color || theme.vars.colors.primary.main;
   const spinnerSizes = {
     large: "32px",
@@ -3189,7 +3322,7 @@ var getSpinnerWidth = (sizeVal, spacingUnit) => {
   }
   return `calc(${spacingUnit} * 2.5)`;
 };
-var Button = (0, import_react29.forwardRef)(
+var Button = (0, import_react30.forwardRef)(
   ({
     color = "primary",
     variant = "solid",
@@ -3269,7 +3402,7 @@ var Button_default = Button;
 
 // src/components/actions/SignInButton/BaseSignInButton.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var BaseSignInButton = (0, import_react30.forwardRef)(
+var BaseSignInButton = (0, import_react31.forwardRef)(
   ({ children, className, style, signIn, isLoading, meta, preferences, ...rest }, ref) => {
     if (typeof children === "function") {
       return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: children({ isLoading, meta, signIn }) });
@@ -3294,13 +3427,13 @@ var BaseSignInButton_default = BaseSignInButton;
 
 // src/components/actions/SignInButton/SignInButton.tsx
 var import_browser22 = require("@asgardeo/browser");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var SignInButton = (0, import_react31.forwardRef)(
+var SignInButton = (0, import_react32.forwardRef)(
   ({ children, onClick, preferences, signInOptions: overriddenSignInOptions = {}, ...rest }, ref) => {
     const { signIn, signInUrl, signInOptions, meta } = useAsgardeo_default();
     const { t } = useTranslation_default(preferences?.i18n);
-    const [isLoading, setIsLoading] = (0, import_react31.useState)(false);
+    const [isLoading, setIsLoading] = (0, import_react32.useState)(false);
     const handleSignIn = async (e) => {
       try {
         setIsLoading(true);
@@ -3344,9 +3477,9 @@ var SignInButton_default = SignInButton;
 // src/components/actions/SignOutButton/BaseSignOutButton.tsx
 var import_browser23 = require("@asgardeo/browser");
 var import_css6 = require("@emotion/css");
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var BaseSignOutButton = (0, import_react32.forwardRef)(
+var BaseSignOutButton = (0, import_react33.forwardRef)(
   ({ children, className, style, signOut, isLoading, meta, preferences, ...rest }, ref) => {
     if (typeof children === "function") {
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: children({ isLoading, meta, signOut }) });
@@ -3371,12 +3504,12 @@ var BaseSignOutButton_default = BaseSignOutButton;
 
 // src/components/actions/SignOutButton/SignOutButton.tsx
 var import_browser24 = require("@asgardeo/browser");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var SignOutButton = (0, import_react33.forwardRef)(({ children, onClick, preferences, ...rest }, ref) => {
+var SignOutButton = (0, import_react34.forwardRef)(({ children, onClick, preferences, ...rest }, ref) => {
   const { signOut, meta } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
-  const [isLoading, setIsLoading] = (0, import_react33.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react34.useState)(false);
   const handleSignOut = async (e) => {
     try {
       setIsLoading(true);
@@ -3415,9 +3548,9 @@ var SignOutButton_default = SignOutButton;
 // src/components/actions/SignUpButton/BaseSignUpButton.tsx
 var import_browser25 = require("@asgardeo/browser");
 var import_css7 = require("@emotion/css");
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var BaseSignUpButton = (0, import_react34.forwardRef)(
+var BaseSignUpButton = (0, import_react35.forwardRef)(
   ({ children, className, style, signUp, isLoading, meta, preferences, ...rest }, ref) => {
     if (typeof children === "function") {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: children({ isLoading, meta, signUp }) });
@@ -3444,12 +3577,12 @@ var BaseSignUpButton_default = BaseSignUpButton;
 
 // src/components/actions/SignUpButton/SignUpButton.tsx
 var import_browser26 = require("@asgardeo/browser");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var SignUpButton = (0, import_react35.forwardRef)(({ children, onClick, preferences, ...rest }, ref) => {
+var SignUpButton = (0, import_react36.forwardRef)(({ children, onClick, preferences, ...rest }, ref) => {
   const { signUp, signUpUrl, meta } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
-  const [isLoading, setIsLoading] = (0, import_react35.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react36.useState)(false);
   const handleSignUp = async (e) => {
     try {
       setIsLoading(true);
@@ -3537,14 +3670,14 @@ var import_browser52 = require("@asgardeo/browser");
 // src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
 var import_browser48 = require("@asgardeo/browser");
 var import_css35 = require("@emotion/css");
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.tsx
 var import_browser43 = require("@asgardeo/browser");
 
 // src/components/presentation/auth/SignIn/v1/options/EmailOtp.tsx
 var import_browser37 = require("@asgardeo/browser");
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/factories/FieldFactory.tsx
 var import_browser36 = require("@asgardeo/browser");
@@ -3555,8 +3688,8 @@ var import_css15 = require("@emotion/css");
 
 // src/components/primitives/Checkbox/Checkbox.styles.ts
 var import_css8 = require("@emotion/css");
-var import_react36 = require("react");
-var useStyles3 = (theme, colorScheme, hasError, required) => (0, import_react36.useMemo)(() => {
+var import_react37 = require("react");
+var useStyles3 = (theme, colorScheme, hasError, required) => (0, import_react37.useMemo)(() => {
   const containerStyles = import_css8.css`
       display: flex;
       align-items: center;
@@ -3618,8 +3751,8 @@ var import_css12 = require("@emotion/css");
 
 // src/components/primitives/FormControl/FormControl.styles.ts
 var import_css9 = require("@emotion/css");
-var import_react37 = require("react");
-var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => (0, import_react37.useMemo)(() => {
+var import_react38 = require("react");
+var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => (0, import_react38.useMemo)(() => {
   const formControl = import_css9.css`
       text-align: start;
       font-family: ${theme.vars.typography.fontFamily};
@@ -3647,8 +3780,8 @@ var import_css11 = require("@emotion/css");
 
 // src/components/primitives/Typography/Typography.styles.ts
 var import_css10 = require("@emotion/css");
-var import_react38 = require("react");
-var useStyles5 = (theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight) => (0, import_react38.useMemo)(() => {
+var import_react39 = require("react");
+var useStyles5 = (theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight) => (0, import_react39.useMemo)(() => {
   const getColorValue = (colorVariant) => {
     switch (colorVariant) {
       case "primary":
@@ -4039,8 +4172,8 @@ var import_css14 = require("@emotion/css");
 
 // src/components/primitives/InputLabel/InputLabel.styles.ts
 var import_css13 = require("@emotion/css");
-var import_react39 = require("react");
-var useStyles6 = (theme, colorScheme, variant, error, marginBottom) => (0, import_react39.useMemo)(() => {
+var import_react40 = require("react");
+var useStyles6 = (theme, colorScheme, variant, error, marginBottom) => (0, import_react40.useMemo)(() => {
   const baseLabel = import_css13.css`
       display: ${variant};
       margin-bottom: ${marginBottom || (variant === "block" ? `calc(${theme.vars.spacing.unit} + 1px)` : "0")};
@@ -4172,8 +4305,8 @@ var import_css17 = require("@emotion/css");
 
 // src/components/primitives/DatePicker/DatePicker.styles.ts
 var import_css16 = require("@emotion/css");
-var import_react40 = require("react");
-var useStyles7 = (theme, colorScheme, hasError, disabled) => (0, import_react40.useMemo)(() => {
+var import_react41 = require("react");
+var useStyles7 = (theme, colorScheme, hasError, disabled) => (0, import_react41.useMemo)(() => {
   const inputStyles = import_css16.css`
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
@@ -4299,12 +4432,12 @@ var DatePicker_default = DatePicker;
 // src/components/primitives/OtpField/OtpField.tsx
 var import_browser32 = require("@asgardeo/browser");
 var import_css19 = require("@emotion/css");
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/primitives/OtpField/OtpField.styles.ts
 var import_css18 = require("@emotion/css");
-var import_react41 = require("react");
-var useStyles8 = (theme, colorScheme, disabled, hasError, length) => (0, import_react41.useMemo)(() => {
+var import_react42 = require("react");
+var useStyles8 = (theme, colorScheme, disabled, hasError, length) => (0, import_react42.useMemo)(() => {
   const inputContainer = import_css18.css`
       display: flex;
       gap: ${theme.vars.spacing.unit};
@@ -4384,12 +4517,12 @@ var OtpField = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = OtpField_styles_default(theme, colorScheme, !!disabled, !!error, length);
-  const [otp, setOtp] = (0, import_react42.useState)(Array(length).fill(""));
-  const inputRefs = (0, import_react42.useRef)([]);
-  (0, import_react42.useEffect)(() => {
+  const [otp, setOtp] = (0, import_react43.useState)(Array(length).fill(""));
+  const inputRefs = (0, import_react43.useRef)([]);
+  (0, import_react43.useEffect)(() => {
     inputRefs.current = inputRefs.current.slice(0, length);
   }, [length]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (value) {
       const newOtp = value.split("").slice(0, length);
       while (newOtp.length < length) {
@@ -4400,7 +4533,7 @@ var OtpField = ({
       setOtp(Array(length).fill(""));
     }
   }, [value, length]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (autoFocus && inputRefs.current[0]) {
       inputRefs.current[0].focus();
     }
@@ -4516,12 +4649,12 @@ var OtpField_default = OtpField;
 // src/components/primitives/PasswordField/PasswordField.tsx
 var import_browser34 = require("@asgardeo/browser");
 var import_css23 = require("@emotion/css");
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/primitives/PasswordField/PasswordField.styles.ts
 var import_css20 = require("@emotion/css");
-var import_react43 = require("react");
-var useStyles9 = (theme, colorScheme, showPassword, disabled, hasError) => (0, import_react43.useMemo)(() => {
+var import_react44 = require("react");
+var useStyles9 = (theme, colorScheme, showPassword, disabled, hasError) => (0, import_react44.useMemo)(() => {
   const toggleIcon = import_css20.css`
       cursor: ${disabled ? "not-allowed" : "pointer"};
       color: ${theme.vars.colors.text.secondary};
@@ -4600,8 +4733,8 @@ var import_css22 = require("@emotion/css");
 
 // src/components/primitives/TextField/TextField.styles.ts
 var import_css21 = require("@emotion/css");
-var import_react44 = require("react");
-var useStyles10 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => (0, import_react44.useMemo)(() => {
+var import_react45 = require("react");
+var useStyles10 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => (0, import_react45.useMemo)(() => {
   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_css21.css`
@@ -4797,7 +4930,7 @@ var PasswordField = ({
   ...textFieldProps
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const [showPassword, setShowPassword] = (0, import_react45.useState)(false);
+  const [showPassword, setShowPassword] = (0, import_react46.useState)(false);
   const styles = PasswordField_styles_default(theme, colorScheme, showPassword, !!disabled, !!error);
   const togglePasswordVisibility = () => {
     if (!disabled) {
@@ -4839,8 +4972,8 @@ var import_css25 = require("@emotion/css");
 
 // src/components/primitives/Select/Select.styles.ts
 var import_css24 = require("@emotion/css");
-var import_react46 = require("react");
-var useStyles11 = (theme, colorScheme, disabled, hasError) => (0, import_react46.useMemo)(() => {
+var import_react47 = require("react");
+var useStyles11 = (theme, colorScheme, disabled, hasError) => (0, import_react47.useMemo)(() => {
   const dropdownArrowColor = theme.colors.text.secondary.replace("#", "");
   const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;
   const select = import_css24.css`
@@ -5120,7 +5253,7 @@ var EmailOtp = ({
   const { t } = useTranslation_default(preferences?.i18n);
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setTitle(t("email.otp.heading"));
     setSubtitle(t("email.otp.subheading"));
   }, [setTitle, setSubtitle, t]);
@@ -5171,7 +5304,7 @@ var EmailOtp_default = EmailOtp;
 
 // src/components/presentation/auth/SignIn/v1/options/IdentifierFirst.tsx
 var import_browser38 = require("@asgardeo/browser");
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var IdentifierFirst = ({
   authenticator,
@@ -5187,7 +5320,7 @@ var IdentifierFirst = ({
   const { t } = useTranslation_default(preferences?.i18n);
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     setTitle(t("identifier.first.heading"));
     setSubtitle(t("identifier.first.subheading"));
   }, [setTitle, setSubtitle, t]);
@@ -5323,7 +5456,7 @@ var MultiOptionButton_default = MultiOptionButton;
 
 // src/components/presentation/auth/SignIn/v1/options/SmsOtp.tsx
 var import_browser40 = require("@asgardeo/browser");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var SmsOtp = ({
   authenticator,
@@ -5339,7 +5472,7 @@ var SmsOtp = ({
   const { t } = useTranslation_default(preferences?.i18n);
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     setTitle(t("sms.otp.heading"));
     setSubtitle(t("sms.otp.subheading"));
   }, [setTitle, setSubtitle, t]);
@@ -5421,7 +5554,7 @@ var SocialButton_default = SocialLogin;
 
 // src/components/presentation/auth/SignIn/v1/options/Totp.tsx
 var import_browser41 = require("@asgardeo/browser");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var Totp = ({
   authenticator,
@@ -5437,7 +5570,7 @@ var Totp = ({
   const { t } = useTranslation_default(preferences?.i18n);
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     setTitle(t("totp.heading"));
     setSubtitle(t("totp.subheading"));
   }, [setTitle, setSubtitle, t]);
@@ -5488,7 +5621,7 @@ var Totp_default = Totp;
 
 // src/components/presentation/auth/SignIn/v1/options/UsernamePassword.tsx
 var import_browser42 = require("@asgardeo/browser");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var UsernamePassword = ({
   authenticator,
@@ -5504,7 +5637,7 @@ var UsernamePassword = ({
   const { t } = useTranslation_default(preferences?.i18n);
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter((param) => param.param !== "totp") || [];
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     setTitle(t("username.password.heading"));
     setSubtitle(t("username.password.subheading"));
   }, [setTitle, setSubtitle, t]);
@@ -5878,12 +6011,12 @@ var createSignInOptionFromAuthenticator = (authenticator, formValues, touchedFie
 // src/components/primitives/Alert/Alert.tsx
 var import_browser44 = require("@asgardeo/browser");
 var import_css27 = require("@emotion/css");
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/primitives/Alert/Alert.styles.ts
 var import_css26 = require("@emotion/css");
-var import_react52 = require("react");
-var useStyles12 = (theme, colorScheme, variant) => (0, import_react52.useMemo)(() => {
+var import_react53 = require("react");
+var useStyles12 = (theme, colorScheme, variant) => (0, import_react53.useMemo)(() => {
   const baseAlert = import_css26.css`
       padding: calc(${theme.vars.spacing.unit} * 2);
       border-radius: ${theme.vars.borderRadius.medium};
@@ -6063,9 +6196,9 @@ var getDefaultIcon = (variant) => {
       return Info_default;
   }
 };
-var AlertVariantContext = (0, import_react53.createContext)("info");
-var useAlertVariant = () => (0, import_react53.useContext)(AlertVariantContext);
-var Alert = (0, import_react53.forwardRef)(({ variant = "info", showIcon = true, children, className, style, ...rest }, ref) => {
+var AlertVariantContext = (0, import_react54.createContext)("info");
+var useAlertVariant = () => (0, import_react54.useContext)(AlertVariantContext);
+var Alert = (0, import_react54.forwardRef)(({ variant = "info", showIcon = true, children, className, style, ...rest }, ref) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = Alert_styles_default(theme, colorScheme, variant);
   const IconComponent = getDefaultIcon(variant);
@@ -6135,12 +6268,12 @@ var Alert_default = Alert;
 // src/components/primitives/Card/Card.tsx
 var import_browser45 = require("@asgardeo/browser");
 var import_css29 = require("@emotion/css");
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/primitives/Card/Card.styles.ts
 var import_css28 = require("@emotion/css");
-var import_react54 = require("react");
-var useStyles13 = (theme, colorScheme, variant, clickable) => (0, import_react54.useMemo)(() => {
+var import_react55 = require("react");
+var useStyles13 = (theme, colorScheme, variant, clickable) => (0, import_react55.useMemo)(() => {
   const baseCard = import_css28.css`
       border-radius: ${theme.vars.borderRadius.medium};
       background-color: ${theme.vars.colors.background.surface};
@@ -6219,7 +6352,7 @@ var Card_styles_default = useStyles13;
 
 // src/components/primitives/Card/Card.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var Card = (0, import_react55.forwardRef)(
+var Card = (0, import_react56.forwardRef)(
   ({ variant = "default", clickable = false, children, className, style, ...rest }, ref) => {
     const { theme, colorScheme } = useTheme_default();
     const styles = Card_styles_default(theme, colorScheme, variant, clickable);
@@ -6245,7 +6378,7 @@ var Card = (0, import_react55.forwardRef)(
     );
   }
 );
-var CardHeader = (0, import_react55.forwardRef)(({ children, className, style, ...rest }, ref) => {
+var CardHeader = (0, import_react56.forwardRef)(({ children, className, style, ...rest }, ref) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = Card_styles_default(theme, colorScheme, "default", false);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -6329,7 +6462,7 @@ var CardDescription = ({ children, className, style, ...rest }) => {
     }
   );
 };
-var CardAction = (0, import_react55.forwardRef)(({ children, className, style, ...rest }, ref) => {
+var CardAction = (0, import_react56.forwardRef)(({ children, className, style, ...rest }, ref) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = Card_styles_default(theme, colorScheme, "default", false);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -6343,7 +6476,7 @@ var CardAction = (0, import_react55.forwardRef)(({ children, className, style, .
     }
   );
 });
-var CardContent = (0, import_react55.forwardRef)(({ children, className, style, ...rest }, ref) => {
+var CardContent = (0, import_react56.forwardRef)(({ children, className, style, ...rest }, ref) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = Card_styles_default(theme, colorScheme, "default", false);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -6357,7 +6490,7 @@ var CardContent = (0, import_react55.forwardRef)(({ children, className, style,
     }
   );
 });
-var CardFooter = (0, import_react55.forwardRef)(({ children, className, style, ...rest }, ref) => {
+var CardFooter = (0, import_react56.forwardRef)(({ children, className, style, ...rest }, ref) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = Card_styles_default(theme, colorScheme, "default", false);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -6392,8 +6525,8 @@ var import_css31 = require("@emotion/css");
 
 // src/components/primitives/Divider/Divider.styles.ts
 var import_css30 = require("@emotion/css");
-var import_react56 = require("react");
-var useStyles14 = (theme, colorScheme, orientation, variant, color, hasChildren) => (0, import_react56.useMemo)(() => {
+var import_react57 = require("react");
+var useStyles14 = (theme, colorScheme, orientation, variant, color, hasChildren) => (0, import_react57.useMemo)(() => {
   const baseColor = color || theme.colors.border;
   let borderStyle;
   if (variant === "solid") {
@@ -6534,8 +6667,8 @@ var import_css33 = require("@emotion/css");
 
 // src/components/primitives/Logo/Logo.styles.ts
 var import_css32 = require("@emotion/css");
-var import_react57 = require("react");
-var useStyles15 = (theme, colorScheme, size) => (0, import_react57.useMemo)(() => {
+var import_react58 = require("react");
+var useStyles15 = (theme, colorScheme, size) => (0, import_react58.useMemo)(() => {
   const baseLogo = import_css32.css`
       width: auto;
       object-fit: contain;
@@ -6600,8 +6733,8 @@ var Logo_default = Logo;
 
 // src/components/presentation/auth/SignIn/BaseSignIn.styles.ts
 var import_css34 = require("@emotion/css");
-var import_react58 = require("react");
-var useStyles16 = (theme, colorScheme) => (0, import_react58.useMemo)(() => {
+var import_react59 = require("react");
+var useStyles16 = (theme, colorScheme) => (0, import_react59.useMemo)(() => {
   const signIn = import_css34.css`
       min-width: 420px;
       margin: 0 auto;
@@ -6770,14 +6903,14 @@ var BaseSignInContent = ({
   const { t } = useTranslation_default();
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages } = useFlow_default();
   const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
-  const [isSignInInitializationRequestLoading, setIsSignInInitializationRequestLoading] = (0, import_react59.useState)(false);
-  const [isInitialized, setIsInitialized] = (0, import_react59.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react59.useState)(null);
-  const [currentAuthenticator, setCurrentAuthenticator] = (0, import_react59.useState)(null);
-  const [error, setError] = (0, import_react59.useState)(null);
-  const [messages, setMessages] = (0, import_react59.useState)([]);
+  const [isSignInInitializationRequestLoading, setIsSignInInitializationRequestLoading] = (0, import_react60.useState)(false);
+  const [isInitialized, setIsInitialized] = (0, import_react60.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react60.useState)(null);
+  const [currentAuthenticator, setCurrentAuthenticator] = (0, import_react60.useState)(null);
+  const [error, setError] = (0, import_react60.useState)(null);
+  const [messages, setMessages] = (0, import_react60.useState)([]);
   const isLoading = externalIsLoading || isSignInInitializationRequestLoading;
-  const reRenderCheckRef = (0, import_react59.useRef)(false);
+  const reRenderCheckRef = (0, import_react60.useRef)(false);
   const formFields = currentAuthenticator?.metadata?.params?.map((param) => ({
     initialValue: "",
     name: param.param,
@@ -6805,7 +6938,7 @@ var BaseSignInContent = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react59.useCallback)(
+  const setupFormFields = (0, import_react60.useCallback)(
     (authenticator) => {
       const initialValues = {};
       authenticator.metadata?.params?.forEach((param) => {
@@ -7207,11 +7340,11 @@ var BaseSignInContent = ({
     setFormValue(param, value);
     setFormTouched(param, true);
   };
-  const hasMultipleOptions = (0, import_react59.useCallback)(
+  const hasMultipleOptions = (0, import_react60.useCallback)(
     () => currentFlow && "nextStep" in currentFlow && currentFlow.nextStep?.stepType === import_browser48.EmbeddedSignInFlowStepType.MultiOptionsPrompt && currentFlow.nextStep?.authenticators && currentFlow.nextStep.authenticators.length > 1,
     [currentFlow]
   );
-  const getAvailableAuthenticators = (0, import_react59.useCallback)(() => {
+  const getAvailableAuthenticators = (0, import_react60.useCallback)(() => {
     if (!currentFlow || !("nextStep" in currentFlow) || !currentFlow.nextStep?.authenticators) {
       return [];
     }
@@ -7243,7 +7376,7 @@ var BaseSignInContent = ({
   );
   const errorClasses = (0, import_css35.cx)([(0, import_browser48.withVendorCSSClassPrefix)("signin__error")], errorClassName);
   const messageClasses = (0, import_css35.cx)([(0, import_browser48.withVendorCSSClassPrefix)("signin__messages")], messageClassName);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (isLoading) {
       return;
     }
@@ -7408,7 +7541,7 @@ var BaseSignInContent = ({
     );
   }
   if (isPasskeyAuthenticator(currentAuthenticator) && !isLoading) {
-    (0, import_react59.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       handleAuthenticatorSelection(currentAuthenticator);
     }, [currentAuthenticator]);
     return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default, { className: (0, import_css35.cx)(containerClasses, styles["card"]), "data-testid": "asgardeo-signin", variant, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: styles["centeredContainer"], children: [
@@ -7496,7 +7629,7 @@ var BaseSignIn_default = BaseSignIn;
 // src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx
 var import_browser51 = require("@asgardeo/browser");
 var import_css37 = require("@emotion/css");
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/utils/v2/resolveTranslationsInObject.ts
 var import_browser49 = require("@asgardeo/browser");
@@ -7678,7 +7811,7 @@ var getAuthComponentHeadings_default = getAuthComponentHeadings;
 var import_browser50 = require("@asgardeo/browser");
 var import_css36 = require("@emotion/css");
 var import_dompurify = __toESM(require("dompurify"), 1);
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/components/adapters/ImageComponent.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
@@ -7858,7 +7991,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
         type: fieldType,
         value
       });
-      return (0, import_react60.cloneElement)(field, { key });
+      return (0, import_react61.cloneElement)(field, { key });
     }
     case import_browser50.EmbeddedFlowComponentTypeV2.Action: {
       const actionId = component.id;
@@ -8137,10 +8270,10 @@ var BaseSignInContent2 = ({
   const { t } = useTranslation_default();
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
-  const [isSubmitting, setIsSubmitting] = (0, import_react61.useState)(false);
-  const [apiError, setApiError] = (0, import_react61.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react62.useState)(false);
+  const [apiError, setApiError] = (0, import_react62.useState)(null);
   const isLoading = externalIsLoading || isSubmitting;
-  const handleError = (0, import_react61.useCallback)(
+  const handleError = (0, import_react62.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t);
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -8152,7 +8285,7 @@ var BaseSignInContent2 = ({
     },
     [t, addMessage, clearMessages]
   );
-  const extractFormFields = (0, import_react61.useCallback)(
+  const extractFormFields = (0, import_react62.useCallback)(
     (flowComponents) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -8267,7 +8400,7 @@ var BaseSignInContent2 = ({
     buttonClassName
   );
   const messageClasses = (0, import_css37.cx)([(0, import_browser51.withVendorCSSClassPrefix)("signin__messages")], messageClassName);
-  const renderComponents = (0, import_react61.useCallback)(
+  const renderComponents = (0, import_react62.useCallback)(
     (flowComponents) => renderSignInComponents(
       flowComponents,
       formValues,
@@ -8358,13 +8491,15 @@ var BaseSignInContent2 = ({
     ] })
   ] });
 };
-var BaseSignIn2 = ({ showLogo = true, ...rest }) => {
+var BaseSignIn2 = ({ preferences, showLogo = true, ...rest }) => {
   const { theme } = useTheme_default();
   const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
     showLogo && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Logo_default, { size: "large" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(BaseSignInContent2, { showLogo, ...rest }) })
   ] });
+  if (!preferences) return content;
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ComponentPreferencesContext_default.Provider, { value: preferences, children: content });
 };
 var BaseSignIn_default2 = BaseSignIn2;
 
@@ -8384,10 +8519,10 @@ var import_browser56 = require("@asgardeo/browser");
 
 // src/components/presentation/auth/SignIn/v2/SignIn.tsx
 var import_browser55 = require("@asgardeo/browser");
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/hooks/v2/useOAuthCallback.ts
-var import_react62 = require("react");
+var import_react63 = require("react");
 function cleanupUrlParams() {
   if (typeof window === "undefined") return;
   const url = new URL(window.location.href);
@@ -8412,9 +8547,9 @@ function useOAuthCallback({
   setFlowId,
   tokenValidationAttemptedRef
 }) {
-  const internalRef = (0, import_react62.useRef)(false);
+  const internalRef = (0, import_react63.useRef)(false);
   const oauthCodeProcessedRef = processedRef ?? internalRef;
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!isInitialized || isSubmitting) {
       return;
     }
@@ -8663,6 +8798,7 @@ var handlePasskeyAuthentication = async (challengeData) => {
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var SignIn = ({
   className,
+  preferences,
   size = "medium",
   onSuccess,
   onError,
@@ -8670,13 +8806,13 @@ var SignIn = ({
   children
 }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading, meta } = useAsgardeo_default();
-  const { t } = useTranslation_default();
-  const [components, setComponents] = (0, import_react63.useState)([]);
-  const [currentFlowId, setCurrentFlowId] = (0, import_react63.useState)(null);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react63.useState)(false);
-  const [flowError, setFlowError] = (0, import_react63.useState)(null);
-  const [isSubmitting, setIsSubmitting] = (0, import_react63.useState)(false);
-  const [passkeyState, setPasskeyState] = (0, import_react63.useState)({
+  const { t } = useTranslation_default(preferences?.i18n);
+  const [components, setComponents] = (0, import_react64.useState)([]);
+  const [currentFlowId, setCurrentFlowId] = (0, import_react64.useState)(null);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react64.useState)(false);
+  const [flowError, setFlowError] = (0, import_react64.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react64.useState)(false);
+  const [passkeyState, setPasskeyState] = (0, import_react64.useState)({
     actionId: null,
     challenge: null,
     creationOptions: null,
@@ -8684,9 +8820,9 @@ var SignIn = ({
     flowId: null,
     isActive: false
   });
-  const initializationAttemptedRef = (0, import_react63.useRef)(false);
-  const oauthCodeProcessedRef = (0, import_react63.useRef)(false);
-  const passkeyProcessedRef = (0, import_react63.useRef)(false);
+  const initializationAttemptedRef = (0, import_react64.useRef)(false);
+  const oauthCodeProcessedRef = (0, import_react64.useRef)(false);
+  const passkeyProcessedRef = (0, import_react64.useRef)(false);
   const setFlowId = (flowId) => {
     setCurrentFlowId(flowId);
     if (flowId) {
@@ -8818,7 +8954,7 @@ var SignIn = ({
       initializationAttemptedRef.current = false;
     }
   };
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     const urlParams = getUrlParams2();
     if (urlParams.error) {
       handleOAuthError(urlParams.error, urlParams.errorDescription);
@@ -8935,7 +9071,7 @@ var SignIn = ({
     processedRef: oauthCodeProcessedRef,
     setFlowId
   });
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!passkeyState.isActive || !passkeyState.challenge && !passkeyState.creationOptions || !passkeyState.flowId) {
       return;
     }
@@ -9008,7 +9144,8 @@ var SignIn = ({
       error: flowError,
       className,
       size,
-      variant
+      variant,
+      preferences
     }
   );
 };
@@ -9016,7 +9153,7 @@ var SignIn_default = SignIn;
 
 // src/components/presentation/auth/SignIn/SignIn.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
+var SignIn2 = ({ className, size = "medium", children, preferences, ...rest }) => {
   const { signIn, afterSignInUrl, isInitialized, isLoading, platform } = useAsgardeo_default();
   const handleInitialize = async () => await signIn({ response_mode: "direct" });
   const handleOnSubmit = async (payload, request) => await signIn(payload, request);
@@ -9040,6 +9177,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
         variant: rest.variant,
         onSuccess: rest.onSuccess,
         onError: rest.onError,
+        preferences,
         children
       }
     );
@@ -9057,6 +9195,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       showLogo: true,
       showSubtitle: true,
       showTitle: true,
+      preferences,
       ...rest
     }
   );
@@ -9069,7 +9208,7 @@ var import_browser67 = require("@asgardeo/browser");
 // src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
 var import_browser65 = require("@asgardeo/browser");
 var import_css39 = require("@emotion/css");
-var import_react65 = require("react");
+var import_react66 = require("react");
 
 // src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
 var import_browser64 = require("@asgardeo/browser");
@@ -9585,8 +9724,8 @@ var renderSignUpComponents2 = (components, formValues, touchedFields, formErrors
 
 // src/components/presentation/auth/SignUp/BaseSignUp.styles.ts
 var import_css38 = require("@emotion/css");
-var import_react64 = require("react");
-var useStyles17 = (theme, colorScheme) => (0, import_react64.useMemo)(() => {
+var import_react65 = require("react");
+var useStyles17 = (theme, colorScheme) => (0, import_react65.useMemo)(() => {
   const signUp = import_css38.css`
       min-width: 420px;
       margin: 0 auto;
@@ -9751,7 +9890,7 @@ var BaseSignUpContent = ({
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   useAsgardeo_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const handleError = (0, import_react65.useCallback)(
+  const handleError = (0, import_react66.useCallback)(
     (error) => {
       let errorMessage = t("errors.signup.flow.failure");
       if (error && typeof error === "object") {
@@ -9784,11 +9923,11 @@ var BaseSignUpContent = ({
     },
     [t, addMessage, clearMessages]
   );
-  const [isLoading, setIsLoading] = (0, import_react65.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react65.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react65.useState)(null);
-  const initializationAttemptedRef = (0, import_react65.useRef)(false);
-  const extractFormFields = (0, import_react65.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react66.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react66.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react66.useState)(null);
+  const initializationAttemptedRef = (0, import_react66.useRef)(false);
+  const extractFormFields = (0, import_react66.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -9841,7 +9980,7 @@ var BaseSignUpContent = ({
     validateForm,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react65.useCallback)(
+  const setupFormFields = (0, import_react66.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -10043,7 +10182,7 @@ var BaseSignUpContent = ({
   );
   const errorClasses = (0, import_css39.cx)([(0, import_browser65.withVendorCSSClassPrefix)("signup__error")], errorClassName);
   const messageClasses = (0, import_css39.cx)([(0, import_browser65.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
-  const renderComponents = (0, import_react65.useCallback)(
+  const renderComponents = (0, import_react66.useCallback)(
     (components) => renderSignUpComponents2(
       components,
       formValues,
@@ -10073,7 +10212,7 @@ var BaseSignUpContent = ({
       handleSubmit
     ]
   );
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -10168,7 +10307,7 @@ var BaseSignUp_default = BaseSignUp;
 // src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx
 var import_browser66 = require("@asgardeo/browser");
 var import_css40 = require("@emotion/css");
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var logger7 = (0, import_browser66.createPackageComponentLogger)(
   "@asgardeo/react",
@@ -10199,20 +10338,20 @@ var BaseSignUpContent2 = ({
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const { meta } = useAsgardeo_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const [isLoading, setIsLoading] = (0, import_react66.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react66.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react66.useState)(null);
-  const [apiError, setApiError] = (0, import_react66.useState)(null);
-  const [passkeyState, setPasskeyState] = (0, import_react66.useState)({
+  const [isLoading, setIsLoading] = (0, import_react67.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react67.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react67.useState)(null);
+  const [apiError, setApiError] = (0, import_react67.useState)(null);
+  const [passkeyState, setPasskeyState] = (0, import_react67.useState)({
     actionId: null,
     creationOptions: null,
     error: null,
     flowId: null,
     isActive: false
   });
-  const initializationAttemptedRef = (0, import_react66.useRef)(false);
-  const passkeyProcessedRef = (0, import_react66.useRef)(false);
-  const handleError = (0, import_react66.useCallback)(
+  const initializationAttemptedRef = (0, import_react67.useRef)(false);
+  const passkeyProcessedRef = (0, import_react67.useRef)(false);
+  const handleError = (0, import_react67.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t);
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -10224,7 +10363,7 @@ var BaseSignUpContent2 = ({
     },
     [t, addMessage, clearMessages]
   );
-  const normalizeFlowResponseLocal = (0, import_react66.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react67.useCallback)(
     (response) => {
       if (response?.data?.components && Array.isArray(response.data.components)) {
         return response;
@@ -10251,7 +10390,7 @@ var BaseSignUpContent2 = ({
     },
     [t, children]
   );
-  const extractFormFields = (0, import_react66.useCallback)(
+  const extractFormFields = (0, import_react67.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -10302,7 +10441,7 @@ var BaseSignUpContent2 = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react66.useCallback)(
+  const setupFormFields = (0, import_react67.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -10504,7 +10643,7 @@ var BaseSignUpContent2 = ({
       setIsLoading(false);
     }
   };
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (!passkeyState.isActive || !passkeyState.creationOptions || !passkeyState.flowId) {
       return;
     }
@@ -10570,7 +10709,7 @@ var BaseSignUpContent2 = ({
   );
   const errorClasses = (0, import_css40.cx)([(0, import_browser66.withVendorCSSClassPrefix)("signup__error")], errorClassName);
   const messageClasses = (0, import_css40.cx)([(0, import_browser66.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
-  const renderComponents = (0, import_react66.useCallback)(
+  const renderComponents = (0, import_react67.useCallback)(
     (components) => renderSignUpComponents(
       components,
       formValues,
@@ -10610,7 +10749,7 @@ var BaseSignUpContent2 = ({
       state: urlParams.get("state")
     };
   };
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     const urlParams = getUrlParams2();
     if (urlParams.code || urlParams.state) {
       return;
@@ -10712,13 +10851,15 @@ var BaseSignUpContent2 = ({
     ] })
   ] });
 };
-var BaseSignUp2 = ({ showLogo = true, ...rest }) => {
+var BaseSignUp2 = ({ preferences, showLogo = true, ...rest }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
     showLogo && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Logo_default, { size: "large" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(BaseSignUpContent2, { showLogo, ...rest }) })
   ] });
+  if (!preferences) return content;
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ComponentPreferencesContext_default.Provider, { value: preferences, children: content });
 };
 var BaseSignUp_default2 = BaseSignUp2;
 
@@ -10866,12 +11007,12 @@ var import_browser72 = require("@asgardeo/browser");
 // src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx
 var import_browser71 = require("@asgardeo/browser");
 var import_css42 = require("@emotion/css");
-var import_react68 = require("react");
+var import_react69 = require("react");
 
 // src/components/presentation/auth/InviteUser/v2/BaseInviteUser.styles.ts
 var import_css41 = require("@emotion/css");
-var import_react67 = require("react");
-var useStyles18 = (theme, colorScheme) => (0, import_react67.useMemo)(() => {
+var import_react68 = require("react");
+var useStyles18 = (theme, colorScheme) => (0, import_react68.useMemo)(() => {
   const card = import_css41.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
@@ -10919,27 +11060,28 @@ var BaseInviteUser = ({
   className = "",
   children,
   isInitialized = true,
+  preferences,
   size = "medium",
   variant = "outlined",
   showTitle = true,
   showSubtitle = true
 }) => {
   const { meta } = useAsgardeo_default();
-  const { t } = useTranslation_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const { theme } = useTheme_default();
   const styles = BaseInviteUser_styles_default(theme, theme.vars.colors.text.primary);
-  const [isLoading, setIsLoading] = (0, import_react68.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react68.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react68.useState)(null);
-  const [apiError, setApiError] = (0, import_react68.useState)(null);
-  const [formValues, setFormValues] = (0, import_react68.useState)({});
-  const [formErrors, setFormErrors] = (0, import_react68.useState)({});
-  const [touchedFields, setTouchedFields] = (0, import_react68.useState)({});
-  const [inviteLink, setInviteLink] = (0, import_react68.useState)();
-  const [inviteLinkCopied, setInviteLinkCopied] = (0, import_react68.useState)(false);
-  const [isFormValid, setIsFormValid] = (0, import_react68.useState)(true);
-  const initializationAttemptedRef = (0, import_react68.useRef)(false);
-  const handleError = (0, import_react68.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react69.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react69.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react69.useState)(null);
+  const [apiError, setApiError] = (0, import_react69.useState)(null);
+  const [formValues, setFormValues] = (0, import_react69.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react69.useState)({});
+  const [touchedFields, setTouchedFields] = (0, import_react69.useState)({});
+  const [inviteLink, setInviteLink] = (0, import_react69.useState)();
+  const [inviteLinkCopied, setInviteLinkCopied] = (0, import_react69.useState)(false);
+  const [isFormValid, setIsFormValid] = (0, import_react69.useState)(true);
+  const initializationAttemptedRef = (0, import_react69.useRef)(false);
+  const handleError = (0, import_react69.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.inviteUser.errors.generic");
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -10947,7 +11089,7 @@ var BaseInviteUser = ({
     },
     [t, onError]
   );
-  const normalizeFlowResponseLocal = (0, import_react68.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react69.useCallback)(
     (response) => {
       if (!response?.data?.meta?.components) {
         return response;
@@ -10975,7 +11117,7 @@ var BaseInviteUser = ({
     },
     [t, children]
   );
-  const handleInputChange = (0, import_react68.useCallback)((name, value) => {
+  const handleInputChange = (0, import_react69.useCallback)((name, value) => {
     setFormValues((prev) => ({ ...prev, [name]: value }));
     setFormErrors((prev) => {
       const newErrors = { ...prev };
@@ -10983,10 +11125,10 @@ var BaseInviteUser = ({
       return newErrors;
     });
   }, []);
-  const handleInputBlur = (0, import_react68.useCallback)((name) => {
+  const handleInputBlur = (0, import_react69.useCallback)((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
   }, []);
-  const validateForm = (0, import_react68.useCallback)(
+  const validateForm = (0, import_react69.useCallback)(
     (components2) => {
       const errors = {};
       const validateComponents = (comps) => {
@@ -11010,7 +11152,7 @@ var BaseInviteUser = ({
     },
     [formValues]
   );
-  const handleSubmit = (0, import_react68.useCallback)(
+  const handleSubmit = (0, import_react69.useCallback)(
     async (component, data) => {
       if (!currentFlow) {
         return;
@@ -11073,7 +11215,7 @@ var BaseInviteUser = ({
       normalizeFlowResponseLocal
     ]
   );
-  const copyInviteLink = (0, import_react68.useCallback)(async () => {
+  const copyInviteLink = (0, import_react69.useCallback)(async () => {
     if (!inviteLink) return;
     try {
       await navigator.clipboard.writeText(inviteLink);
@@ -11090,7 +11232,7 @@ var BaseInviteUser = ({
       setTimeout(() => setInviteLinkCopied(false), 3e3);
     }
   }, [inviteLink]);
-  const resetFlow = (0, import_react68.useCallback)(() => {
+  const resetFlow = (0, import_react69.useCallback)(() => {
     setIsFlowInitialized(false);
     setCurrentFlow(null);
     setApiError(null);
@@ -11101,7 +11243,7 @@ var BaseInviteUser = ({
     setInviteLinkCopied(false);
     initializationAttemptedRef.current = false;
   }, []);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -11128,7 +11270,7 @@ var BaseInviteUser = ({
       })();
     }
   }, [isInitialized, isFlowInitialized, onInitialize, onFlowChange, handleError, normalizeFlowResponseLocal]);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (currentFlow && isFlowInitialized) {
       const components2 = currentFlow.data?.components || [];
       if (components2.length > 0) {
@@ -11137,7 +11279,7 @@ var BaseInviteUser = ({
       }
     }
   }, [formValues, currentFlow, isFlowInitialized, validateForm]);
-  const extractHeadings = (0, import_react68.useCallback)((components2) => {
+  const extractHeadings = (0, import_react69.useCallback)((components2) => {
     let title2;
     let subtitle2;
     components2.forEach((comp) => {
@@ -11151,13 +11293,13 @@ var BaseInviteUser = ({
     });
     return { subtitle: subtitle2, title: title2 };
   }, []);
-  const filterHeadings = (0, import_react68.useCallback)(
+  const filterHeadings = (0, import_react69.useCallback)(
     (components2) => components2.filter(
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     ),
     []
   );
-  const renderComponents = (0, import_react68.useCallback)(
+  const renderComponents = (0, import_react69.useCallback)(
     (components2) => renderInviteUserComponents(
       components2,
       formValues,
@@ -11338,16 +11480,16 @@ var InviteUser = ({
 var InviteUser_default = InviteUser;
 
 // src/components/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.tsx
 var import_css44 = require("@emotion/css");
-var import_react70 = require("react");
+var import_react71 = require("react");
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.styles.ts
 var import_css43 = require("@emotion/css");
-var import_react69 = require("react");
-var useStyles19 = (theme, colorScheme) => (0, import_react69.useMemo)(() => {
+var import_react70 = require("react");
+var useStyles19 = (theme, colorScheme) => (0, import_react70.useMemo)(() => {
   const card = import_css43.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
@@ -11396,28 +11538,29 @@ var BaseAcceptInvite = ({
   onGoToSignIn,
   className = "",
   children,
+  preferences,
   size = "medium",
   variant = "outlined",
   showTitle = true,
   showSubtitle = true
 }) => {
   const { meta } = useAsgardeo_default();
-  const { t } = useTranslation_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const { theme } = useTheme_default();
   const styles = BaseAcceptInvite_styles_default(theme, theme.vars.colors.text.primary);
-  const [isLoading, setIsLoading] = (0, import_react70.useState)(false);
-  const [isValidatingToken, setIsValidatingToken] = (0, import_react70.useState)(true);
-  const [isTokenInvalid, setIsTokenInvalid] = (0, import_react70.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react70.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react70.useState)(null);
-  const [apiError, setApiError] = (0, import_react70.useState)(null);
-  const [formValues, setFormValues] = (0, import_react70.useState)({});
-  const [formErrors, setFormErrors] = (0, import_react70.useState)({});
-  const [touchedFields, setTouchedFields] = (0, import_react70.useState)({});
-  const [isFormValid, setIsFormValid] = (0, import_react70.useState)(true);
-  const [completionTitle, setCompletionTitle] = (0, import_react70.useState)(void 0);
-  const tokenValidationAttemptedRef = (0, import_react70.useRef)(false);
-  const handleError = (0, import_react70.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react71.useState)(false);
+  const [isValidatingToken, setIsValidatingToken] = (0, import_react71.useState)(true);
+  const [isTokenInvalid, setIsTokenInvalid] = (0, import_react71.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react71.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react71.useState)(null);
+  const [apiError, setApiError] = (0, import_react71.useState)(null);
+  const [formValues, setFormValues] = (0, import_react71.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react71.useState)({});
+  const [touchedFields, setTouchedFields] = (0, import_react71.useState)({});
+  const [isFormValid, setIsFormValid] = (0, import_react71.useState)(true);
+  const [completionTitle, setCompletionTitle] = (0, import_react71.useState)(void 0);
+  const tokenValidationAttemptedRef = (0, import_react71.useRef)(false);
+  const handleError = (0, import_react71.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.acceptInvite.errors.generic");
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -11425,7 +11568,7 @@ var BaseAcceptInvite = ({
     },
     [t, onError]
   );
-  const normalizeFlowResponseLocal = (0, import_react70.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react71.useCallback)(
     (response) => {
       if (!response?.data?.meta?.components) {
         return response;
@@ -11485,7 +11628,7 @@ var BaseAcceptInvite = ({
     },
     tokenValidationAttemptedRef
   });
-  const handleInputChange = (0, import_react70.useCallback)((name, value) => {
+  const handleInputChange = (0, import_react71.useCallback)((name, value) => {
     setFormValues((prev) => ({ ...prev, [name]: value }));
     setFormErrors((prev) => {
       const newErrors = { ...prev };
@@ -11493,10 +11636,10 @@ var BaseAcceptInvite = ({
       return newErrors;
     });
   }, []);
-  const handleInputBlur = (0, import_react70.useCallback)((name) => {
+  const handleInputBlur = (0, import_react71.useCallback)((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
   }, []);
-  const validateForm = (0, import_react70.useCallback)(
+  const validateForm = (0, import_react71.useCallback)(
     (components2) => {
       const errors = {};
       const validateComponents = (comps) => {
@@ -11517,7 +11660,7 @@ var BaseAcceptInvite = ({
     },
     [formValues]
   );
-  const handleSubmit = (0, import_react70.useCallback)(
+  const handleSubmit = (0, import_react71.useCallback)(
     async (component, data) => {
       if (!currentFlow) {
         return;
@@ -11596,7 +11739,7 @@ var BaseAcceptInvite = ({
       normalizeFlowResponseLocal
     ]
   );
-  (0, import_react70.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (tokenValidationAttemptedRef.current) {
       return;
     }
@@ -11638,7 +11781,7 @@ var BaseAcceptInvite = ({
       }
     })();
   }, [flowId, inviteToken, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal]);
-  const extractHeadings = (0, import_react70.useCallback)((components2) => {
+  const extractHeadings = (0, import_react71.useCallback)((components2) => {
     let title2;
     let subtitle2;
     components2.forEach((comp) => {
@@ -11652,13 +11795,13 @@ var BaseAcceptInvite = ({
     });
     return { subtitle: subtitle2, title: title2 };
   }, []);
-  const filterHeadings = (0, import_react70.useCallback)(
+  const filterHeadings = (0, import_react71.useCallback)(
     (components2) => components2.filter(
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     ),
     []
   );
-  const renderComponents = (0, import_react70.useCallback)(
+  const renderComponents = (0, import_react71.useCallback)(
     (components2) => renderInviteUserComponents(
       components2,
       formValues,
@@ -11790,10 +11933,10 @@ var AcceptInvite = ({
   showTitle = true,
   showSubtitle = true
 }) => {
-  const { flowId: urlFlowId, inviteToken: urlInviteToken } = (0, import_react71.useMemo)(() => getUrlParams(), []);
+  const { flowId: urlFlowId, inviteToken: urlInviteToken } = (0, import_react72.useMemo)(() => getUrlParams(), []);
   const flowId = flowIdProp || urlFlowId;
   const inviteToken = inviteTokenProp || urlInviteToken;
-  const apiBaseUrl = (0, import_react71.useMemo)(() => {
+  const apiBaseUrl = (0, import_react72.useMemo)(() => {
     if (baseUrl) {
       return baseUrl;
     }
@@ -11843,9 +11986,9 @@ var AcceptInvite_default = AcceptInvite;
 
 // src/components/auth/Callback/Callback.tsx
 var import_browser73 = require("@asgardeo/browser");
-var import_react72 = require("react");
+var import_react73 = require("react");
 var Callback = ({ onNavigate, onError }) => {
-  const processingRef = (0, import_react72.useRef)(false);
+  const processingRef = (0, import_react73.useRef)(false);
   const navigate6 = (path) => {
     if (onNavigate) {
       onNavigate(path);
@@ -11853,7 +11996,7 @@ var Callback = ({ onNavigate, onError }) => {
       (0, import_browser73.navigate)(path);
     }
   };
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     const processOAuthCallback = () => {
       if (processingRef.current) {
         return;
@@ -11977,12 +12120,12 @@ var Organization_default = Organization5;
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
 var import_browser79 = require("@asgardeo/browser");
 var import_css52 = require("@emotion/css");
-var import_react81 = require("react");
+var import_react82 = require("react");
 
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
 var import_browser74 = require("@asgardeo/browser");
 var import_css45 = require("@emotion/css");
-var import_react73 = require("react");
+var import_react74 = require("react");
 var useStyles20 = (theme, colorScheme) => {
   const valuePlaceholder = import_css45.css`
     font-style: italic;
@@ -12027,7 +12170,7 @@ var useStyles20 = (theme, colorScheme) => {
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  return (0, import_react73.useMemo)(() => {
+  return (0, import_react74.useMemo)(() => {
     const root = import_css45.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -12239,12 +12382,12 @@ var getDisplayName_default = getDisplayName;
 // src/components/primitives/Avatar/Avatar.tsx
 var import_browser76 = require("@asgardeo/browser");
 var import_css47 = require("@emotion/css");
-var import_react75 = require("react");
+var import_react76 = require("react");
 
 // src/components/primitives/Avatar/Avatar.styles.ts
 var import_css46 = require("@emotion/css");
-var import_react74 = require("react");
-var useStyles21 = (theme, colorScheme, size, variant, backgroundColor) => (0, import_react74.useMemo)(() => {
+var import_react75 = require("react");
+var useStyles21 = (theme, colorScheme, size, variant, backgroundColor) => (0, import_react75.useMemo)(() => {
   const baseAvatar = import_css46.css`
       align-items: center;
       background: ${backgroundColor || theme.vars.colors.background.surface};
@@ -12326,19 +12469,19 @@ var Avatar = ({
       return (acc << 5) - acc + charCode & 4294967295;
     }, 0);
     const seed = Math.abs(hash);
-    const generateColor = (offset3) => {
-      const hue1 = (seed + offset3) % 360;
+    const generateColor = (offset4) => {
+      const hue1 = (seed + offset4) % 360;
       const hue2 = (hue1 + 60 + seed % 120) % 360;
       const saturation = 70 + seed % 20;
       const lightness1 = 55 + seed % 15;
-      const lightness2 = 60 + (seed + offset3) % 15;
+      const lightness2 = 60 + (seed + offset4) % 15;
       return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;
     };
     const angle = 45 + seed % 91;
     const colors = generateColor(seed);
     return `linear-gradient(${angle}deg, ${colors})`;
   };
-  const backgroundColor = (0, import_react75.useMemo)(() => {
+  const backgroundColor = (0, import_react76.useMemo)(() => {
     if (!name || imageUrl) {
       return void 0;
     }
@@ -12399,13 +12542,13 @@ var Avatar = ({
 // src/components/primitives/Dialog/Dialog.tsx
 var import_browser77 = require("@asgardeo/browser");
 var import_css49 = require("@emotion/css");
-var import_react77 = require("@floating-ui/react");
-var import_react78 = require("react");
+var import_react78 = require("@floating-ui/react");
+var import_react79 = require("react");
 
 // src/components/primitives/Dialog/Dialog.styles.ts
 var import_css48 = require("@emotion/css");
-var import_react76 = require("react");
-var useStyles22 = (theme, colorScheme) => (0, import_react76.useMemo)(() => {
+var import_react77 = require("react");
+var useStyles22 = (theme, colorScheme) => (0, import_react77.useMemo)(() => {
   const overlay = import_css48.css`
       background-color: rgba(0, 0, 0, 0.5);
       display: flex;
@@ -12566,23 +12709,23 @@ function useDialog({
   open: controlledOpen,
   onOpenChange: setControlledOpen
 } = {}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react78.useState)(initialOpen);
-  const [labelId, setLabelId] = (0, import_react78.useState)();
-  const [descriptionId, setDescriptionId] = (0, import_react78.useState)();
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react79.useState)(initialOpen);
+  const [labelId, setLabelId] = (0, import_react79.useState)();
+  const [descriptionId, setDescriptionId] = (0, import_react79.useState)();
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
-  const data = (0, import_react77.useFloating)({
+  const data = (0, import_react78.useFloating)({
     onOpenChange: setOpen,
     open
   });
   const { context } = data;
-  const click = (0, import_react77.useClick)(context, {
+  const click = (0, import_react78.useClick)(context, {
     enabled: controlledOpen == null
   });
-  const dismiss = (0, import_react77.useDismiss)(context, { outsidePressEvent: "mousedown" });
-  const role = (0, import_react77.useRole)(context);
-  const interactions = (0, import_react77.useInteractions)([click, dismiss, role]);
-  return (0, import_react78.useMemo)(
+  const dismiss = (0, import_react78.useDismiss)(context, { outsidePressEvent: "mousedown" });
+  const role = (0, import_react78.useRole)(context);
+  const interactions = (0, import_react78.useInteractions)([click, dismiss, role]);
+  return (0, import_react79.useMemo)(
     () => ({
       open,
       setOpen,
@@ -12596,9 +12739,9 @@ function useDialog({
     [open, setOpen, interactions, data, labelId, descriptionId]
   );
 }
-var DialogContext = (0, import_react78.createContext)(null);
+var DialogContext = (0, import_react79.createContext)(null);
 var useDialogContext = () => {
-  const context = (0, import_react78.useContext)(DialogContext);
+  const context = (0, import_react79.useContext)(DialogContext);
   if (context == null) {
     throw new Error("Dialog components must be wrapped in <Dialog />");
   }
@@ -12608,13 +12751,13 @@ function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(DialogContext.Provider, { value: dialog, children });
 }
-var DialogTrigger = (0, import_react78.forwardRef)(
+var DialogTrigger = (0, import_react79.forwardRef)(
   ({ children, asChild = false, ...props }, propRef) => {
     const context = useDialogContext();
     const childrenRef = children.ref;
-    const ref = (0, import_react77.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
-    if (asChild && (0, import_react78.isValidElement)(children)) {
-      return (0, import_react78.cloneElement)(
+    const ref = (0, import_react78.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && (0, import_react79.isValidElement)(children)) {
+      return (0, import_react79.cloneElement)(
         children,
         context.getReferenceProps({
           ref,
@@ -12627,19 +12770,19 @@ var DialogTrigger = (0, import_react78.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
-var DialogContent = (0, import_react78.forwardRef)(
+var DialogContent = (0, import_react79.forwardRef)(
   (props, propRef) => {
     const { context: floatingContext, ...context } = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const ref = (0, import_react77.useMergeRefs)([context.refs.setFloating, propRef]);
+    const ref = (0, import_react78.useMergeRefs)([context.refs.setFloating, propRef]);
     if (!floatingContext.open) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react77.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-      import_react77.FloatingOverlay,
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react78.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      import_react78.FloatingOverlay,
       {
         className: (0, import_css49.cx)((0, import_browser77.withVendorCSSClassPrefix)((0, import_browser77.bem)("dialog", "overlay")), styles["overlay"]),
         lockScroll: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react77.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react78.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "div",
           {
             ref,
@@ -12654,13 +12797,13 @@ var DialogContent = (0, import_react78.forwardRef)(
     ) });
   }
 );
-var DialogHeading = (0, import_react78.forwardRef)(
+var DialogHeading = (0, import_react79.forwardRef)(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react77.useId)();
-    (0, import_react78.useLayoutEffect)(() => {
+    const id = (0, import_react78.useId)();
+    (0, import_react79.useLayoutEffect)(() => {
       context.setLabelId(id);
       return () => {
         context.setLabelId(void 0);
@@ -12694,13 +12837,13 @@ var DialogHeading = (0, import_react78.forwardRef)(
     ] });
   }
 );
-var DialogDescription = (0, import_react78.forwardRef)(
+var DialogDescription = (0, import_react79.forwardRef)(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react77.useId)();
-    (0, import_react78.useLayoutEffect)(() => {
+    const id = (0, import_react78.useId)();
+    (0, import_react79.useLayoutEffect)(() => {
       context.setDescriptionId(id);
       return () => {
         context.setDescriptionId(void 0);
@@ -12718,17 +12861,17 @@ var DialogDescription = (0, import_react78.forwardRef)(
     );
   }
 );
-var DialogClose = (0, import_react78.forwardRef)(
+var DialogClose = (0, import_react79.forwardRef)(
   ({ children, asChild = false, ...props }, propRef) => {
     const context = useDialogContext();
     const childrenRef = children?.ref;
-    const ref = (0, import_react77.useMergeRefs)([propRef, childrenRef]);
+    const ref = (0, import_react78.useMergeRefs)([propRef, childrenRef]);
     const handleClick = (event) => {
       context.setOpen(false);
       props.onClick?.(event);
     };
-    if (asChild && (0, import_react78.isValidElement)(children)) {
-      return (0, import_react78.cloneElement)(children, {
+    if (asChild && (0, import_react79.isValidElement)(children)) {
+      return (0, import_react79.cloneElement)(children, {
         ref,
         ...props,
         ...children.props,
@@ -12763,12 +12906,12 @@ var Dialog_default = Dialog;
 // src/components/primitives/MultiInput/MultiInput.tsx
 var import_browser78 = require("@asgardeo/browser");
 var import_css51 = require("@emotion/css");
-var import_react80 = require("react");
+var import_react81 = require("react");
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
 var import_css50 = require("@emotion/css");
-var import_react79 = require("react");
-var useStyles23 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, import_react79.useMemo)(() => {
+var import_react80 = require("react");
+var useStyles23 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, import_react80.useMemo)(() => {
   const container = import_css50.css`
       display: flex;
       flex-direction: column;
@@ -12883,7 +13026,7 @@ var MultiInput = ({
   const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
   const PlusIcon = ({ iconClassName }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css51.cx)(styles["icon"], iconClassName), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M12 5v14M5 12h14" }) });
   const BinIcon = ({ iconClassName }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css51.cx)(styles["icon"], iconClassName), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
-  const handleAddValue = (0, import_react80.useCallback)(
+  const handleAddValue = (0, import_react81.useCallback)(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
         onChange([...values, newValue.trim()]);
@@ -12891,7 +13034,7 @@ var MultiInput = ({
     },
     [values, onChange, maxFields]
   );
-  const handleRemoveValue = (0, import_react80.useCallback)(
+  const handleRemoveValue = (0, import_react81.useCallback)(
     (index) => {
       if (values.length > minFields) {
         const updatedValues = values.filter((_, i) => i !== index);
@@ -12900,7 +13043,7 @@ var MultiInput = ({
     },
     [values, onChange, minFields]
   );
-  const renderInputField = (0, import_react80.useCallback)(
+  const renderInputField = (0, import_react81.useCallback)(
     (value, onValueChange, attachedEndIcon, onEndIconClick) => {
       const handleInputChange = (e) => {
         const newValue = e.target ? e.target.value : e;
@@ -12942,8 +13085,8 @@ var MultiInput = ({
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
   );
-  const [currentInputValue, setCurrentInputValue] = (0, import_react80.useState)("");
-  const handleInputSubmit = (0, import_react80.useCallback)(() => {
+  const [currentInputValue, setCurrentInputValue] = (0, import_react81.useState)("");
+  const handleInputSubmit = (0, import_react81.useCallback)(() => {
     if (currentInputValue.trim() !== "") {
       handleAddValue(currentInputValue);
       setCurrentInputValue("");
@@ -13041,15 +13184,16 @@ var BaseUserProfile = ({
   open = false,
   error = null,
   isLoading = false,
+  preferences,
   showFields = [],
   hideFields = [],
   displayNameAttributes = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const [editedUser, setEditedUser] = (0, import_react81.useState)(flattenedProfile || profile);
-  const [editingFields, setEditingFields] = (0, import_react81.useState)({});
-  const { t } = useTranslation_default();
-  const shouldShowField = (0, import_react81.useCallback)(
+  const [editedUser, setEditedUser] = (0, import_react82.useState)(flattenedProfile || profile);
+  const [editingFields, setEditingFields] = (0, import_react82.useState)({});
+  const { t } = useTranslation_default(preferences?.i18n);
+  const shouldShowField = (0, import_react82.useCallback)(
     (fieldName) => {
       if (fieldsToSkip.includes(fieldName)) {
         return false;
@@ -13078,13 +13222,13 @@ var BaseUserProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = (0, import_react81.useCallback)((fieldName) => {
+  const toggleFieldEdit = (0, import_react82.useCallback)((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = (0, import_react81.useCallback)((schema) => {
+  const getFieldPlaceholder = (0, import_react82.useCallback)((schema) => {
     const { type, displayName, description, name } = schema;
     const fieldLabel = displayName || description || name || "value";
     switch (type) {
@@ -13098,7 +13242,7 @@ var BaseUserProfile = ({
         return `Enter your ${fieldLabel.toLowerCase()}`;
     }
   }, []);
-  const formatLabel = (0, import_react81.useCallback)(
+  const formatLabel = (0, import_react82.useCallback)(
     (key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "),
     []
   );
@@ -13128,7 +13272,7 @@ var BaseUserProfile = ({
       }
     }
   }
-  const handleFieldSave = (0, import_react81.useCallback)(
+  const handleFieldSave = (0, import_react82.useCallback)(
     (schema) => {
       if (!onUpdate || !schema.name) return;
       const fieldName = schema.name;
@@ -13158,7 +13302,7 @@ var BaseUserProfile = ({
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react81.useCallback)(
+  const handleFieldCancel = (0, import_react82.useCallback)(
     (fieldName) => {
       const currentUser2 = flattenedProfile || profile;
       setEditedUser((prev) => ({
@@ -13500,7 +13644,7 @@ var BaseUserProfile_default = BaseUserProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 var import_browser81 = require("@asgardeo/browser");
-var import_react82 = require("react");
+var import_react83 = require("react");
 
 // src/api/updateMeProfile.ts
 var import_browser80 = require("@asgardeo/browser");
@@ -13531,11 +13675,11 @@ var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var UserProfile3 = ({ ...rest }) => {
+var UserProfile3 = ({ preferences, ...rest }) => {
   const { baseUrl, instanceId } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
-  const { t } = useTranslation_default();
-  const [error, setError] = (0, import_react82.useState)(null);
+  const { t } = useTranslation_default(preferences?.i18n);
+  const [error, setError] = (0, import_react83.useState)(null);
   const handleProfileUpdate = async (payload) => {
     setError(null);
     try {
@@ -13557,6 +13701,7 @@ var UserProfile3 = ({ ...rest }) => {
       schemas,
       onUpdate: handleProfileUpdate,
       error,
+      preferences,
       ...rest
     }
   );
@@ -13566,13 +13711,13 @@ var UserProfile_default = UserProfile3;
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
 var import_browser82 = require("@asgardeo/browser");
 var import_css54 = require("@emotion/css");
-var import_react84 = require("@floating-ui/react");
-var import_react85 = require("react");
+var import_react85 = require("@floating-ui/react");
+var import_react86 = require("react");
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
 var import_css53 = require("@emotion/css");
-var import_react83 = require("react");
-var useStyles24 = (theme, colorScheme) => (0, import_react83.useMemo)(() => {
+var import_react84 = require("react");
+var useStyles24 = (theme, colorScheme) => (0, import_react84.useMemo)(() => {
   const trigger = import_css53.css`
       display: inline-flex;
       align-items: center;
@@ -13775,19 +13920,19 @@ var BaseUserDropdown = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseUserDropdown_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react85.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react85.useState)(null);
-  const { refs, floatingStyles, context } = (0, import_react84.useFloating)({
-    middleware: [(0, import_react84.offset)(5), (0, import_react84.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react84.shift)({ padding: 5 })],
+  const [isOpen, setIsOpen] = (0, import_react86.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react86.useState)(null);
+  const { refs, floatingStyles, context } = (0, import_react85.useFloating)({
+    middleware: [(0, import_react85.offset)(5), (0, import_react85.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react85.shift)({ padding: 5 })],
     onOpenChange: setIsOpen,
     open: isOpen,
     placement: "bottom-end",
-    whileElementsMounted: import_react84.autoUpdate
+    whileElementsMounted: import_react85.autoUpdate
   });
-  const click = (0, import_react84.useClick)(context);
-  const dismiss = (0, import_react84.useDismiss)(context);
-  const role = (0, import_react84.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react84.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react85.useClick)(context);
+  const dismiss = (0, import_react85.useDismiss)(context);
+  const role = (0, import_react85.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react85.useInteractions)([click, dismiss, role]);
   const defaultAttributeMappings = {
     email: ["emails"],
     firstName: ["name.givenName", "given_name"],
@@ -13862,7 +14007,7 @@ var BaseUserDropdown = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react84.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react84.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react85.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react85.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
       "div",
       {
         ref: refs.setFloating,
@@ -13966,7 +14111,7 @@ var BaseUserDropdown = ({
 var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var UserDropdown = ({
   children,
@@ -13976,7 +14121,7 @@ var UserDropdown = ({
   ...rest
 }) => {
   const { user, isLoading, signOut, meta } = useAsgardeo_default();
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react86.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react87.useState)(false);
   const handleManageProfile = () => {
     setIsProfileOpen(true);
   };
@@ -14037,13 +14182,13 @@ var UserDropdown_default = UserDropdown;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
 var import_css56 = require("@emotion/css");
-var import_react88 = require("@floating-ui/react");
-var import_react89 = require("react");
+var import_react89 = require("@floating-ui/react");
+var import_react90 = require("react");
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts
 var import_css55 = require("@emotion/css");
-var import_react87 = require("react");
-var useStyles25 = (theme, colorScheme) => (0, import_react87.useMemo)(() => {
+var import_react88 = require("react");
+var useStyles25 = (theme, colorScheme) => (0, import_react88.useMemo)(() => {
   const root = import_css55.css`
       display: inline-block;
       position: relative;
@@ -14320,25 +14465,26 @@ var BaseOrganizationSwitcher = ({
   portalId = "asgardeo-organization-switcher",
   showTriggerLabel = true,
   avatarSize = 24,
-  fallback = null
+  fallback = null,
+  preferences
 }) => {
   const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react89.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react89.useState)(null);
-  const { t } = useTranslation_default();
+  const [isOpen, setIsOpen] = (0, import_react90.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react90.useState)(null);
+  const { t } = useTranslation_default(preferences?.i18n);
   const isRTL = direction === "rtl";
-  const { refs, floatingStyles, context } = (0, import_react88.useFloating)({
-    middleware: [(0, import_react88.offset)(5), (0, import_react88.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react88.shift)({ padding: 5 })],
+  const { refs, floatingStyles, context } = (0, import_react89.useFloating)({
+    middleware: [(0, import_react89.offset)(5), (0, import_react89.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react89.shift)({ padding: 5 })],
     onOpenChange: setIsOpen,
     open: isOpen,
     placement: "bottom-end",
-    whileElementsMounted: import_react88.autoUpdate
+    whileElementsMounted: import_react89.autoUpdate
   });
-  const click = (0, import_react88.useClick)(context);
-  const dismiss = (0, import_react88.useDismiss)(context);
-  const role = (0, import_react88.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react88.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react89.useClick)(context);
+  const dismiss = (0, import_react89.useDismiss)(context);
+  const role = (0, import_react89.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react89.useInteractions)([click, dismiss, role]);
   if (fallback && !currentOrganization && !loading && organizations.length === 0) {
     return fallback;
   }
@@ -14413,7 +14559,7 @@ var BaseOrganizationSwitcher = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react88.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react88.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react89.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react89.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
       "div",
       {
         ref: refs.setFloating,
@@ -14572,7 +14718,7 @@ var BaseOrganizationSwitcher = ({
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-var import_react102 = require("react");
+var import_react103 = require("react");
 
 // src/components/primitives/Icons/BuildingAlt.tsx
 var import_jsx_runtime100 = require("react/jsx-runtime");
@@ -14603,17 +14749,17 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-var import_react92 = require("react");
+var import_react93 = require("react");
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
 var import_browser83 = require("@asgardeo/browser");
 var import_css58 = require("@emotion/css");
-var import_react91 = require("react");
+var import_react92 = require("react");
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
 var import_css57 = require("@emotion/css");
-var import_react90 = require("react");
-var useStyles26 = (theme, colorScheme) => (0, import_react90.useMemo)(() => {
+var import_react91 = require("react");
+var useStyles26 = (theme, colorScheme) => (0, import_react91.useMemo)(() => {
   const root = import_css57.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -14768,20 +14914,21 @@ var BaseCreateOrganization = ({
   onSubmit,
   onSuccess,
   open = false,
+  preferences,
   renderAdditionalFields,
   style,
   title = "Create Organization"
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseCreateOrganization_styles_default(theme, colorScheme);
-  const { t } = useTranslation_default();
-  const [formData, setFormData] = (0, import_react91.useState)({
+  const { t } = useTranslation_default(preferences?.i18n);
+  const [formData, setFormData] = (0, import_react92.useState)({
     description: "",
     handle: "",
     name: "",
     ...initialValues
   });
-  const [formErrors, setFormErrors] = (0, import_react91.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react92.useState)({});
   const validateForm = () => {
     const errors = {};
     if (!formData.name.trim()) {
@@ -14943,8 +15090,8 @@ var CreateOrganization = ({
 }) => {
   const { isSignedIn, baseUrl, instanceId } = useAsgardeo_default();
   const { currentOrganization, revalidateMyOrganizations } = useOrganization_default();
-  const [loading, setLoading] = (0, import_react92.useState)(false);
-  const [error, setError] = (0, import_react92.useState)(null);
+  const [loading, setLoading] = (0, import_react93.useState)(false);
+  const [error, setError] = (0, import_react93.useState)(null);
   if (!isSignedIn && fallback) {
     return fallback;
   }
@@ -14999,16 +15146,16 @@ var CreateOrganization = ({
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
 var import_css62 = require("@emotion/css");
-var import_react96 = require("react");
+var import_react97 = require("react");
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
 var import_css60 = require("@emotion/css");
-var import_react94 = require("react");
+var import_react95 = require("react");
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
 var import_css59 = require("@emotion/css");
-var import_react93 = require("react");
-var useStyles27 = (theme, colorScheme) => (0, import_react93.useMemo)(() => {
+var import_react94 = require("react");
+var useStyles27 = (theme, colorScheme) => (0, import_react94.useMemo)(() => {
   const root = import_css59.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -15303,12 +15450,13 @@ var BaseOrganizationList = ({
   renderOrganization,
   style,
   title = "Organizations",
-  showStatus
+  showStatus,
+  preferences
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationList_styles_default(theme, colorScheme);
-  const { t } = useTranslation_default();
-  const organizationsWithSwitchAccess = (0, import_react94.useMemo)(() => {
+  const { t } = useTranslation_default(preferences?.i18n);
+  const organizationsWithSwitchAccess = (0, import_react95.useMemo)(() => {
     if (!allOrganizations?.organizations) {
       return [];
     }
@@ -15389,8 +15537,8 @@ var BaseOrganizationList_default = BaseOrganizationList;
 
 // src/components/presentation/OrganizationList/OrganizationList.styles.ts
 var import_css61 = require("@emotion/css");
-var import_react95 = require("react");
-var useStyles28 = (theme, colorScheme) => (0, import_react95.useMemo)(() => {
+var import_react96 = require("react");
+var useStyles28 = (theme, colorScheme) => (0, import_react96.useMemo)(() => {
   const cssOrganizationListWrapper = import_css61.css`
       /* Container wrapper styles for OrganizationList component */
       width: 100%;
@@ -15457,10 +15605,10 @@ var OrganizationList = (props) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = OrganizationList_styles_default(theme, colorScheme);
   const { getAllOrganizations: getAllOrganizations2, error, isLoading, myOrganizations } = useOrganization_default();
-  const [allOrganizations, setAllOrganizations] = (0, import_react96.useState)({
+  const [allOrganizations, setAllOrganizations] = (0, import_react97.useState)({
     organizations: []
   });
-  (0, import_react96.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     (async () => {
       setAllOrganizations(await getAllOrganizations2());
     })();
@@ -15481,17 +15629,17 @@ var OrganizationList_default = OrganizationList;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
 var import_browser89 = require("@asgardeo/browser");
-var import_react101 = require("react");
+var import_react102 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 var import_browser86 = require("@asgardeo/browser");
 var import_css66 = require("@emotion/css");
-var import_react100 = require("react");
+var import_react101 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
 var import_css63 = require("@emotion/css");
-var import_react97 = require("react");
-var useStyles29 = (theme, colorScheme) => (0, import_react97.useMemo)(
+var import_react98 = require("react");
+var useStyles29 = (theme, colorScheme) => (0, import_react98.useMemo)(
   () => ({
     attributeItem: import_css63.css`
         display: flex;
@@ -15647,12 +15795,12 @@ var BaseOrganizationProfile_styles_default = useStyles29;
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
 var import_browser85 = require("@asgardeo/browser");
 var import_css65 = require("@emotion/css");
-var import_react99 = require("react");
+var import_react100 = require("react");
 
 // src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
 var import_css64 = require("@emotion/css");
-var import_react98 = require("react");
-var useStyles30 = (theme, colorScheme, disabled, readOnly, hasError) => (0, import_react98.useMemo)(() => {
+var import_react99 = require("react");
+var useStyles30 = (theme, colorScheme, disabled, readOnly, hasError) => (0, import_react99.useMemo)(() => {
   const container = import_css64.css`
       display: flex;
       flex-direction: column;
@@ -15827,10 +15975,10 @@ var KeyValueInput = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = KeyValueInput_styles_default(theme, colorScheme, disabled, readOnly, !!error);
   const initialPairs = Array.isArray(value) ? value : Object.entries(value).map(([key, val]) => ({ key, value: String(val) }));
-  const [pairs, setPairs] = (0, import_react99.useState)(initialPairs);
-  const [newKey, setNewKey] = (0, import_react99.useState)("");
-  const [newValue, setNewValue] = (0, import_react99.useState)("");
-  const handleAddPair = (0, import_react99.useCallback)(() => {
+  const [pairs, setPairs] = (0, import_react100.useState)(initialPairs);
+  const [newKey, setNewKey] = (0, import_react100.useState)("");
+  const [newValue, setNewValue] = (0, import_react100.useState)("");
+  const handleAddPair = (0, import_react100.useCallback)(() => {
     if (!newKey.trim() || !newValue.trim()) return;
     if (maxPairs && pairs.length >= maxPairs) return;
     const newPair = {
@@ -15848,7 +15996,7 @@ var KeyValueInput = ({
       onAdd(newPair);
     }
   }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
-  const handleRemovePair = (0, import_react99.useCallback)(
+  const handleRemovePair = (0, import_react100.useCallback)(
     (index) => {
       const pairToRemove = pairs[index];
       const updatedPairs = pairs.filter((_, i) => i !== index);
@@ -15862,7 +16010,7 @@ var KeyValueInput = ({
     },
     [pairs, onChange, onRemove]
   );
-  const handleUpdatePair = (0, import_react99.useCallback)(
+  const handleUpdatePair = (0, import_react100.useCallback)(
     (index, field, newVal) => {
       const updatedPairs = pairs.map((pair, i) => {
         if (i === index) {
@@ -16061,8 +16209,8 @@ var BaseOrganizationProfile = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
-  const [editedOrganization, setEditedOrganization] = (0, import_react100.useState)(organization);
-  const [editingFields, setEditingFields] = (0, import_react100.useState)({});
+  const [editedOrganization, setEditedOrganization] = (0, import_react101.useState)(organization);
+  const [editingFields, setEditingFields] = (0, import_react101.useState)({});
   const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "svg",
     {
@@ -16077,13 +16225,13 @@ var BaseOrganizationProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = (0, import_react100.useCallback)((fieldName) => {
+  const toggleFieldEdit = (0, import_react101.useCallback)((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = (0, import_react100.useCallback)((fieldKey) => {
+  const getFieldPlaceholder = (0, import_react101.useCallback)((fieldKey) => {
     const fieldLabels = {
       description: "organization description",
       name: "organization name",
@@ -16094,7 +16242,7 @@ var BaseOrganizationProfile = ({
     const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
     return `Enter ${fieldLabel}`;
   }, []);
-  const handleFieldSave = (0, import_react100.useCallback)(
+  const handleFieldSave = (0, import_react101.useCallback)(
     (fieldKey) => {
       if (!onUpdate || !fieldKey) return;
       let fieldValue;
@@ -16113,7 +16261,7 @@ var BaseOrganizationProfile = ({
     },
     [editedOrganization, organization, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react100.useCallback)(
+  const handleFieldCancel = (0, import_react101.useCallback)(
     (fieldKey) => {
       setEditedOrganization((prev) => ({
         ...prev,
@@ -16374,11 +16522,12 @@ var OrganizationProfile = ({
   popupTitle,
   loadingFallback,
   errorFallback,
+  preferences,
   ...rest
 }) => {
   const { baseUrl, instanceId } = useAsgardeo_default();
-  const { t } = useTranslation_default();
-  const [organization, setOrganization] = (0, import_react101.useState)(null);
+  const { t } = useTranslation_default(preferences?.i18n);
+  const [organization, setOrganization] = (0, import_react102.useState)(null);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
       return;
@@ -16395,7 +16544,7 @@ var OrganizationProfile = ({
       setOrganization(null);
     }
   };
-  (0, import_react101.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     fetchOrganization();
   }, [baseUrl, organizationId]);
   const handleOrganizationUpdate = async (payload) => {
@@ -16426,6 +16575,7 @@ var OrganizationProfile = ({
       open,
       onOpenChange,
       title: popupTitle || t("organization.profile.heading"),
+      preferences,
       ...rest
     }
   );
@@ -16439,6 +16589,7 @@ var OrganizationSwitcher = ({
   fallback = null,
   onOrganizationSwitch: propOnOrganizationSwitch,
   organizations: propOrganizations,
+  preferences,
   ...props
 }) => {
   const { isSignedIn } = useAsgardeo_default();
@@ -16449,10 +16600,10 @@ var OrganizationSwitcher = ({
     isLoading,
     error
   } = useOrganization_default();
-  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react102.useState)(false);
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react102.useState)(false);
-  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react102.useState)(false);
-  const { t } = useTranslation_default();
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react103.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react103.useState)(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react103.useState)(false);
+  const { t } = useTranslation_default(preferences?.i18n);
   if (!isSignedIn && fallback) {
     return fallback;
   }
@@ -16493,6 +16644,7 @@ var OrganizationSwitcher = ({
         error,
         menuItems,
         onManageProfile: handleManageOrganization,
+        preferences,
         ...props
       }
     ),
@@ -16541,6 +16693,254 @@ var OrganizationSwitcher = ({
 };
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
-// src/index.ts
+// src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.tsx
+var import_css68 = require("@emotion/css");
+var import_react105 = require("@floating-ui/react");
+var import_react106 = require("react");
+
+// src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.ts
+var import_css67 = require("@emotion/css");
+var import_react104 = require("react");
+var useStyles31 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
+  const root = import_css67.css`
+      display: inline-block;
+      position: relative;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+  const trigger = import_css67.css`
+      display: inline-flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 0.5);
+      padding: calc(${theme.vars.spacing.unit} * 0.75) ${theme.vars.spacing.unit};
+      border: 1px solid ${theme.vars.colors.border};
+      background: ${theme.vars.colors.background.surface};
+      cursor: pointer;
+      border-radius: ${theme.vars.borderRadius.medium};
+      min-width: 120px;
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.primary};
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
+      }
+    `;
+  const triggerEmoji = import_css67.css`
+      font-size: 1rem;
+      line-height: 1;
+    `;
+  const triggerLabel = import_css67.css`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
+    `;
+  const content = import_css67.css`
+      min-width: 200px;
+      max-width: 320px;
+      background-color: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.medium};
+      box-shadow: ${theme.vars.shadows.medium};
+      border: 1px solid ${theme.vars.colors.border};
+      outline: none;
+      z-index: 1000;
+      padding: calc(${theme.vars.spacing.unit} * 0.5) 0;
+    `;
+  const option = import_css67.css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 1.5);
+      width: 100%;
+      border: none;
+      background-color: transparent;
+      cursor: pointer;
+      font-size: 0.875rem;
+      text-align: start;
+      color: ${theme.vars.colors.text.primary};
+      transition: background-color 0.15s ease-in-out;
+
+      &:hover {
+        background-color: ${theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)"};
+      }
+    `;
+  const optionActive = import_css67.css`
+      font-weight: 600;
+      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
+    `;
+  const optionEmoji = import_css67.css`
+      font-size: 1rem;
+      line-height: 1;
+      flex-shrink: 0;
+    `;
+  const optionLabel = import_css67.css`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+  const checkIcon = import_css67.css`
+      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
+      flex-shrink: 0;
+      margin-inline-start: auto;
+    `;
+  return {
+    checkIcon,
+    content,
+    option,
+    optionActive,
+    optionEmoji,
+    optionLabel,
+    root,
+    trigger,
+    triggerEmoji,
+    triggerLabel
+  };
+}, [
+  theme.vars.colors.background.surface,
+  theme.vars.colors.text.primary,
+  theme.vars.colors.border,
+  theme.vars.borderRadius.medium,
+  theme.vars.shadows.medium,
+  theme.vars.spacing.unit,
+  theme.vars.colors.action?.hover,
+  theme.vars.typography.fontFamily,
+  theme.vars.colors.primary?.main,
+  colorScheme
+]);
+var BaseLanguageSwitcher_styles_default = useStyles31;
+
+// src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.tsx
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var BaseLanguageSwitcher = ({
+  children,
+  className,
+  currentLanguage,
+  isLoading = false,
+  languages,
+  onLanguageChange
+}) => {
+  const { theme, colorScheme } = useTheme_default();
+  const styles = BaseLanguageSwitcher_styles_default(theme, colorScheme);
+  const [isOpen, setIsOpen] = (0, import_react106.useState)(false);
+  const { refs, floatingStyles, context } = (0, import_react105.useFloating)({
+    middleware: [(0, import_react105.offset)(4), (0, import_react105.flip)(), (0, import_react105.shift)()],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    whileElementsMounted: import_react105.autoUpdate
+  });
+  const click = (0, import_react105.useClick)(context);
+  const dismiss = (0, import_react105.useDismiss)(context);
+  const role = (0, import_react105.useRole)(context, { role: "listbox" });
+  const { getReferenceProps, getFloatingProps } = (0, import_react105.useInteractions)([click, dismiss, role]);
+  const currentOption = languages.find((l) => l.code === currentLanguage);
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_jsx_runtime109.Fragment, { children: children({
+      currentLanguage,
+      isLoading,
+      languages,
+      onLanguageChange
+    }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: (0, import_css68.cx)(styles["root"], className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+      "button",
+      {
+        ref: refs.setReference,
+        type: "button",
+        disabled: isLoading,
+        "aria-label": "Switch language",
+        ...getReferenceProps(),
+        className: styles["trigger"],
+        children: [
+          currentOption && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: styles["triggerEmoji"], children: currentOption.emoji }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: styles["triggerLabel"], children: currentOption?.displayName ?? currentLanguage }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ChevronDown_default, {})
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react105.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_react105.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        className: styles["content"],
+        role: "listbox",
+        "aria-label": "Select language",
+        children: languages.map((lang) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": lang.code === currentLanguage,
+            className: (0, import_css68.cx)(styles["option"], lang.code === currentLanguage && styles["optionActive"]),
+            onClick: () => {
+              onLanguageChange(lang.code);
+              setIsOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: styles["optionEmoji"], children: lang.emoji }),
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: styles["optionLabel"], children: lang.displayName }),
+              lang.code === currentLanguage && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: styles["checkIcon"], children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Check_default, {}) })
+            ]
+          },
+          lang.code
+        ))
+      }
+    ) }) })
+  ] });
+};
+var BaseLanguageSwitcher_default = BaseLanguageSwitcher;
+
+// src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx
 var import_browser90 = require("@asgardeo/browser");
+var import_react108 = require("react");
+
+// src/contexts/FlowMeta/useFlowMeta.ts
+var import_react107 = require("react");
+var useFlowMeta = () => {
+  const context = (0, import_react107.useContext)(FlowMetaContext_default);
+  if (!context) {
+    throw new Error("useFlowMeta must be used within a FlowMetaProvider");
+  }
+  return context;
+};
+var useFlowMeta_default = useFlowMeta;
+
+// src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var LanguageSwitcher = ({ children, className }) => {
+  const { meta, switchLanguage, isLoading } = useFlowMeta_default();
+  const { currentLanguage } = useTranslation_default();
+  const availableLanguageCodes = meta?.i18n?.languages ?? [];
+  const languages = (0, import_react108.useMemo)(
+    () => availableLanguageCodes.map((code) => ({
+      code,
+      displayName: (0, import_browser90.resolveLocaleDisplayName)(code, currentLanguage),
+      emoji: (0, import_browser90.resolveLocaleEmoji)(code)
+    })),
+    [availableLanguageCodes, currentLanguage]
+  );
+  const handleLanguageChange = (language) => {
+    if (language !== currentLanguage) {
+      switchLanguage(language);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    BaseLanguageSwitcher_default,
+    {
+      currentLanguage,
+      isLoading,
+      languages,
+      onLanguageChange: handleLanguageChange,
+      className,
+      children
+    }
+  );
+};
+var LanguageSwitcher_default = LanguageSwitcher;
+
+// src/index.ts
+var import_browser91 = require("@asgardeo/browser");
 //# sourceMappingURL=index.js.map