@asgardeo/react 0.13.2 → 0.13.3

package/dist/index.js

@@ -844,6 +844,11 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
     const config = await this.asgardeo.getConfigData();
     if (config.platform === Platform.AsgardeoV2) {
       this.asgardeo.clearSession();
+      if (config.signInUrl) {
+        navigate(config.signInUrl);
+      } else {
+        this.signIn(config.signInOptions);
+      }
       args[1]?.(config.afterSignOutUrl || "");
       return Promise.resolve(config.afterSignOutUrl || "");
     }
@@ -1097,6 +1102,7 @@ var FlowProvider_default = FlowProvider;
 
 // src/contexts/FlowMeta/FlowMetaProvider.tsx
 import { FlowMetaType, getFlowMetaV2 } from "@asgardeo/browser";
+import { TranslationBundleConstants } from "@asgardeo/i18n";
 import {
   useCallback as useCallback3,
   useContext as useContext2,
@@ -1152,6 +1158,7 @@ var FlowMetaProvider = ({
   const [meta, setMeta] = useState3(null);
   const [isLoading, setIsLoading] = useState3(false);
   const [error, setError] = useState3(null);
+  const [pendingLanguage, setPendingLanguage] = useState3(null);
   const hasFetchedRef = useRef(false);
   const fetchFlowMeta = useCallback3(async () => {
     if (!enabled) {
@@ -1169,6 +1176,44 @@ var FlowMetaProvider = ({
       setIsLoading(false);
     }
   }, [enabled, baseUrl, applicationId]);
+  const switchLanguage = useCallback3(
+    async (language) => {
+      if (!enabled) return;
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = await getFlowMetaV2({
+          baseUrl,
+          id: applicationId,
+          language,
+          type: 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]
+  );
+  useEffect2(() => {
+    if (pendingLanguage && i18nContext?.setLanguage) {
+      i18nContext.setLanguage(pendingLanguage);
+      setPendingLanguage(null);
+    }
+  }, [pendingLanguage, i18nContext?.setLanguage]);
   useEffect2(() => {
     if (!hasFetchedRef.current) {
       hasFetchedRef.current = true;
@@ -1181,7 +1226,7 @@ var FlowMetaProvider = ({
     if (!meta?.i18n?.translations || !i18nContext?.injectBundles) {
       return;
     }
-    const metaLanguage = meta.i18n.language || "en";
+    const metaLanguage = meta.i18n.language || TranslationBundleConstants.FALLBACK_LOCALE;
     const flatTranslations = {};
     Object.entries(meta.i18n.translations).forEach(([namespace, keys]) => {
       Object.entries(keys).forEach(([key, value2]) => {
@@ -1202,7 +1247,8 @@ var FlowMetaProvider = ({
     error,
     fetchFlowMeta,
     isLoading,
-    meta
+    meta,
+    switchLanguage
   };
   return /* @__PURE__ */ jsx3(FlowMetaContext_default.Provider, { value, children });
 };
@@ -1210,37 +1256,83 @@ var FlowMetaProvider_default = FlowMetaProvider;
 
 // src/contexts/I18n/I18nProvider.tsx
 import { deepMerge, createPackageComponentLogger } from "@asgardeo/browser";
-import { getDefaultI18nBundles } from "@asgardeo/i18n";
+import {
+  TranslationBundleConstants as TranslationBundleConstants2,
+  getDefaultI18nBundles,
+  normalizeTranslations
+} from "@asgardeo/i18n";
 import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var logger = 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 || TranslationBundleConstants2.FALLBACK_LOCALE;
   }
-  return "en-US";
+  return TranslationBundleConstants2.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 = ({
@@ -1248,12 +1340,32 @@ var I18nProvider = ({
   preferences
 }) => {
   const defaultBundles = 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 = useMemo2(() => {
+    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 = useMemo2(
+    () => 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 || TranslationBundleConstants2.FALLBACK_LOCALE;
   };
   const [currentLanguage, setCurrentLanguage] = useState4(determineInitialLanguage);
   const [injectedBundles, setInjectedBundles] = useState4({});
@@ -1262,13 +1374,16 @@ var I18nProvider = ({
       setInjectedBundles((prev) => {
         const merged = { ...prev };
         Object.entries(newBundles).forEach(([key, bundle]) => {
+          const normalizedTranslations = normalizeTranslations(
+            bundle.translations
+          );
           if (merged[key]) {
             merged[key] = {
               ...merged[key],
-              translations: deepMerge(merged[key].translations, bundle.translations)
+              translations: deepMerge(merged[key].translations, normalizedTranslations)
             };
           } else {
-            merged[key] = bundle;
+            merged[key] = { ...bundle, translations: normalizedTranslations };
           }
         });
         return merged;
@@ -1283,34 +1398,40 @@ var I18nProvider = ({
       merged[languageKey] = bundle;
     });
     Object.entries(injectedBundles).forEach(([key, bundle]) => {
+      const normalizedTranslations = normalizeTranslations(
+        bundle.translations
+      );
       if (merged[key]) {
         merged[key] = {
           ...merged[key],
-          translations: deepMerge(merged[key].translations, bundle.translations)
+          translations: 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 = normalizeTranslations(
+          userBundle.translations
+        );
         if (merged[key]) {
           merged[key] = {
             ...merged[key],
             metadata: userBundle.metadata ? { ...merged[key].metadata, ...userBundle.metadata } : merged[key].metadata,
-            translations: deepMerge(merged[key].translations, userBundle.translations)
+            translations: 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 || TranslationBundleConstants2.FALLBACK_LOCALE;
   useEffect3(() => {
-    storeLanguage(currentLanguage);
-  }, [currentLanguage]);
+    storage.write(currentLanguage);
+  }, [currentLanguage, storage]);
   const t = useCallback4(
     (key, params) => {
       let translation;
@@ -2387,49 +2508,63 @@ var useTheme_default = useTheme;
 
 // src/hooks/useTranslation.ts
 import { deepMerge as deepMerge2 } from "@asgardeo/browser";
+import { normalizeTranslations as normalizeTranslations2 } from "@asgardeo/i18n";
 import { useContext as useContext10, useMemo as useMemo8 } from "react";
+
+// src/contexts/I18n/ComponentPreferencesContext.ts
+import { createContext as createContext9 } from "react";
+var ComponentPreferencesContext = createContext9(void 0);
+var ComponentPreferencesContext_default = ComponentPreferencesContext;
+
+// src/hooks/useTranslation.ts
 var useTranslation = (componentPreferences) => {
   const context = useContext10(I18nContext_default);
+  const componentPrefs = useContext10(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 = useMemo8(() => {
-    if (!componentPreferences?.bundles) {
+    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 = normalizeTranslations2(
+        componentBundle.translations
+      );
       if (merged[key]) {
         merged[key] = {
           ...merged[key],
           metadata: componentBundle.metadata ? { ...merged[key].metadata, ...componentBundle.metadata } : merged[key].metadata,
-          translations: deepMerge2(merged[key].translations, componentBundle.translations)
+          translations: deepMerge2(merged[key].translations, normalizedTranslations)
         };
       } else {
-        merged[key] = componentBundle;
+        merged[key] = { ...componentBundle, translations: normalizedTranslations };
       }
     });
     return merged;
-  }, [globalBundles, componentPreferences?.bundles]);
+  }, [globalBundles, effectivePreferences?.bundles]);
   const enhancedT = useMemo8(() => {
-    if (!componentPreferences?.bundles) {
+    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];
         }
       }
@@ -2444,7 +2579,7 @@ var useTranslation = (componentPreferences) => {
       }
       return translation;
     };
-  }, [mergedBundles, currentLanguage, fallbackLanguage, globalT, componentPreferences?.bundles]);
+  }, [mergedBundles, currentLanguage, fallbackLanguage, globalT, effectivePreferences?.bundles]);
   return {
     availableLanguages: Object.keys(mergedBundles),
     currentLanguage,
@@ -5804,7 +5939,7 @@ import { withVendorCSSClassPrefix as withVendorCSSClassPrefix15, bem as bem12 }
 import { cx as cx15 } from "@emotion/css";
 import {
   forwardRef as forwardRef8,
-  createContext as createContext9,
+  createContext as createContext10,
   useContext as useContext11
 } from "react";
 
@@ -5991,7 +6126,7 @@ var getDefaultIcon = (variant) => {
       return Info_default;
   }
 };
-var AlertVariantContext = createContext9("info");
+var AlertVariantContext = createContext10("info");
 var useAlertVariant = () => useContext11(AlertVariantContext);
 var Alert = forwardRef8(({ variant = "info", showIcon = true, children, className, style, ...rest }, ref) => {
   const { theme, colorScheme } = useTheme_default();
@@ -8298,13 +8433,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__ */ jsxs28("div", { children: [
+  const content = /* @__PURE__ */ jsxs28("div", { children: [
     showLogo && /* @__PURE__ */ jsx61("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx61(Logo_default, { size: "large" }) }),
     /* @__PURE__ */ jsx61(FlowProvider_default, { children: /* @__PURE__ */ jsx61(BaseSignInContent2, { showLogo, ...rest }) })
   ] });
+  if (!preferences) return content;
+  return /* @__PURE__ */ jsx61(ComponentPreferencesContext_default.Provider, { value: preferences, children: content });
 };
 var BaseSignIn_default2 = BaseSignIn2;
 
@@ -8610,6 +8747,7 @@ var handlePasskeyAuthentication = async (challengeData) => {
 import { Fragment as Fragment12, jsx as jsx63 } from "react/jsx-runtime";
 var SignIn = ({
   className,
+  preferences,
   size = "medium",
   onSuccess,
   onError,
@@ -8617,7 +8755,7 @@ var SignIn = ({
   children
 }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading, meta } = useAsgardeo_default();
-  const { t } = useTranslation_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const [components, setComponents] = useState17([]);
   const [currentFlowId, setCurrentFlowId] = useState17(null);
   const [isFlowInitialized, setIsFlowInitialized] = useState17(false);
@@ -8955,7 +9093,8 @@ var SignIn = ({
       error: flowError,
       className,
       size,
-      variant
+      variant,
+      preferences
     }
   );
 };
@@ -8963,7 +9102,7 @@ var SignIn_default = SignIn;
 
 // src/components/presentation/auth/SignIn/SignIn.tsx
 import { jsx as jsx64 } from "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);
@@ -8987,6 +9126,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
         variant: rest.variant,
         onSuccess: rest.onSuccess,
         onError: rest.onError,
+        preferences,
         children
       }
     );
@@ -9004,6 +9144,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       showLogo: true,
       showSubtitle: true,
       showTitle: true,
+      preferences,
       ...rest
     }
   );
@@ -10671,13 +10812,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__ */ jsxs30("div", { children: [
+  const content = /* @__PURE__ */ jsxs30("div", { children: [
     showLogo && /* @__PURE__ */ jsx72("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx72(Logo_default, { size: "large" }) }),
     /* @__PURE__ */ jsx72(FlowProvider_default, { children: /* @__PURE__ */ jsx72(BaseSignUpContent2, { showLogo, ...rest }) })
   ] });
+  if (!preferences) return content;
+  return /* @__PURE__ */ jsx72(ComponentPreferencesContext_default.Provider, { value: preferences, children: content });
 };
 var BaseSignUp_default2 = BaseSignUp2;
 
@@ -10884,13 +11027,14 @@ 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] = useState20(false);
@@ -11361,13 +11505,14 @@ 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] = useState21(false);
@@ -12291,12 +12436,12 @@ 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;
@@ -12378,7 +12523,7 @@ import {
 } from "@floating-ui/react";
 import {
   cloneElement as cloneElement2,
-  createContext as createContext10,
+  createContext as createContext11,
   forwardRef as forwardRef10,
   isValidElement,
   useContext as useContext12,
@@ -12581,7 +12726,7 @@ function useDialog({
     [open, setOpen, interactions, data, labelId, descriptionId]
   );
 }
-var DialogContext = createContext10(null);
+var DialogContext = createContext11(null);
 var useDialogContext = () => {
   const context = useContext12(DialogContext);
   if (context == null) {
@@ -13026,6 +13171,7 @@ var BaseUserProfile = ({
   open = false,
   error = null,
   isLoading = false,
+  preferences,
   showFields = [],
   hideFields = [],
   displayNameAttributes = []
@@ -13033,7 +13179,7 @@ var BaseUserProfile = ({
   const { theme, colorScheme } = useTheme_default();
   const [editedUser, setEditedUser] = useState24(flattenedProfile || profile);
   const [editingFields, setEditingFields] = useState24({});
-  const { t } = useTranslation_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const shouldShowField = useCallback17(
     (fieldName) => {
       if (fieldsToSkip.includes(fieldName)) {
@@ -13519,10 +13665,10 @@ var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 import { jsx as jsx93 } from "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 { t } = useTranslation_default(preferences?.i18n);
   const [error, setError] = useState25(null);
   const handleProfileUpdate = async (payload) => {
     setError(null);
@@ -13545,6 +13691,7 @@ var UserProfile3 = ({ ...rest }) => {
       schemas,
       onUpdate: handleProfileUpdate,
       error,
+      preferences,
       ...rest
     }
   );
@@ -14332,13 +14479,14 @@ 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] = useState28(false);
   const [hoveredItemIndex, setHoveredItemIndex] = useState28(null);
-  const { t } = useTranslation_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const isRTL = direction === "rtl";
   const { refs, floatingStyles, context } = useFloating3({
     middleware: [offset2(5), flip2({ fallbackAxisSideDirection: "end" }), shift2({ padding: 5 })],
@@ -14780,13 +14928,14 @@ 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 { t } = useTranslation_default(preferences?.i18n);
   const [formData, setFormData] = useState29({
     description: "",
     handle: "",
@@ -15318,11 +15467,12 @@ 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 { t } = useTranslation_default(preferences?.i18n);
   const organizationsWithSwitchAccess = useMemo39(() => {
     if (!allOrganizations?.organizations) {
       return [];
@@ -16396,10 +16546,11 @@ var OrganizationProfile = ({
   popupTitle,
   loadingFallback,
   errorFallback,
+  preferences,
   ...rest
 }) => {
   const { baseUrl, instanceId } = useAsgardeo_default();
-  const { t } = useTranslation_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const [organization, setOrganization] = useState34(null);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
@@ -16448,6 +16599,7 @@ var OrganizationProfile = ({
       open,
       onOpenChange,
       title: popupTitle || t("organization.profile.heading"),
+      preferences,
       ...rest
     }
   );
@@ -16461,6 +16613,7 @@ var OrganizationSwitcher = ({
   fallback = null,
   onOrganizationSwitch: propOnOrganizationSwitch,
   organizations: propOrganizations,
+  preferences,
   ...props
 }) => {
   const { isSignedIn } = useAsgardeo_default();
@@ -16474,7 +16627,7 @@ var OrganizationSwitcher = ({
   const [isCreateOrgOpen, setIsCreateOrgOpen] = useState35(false);
   const [isProfileOpen, setIsProfileOpen] = useState35(false);
   const [isOrganizationListOpen, setIsOrganizationListOpen] = useState35(false);
-  const { t } = useTranslation_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   if (!isSignedIn && fallback) {
     return fallback;
   }
@@ -16515,6 +16668,7 @@ var OrganizationSwitcher = ({
         error,
         menuItems,
         onManageProfile: handleManageOrganization,
+        preferences,
         ...props
       }
     ),
@@ -16563,6 +16717,266 @@ var OrganizationSwitcher = ({
 };
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
+// src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.tsx
+import { cx as cx36 } from "@emotion/css";
+import {
+  autoUpdate as autoUpdate3,
+  flip as flip3,
+  FloatingFocusManager as FloatingFocusManager4,
+  FloatingPortal as FloatingPortal4,
+  offset as offset3,
+  shift as shift3,
+  useClick as useClick4,
+  useDismiss as useDismiss4,
+  useFloating as useFloating4,
+  useInteractions as useInteractions4,
+  useRole as useRole4
+} from "@floating-ui/react";
+import { useState as useState36 } from "react";
+
+// src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.ts
+import { css as css32 } from "@emotion/css";
+import { useMemo as useMemo43 } from "react";
+var useStyles31 = (theme, colorScheme) => useMemo43(() => {
+  const root = css32`
+      display: inline-block;
+      position: relative;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+  const trigger = css32`
+      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 = css32`
+      font-size: 1rem;
+      line-height: 1;
+    `;
+  const triggerLabel = css32`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
+    `;
+  const content = css32`
+      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 = css32`
+      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 = css32`
+      font-weight: 600;
+      color: ${theme.vars.colors.primary?.main || theme.vars.colors.text.primary};
+    `;
+  const optionEmoji = css32`
+      font-size: 1rem;
+      line-height: 1;
+      flex-shrink: 0;
+    `;
+  const optionLabel = css32`
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+  const checkIcon = css32`
+      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
+import { Fragment as Fragment21, jsx as jsx109, jsxs as jsxs50 } from "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] = useState36(false);
+  const { refs, floatingStyles, context } = useFloating4({
+    middleware: [offset3(4), flip3(), shift3()],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    whileElementsMounted: autoUpdate3
+  });
+  const click = useClick4(context);
+  const dismiss = useDismiss4(context);
+  const role = useRole4(context, { role: "listbox" });
+  const { getReferenceProps, getFloatingProps } = useInteractions4([click, dismiss, role]);
+  const currentOption = languages.find((l) => l.code === currentLanguage);
+  if (children) {
+    return /* @__PURE__ */ jsx109(Fragment21, { children: children({
+      currentLanguage,
+      isLoading,
+      languages,
+      onLanguageChange
+    }) });
+  }
+  return /* @__PURE__ */ jsxs50("div", { className: cx36(styles["root"], className), children: [
+    /* @__PURE__ */ jsxs50(
+      "button",
+      {
+        ref: refs.setReference,
+        type: "button",
+        disabled: isLoading,
+        "aria-label": "Switch language",
+        ...getReferenceProps(),
+        className: styles["trigger"],
+        children: [
+          currentOption && /* @__PURE__ */ jsx109("span", { className: styles["triggerEmoji"], children: currentOption.emoji }),
+          /* @__PURE__ */ jsx109("span", { className: styles["triggerLabel"], children: currentOption?.displayName ?? currentLanguage }),
+          /* @__PURE__ */ jsx109(ChevronDown_default, {})
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx109(FloatingPortal4, { children: /* @__PURE__ */ jsx109(FloatingFocusManager4, { context, modal: false, children: /* @__PURE__ */ jsx109(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        className: styles["content"],
+        role: "listbox",
+        "aria-label": "Select language",
+        children: languages.map((lang) => /* @__PURE__ */ jsxs50(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": lang.code === currentLanguage,
+            className: cx36(styles["option"], lang.code === currentLanguage && styles["optionActive"]),
+            onClick: () => {
+              onLanguageChange(lang.code);
+              setIsOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx109("span", { className: styles["optionEmoji"], children: lang.emoji }),
+              /* @__PURE__ */ jsx109("span", { className: styles["optionLabel"], children: lang.displayName }),
+              lang.code === currentLanguage && /* @__PURE__ */ jsx109("span", { className: styles["checkIcon"], children: /* @__PURE__ */ jsx109(Check_default, {}) })
+            ]
+          },
+          lang.code
+        ))
+      }
+    ) }) })
+  ] });
+};
+var BaseLanguageSwitcher_default = BaseLanguageSwitcher;
+
+// src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx
+import { resolveLocaleDisplayName, resolveLocaleEmoji } from "@asgardeo/browser";
+import { useMemo as useMemo44 } from "react";
+
+// src/contexts/FlowMeta/useFlowMeta.ts
+import { useContext as useContext13 } from "react";
+var useFlowMeta = () => {
+  const context = useContext13(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
+import { jsx as jsx110 } from "react/jsx-runtime";
+var LanguageSwitcher = ({ children, className }) => {
+  const { meta, switchLanguage, isLoading } = useFlowMeta_default();
+  const { currentLanguage } = useTranslation_default();
+  const availableLanguageCodes = meta?.i18n?.languages ?? [];
+  const languages = useMemo44(
+    () => availableLanguageCodes.map((code) => ({
+      code,
+      displayName: resolveLocaleDisplayName(code, currentLanguage),
+      emoji: resolveLocaleEmoji(code)
+    })),
+    [availableLanguageCodes, currentLanguage]
+  );
+  const handleLanguageChange = (language) => {
+    if (language !== currentLanguage) {
+      switchLanguage(language);
+    }
+  };
+  return /* @__PURE__ */ jsx110(
+    BaseLanguageSwitcher_default,
+    {
+      currentLanguage,
+      isLoading,
+      languages,
+      onLanguageChange: handleLanguageChange,
+      className,
+      children
+    }
+  );
+};
+var LanguageSwitcher_default = LanguageSwitcher;
+
 // src/index.ts
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError9,
@@ -16585,6 +16999,7 @@ export {
   BaseAcceptInvite_default as BaseAcceptInvite,
   BaseCreateOrganization,
   BaseInviteUser_default as BaseInviteUser,
+  BaseLanguageSwitcher_default as BaseLanguageSwitcher,
   BaseOrganization_default as BaseOrganization,
   BaseOrganizationList_default as BaseOrganizationList,
   BaseOrganizationProfile_default as BaseOrganizationProfile,
@@ -16632,6 +17047,7 @@ export {
   InputLabel_default as InputLabel,
   InviteUser_default as InviteUser,
   KeyValueInput_default as KeyValueInput,
+  LanguageSwitcher_default as LanguageSwitcher,
   LinkedInButton_default as LinkedInButton,
   Loading_default as Loading,
   LogOut_default as LogOut,