@asgardeo/react 0.15.1 → 0.15.3

package/dist/cjs/index.js

@@ -66,6 +66,7 @@ __export(index_exports, {
   CreateOrganization: () => CreateOrganization,
   DatePicker: () => DatePicker_default,
   Divider: () => Divider_default,
+  EMOJI_URI_SCHEME: () => import_browser92.EMOJI_URI_SCHEME,
   EmailOtp: () => EmailOtp_default,
   EmbeddedFlowActionVariant: () => import_browser92.EmbeddedFlowActionVariantV2,
   EmbeddedFlowComponentType: () => import_browser92.EmbeddedFlowComponentTypeV2,
@@ -131,11 +132,13 @@ __export(index_exports, {
   UserProfile: () => UserProfile_default,
   UserProvider: () => UserProvider_default,
   UsernamePassword: () => UsernamePassword_default,
+  countryCodeToFlagEmoji: () => import_browser92.countryCodeToFlagEmoji,
   createField: () => createField,
   createOrganization: () => createOrganization_default,
   createPatchOperations: () => import_browser89.createPatchOperations,
   createSignInOption: () => createSignInOption,
   createSignInOptionFromAuthenticator: () => createSignInOptionFromAuthenticator,
+  extractEmojiFromUri: () => import_browser92.extractEmojiFromUri,
   getActiveTheme: () => import_browser92.getActiveTheme,
   getAllOrganizations: () => getAllOrganizations_default,
   getConsentOptionalKey: () => getConsentOptionalKey,
@@ -144,7 +147,13 @@ __export(index_exports, {
   getOrganization: () => getOrganization_default,
   getSchemas: () => getSchemas_default,
   http: () => import_browser92.http,
+  isEmojiUri: () => import_browser92.isEmojiUri,
   navigate: () => import_browser92.navigate,
+  resolveEmojiUrisInHtml: () => import_browser92.resolveEmojiUrisInHtml,
+  resolveFlowTemplateLiterals: () => import_browser92.resolveFlowTemplateLiterals,
+  resolveLocaleDisplayName: () => import_browser92.resolveLocaleDisplayName,
+  resolveLocaleEmoji: () => import_browser92.resolveLocaleEmoji,
+  resolveMeta: () => import_browser92.resolveMeta,
   updateMeProfile: () => updateMeProfile_default,
   updateOrganization: () => updateOrganization_default,
   useAsgardeo: () => useAsgardeo_default,
@@ -164,7 +173,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/contexts/Asgardeo/AsgardeoProvider.tsx
 var import_browser16 = require("@asgardeo/browser");
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/contexts/Asgardeo/AsgardeoContext.ts
 var import_react = require("react");
@@ -1227,7 +1236,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");
+var import_react10 = require("react");
 
 // src/contexts/FlowMeta/FlowMetaContext.ts
 var import_react6 = require("react");
@@ -1265,6 +1274,19 @@ var useAsgardeo = () => {
 };
 var useAsgardeo_default = useAsgardeo;
 
+// src/contexts/I18n/useI18n.ts
+var import_react9 = require("react");
+var useI18n = () => {
+  const context = (0, import_react9.useContext)(I18nContext_default);
+  if (!context) {
+    throw new Error(
+      "useI18n must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider."
+    );
+  }
+  return context;
+};
+var useI18n_default = useI18n;
+
 // src/contexts/FlowMeta/FlowMetaProvider.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var FlowMetaProvider = ({
@@ -1272,13 +1294,13 @@ var FlowMetaProvider = ({
   enabled = true
 }) => {
   const { baseUrl, applicationId } = useAsgardeo_default();
-  const i18nContext = (0, import_react9.useContext)(I18nContext_default);
-  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 () => {
+  const i18nContext = useI18n_default();
+  const [meta, setMeta] = (0, import_react10.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const [pendingLanguage, setPendingLanguage] = (0, import_react10.useState)(null);
+  const hasFetchedRef = (0, import_react10.useRef)(false);
+  const fetchFlowMeta = (0, import_react10.useCallback)(async () => {
     if (!enabled) {
       setMeta(null);
       return;
@@ -1286,15 +1308,20 @@ var FlowMetaProvider = ({
     setIsLoading(true);
     setError(null);
     try {
-      const result = await (0, import_browser10.getFlowMetaV2)({ baseUrl, id: applicationId, type: import_browser10.FlowMetaType.App });
+      const result = await (0, import_browser10.getFlowMetaV2)({
+        baseUrl,
+        id: applicationId,
+        language: i18nContext?.currentLanguage,
+        type: import_browser10.FlowMetaType.App
+      });
       setMeta(result);
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setIsLoading(false);
     }
-  }, [enabled, baseUrl, applicationId]);
-  const switchLanguage = (0, import_react9.useCallback)(
+  }, [enabled, baseUrl, applicationId, i18nContext?.currentLanguage]);
+  const switchLanguage = (0, import_react10.useCallback)(
     async (language) => {
       if (!enabled) return;
       setIsLoading(true);
@@ -1326,13 +1353,13 @@ var FlowMetaProvider = ({
     },
     [enabled, baseUrl, applicationId, i18nContext]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (pendingLanguage && i18nContext?.setLanguage) {
       i18nContext.setLanguage(pendingLanguage);
       setPendingLanguage(null);
     }
   }, [pendingLanguage, i18nContext?.setLanguage]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!hasFetchedRef.current) {
       hasFetchedRef.current = true;
       fetchFlowMeta();
@@ -1340,7 +1367,7 @@ var FlowMetaProvider = ({
     }
     fetchFlowMeta();
   }, [fetchFlowMeta]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!meta?.i18n?.translations || !i18nContext?.injectBundles) {
       return;
     }
@@ -1375,7 +1402,7 @@ var FlowMetaProvider_default = FlowMetaProvider;
 // src/contexts/I18n/I18nProvider.tsx
 var import_browser11 = require("@asgardeo/browser");
 var import_i18n2 = require("@asgardeo/i18n");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var logger = (0, import_browser11.createPackageComponentLogger)(
   "@asgardeo/react",
@@ -1457,12 +1484,12 @@ var I18nProvider = ({
   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)(() => {
+  const resolvedCookieDomain = (0, import_react11.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)(
+  const storage = (0, import_react11.useMemo)(
     () => createStorageAdapter(storageStrategy, storageKey, resolvedCookieDomain),
     [storageStrategy, storageKey, resolvedCookieDomain]
   );
@@ -1481,9 +1508,9 @@ var I18nProvider = ({
     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)({});
-  const injectBundles = (0, import_react10.useCallback)(
+  const [currentLanguage, setCurrentLanguage] = (0, import_react11.useState)(determineInitialLanguage);
+  const [injectedBundles, setInjectedBundles] = (0, import_react11.useState)({});
+  const injectBundles = (0, import_react11.useCallback)(
     (newBundles) => {
       setInjectedBundles((prev) => {
         const merged = { ...prev };
@@ -1505,7 +1532,7 @@ var I18nProvider = ({
     },
     []
   );
-  const mergedBundles = (0, import_react10.useMemo)(() => {
+  const mergedBundles = (0, import_react11.useMemo)(() => {
     const merged = {};
     Object.entries(defaultBundles).forEach(([key, bundle]) => {
       const languageKey = key.replace("_", "-");
@@ -1543,10 +1570,10 @@ var I18nProvider = ({
     return merged;
   }, [defaultBundles, injectedBundles, preferences?.bundles]);
   const fallbackLanguage = preferences?.fallbackLanguage || import_i18n2.TranslationBundleConstants.FALLBACK_LOCALE;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     storage.write(currentLanguage);
   }, [currentLanguage, storage]);
-  const t = (0, import_react10.useCallback)(
+  const t = (0, import_react11.useCallback)(
     (key, params) => {
       let translation;
       const currentBundle = mergedBundles[currentLanguage];
@@ -1572,7 +1599,7 @@ var I18nProvider = ({
     },
     [mergedBundles, currentLanguage, fallbackLanguage]
   );
-  const setLanguage = (0, import_react10.useCallback)(
+  const setLanguage = (0, import_react11.useCallback)(
     (language) => {
       if (mergedBundles[language]) {
         setCurrentLanguage(language);
@@ -1584,7 +1611,7 @@ var I18nProvider = ({
     },
     [mergedBundles]
   );
-  const contextValue = (0, import_react10.useMemo)(
+  const contextValue = (0, import_react11.useMemo)(
     () => ({
       bundles: mergedBundles,
       currentLanguage,
@@ -1601,11 +1628,11 @@ var I18nProvider_default = I18nProvider;
 
 // src/contexts/Organization/OrganizationProvider.tsx
 var import_browser12 = require("@asgardeo/browser");
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/contexts/Organization/OrganizationContext.ts
-var import_react11 = require("react");
-var OrganizationContext = (0, import_react11.createContext)({
+var import_react12 = require("react");
+var OrganizationContext = (0, import_react12.createContext)({
   createOrganization: () => null,
   currentOrganization: null,
   error: null,
@@ -1633,9 +1660,9 @@ var OrganizationProvider = ({
   getAllOrganizations: getAllOrganizations2,
   createOrganization: createOrganization2
 }) => {
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const switchOrganization = (0, import_react12.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const switchOrganization = (0, import_react13.useCallback)(
     async (organization) => {
       if (!onOrganizationSwitch) {
         throw new import_browser12.AsgardeoRuntimeError(
@@ -1662,7 +1689,7 @@ var OrganizationProvider = ({
     },
     [onOrganizationSwitch, onError]
   );
-  const contextValue = (0, import_react12.useMemo)(
+  const contextValue = (0, import_react13.useMemo)(
     () => ({
       createOrganization: createOrganization2,
       currentOrganization,
@@ -1693,7 +1720,7 @@ var import_browser15 = require("@asgardeo/browser");
 
 // src/contexts/Theme/v1/ThemeProvider.tsx
 var import_browser13 = require("@asgardeo/browser");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/utils/applyThemeToDOM.ts
 var applyThemeToDOM = (theme) => {
@@ -1726,9 +1753,9 @@ var normalizeThemeConfig = (config) => {
 var normalizeThemeConfig_default = normalizeThemeConfig;
 
 // src/contexts/Branding/useBrandingContext.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var useBrandingContext = () => {
-  const context = (0, import_react13.useContext)(BrandingContext_default);
+  const context = (0, import_react14.useContext)(BrandingContext_default);
   if (!context) {
     throw new Error("useBrandingContext must be used within a BrandingProvider");
   }
@@ -1737,8 +1764,8 @@ var useBrandingContext = () => {
 var useBrandingContext_default = useBrandingContext;
 
 // src/contexts/Theme/ThemeContext.ts
-var import_react14 = require("react");
-var ThemeContext = (0, import_react14.createContext)(null);
+var import_react15 = require("react");
+var ThemeContext = (0, import_react15.createContext)(null);
 ThemeContext.displayName = "ThemeContext";
 var ThemeContext_default = ThemeContext;
 
@@ -1756,7 +1783,7 @@ var ThemeProvider = ({
   inheritFromBranding = true
 }) => {
   const themeConfig = normalizeThemeConfig_default(themeConfigProp);
-  const [colorScheme, setColorScheme] = (0, import_react15.useState)(() => {
+  const [colorScheme, setColorScheme] = (0, import_react16.useState)(() => {
     if (mode === "light" || mode === "dark") {
       return mode;
     }
@@ -1782,7 +1809,7 @@ var ThemeProvider = ({
       );
     }
   }
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (inheritFromBranding && brandingActiveTheme) {
       if (mode === "branding") {
         setColorScheme(brandingActiveTheme);
@@ -1791,7 +1818,7 @@ var ThemeProvider = ({
       }
     }
   }, [inheritFromBranding, brandingActiveTheme, mode, isBrandingLoading]);
-  const finalThemeConfig = (0, import_react15.useMemo)(() => {
+  const finalThemeConfig = (0, import_react16.useMemo)(() => {
     if (!inheritFromBranding || !brandingTheme) {
       return themeConfig;
     }
@@ -1832,18 +1859,18 @@ var ThemeProvider = ({
       }
     };
   }, [inheritFromBranding, brandingTheme, themeConfig]);
-  const theme = (0, import_react15.useMemo)(
+  const theme = (0, import_react16.useMemo)(
     () => (0, import_browser13.createTheme)(finalThemeConfig, colorScheme === "dark"),
     [finalThemeConfig, colorScheme]
   );
   const direction = finalThemeConfig?.direction || "ltr";
-  const handleThemeChange = (0, import_react15.useCallback)((isDark) => {
+  const handleThemeChange = (0, import_react16.useCallback)((isDark) => {
     setColorScheme(isDark ? "dark" : "light");
   }, []);
-  const toggleTheme = (0, import_react15.useCallback)(() => {
+  const toggleTheme = (0, import_react16.useCallback)(() => {
     setColorScheme((prev) => prev === "light" ? "dark" : "light");
   }, []);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     let observer = null;
     let mediaQuery = null;
     if (mode === "branding") {
@@ -1872,10 +1899,10 @@ var ThemeProvider = ({
       }
     };
   }, [mode, detection, handleThemeChange, inheritFromBranding, brandingActiveTheme]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     applyThemeToDOM_default(theme);
   }, [theme]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (typeof document !== "undefined") {
       document.documentElement.dir = direction;
     }
@@ -1895,7 +1922,7 @@ var ThemeProvider_default = ThemeProvider;
 
 // src/contexts/Theme/v2/ThemeProvider.tsx
 var import_browser14 = require("@asgardeo/browser");
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/utils/v2/buildThemeConfigFromFlowMeta.ts
 var buildThemeConfigFromFlowMeta = (flowMetaTheme, colorScheme) => {
@@ -1949,22 +1976,22 @@ var ThemeProvider2 = ({
   theme: themeOverrideProp
 }) => {
   const themeOverride = normalizeThemeConfig_default(themeOverrideProp);
-  const flowMetaContext = (0, import_react16.useContext)(FlowMetaContext_default);
+  const flowMetaContext = (0, import_react17.useContext)(FlowMetaContext_default);
   const flowMetaTheme = flowMetaContext?.meta?.design?.theme ?? null;
   const isLoading = flowMetaContext?.isLoading ?? false;
   const error = flowMetaContext?.error ?? null;
-  const [colorScheme, setColorScheme] = (0, import_react16.useState)(
+  const [colorScheme, setColorScheme] = (0, import_react17.useState)(
     () => flowMetaTheme?.defaultColorScheme ?? "light"
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (flowMetaTheme?.defaultColorScheme) {
       setColorScheme(flowMetaTheme.defaultColorScheme);
     }
   }, [flowMetaTheme?.defaultColorScheme]);
-  const toggleTheme = (0, import_react16.useCallback)(() => {
+  const toggleTheme = (0, import_react17.useCallback)(() => {
     setColorScheme((prev) => prev === "light" ? "dark" : "light");
   }, []);
-  const finalThemeConfig = (0, import_react16.useMemo)(() => {
+  const finalThemeConfig = (0, import_react17.useMemo)(() => {
     if (!flowMetaTheme) {
       return themeOverride;
     }
@@ -1991,15 +2018,15 @@ var ThemeProvider2 = ({
       } : {}
     };
   }, [flowMetaTheme, colorScheme, themeOverride]);
-  const theme = (0, import_react16.useMemo)(
+  const theme = (0, import_react17.useMemo)(
     () => (0, import_browser14.createTheme)(finalThemeConfig, colorScheme === "dark"),
     [finalThemeConfig, colorScheme]
   );
   const direction = flowMetaTheme?.direction ?? "ltr";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     applyThemeToDOM_default(theme);
   }, [theme]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (typeof document !== "undefined") {
       document.documentElement.dir = direction;
     }
@@ -2036,11 +2063,11 @@ var ThemeProvider3 = ({
 var ThemeProvider_default3 = ThemeProvider3;
 
 // src/contexts/User/UserProvider.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/contexts/User/UserContext.ts
-var import_react17 = require("react");
-var UserContext = (0, import_react17.createContext)({
+var import_react18 = require("react");
+var UserContext = (0, import_react18.createContext)({
   flattenedProfile: null,
   onUpdateProfile: () => null,
   profile: null,
@@ -2060,7 +2087,7 @@ var UserProvider = ({
   onUpdateProfile,
   updateProfile
 }) => {
-  const contextValue = (0, import_react18.useMemo)(
+  const contextValue = (0, import_react19.useMemo)(
     () => ({
       flattenedProfile: profile?.flattenedProfile,
       onUpdateProfile,
@@ -2095,18 +2122,18 @@ var AsgardeoProvider = ({
   organizationChain,
   ...rest
 }) => {
-  const reRenderCheckRef = (0, import_react19.useRef)(false);
-  const asgardeo = (0, import_react19.useMemo)(() => new AsgardeoReactClient_default(instanceId), [instanceId]);
+  const reRenderCheckRef = (0, import_react20.useRef)(false);
+  const asgardeo = (0, import_react20.useMemo)(() => new AsgardeoReactClient_default(instanceId), [instanceId]);
   const { hasAuthParams, hasCalledForThisInstance } = useBrowserUrl_default();
-  const [user, setUser] = (0, import_react19.useState)(null);
-  const [currentOrganization, setCurrentOrganization] = (0, import_react19.useState)(null);
-  const [isSignedInSync, setIsSignedInSync] = (0, import_react19.useState)(false);
-  const [isInitializedSync, setIsInitializedSync] = (0, import_react19.useState)(false);
-  const [isLoadingSync, setIsLoadingSync] = (0, import_react19.useState)(true);
-  const [myOrganizations, setMyOrganizations] = (0, import_react19.useState)([]);
-  const [userProfile, setUserProfile] = (0, import_react19.useState)(null);
-  const [baseUrl, setBaseUrl] = (0, import_react19.useState)(initialBaseUrl);
-  const [config, setConfig] = (0, import_react19.useState)({
+  const [user, setUser] = (0, import_react20.useState)(null);
+  const [currentOrganization, setCurrentOrganization] = (0, import_react20.useState)(null);
+  const [isSignedInSync, setIsSignedInSync] = (0, import_react20.useState)(false);
+  const [isInitializedSync, setIsInitializedSync] = (0, import_react20.useState)(false);
+  const [isLoadingSync, setIsLoadingSync] = (0, import_react20.useState)(true);
+  const [myOrganizations, setMyOrganizations] = (0, import_react20.useState)([]);
+  const [userProfile, setUserProfile] = (0, import_react20.useState)(null);
+  const [baseUrl, setBaseUrl] = (0, import_react20.useState)(initialBaseUrl);
+  const [config, setConfig] = (0, import_react20.useState)({
     afterSignInUrl,
     afterSignOutUrl,
     applicationId,
@@ -2121,12 +2148,12 @@ var AsgardeoProvider = ({
     syncSession,
     ...rest
   });
-  const [isUpdatingSession, setIsUpdatingSession] = (0, import_react19.useState)(false);
-  const [brandingPreference, setBrandingPreference] = (0, import_react19.useState)(null);
-  const [isBrandingLoading, setIsBrandingLoading] = (0, import_react19.useState)(false);
-  const [brandingError, setBrandingError] = (0, import_react19.useState)(null);
-  const [hasFetchedBranding, setHasFetchedBranding] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+  const [isUpdatingSession, setIsUpdatingSession] = (0, import_react20.useState)(false);
+  const [brandingPreference, setBrandingPreference] = (0, import_react20.useState)(null);
+  const [isBrandingLoading, setIsBrandingLoading] = (0, import_react20.useState)(false);
+  const [brandingError, setBrandingError] = (0, import_react20.useState)(null);
+  const [hasFetchedBranding, setHasFetchedBranding] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     setBaseUrl(initialBaseUrl);
     if (initialBaseUrl !== baseUrl) {
       setHasFetchedBranding(false);
@@ -2134,7 +2161,7 @@ var AsgardeoProvider = ({
       setBrandingError(null);
     }
   }, [initialBaseUrl, baseUrl]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     (async () => {
       await asgardeo.initialize(config);
       const initializedConfig = await asgardeo.getConfiguration();
@@ -2225,7 +2252,7 @@ var AsgardeoProvider = ({
       }
     }
   }
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (reRenderCheckRef.current) {
       return;
     }
@@ -2269,7 +2296,7 @@ var AsgardeoProvider = ({
       }
     })();
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     let interval;
     (async () => {
       try {
@@ -2295,7 +2322,7 @@ var AsgardeoProvider = ({
       }
     };
   }, [asgardeo]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     (async () => {
       try {
         const status = await asgardeo.isInitialized();
@@ -2305,7 +2332,7 @@ var AsgardeoProvider = ({
       }
     })();
   }, [asgardeo]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const checkLoadingState = () => {
       if (isUpdatingSession) {
         return;
@@ -2322,7 +2349,7 @@ var AsgardeoProvider = ({
       clearInterval(interval);
     };
   }, [asgardeo, isLoadingSync, isSignedInSync, isUpdatingSession]);
-  const fetchBranding = (0, import_react19.useCallback)(async () => {
+  const fetchBranding = (0, import_react20.useCallback)(async () => {
     if (!baseUrl) {
       return;
     }
@@ -2349,11 +2376,11 @@ var AsgardeoProvider = ({
       setIsBrandingLoading(false);
     }
   }, [baseUrl, preferences?.i18n?.language]);
-  const refetchBranding = (0, import_react19.useCallback)(async () => {
+  const refetchBranding = (0, import_react20.useCallback)(async () => {
     setHasFetchedBranding(false);
     await fetchBranding();
   }, [fetchBranding]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (config.platform === import_browser16.Platform.AsgardeoV2) {
       return;
     }
@@ -2419,44 +2446,44 @@ var AsgardeoProvider = ({
       profile: payload
     }));
   };
-  const getDecodedIdToken = (0, import_react19.useCallback)(
+  const getDecodedIdToken = (0, import_react20.useCallback)(
     async () => asgardeo.getDecodedIdToken(),
     [asgardeo]
   );
-  const getIdToken = (0, import_react19.useCallback)(async () => asgardeo.getIdToken(), [asgardeo]);
-  const getAccessToken = (0, import_react19.useCallback)(
+  const getIdToken = (0, import_react20.useCallback)(async () => asgardeo.getIdToken(), [asgardeo]);
+  const getAccessToken = (0, import_react20.useCallback)(
     async () => asgardeo.getAccessToken(),
     [asgardeo]
   );
-  const request = (0, import_react19.useCallback)(
+  const request = (0, import_react20.useCallback)(
     async (...args) => asgardeo.request(...args),
     [asgardeo]
   );
-  const requestAll = (0, import_react19.useCallback)(
+  const requestAll = (0, import_react20.useCallback)(
     async (...args) => asgardeo.requestAll(...args),
     [asgardeo]
   );
-  const exchangeToken = (0, import_react19.useCallback)(
+  const exchangeToken = (0, import_react20.useCallback)(
     async (exchangeConfig) => asgardeo.exchangeToken(exchangeConfig),
     [asgardeo]
   );
-  const signOut = (0, import_react19.useCallback)(
+  const signOut = (0, import_react20.useCallback)(
     async (...args) => asgardeo.signOut(...args),
     [asgardeo]
   );
-  const signUp = (0, import_react19.useCallback)(
+  const signUp = (0, import_react20.useCallback)(
     async (...args) => asgardeo.signUp(...args),
     [asgardeo]
   );
-  const clearSession = (0, import_react19.useCallback)(
+  const clearSession = (0, import_react20.useCallback)(
     async (...args) => asgardeo.clearSession(...args),
     [asgardeo]
   );
-  const reInitialize = (0, import_react19.useCallback)(
+  const reInitialize = (0, import_react20.useCallback)(
     async (reInitConfig) => asgardeo.reInitialize(reInitConfig),
     [asgardeo]
   );
-  const value = (0, import_react19.useMemo)(
+  const value = (0, import_react20.useMemo)(
     () => ({
       afterSignInUrl,
       applicationId,
@@ -2559,9 +2586,9 @@ var AsgardeoProvider = ({
 var AsgardeoProvider_default = AsgardeoProvider;
 
 // src/contexts/User/useUser.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var useUser = () => {
-  const context = (0, import_react20.useContext)(UserContext_default);
+  const context = (0, import_react21.useContext)(UserContext_default);
   if (!context) {
     throw new Error("useUser must be used within a UserProvider");
   }
@@ -2570,9 +2597,9 @@ var useUser = () => {
 var useUser_default = useUser;
 
 // src/contexts/Organization/useOrganization.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 var useOrganization = () => {
-  const context = (0, import_react21.useContext)(OrganizationContext_default);
+  const context = (0, import_react22.useContext)(OrganizationContext_default);
   if (!context) {
     throw new Error("useOrganization must be used within an OrganizationProvider");
   }
@@ -2581,9 +2608,9 @@ var useOrganization = () => {
 var useOrganization_default = useOrganization;
 
 // src/contexts/Flow/useFlow.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 var useFlow = () => {
-  const context = (0, import_react22.useContext)(FlowContext_default);
+  const context = (0, import_react23.useContext)(FlowContext_default);
   if (!context) {
     throw new Error("useFlow must be used within a FlowProvider");
   }
@@ -2591,19 +2618,6 @@ var useFlow = () => {
 };
 var useFlow_default = useFlow;
 
-// src/contexts/I18n/useI18n.ts
-var import_react23 = require("react");
-var useI18n = () => {
-  const context = (0, import_react23.useContext)(I18nContext_default);
-  if (!context) {
-    throw new Error(
-      "useI18n must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider."
-    );
-  }
-  return context;
-};
-var useI18n_default = useI18n;
-
 // src/contexts/Theme/useTheme.ts
 var import_react24 = require("react");
 var useTheme = () => {
@@ -3859,7 +3873,6 @@ var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, has
   const formControl = import_css9.css`
       text-align: start;
       font-family: ${theme.vars.typography.fontFamily};
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
   const helperText = import_css9.css`
       margin-top: calc(${theme.vars.spacing.unit} / 2);
@@ -8171,24 +8184,6 @@ var logger5 = (0, import_browser51.createPackageComponentLogger)(
   "@asgardeo/react",
   "AuthOptionFactory"
 );
-var resolveEmojiUrisInHtml = (html) => {
-  const withEmojiImages = html.replace(
-    /<img([^>]*)src="(emoji:[^"]+)"([^>]*)\/?>/gi,
-    (_match, pre, src, post) => {
-      const emoji = (0, import_browser51.extractEmojiFromUri)(src);
-      if (!emoji) {
-        return _match;
-      }
-      const altMatch = (pre + post).match(/alt="([^"]*)"/i);
-      const label = altMatch ? altMatch[1] : emoji;
-      return `<span role="img" aria-label="${label}">${emoji}</span>`;
-    }
-  );
-  return withEmojiImages.replace(
-    /emoji:([^\s"<>&]+)/g,
-    (_, rest) => (0, import_browser51.isEmojiUri)(`emoji:${rest}`) ? rest : `emoji:${rest}`
-  );
-};
 var richTextClass = import_css36.css`
   overflow-wrap: anywhere;
   & * {
@@ -8256,6 +8251,7 @@ var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType
   return providerMatches;
 };
 var createAuthComponentFromFlow = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, options = {}) => {
+  const { theme } = useTheme_default();
   const key = options.key || component.id;
   const resolve = (text) => {
     if (!text || !options.t && !options.meta) {
@@ -8425,6 +8421,11 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     }
     case import_browser51.EmbeddedFlowComponentTypeV2.Block: {
       if (component.components && component.components.length > 0) {
+        const formStyles = {
+          display: "flex",
+          flexDirection: "column",
+          gap: `calc(${theme.vars.spacing.unit} * 2)`
+        };
         const blockComponents = component.components.map(
           (childComponent, index) => createAuthComponentFromFlow(
             childComponent,
@@ -8441,7 +8442,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
             }
           )
         ).filter(Boolean);
-        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("form", { id: component.id, children: blockComponents }, key);
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("form", { id: component.id, style: formStyles, children: blockComponents }, key);
       }
       return null;
     }
@@ -8450,7 +8451,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
         "div",
         {
           className: richTextClass,
-          dangerouslySetInnerHTML: { __html: import_dompurify.default.sanitize(resolveEmojiUrisInHtml(resolve(component.label))) }
+          dangerouslySetInnerHTML: { __html: import_dompurify.default.sanitize((0, import_browser51.resolveEmojiUrisInHtml)(resolve(component.label))) }
         },
         key
       );
@@ -12137,6 +12138,7 @@ var BaseAcceptInvite = ({
       delete newErrors[name];
       return newErrors;
     });
+    setIsFormValid(true);
   }, []);
   const handleInputBlur = (0, import_react73.useCallback)((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
@@ -12149,7 +12151,7 @@ var BaseAcceptInvite = ({
           if ((comp.type === "PASSWORD_INPUT" || comp.type === "TEXT_INPUT" || comp.type === "EMAIL_INPUT") && comp.required && comp.ref) {
             const value = formValues[comp.ref];
             if (!value || value.trim() === "") {
-              errors[comp.ref] = `${comp.label || comp.ref} is required`;
+              errors[comp.ref] = t("validations.required.field.error");
             }
           }
           if (comp.components && Array.isArray(comp.components)) {
@@ -12160,7 +12162,7 @@ var BaseAcceptInvite = ({
       validateComponents(components2);
       return { errors, isValid: Object.keys(errors).length === 0 };
     },
-    [formValues]
+    [formValues, t]
   );
   const handleSubmit = (0, import_react73.useCallback)(
     async (component, data) => {
@@ -12170,8 +12172,8 @@ var BaseAcceptInvite = ({
       const components2 = currentFlow.data?.components || [];
       const validation = validateForm(components2);
       if (!validation.isValid) {
-        setFormErrors(validation.errors);
         setIsFormValid(false);
+        setFormErrors(validation.errors);
         const touched = {};
         Object.keys(validation.errors).forEach((key) => {
           touched[key] = true;
@@ -12181,7 +12183,6 @@ var BaseAcceptInvite = ({
       }
       setIsLoading(true);
       setApiError(null);
-      setIsFormValid(true);
       try {
         const inputs = data || formValues;
         const payload = {
@@ -12221,7 +12222,6 @@ var BaseAcceptInvite = ({
           return;
         }
         setCurrentFlow(response);
-        setFormValues({});
         setFormErrors({});
         setTouchedFields({});
       } catch (err) {
@@ -12303,35 +12303,6 @@ var BaseAcceptInvite = ({
     ),
     []
   );
-  const renderComponents = (0, import_react73.useCallback)(
-    (components2) => renderInviteUserComponents(
-      components2,
-      formValues,
-      touchedFields,
-      formErrors,
-      isLoading,
-      isFormValid,
-      handleInputChange,
-      {
-        onInputBlur: handleInputBlur,
-        onSubmit: handleSubmit,
-        size,
-        variant
-      }
-    ),
-    [
-      formValues,
-      touchedFields,
-      formErrors,
-      isLoading,
-      isFormValid,
-      handleInputChange,
-      handleInputBlur,
-      handleSubmit,
-      size,
-      variant
-    ]
-  );
   const components = currentFlow?.data?.components || currentFlow?.data?.meta?.components || [];
   const { title, subtitle } = extractHeadings(components);
   const componentsWithoutHeadings = filterHeadings(components);
@@ -12395,7 +12366,21 @@ var BaseAcceptInvite = ({
     /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Card_default.Content, { children: [
       apiError && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Alert_default, { variant: "error", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Alert_default.Description, { children: apiError.message }) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { children: [
-        componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderComponents(componentsWithoutHeadings) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Typography_default, { variant: "body1", children: "No form components available" }) }),
+        componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderInviteUserComponents(
+          componentsWithoutHeadings,
+          formValues,
+          touchedFields,
+          formErrors,
+          isLoading,
+          isFormValid,
+          handleInputChange,
+          {
+            onInputBlur: handleInputBlur,
+            onSubmit: handleSubmit,
+            size,
+            variant
+          }
+        ) : !isLoading && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Typography_default, { variant: "body1", children: "No form components available" }) }),
         isLoading && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Spinner_default, { size: "small" }) })
       ] }),
       onGoToSignIn && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { style: { marginTop: "1.5rem", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(Typography_default, { variant: "body2", children: [
@@ -17422,10 +17407,10 @@ var LanguageSwitcher = ({ children, className }) => {
   const { meta, switchLanguage, isLoading } = useFlowMeta_default();
   const { currentLanguage } = useTranslation_default();
   const availableLanguageCodes = meta?.i18n?.languages ?? [];
-  const effectiveLanguageCodes = (0, import_react110.useMemo)(() => {
-    const fallbackCodes = availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage];
-    return Array.from(/* @__PURE__ */ new Set([currentLanguage, ...fallbackCodes]));
-  }, [availableLanguageCodes, currentLanguage]);
+  const effectiveLanguageCodes = (0, import_react110.useMemo)(
+    () => availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage],
+    [availableLanguageCodes, currentLanguage]
+  );
   const languages = (0, import_react110.useMemo)(
     () => effectiveLanguageCodes.map((code) => ({
       code,
@@ -17435,6 +17420,11 @@ var LanguageSwitcher = ({ children, className }) => {
     })),
     [effectiveLanguageCodes]
   );
+  (0, import_react110.useEffect)(() => {
+    if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) {
+      switchLanguage(availableLanguageCodes[0]);
+    }
+  }, [availableLanguageCodes, currentLanguage, switchLanguage]);
   const handleLanguageChange = (language) => {
     if (language !== currentLanguage) {
       switchLanguage(language);