@thunderid/react 0.1.0 → 0.3.0

package/dist/contexts/Branding/BrandingProvider.js

@@ -0,0 +1,92 @@
+import BrandingContext_default from "./BrandingContext.js";
+import { transformBrandingPreferenceToTheme } from "@thunderid/browser";
+import { useCallback, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/contexts/Branding/BrandingProvider.tsx
+/**
+* BrandingProvider component that manages branding state and provides branding context to child components.
+*
+* This provider receives branding preferences from a parent component (typically ThunderIDProvider)
+* and transforms them into theme objects, making them available to all child components.
+*
+* Features:
+* - Receives branding preferences as props
+* - Theme transformation from branding preferences
+* - Loading and error states
+* - Support for custom theme forcing
+*
+* @example
+* Basic usage (typically used within ThunderIDProvider):
+* ```tsx
+* <BrandingProvider
+*   brandingPreference={brandingData}
+*   isLoading={isFetching}
+*   error={fetchError}
+* >
+*   <App />
+* </BrandingProvider>
+* ```
+*
+* @example
+* With custom theme forcing:
+* ```tsx
+* <BrandingProvider
+*   brandingPreference={brandingData}
+*   forceTheme="dark"
+*   enabled={true}
+* >
+*   <App />
+* </BrandingProvider>
+* ```
+*/
+const BrandingProvider = ({ children, brandingPreference: externalBrandingPreference, forceTheme, enabled = true, isLoading: externalIsLoading = false, error: externalError = null, refetch: externalRefetch }) => {
+	const [theme, setTheme] = useState(null);
+	const [activeTheme, setActiveTheme] = useState(null);
+	useEffect(() => {
+		if (!enabled || !externalBrandingPreference) {
+			setTheme(null);
+			setActiveTheme(null);
+			return;
+		}
+		const activeThemeFromBranding = externalBrandingPreference?.preference?.theme?.activeTheme;
+		let extractedActiveTheme = null;
+		if (activeThemeFromBranding) {
+			const themeMode = activeThemeFromBranding.toLowerCase();
+			if (themeMode === "light" || themeMode === "dark") extractedActiveTheme = themeMode;
+		}
+		setActiveTheme(extractedActiveTheme);
+		setTheme(transformBrandingPreferenceToTheme(externalBrandingPreference, forceTheme));
+	}, [
+		externalBrandingPreference,
+		forceTheme,
+		enabled
+	]);
+	useEffect(() => {
+		if (!enabled) {
+			setTheme(null);
+			setActiveTheme(null);
+		}
+	}, [enabled]);
+	const fetchBranding = useCallback(async () => {
+		if (externalRefetch) await externalRefetch();
+	}, [externalRefetch]);
+	const value = {
+		activeTheme,
+		brandingPreference: externalBrandingPreference || null,
+		error: externalError,
+		fetchBranding,
+		isLoading: externalIsLoading,
+		refetch: externalRefetch || fetchBranding,
+		theme
+	};
+	return /* @__PURE__ */ jsx(BrandingContext_default.Provider, {
+		value,
+		children
+	});
+};
+var BrandingProvider_default = BrandingProvider;
+
+//#endregion
+export { BrandingProvider_default as default };
+//# sourceMappingURL=BrandingProvider.js.map

package/dist/contexts/Branding/BrandingProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingProvider.js","names":["BrandingProvider: FC<PropsWithChildren<BrandingProviderProps>>","activeThemeFromBranding: string | undefined","extractedActiveTheme: 'light' | 'dark' | null","themeMode: string","fetchBranding: () => Promise<void>","value: any","BrandingContext"],"sources":["../../../src/contexts/Branding/BrandingProvider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {BrandingPreference, Theme, transformBrandingPreferenceToTheme} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, useCallback, useEffect, useState} from 'react';\nimport BrandingContext from './BrandingContext';\n\n/**\n * Configuration options for the BrandingProvider\n */\nexport interface BrandingProviderProps {\n  /**\n   * The branding preference data passed from parent (typically ThunderIDProvider)\n   */\n  brandingPreference?: BrandingPreference | null;\n  /**\n   * Whether the branding provider is enabled\n   * @default true\n   */\n  enabled?: boolean;\n  /**\n   * Error state passed from parent\n   */\n  error?: Error | null;\n  /**\n   * Force a specific theme ('light' or 'dark')\n   * If not provided, will use the activeTheme from branding preference\n   */\n  forceTheme?: 'light' | 'dark';\n  /**\n   * Loading state passed from parent\n   */\n  isLoading?: boolean;\n  /**\n   * Function to refetch branding preference passed from parent\n   */\n  refetch?: () => Promise<void>;\n}\n\n/**\n * BrandingProvider component that manages branding state and provides branding context to child components.\n *\n * This provider receives branding preferences from a parent component (typically ThunderIDProvider)\n * and transforms them into theme objects, making them available to all child components.\n *\n * Features:\n * - Receives branding preferences as props\n * - Theme transformation from branding preferences\n * - Loading and error states\n * - Support for custom theme forcing\n *\n * @example\n * Basic usage (typically used within ThunderIDProvider):\n * ```tsx\n * <BrandingProvider\n *   brandingPreference={brandingData}\n *   isLoading={isFetching}\n *   error={fetchError}\n * >\n *   <App />\n * </BrandingProvider>\n * ```\n *\n * @example\n * With custom theme forcing:\n * ```tsx\n * <BrandingProvider\n *   brandingPreference={brandingData}\n *   forceTheme=\"dark\"\n *   enabled={true}\n * >\n *   <App />\n * </BrandingProvider>\n * ```\n */\nconst BrandingProvider: FC<PropsWithChildren<BrandingProviderProps>> = ({\n  children,\n  brandingPreference: externalBrandingPreference,\n  forceTheme,\n  enabled = true,\n  isLoading: externalIsLoading = false,\n  error: externalError = null,\n  refetch: externalRefetch,\n}: PropsWithChildren<BrandingProviderProps>): ReactElement => {\n  const [theme, setTheme] = useState<Theme | null>(null);\n  const [activeTheme, setActiveTheme] = useState<'light' | 'dark' | null>(null);\n\n  // Process branding preference when it changes\n  useEffect(() => {\n    if (!enabled || !externalBrandingPreference) {\n      setTheme(null);\n      setActiveTheme(null);\n      return;\n    }\n\n    // Extract active theme from branding preference\n    const activeThemeFromBranding: string | undefined = externalBrandingPreference?.preference?.theme?.activeTheme;\n    let extractedActiveTheme: 'light' | 'dark' | null = null;\n\n    if (activeThemeFromBranding) {\n      // Convert to lowercase and map to our expected values\n      const themeMode: string = activeThemeFromBranding.toLowerCase();\n      if (themeMode === 'light' || themeMode === 'dark') {\n        extractedActiveTheme = themeMode;\n      }\n    }\n\n    setActiveTheme(extractedActiveTheme);\n\n    // Transform branding preference to theme\n    const transformedTheme: Theme | null = transformBrandingPreferenceToTheme(externalBrandingPreference, forceTheme);\n    setTheme(transformedTheme);\n  }, [externalBrandingPreference, forceTheme, enabled]);\n\n  // Reset state when disabled\n  useEffect(() => {\n    if (!enabled) {\n      setTheme(null);\n      setActiveTheme(null);\n    }\n  }, [enabled]);\n\n  // Dummy fetchBranding for backward compatibility\n  const fetchBranding: () => Promise<void> = useCallback(async (): Promise<void> => {\n    if (externalRefetch) {\n      await externalRefetch();\n    }\n  }, [externalRefetch]);\n\n  const value: any = {\n    activeTheme,\n    brandingPreference: externalBrandingPreference || null,\n    error: externalError,\n    fetchBranding,\n    isLoading: externalIsLoading,\n    refetch: externalRefetch || fetchBranding,\n    theme,\n  };\n\n  return <BrandingContext.Provider value={value}>{children}</BrandingContext.Provider>;\n};\n\nexport default BrandingProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,MAAMA,oBAAkE,EACtE,UACA,oBAAoB,4BACpB,YACA,UAAU,MACV,WAAW,oBAAoB,OAC/B,OAAO,gBAAgB,MACvB,SAAS,sBACmD;CAC5D,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAkC,KAAK;AAG7E,iBAAgB;AACd,MAAI,CAAC,WAAW,CAAC,4BAA4B;AAC3C,YAAS,KAAK;AACd,kBAAe,KAAK;AACpB;;EAIF,MAAMC,0BAA8C,4BAA4B,YAAY,OAAO;EACnG,IAAIC,uBAAgD;AAEpD,MAAI,yBAAyB;GAE3B,MAAMC,YAAoB,wBAAwB,aAAa;AAC/D,OAAI,cAAc,WAAW,cAAc,OACzC,wBAAuB;;AAI3B,iBAAe,qBAAqB;AAIpC,WADuC,mCAAmC,4BAA4B,WAAW,CACvF;IACzB;EAAC;EAA4B;EAAY;EAAQ,CAAC;AAGrD,iBAAgB;AACd,MAAI,CAAC,SAAS;AACZ,YAAS,KAAK;AACd,kBAAe,KAAK;;IAErB,CAAC,QAAQ,CAAC;CAGb,MAAMC,gBAAqC,YAAY,YAA2B;AAChF,MAAI,gBACF,OAAM,iBAAiB;IAExB,CAAC,gBAAgB,CAAC;CAErB,MAAMC,QAAa;EACjB;EACA,oBAAoB,8BAA8B;EAClD,OAAO;EACP;EACA,WAAW;EACX,SAAS,mBAAmB;EAC5B;EACD;AAED,QAAO,oBAACC,wBAAgB;EAAgB;EAAQ;GAAoC;;AAGtF,+BAAe"}

package/dist/contexts/Branding/useBrandingContext.js

@@ -0,0 +1,38 @@
+import BrandingContext_default from "./BrandingContext.js";
+import { useContext } from "react";
+
+//#region src/contexts/Branding/useBrandingContext.ts
+/**
+* Hook to access the branding context.
+* This hook provides access to branding preferences, theme data, and loading states.
+*
+* @returns The branding context value containing branding preference data, theme, and control functions
+* @throws Error if used outside of a BrandingProvider
+*
+* @example
+* ```tsx
+* function MyComponent() {
+*   const { theme, activeTheme, isLoading, error } = useBrandingContext();
+*
+*   if (isLoading) return <div>Loading branding...</div>;
+*   if (error) return <div>Error: {error.message}</div>;
+*
+*   return (
+*     <div style={{ color: theme?.colors?.primary?.main }}>
+*       <p>Active theme mode: {activeTheme}</p>
+*       <p>Styled with ThunderID branding</p>
+*     </div>
+*   );
+* }
+* ```
+*/
+const useBrandingContext = () => {
+	const context = useContext(BrandingContext_default);
+	if (!context) throw new Error("useBrandingContext must be used within a BrandingProvider");
+	return context;
+};
+var useBrandingContext_default = useBrandingContext;
+
+//#endregion
+export { useBrandingContext_default as default };
+//# sourceMappingURL=useBrandingContext.js.map

package/dist/contexts/Branding/useBrandingContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBrandingContext.js","names":["context: BrandingContextValue | null","BrandingContext"],"sources":["../../../src/contexts/Branding/useBrandingContext.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {useContext} from 'react';\nimport BrandingContext, {BrandingContextValue} from './BrandingContext';\n\n/**\n * Hook to access the branding context.\n * This hook provides access to branding preferences, theme data, and loading states.\n *\n * @returns The branding context value containing branding preference data, theme, and control functions\n * @throws Error if used outside of a BrandingProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { theme, activeTheme, isLoading, error } = useBrandingContext();\n *\n *   if (isLoading) return <div>Loading branding...</div>;\n *   if (error) return <div>Error: {error.message}</div>;\n *\n *   return (\n *     <div style={{ color: theme?.colors?.primary?.main }}>\n *       <p>Active theme mode: {activeTheme}</p>\n *       <p>Styled with ThunderID branding</p>\n *     </div>\n *   );\n * }\n * ```\n */\nconst useBrandingContext = (): BrandingContextValue => {\n  const context: BrandingContextValue | null = useContext(BrandingContext);\n  if (!context) {\n    throw new Error('useBrandingContext must be used within a BrandingProvider');\n  }\n  return context;\n};\n\nexport default useBrandingContext;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,2BAAiD;CACrD,MAAMA,UAAuC,WAAWC,wBAAgB;AACxE,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,4DAA4D;AAE9E,QAAO;;AAGT,iCAAe"}

package/dist/contexts/ComponentRenderer/ComponentRendererContext.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+//#region src/contexts/ComponentRenderer/ComponentRendererContext.ts
+const ComponentRendererContext = createContext({});
+var ComponentRendererContext_default = ComponentRendererContext;
+
+//#endregion
+export { ComponentRendererContext_default as default };
+//# sourceMappingURL=ComponentRendererContext.js.map

package/dist/contexts/ComponentRenderer/ComponentRendererContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRendererContext.js","names":["ComponentRendererContext: Context<ComponentRendererMap>"],"sources":["../../../src/contexts/ComponentRenderer/ComponentRendererContext.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {EmbeddedFlowComponentV2 as EmbeddedFlowComponent, FlowMetadataResponse} from '@thunderid/browser';\nimport {Context, createContext, ReactElement} from 'react';\n\nexport interface ComponentRenderContext {\n  additionalData?: Record<string, any>;\n  authType: 'signin' | 'signup' | 'recovery';\n  formErrors: Record<string, string>;\n  formValues: Record<string, string>;\n  isFormValid: boolean;\n  isLoading: boolean;\n  meta?: FlowMetadataResponse | null;\n  onInputBlur?: (name: string) => void;\n  onInputChange: (name: string, value: string) => void;\n  onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;\n  touchedFields: Record<string, boolean>;\n}\n\nexport type ComponentRenderer = (\n  component: EmbeddedFlowComponent,\n  context: ComponentRenderContext,\n) => ReactElement | null;\n\nexport type ComponentRendererMap = Record<string, ComponentRenderer>;\n\nconst ComponentRendererContext: Context<ComponentRendererMap> = createContext<ComponentRendererMap>({});\n\nexport default ComponentRendererContext;\n"],"mappings":";;;AA0CA,MAAMA,2BAA0D,cAAoC,EAAE,CAAC;AAEvG,uCAAe"}

package/dist/contexts/ComponentRenderer/ComponentRendererProvider.js

@@ -0,0 +1,13 @@
+import ComponentRendererContext_default from "./ComponentRendererContext.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/contexts/ComponentRenderer/ComponentRendererProvider.tsx
+const ComponentRendererProvider = ({ renderers, children }) => /* @__PURE__ */ jsx(ComponentRendererContext_default.Provider, {
+	value: renderers,
+	children
+});
+var ComponentRendererProvider_default = ComponentRendererProvider;
+
+//#endregion
+export { ComponentRendererProvider_default as default };
+//# sourceMappingURL=ComponentRendererProvider.js.map

package/dist/contexts/ComponentRenderer/ComponentRendererProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentRendererProvider.js","names":["ComponentRendererProvider: FC<PropsWithChildren<ComponentRendererProviderProps>>","ComponentRendererContext"],"sources":["../../../src/contexts/ComponentRenderer/ComponentRendererProvider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FC, PropsWithChildren, ReactElement} from 'react';\nimport ComponentRendererContext, {ComponentRendererMap} from './ComponentRendererContext';\n\ninterface ComponentRendererProviderProps {\n  renderers: ComponentRendererMap;\n}\n\nconst ComponentRendererProvider: FC<PropsWithChildren<ComponentRendererProviderProps>> = ({\n  renderers,\n  children,\n}: PropsWithChildren<ComponentRendererProviderProps>): ReactElement => (\n  <ComponentRendererContext.Provider value={renderers}>{children}</ComponentRendererContext.Provider>\n);\n\nexport default ComponentRendererProvider;\n"],"mappings":";;;;AAyBA,MAAMA,6BAAoF,EACxF,WACA,eAEA,oBAACC,iCAAyB;CAAS,OAAO;CAAY;EAA6C;AAGrG,wCAAe"}

package/dist/contexts/Flow/FlowContext.js

@@ -0,0 +1,15 @@
+import { createContext } from "react";
+
+//#region src/contexts/Flow/FlowContext.ts
+/**
+* Context for managing authentication flow UI state.
+* This context handles titles, messages, navigation, and loading states
+* for authentication flows like SignIn, SignUp, organization signin, etc.
+*/
+const FlowContext = createContext(void 0);
+FlowContext.displayName = "FlowContext";
+var FlowContext_default = FlowContext;
+
+//#endregion
+export { FlowContext_default as default };
+//# sourceMappingURL=FlowContext.js.map

package/dist/contexts/Flow/FlowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowContext.js","names":["FlowContext: Context<FlowContextValue | undefined>"],"sources":["../../../src/contexts/Flow/FlowContext.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {Context, createContext} from 'react';\n\n/**\n * Types of authentication flows/steps that can be displayed.\n */\nexport type FlowStep = {\n  canGoBack?: boolean;\n  id: string;\n  metadata?: Record<string, any>;\n  subtitle?: string;\n  title: string;\n  type: 'signin' | 'signup' | 'organization-signin' | 'forgot-password' | 'reset-password' | 'verify-email' | 'mfa';\n} | null;\n\n/**\n * Message types for displaying in authentication flows.\n */\nexport interface FlowMessage {\n  dismissible?: boolean;\n  id?: string;\n  message: string;\n  type: 'success' | 'error' | 'warning' | 'info';\n}\n\n/**\n * Context value for managing authentication flow UI state.\n */\nexport interface FlowContextValue {\n  addMessage: (message: FlowMessage) => void;\n  clearMessages: () => void;\n\n  // Current step/flow\n  currentStep: FlowStep;\n  // Error state\n  error: string | null;\n  // Loading state\n  isLoading: boolean;\n  // Messages\n  messages: FlowMessage[];\n\n  navigateToFlow: (\n    flowType: NonNullable<FlowStep>['type'],\n    options?: {\n      metadata?: Record<string, any>;\n      subtitle?: string;\n      title?: string;\n    },\n  ) => void;\n  onGoBack?: () => void;\n  removeMessage: (messageId: string) => void;\n  // Utilities\n  reset: () => void;\n\n  setCurrentStep: (step: FlowStep) => void;\n  setError: (error: string | null) => void;\n\n  setIsLoading: (loading: boolean) => void;\n  setOnGoBack: (callback?: () => void) => void;\n\n  setShowBackButton: (show: boolean) => void;\n  setSubtitle: (subtitle?: string) => void;\n  setTitle: (title: string) => void;\n\n  // Navigation\n  showBackButton: boolean;\n\n  subtitle?: string;\n\n  // Title and subtitle\n  title: string;\n}\n\n/**\n * Context for managing authentication flow UI state.\n * This context handles titles, messages, navigation, and loading states\n * for authentication flows like SignIn, SignUp, organization signin, etc.\n */\nconst FlowContext: Context<FlowContextValue | undefined> = createContext<FlowContextValue | undefined>(undefined);\n\nFlowContext.displayName = 'FlowContext';\n\nexport default FlowContext;\n"],"mappings":";;;;;;;;AA+FA,MAAMA,cAAqD,cAA4C,OAAU;AAEjH,YAAY,cAAc;AAE1B,0BAAe"}

package/dist/contexts/Flow/FlowProvider.js

@@ -0,0 +1,132 @@
+import FlowContext_default from "./FlowContext.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/contexts/Flow/FlowProvider.tsx
+/**
+* Provider component for flow context.
+* Manages shared UI state for authentication flows including titles, messages, and navigation.
+*/
+const FlowProvider = ({ children, initialStep = null, initialTitle = "", initialSubtitle, onFlowChange }) => {
+	const [currentStep, setCurrentStepState] = useState(initialStep);
+	const [title, setTitle] = useState(initialTitle);
+	const [subtitle, setSubtitle] = useState(initialSubtitle);
+	const [messages, setMessages] = useState([]);
+	const [error, setError] = useState(null);
+	const [isLoading, setIsLoading] = useState(false);
+	const [showBackButton, setShowBackButton] = useState(false);
+	const [onGoBack, setOnGoBack] = useState(void 0);
+	/**
+	* Set the current flow step and notify listeners.
+	*/
+	const setCurrentStep = useCallback((step) => {
+		setCurrentStepState(step);
+		if (step) {
+			setTitle(step.title);
+			setSubtitle(step.subtitle);
+			setShowBackButton(step.canGoBack ?? false);
+		}
+		onFlowChange?.(step);
+	}, [onFlowChange]);
+	/**
+	* Add a message to the message list.
+	*/
+	const addMessage = useCallback((message) => {
+		const messageWithId = {
+			...message,
+			id: message.id ?? `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+		};
+		setMessages((prev) => [...prev, messageWithId]);
+	}, []);
+	/**
+	* Remove a specific message by ID.
+	*/
+	const removeMessage = useCallback((messageId) => {
+		setMessages((prev) => prev.filter((msg) => msg.id !== messageId));
+	}, []);
+	/**
+	* Clear all messages.
+	*/
+	const clearMessages = useCallback(() => {
+		setMessages([]);
+	}, []);
+	/**
+	* Reset the flow context to initial state.
+	*/
+	const reset = useCallback(() => {
+		setCurrentStepState(initialStep);
+		setTitle(initialTitle);
+		setSubtitle(initialSubtitle);
+		setMessages([]);
+		setError(null);
+		setIsLoading(false);
+		setShowBackButton(false);
+		setOnGoBack(void 0);
+	}, [
+		initialStep,
+		initialTitle,
+		initialSubtitle
+	]);
+	/**
+	* Navigate to a different authentication flow.
+	*/
+	const navigateToFlow = useCallback((flowType, options) => {
+		const stepId = `${flowType}-${Date.now()}`;
+		setCurrentStep({
+			canGoBack: flowType !== "signin",
+			id: stepId,
+			metadata: options?.metadata,
+			subtitle: options?.subtitle,
+			title: options?.title ?? "",
+			type: flowType
+		});
+		clearMessages();
+		setError(null);
+	}, [setCurrentStep, clearMessages]);
+	const contextValue = useMemo(() => ({
+		addMessage,
+		clearMessages,
+		currentStep,
+		error,
+		isLoading,
+		messages,
+		navigateToFlow,
+		onGoBack,
+		removeMessage,
+		reset,
+		setCurrentStep,
+		setError,
+		setIsLoading,
+		setOnGoBack,
+		setShowBackButton,
+		setSubtitle,
+		setTitle,
+		showBackButton,
+		subtitle,
+		title
+	}), [
+		currentStep,
+		setCurrentStep,
+		title,
+		subtitle,
+		messages,
+		addMessage,
+		removeMessage,
+		clearMessages,
+		error,
+		isLoading,
+		showBackButton,
+		onGoBack,
+		reset,
+		navigateToFlow
+	]);
+	return /* @__PURE__ */ jsx(FlowContext_default.Provider, {
+		value: contextValue,
+		children
+	});
+};
+var FlowProvider_default = FlowProvider;
+
+//#endregion
+export { FlowProvider_default as default };
+//# sourceMappingURL=FlowProvider.js.map

package/dist/contexts/Flow/FlowProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowProvider.js","names":["FlowProvider: FC<PropsWithChildren<FlowProviderProps>>","setCurrentStep: (step: FlowStep) => void","addMessage: (message: FlowMessage) => void","messageWithId: FlowMessage","removeMessage: (messageId: string) => void","clearMessages: () => void","reset: () => void","navigateToFlow: (\n    flowType: NonNullable<FlowStep>['type'],\n    options?: {metadata?: Record<string, any>; subtitle?: string; title?: string},\n  ) => void","contextValue: FlowContextValue","FlowContext"],"sources":["../../../src/contexts/Flow/FlowProvider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FC, PropsWithChildren, ReactElement, useCallback, useMemo, useState} from 'react';\nimport FlowContext, {FlowContextValue, FlowMessage, FlowStep} from './FlowContext';\n\n/**\n * Props for the FlowProvider component.\n */\nexport interface FlowProviderProps {\n  /**\n   * Initial step to start with.\n   */\n  initialStep?: FlowStep;\n\n  /**\n   * Initial subtitle.\n   */\n  initialSubtitle?: string;\n\n  /**\n   * Initial title.\n   */\n  initialTitle?: string;\n\n  /**\n   * Callback when flow type changes.\n   */\n  onFlowChange?: (step: FlowStep) => void;\n}\n\n/**\n * Provider component for flow context.\n * Manages shared UI state for authentication flows including titles, messages, and navigation.\n */\nconst FlowProvider: FC<PropsWithChildren<FlowProviderProps>> = ({\n  children,\n  initialStep = null,\n  initialTitle = '',\n  initialSubtitle,\n  onFlowChange,\n}: PropsWithChildren<FlowProviderProps>): ReactElement => {\n  const [currentStep, setCurrentStepState] = useState<FlowStep>(initialStep);\n  const [title, setTitle] = useState<string>(initialTitle);\n  const [subtitle, setSubtitle] = useState<string | undefined>(initialSubtitle);\n  const [messages, setMessages] = useState<FlowMessage[]>([]);\n  const [error, setError] = useState<string | null>(null);\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const [showBackButton, setShowBackButton] = useState<boolean>(false);\n  const [onGoBack, setOnGoBack] = useState<(() => void) | undefined>(undefined);\n\n  /**\n   * Set the current flow step and notify listeners.\n   */\n  const setCurrentStep: (step: FlowStep) => void = useCallback(\n    (step: FlowStep) => {\n      setCurrentStepState(step);\n      if (step) {\n        setTitle(step.title);\n        setSubtitle(step.subtitle);\n        setShowBackButton(step.canGoBack ?? false);\n      }\n      onFlowChange?.(step);\n    },\n    [onFlowChange],\n  );\n\n  /**\n   * Add a message to the message list.\n   */\n  const addMessage: (message: FlowMessage) => void = useCallback((message: FlowMessage) => {\n    const messageWithId: FlowMessage = {\n      ...message,\n      id: message.id ?? `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,\n    };\n\n    setMessages((prev: FlowMessage[]) => [...prev, messageWithId]);\n  }, []);\n\n  /**\n   * Remove a specific message by ID.\n   */\n  const removeMessage: (messageId: string) => void = useCallback((messageId: string) => {\n    setMessages((prev: FlowMessage[]) => prev.filter((msg: FlowMessage) => msg.id !== messageId));\n  }, []);\n\n  /**\n   * Clear all messages.\n   */\n  const clearMessages: () => void = useCallback(() => {\n    setMessages([]);\n  }, []);\n\n  /**\n   * Reset the flow context to initial state.\n   */\n  const reset: () => void = useCallback(() => {\n    setCurrentStepState(initialStep);\n    setTitle(initialTitle);\n    setSubtitle(initialSubtitle);\n    setMessages([]);\n    setError(null);\n    setIsLoading(false);\n    setShowBackButton(false);\n    setOnGoBack(undefined);\n  }, [initialStep, initialTitle, initialSubtitle]);\n\n  /**\n   * Navigate to a different authentication flow.\n   */\n  const navigateToFlow: (\n    flowType: NonNullable<FlowStep>['type'],\n    options?: {metadata?: Record<string, any>; subtitle?: string; title?: string},\n  ) => void = useCallback(\n    (\n      flowType: NonNullable<FlowStep>['type'],\n      options?: {\n        metadata?: Record<string, any>;\n        subtitle?: string;\n        title?: string;\n      },\n    ) => {\n      const stepId = `${flowType}-${Date.now()}`;\n      const step: NonNullable<FlowStep> = {\n        canGoBack: flowType !== 'signin', // Usually allow going back except for main signin\n        id: stepId,\n        metadata: options?.metadata,\n        subtitle: options?.subtitle,\n        title: options?.title ?? '',\n        type: flowType,\n      };\n\n      setCurrentStep(step);\n      clearMessages();\n      setError(null);\n    },\n    [setCurrentStep, clearMessages],\n  );\n\n  const contextValue: FlowContextValue = useMemo(\n    () => ({\n      addMessage,\n      clearMessages,\n      currentStep,\n      error,\n      isLoading,\n      messages,\n      navigateToFlow,\n      onGoBack,\n      removeMessage,\n      reset,\n      setCurrentStep,\n      setError,\n      setIsLoading,\n      setOnGoBack,\n      setShowBackButton,\n      setSubtitle,\n      setTitle,\n      showBackButton,\n      subtitle,\n      title,\n    }),\n    [\n      currentStep,\n      setCurrentStep,\n      title,\n      subtitle,\n      messages,\n      addMessage,\n      removeMessage,\n      clearMessages,\n      error,\n      isLoading,\n      showBackButton,\n      onGoBack,\n      reset,\n      navigateToFlow,\n    ],\n  );\n\n  return <FlowContext.Provider value={contextValue}>{children}</FlowContext.Provider>;\n};\n\nexport default FlowProvider;\n"],"mappings":";;;;;;;;;AAkDA,MAAMA,gBAA0D,EAC9D,UACA,cAAc,MACd,eAAe,IACf,iBACA,mBACwD;CACxD,MAAM,CAAC,aAAa,uBAAuB,SAAmB,YAAY;CAC1E,MAAM,CAAC,OAAO,YAAY,SAAiB,aAAa;CACxD,MAAM,CAAC,UAAU,eAAe,SAA6B,gBAAgB;CAC7E,MAAM,CAAC,UAAU,eAAe,SAAwB,EAAE,CAAC;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CACvD,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,MAAM;CACpE,MAAM,CAAC,UAAU,eAAe,SAAmC,OAAU;;;;CAK7E,MAAMC,iBAA2C,aAC9C,SAAmB;AAClB,sBAAoB,KAAK;AACzB,MAAI,MAAM;AACR,YAAS,KAAK,MAAM;AACpB,eAAY,KAAK,SAAS;AAC1B,qBAAkB,KAAK,aAAa,MAAM;;AAE5C,iBAAe,KAAK;IAEtB,CAAC,aAAa,CACf;;;;CAKD,MAAMC,aAA6C,aAAa,YAAyB;EACvF,MAAMC,gBAA6B;GACjC,GAAG;GACH,IAAI,QAAQ,MAAM,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,EAAE;GAC/E;AAED,eAAa,SAAwB,CAAC,GAAG,MAAM,cAAc,CAAC;IAC7D,EAAE,CAAC;;;;CAKN,MAAMC,gBAA6C,aAAa,cAAsB;AACpF,eAAa,SAAwB,KAAK,QAAQ,QAAqB,IAAI,OAAO,UAAU,CAAC;IAC5F,EAAE,CAAC;;;;CAKN,MAAMC,gBAA4B,kBAAkB;AAClD,cAAY,EAAE,CAAC;IACd,EAAE,CAAC;;;;CAKN,MAAMC,QAAoB,kBAAkB;AAC1C,sBAAoB,YAAY;AAChC,WAAS,aAAa;AACtB,cAAY,gBAAgB;AAC5B,cAAY,EAAE,CAAC;AACf,WAAS,KAAK;AACd,eAAa,MAAM;AACnB,oBAAkB,MAAM;AACxB,cAAY,OAAU;IACrB;EAAC;EAAa;EAAc;EAAgB,CAAC;;;;CAKhD,MAAMC,iBAGM,aAER,UACA,YAKG;EACH,MAAM,SAAS,GAAG,SAAS,GAAG,KAAK,KAAK;AAUxC,iBAToC;GAClC,WAAW,aAAa;GACxB,IAAI;GACJ,UAAU,SAAS;GACnB,UAAU,SAAS;GACnB,OAAO,SAAS,SAAS;GACzB,MAAM;GACP,CAEmB;AACpB,iBAAe;AACf,WAAS,KAAK;IAEhB,CAAC,gBAAgB,cAAc,CAChC;CAED,MAAMC,eAAiC,eAC9B;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAED,QAAO,oBAACC,oBAAY;EAAS,OAAO;EAAe;GAAgC;;AAGrF,2BAAe"}

package/dist/contexts/Flow/useFlow.js

@@ -0,0 +1,42 @@
+import FlowContext_default from "./FlowContext.js";
+import { useContext } from "react";
+
+//#region src/contexts/Flow/useFlow.ts
+/**
+* Hook to access the flow context.
+* Must be used within a FlowProvider.
+*
+* @example
+* ```tsx
+* const MyAuthComponent = () => {
+*   const { title, setTitle, addMessage, isLoading } = useFlow();
+*
+*   const handleSuccess = () => {
+*     addMessage({
+*       type: 'success',
+*       message: 'Authentication successful!'
+*     });
+*   };
+*
+*   return (
+*     <div>
+*       <h1>{title}</h1>
+*       {isLoading && <p>Loading...</p>}
+*     </div>
+*   );
+* };
+* ```
+*
+* @returns The flow context value
+* @throws Error if used outside of FlowProvider
+*/
+const useFlow = () => {
+	const context = useContext(FlowContext_default);
+	if (!context) throw new Error("useFlow must be used within a FlowProvider");
+	return context;
+};
+var useFlow_default = useFlow;
+
+//#endregion
+export { useFlow_default as default };
+//# sourceMappingURL=useFlow.js.map

package/dist/contexts/Flow/useFlow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlow.js","names":["context: FlowContextValue | undefined","FlowContext"],"sources":["../../../src/contexts/Flow/useFlow.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {useContext} from 'react';\nimport FlowContext, {FlowContextValue} from './FlowContext';\n\n/**\n * Hook to access the flow context.\n * Must be used within a FlowProvider.\n *\n * @example\n * ```tsx\n * const MyAuthComponent = () => {\n *   const { title, setTitle, addMessage, isLoading } = useFlow();\n *\n *   const handleSuccess = () => {\n *     addMessage({\n *       type: 'success',\n *       message: 'Authentication successful!'\n *     });\n *   };\n *\n *   return (\n *     <div>\n *       <h1>{title}</h1>\n *       {isLoading && <p>Loading...</p>}\n *     </div>\n *   );\n * };\n * ```\n *\n * @returns The flow context value\n * @throws Error if used outside of FlowProvider\n */\nconst useFlow = (): FlowContextValue => {\n  const context: FlowContextValue | undefined = useContext(FlowContext);\n\n  if (!context) {\n    throw new Error('useFlow must be used within a FlowProvider');\n  }\n\n  return context;\n};\n\nexport default useFlow;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAM,gBAAkC;CACtC,MAAMA,UAAwC,WAAWC,oBAAY;AAErE,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAG/D,QAAO;;AAGT,sBAAe"}

package/dist/contexts/FlowMeta/FlowMetaContext.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+//#region src/contexts/FlowMeta/FlowMetaContext.ts
+const FlowMetaContext = createContext(null);
+FlowMetaContext.displayName = "FlowMetaContext";
+var FlowMetaContext_default = FlowMetaContext;
+
+//#endregion
+export { FlowMetaContext_default as default };
+//# sourceMappingURL=FlowMetaContext.js.map

package/dist/contexts/FlowMeta/FlowMetaContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowMetaContext.js","names":["FlowMetaContext: Context<FlowMetaContextValue | null>"],"sources":["../../../src/contexts/FlowMeta/FlowMetaContext.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {FlowMetadataResponse} from '@thunderid/browser';\nimport {Context, createContext} from 'react';\n\nexport interface FlowMetaContextValue {\n  /**\n   * Error from the flow meta fetch, if any\n   */\n  error: Error | null;\n  /**\n   * Manually re-fetch flow metadata\n   */\n  fetchFlowMeta: () => Promise<void>;\n  /**\n   * Whether flow metadata is currently being fetched\n   */\n  isLoading: boolean;\n  /**\n   * The fetched flow metadata response, or null while loading / on error\n   */\n  meta: FlowMetadataResponse | null;\n  /**\n   * Fetches flow metadata for the given language and activates it in the i18n system.\n   * Use this to switch the UI language at runtime.\n   */\n  switchLanguage: (language: string) => Promise<void>;\n}\n\nconst FlowMetaContext: Context<FlowMetaContextValue | null> = createContext<FlowMetaContextValue | null>(null);\n\nFlowMetaContext.displayName = 'FlowMetaContext';\n\nexport default FlowMetaContext;\n"],"mappings":";;;AA6CA,MAAMA,kBAAwD,cAA2C,KAAK;AAE9G,gBAAgB,cAAc;AAE9B,8BAAe"}

package/dist/contexts/FlowMeta/FlowMetaProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowMetaProvider.d.ts","sourceRoot":"","sources":["../../../src/contexts/FlowMeta/FlowMetaProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAUH,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAoE,MAAM,OAAO,CAAC;AAM/G,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CA0JlE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"FlowMetaProvider.d.ts","sourceRoot":"","sources":["../../../src/contexts/FlowMeta/FlowMetaProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAUH,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAoE,MAAM,OAAO,CAAC;AAM/G,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAyJlE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/contexts/FlowMeta/FlowMetaProvider.js

@@ -0,0 +1,150 @@
+import FlowMetaContext_default from "./FlowMetaContext.js";
+import useI18n_default from "../I18n/useI18n.js";
+import useThunderID_default from "../ThunderID/useThunderID.js";
+import { FlowMetaType, Platform, TranslationBundleConstants, getFlowMetaV2 } from "@thunderid/browser";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/contexts/FlowMeta/FlowMetaProvider.tsx
+/**
+* FlowMetaProvider fetches flow metadata from the `GET /flow/meta` endpoint
+* (v2 API) and makes it available to child components through `FlowMetaContext`.
+*
+* It is designed to be used in v2 embedded-flow scenarios and integrates with
+* `ThemeProvider` so that theme settings (colors, direction, typography, …)
+* from the server-side design configuration are applied automatically.
+*
+* @example
+* ```tsx
+* <FlowMetaProvider
+*   config={{
+*     baseUrl: 'https://localhost:8090',
+*     type: FlowMetaType.App,
+*     id: 'your-app-id',
+*   }}
+* >
+*   <ThemeProvider>
+*     <App />
+*   </ThemeProvider>
+* </FlowMetaProvider>
+* ```
+*/
+const FlowMetaProvider = ({ children, enabled = true }) => {
+	const { baseUrl, applicationId, platform, isInitialized } = useThunderID_default();
+	const i18nContext = useI18n_default();
+	const [meta, setMeta] = useState(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [pendingLanguage, setPendingLanguage] = useState(null);
+	const lastFetchedRef = useRef(null);
+	const fetchFlowMeta = useCallback(async () => {
+		if (!enabled || platform !== Platform.ThunderID) {
+			setMeta(null);
+			setIsLoading(false);
+			return;
+		}
+		if (!isInitialized && !applicationId) return;
+		setIsLoading(true);
+		setError(null);
+		try {
+			setMeta(await getFlowMetaV2({
+				baseUrl,
+				...applicationId ? {
+					id: applicationId,
+					type: FlowMetaType.App
+				} : {},
+				language: i18nContext?.currentLanguage
+			}));
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error(String(err)));
+		} finally {
+			setIsLoading(false);
+		}
+	}, [
+		enabled,
+		platform,
+		baseUrl,
+		applicationId,
+		isInitialized,
+		i18nContext?.currentLanguage
+	]);
+	const switchLanguage = useCallback(async (language) => {
+		if (!enabled || platform !== Platform.ThunderID) return;
+		setIsLoading(true);
+		setError(null);
+		try {
+			const result = await getFlowMetaV2({
+				baseUrl,
+				...applicationId ? {
+					id: applicationId,
+					type: FlowMetaType.App
+				} : {},
+				language
+			});
+			if (result.i18n?.translations && i18nContext?.injectBundles) {
+				const flatTranslations = {};
+				Object.entries(result.i18n.translations).forEach(([namespace, keys]) => {
+					Object.entries(keys).forEach(([key, value$1]) => {
+						flatTranslations[`${namespace}.${key}`] = value$1;
+					});
+				});
+				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,
+		platform,
+		baseUrl,
+		applicationId,
+		i18nContext
+	]);
+	useEffect(() => {
+		if (pendingLanguage && i18nContext?.setLanguage) {
+			i18nContext.setLanguage(pendingLanguage);
+			setPendingLanguage(null);
+		}
+	}, [pendingLanguage, i18nContext?.setLanguage]);
+	useEffect(() => {
+		if (lastFetchedRef.current === fetchFlowMeta) return;
+		lastFetchedRef.current = fetchFlowMeta;
+		fetchFlowMeta();
+	}, [fetchFlowMeta]);
+	useEffect(() => {
+		if (!meta?.i18n?.translations || !i18nContext?.injectBundles) return;
+		const metaLanguage = meta.i18n.language || TranslationBundleConstants.FALLBACK_LOCALE;
+		const flatTranslations = {};
+		Object.entries(meta.i18n.translations).forEach(([namespace, keys]) => {
+			Object.entries(keys).forEach(([key, value$1]) => {
+				flatTranslations[`${namespace}.${key}`] = value$1;
+			});
+		});
+		const bundle = { translations: flatTranslations };
+		const bundlesToInject = { [metaLanguage]: bundle };
+		if (i18nContext.currentLanguage && i18nContext.currentLanguage !== metaLanguage) bundlesToInject[i18nContext.currentLanguage] = bundle;
+		if (i18nContext.fallbackLanguage && i18nContext.fallbackLanguage !== metaLanguage) bundlesToInject[i18nContext.fallbackLanguage] = bundle;
+		i18nContext.injectBundles(bundlesToInject);
+	}, [meta?.i18n?.translations, i18nContext?.injectBundles]);
+	const value = {
+		error,
+		fetchFlowMeta,
+		isLoading,
+		meta,
+		switchLanguage
+	};
+	return /* @__PURE__ */ jsx(FlowMetaContext_default.Provider, {
+		value,
+		children
+	});
+};
+var FlowMetaProvider_default = FlowMetaProvider;
+
+//#endregion
+export { FlowMetaProvider_default as default };
+//# sourceMappingURL=FlowMetaProvider.js.map

package/dist/contexts/FlowMeta/FlowMetaProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowMetaProvider.js","names":["FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>>","useThunderID","i18nContext: I18nContextValue","useI18n","lastFetchedRef: RefObject<(() => Promise<void>) | null>","fetchFlowMeta: () => Promise<void>","err: unknown","switchLanguage: (language: string) => Promise<void>","result: FlowMetadataResponse","flatTranslations: Record<string, string>","value","bundle: I18nBundle","metaLanguage: string","bundlesToInject: Record<string, I18nBundle>","value: any","FlowMetaContext"],"sources":["../../../src/contexts/FlowMeta/FlowMetaProvider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {\n  FlowMetadataResponse,\n  FlowMetaType,\n  getFlowMetaV2,\n  Platform,\n  I18nBundle,\n  TranslationBundleConstants,\n} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, RefObject, useCallback, useEffect, useRef, useState} from 'react';\nimport FlowMetaContext from './FlowMetaContext';\nimport {I18nContextValue} from '../I18n/I18nContext';\nimport useI18n from '../I18n/useI18n';\nimport useThunderID from '../ThunderID/useThunderID';\n\nexport interface FlowMetaProviderProps {\n  /**\n   * When false the provider skips fetching and provides null meta.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * FlowMetaProvider fetches flow metadata from the `GET /flow/meta` endpoint\n * (v2 API) and makes it available to child components through `FlowMetaContext`.\n *\n * It is designed to be used in v2 embedded-flow scenarios and integrates with\n * `ThemeProvider` so that theme settings (colors, direction, typography, …)\n * from the server-side design configuration are applied automatically.\n *\n * @example\n * ```tsx\n * <FlowMetaProvider\n *   config={{\n *     baseUrl: 'https://localhost:8090',\n *     type: FlowMetaType.App,\n *     id: 'your-app-id',\n *   }}\n * >\n *   <ThemeProvider>\n *     <App />\n *   </ThemeProvider>\n * </FlowMetaProvider>\n * ```\n */\nconst FlowMetaProvider: FC<PropsWithChildren<FlowMetaProviderProps>> = ({\n  children,\n  enabled = true,\n}: PropsWithChildren<FlowMetaProviderProps>): ReactElement => {\n  const {baseUrl, applicationId, platform, isInitialized} = useThunderID();\n  const i18nContext: I18nContextValue = useI18n();\n\n  const [meta, setMeta] = useState<FlowMetadataResponse | null>(null);\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [error, setError] = useState<Error | null>(null);\n  const [pendingLanguage, setPendingLanguage] = useState<string | null>(null);\n\n  // Track the last fetchFlowMeta reference that was actually dispatched.\n  // This prevents two classes of double-fetch:\n  //   1. React StrictMode simulates unmount+remount — the re-mount fires the\n  //      effect again with the same fetchFlowMeta reference; without this guard\n  //      the else-branch would issue a redundant second network request.\n  //   2. Rapid dependency changes (e.g. baseUrl stabilising) that produce two\n  //      effect firings before the first fetch completes.\n  const lastFetchedRef: RefObject<(() => Promise<void>) | null> = useRef<(() => Promise<void>) | null>(null);\n  const fetchFlowMeta: () => Promise<void> = useCallback(async (): Promise<void> => {\n    if (!enabled || platform !== Platform.ThunderID) {\n      setMeta(null);\n      setIsLoading(false);\n      return;\n    }\n\n    // Defer until ThunderID finishes initializing (e.g. loading applicationId\n    // from storage on refresh). Once initialized, proceed even if applicationId\n    // is absent — some flows (e.g. AcceptInvite) have no applicationId by design.\n    if (!isInitialized && !applicationId) {\n      return;\n    }\n\n    setIsLoading(true);\n    setError(null);\n\n    try {\n      const result: FlowMetadataResponse = await getFlowMetaV2({\n        baseUrl,\n        ...(applicationId ? {id: applicationId, type: FlowMetaType.App} : {}),\n        language: i18nContext?.currentLanguage,\n      });\n      setMeta(result);\n    } catch (err: unknown) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n    } finally {\n      setIsLoading(false);\n    }\n  }, [enabled, platform, baseUrl, applicationId, isInitialized, i18nContext?.currentLanguage]);\n\n  const switchLanguage: (language: string) => Promise<void> = useCallback(\n    async (language: string): Promise<void> => {\n      if (!enabled || platform !== Platform.ThunderID) return;\n\n      setIsLoading(true);\n      setError(null);\n\n      try {\n        const result: FlowMetadataResponse = await getFlowMetaV2({\n          baseUrl,\n          ...(applicationId ? {id: applicationId, type: FlowMetaType.App} : {}),\n          language,\n        });\n\n        // Inject translations for the new language before switching\n        if (result.i18n?.translations && i18nContext?.injectBundles) {\n          const flatTranslations: Record<string, string> = {};\n          Object.entries(result.i18n.translations).forEach(([namespace, keys]: [string, Record<string, string>]) => {\n            Object.entries(keys).forEach(([key, value]: [string, string]) => {\n              flatTranslations[`${namespace}.${key}`] = value;\n            });\n          });\n          const bundle: I18nBundle = {translations: flatTranslations} as unknown as I18nBundle;\n          i18nContext.injectBundles({[language]: bundle});\n        }\n\n        // Defer setLanguage to the next effect cycle so injectBundles state\n        // is committed before I18nProvider's setLanguage checks mergedBundles.\n        setPendingLanguage(language);\n        setMeta(result);\n      } catch (err: unknown) {\n        setError(err instanceof Error ? err : new Error(String(err)));\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [enabled, platform, baseUrl, applicationId, i18nContext],\n  );\n\n  // After injectBundles + setPendingLanguage are batched and committed, this\n  // effect fires with the updated i18nContext (mergedBundles now includes the\n  // new language), so setLanguage succeeds on the first switch.\n  useEffect(() => {\n    if (pendingLanguage && i18nContext?.setLanguage) {\n      i18nContext.setLanguage(pendingLanguage);\n      setPendingLanguage(null);\n    }\n  }, [pendingLanguage, i18nContext?.setLanguage]);\n\n  useEffect(() => {\n    if (lastFetchedRef.current === fetchFlowMeta) {\n      // Same reference as the last dispatch — this is a StrictMode re-mount\n      // or an effect re-fire with unchanged deps. Skip to avoid a duplicate fetch.\n      return;\n    }\n\n    lastFetchedRef.current = fetchFlowMeta;\n    fetchFlowMeta();\n  }, [fetchFlowMeta]);\n\n  // When meta loads with i18n translations, inject them into the i18n system.\n  // Meta translations act as the base layer — prop-provided bundles still take precedence.\n  useEffect(() => {\n    if (!meta?.i18n?.translations || !i18nContext?.injectBundles) {\n      return;\n    }\n\n    const metaLanguage: string = meta.i18n.language || TranslationBundleConstants.FALLBACK_LOCALE;\n\n    // Flatten namespace-keyed translations to dot-path keys:\n    // { \"signin\": { \"heading\": \"Sign In\" } } → { \"signin.heading\": \"Sign In\" }\n    const flatTranslations: Record<string, string> = {};\n    Object.entries(meta.i18n.translations).forEach(([namespace, keys]: [string, Record<string, string>]) => {\n      Object.entries(keys).forEach(([key, value]: [string, string]) => {\n        flatTranslations[`${namespace}.${key}`] = value;\n      });\n    });\n\n    const bundle: I18nBundle = {translations: flatTranslations} as unknown as I18nBundle;\n\n    // Inject under the meta language code and the i18n current language so\n    // lookups succeed regardless of whether the system uses \"en\" or \"en-US\".\n    const bundlesToInject: Record<string, I18nBundle> = {[metaLanguage]: bundle};\n    if (i18nContext.currentLanguage && i18nContext.currentLanguage !== metaLanguage) {\n      bundlesToInject[i18nContext.currentLanguage] = bundle;\n    }\n    if (i18nContext.fallbackLanguage && i18nContext.fallbackLanguage !== metaLanguage) {\n      bundlesToInject[i18nContext.fallbackLanguage] = bundle;\n    }\n\n    i18nContext.injectBundles(bundlesToInject);\n  }, [meta?.i18n?.translations, i18nContext?.injectBundles]);\n\n  const value: any = {\n    error,\n    fetchFlowMeta,\n    isLoading,\n    meta,\n    switchLanguage,\n  };\n\n  return <FlowMetaContext.Provider value={value}>{children}</FlowMetaContext.Provider>;\n};\n\nexport default FlowMetaProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,MAAMA,oBAAkE,EACtE,UACA,UAAU,WACkD;CAC5D,MAAM,EAAC,SAAS,eAAe,UAAU,kBAAiBC,sBAAc;CACxE,MAAMC,cAAgCC,iBAAS;CAE/C,MAAM,CAAC,MAAM,WAAW,SAAsC,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CACzD,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;CACtD,MAAM,CAAC,iBAAiB,sBAAsB,SAAwB,KAAK;CAS3E,MAAMC,iBAA0D,OAAqC,KAAK;CAC1G,MAAMC,gBAAqC,YAAY,YAA2B;AAChF,MAAI,CAAC,WAAW,aAAa,SAAS,WAAW;AAC/C,WAAQ,KAAK;AACb,gBAAa,MAAM;AACnB;;AAMF,MAAI,CAAC,iBAAiB,CAAC,cACrB;AAGF,eAAa,KAAK;AAClB,WAAS,KAAK;AAEd,MAAI;AAMF,WALqC,MAAM,cAAc;IACvD;IACA,GAAI,gBAAgB;KAAC,IAAI;KAAe,MAAM,aAAa;KAAI,GAAG,EAAE;IACpE,UAAU,aAAa;IACxB,CAAC,CACa;WACRC,KAAc;AACrB,YAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,CAAC;YACrD;AACR,gBAAa,MAAM;;IAEpB;EAAC;EAAS;EAAU;EAAS;EAAe;EAAe,aAAa;EAAgB,CAAC;CAE5F,MAAMC,iBAAsD,YAC1D,OAAO,aAAoC;AACzC,MAAI,CAAC,WAAW,aAAa,SAAS,UAAW;AAEjD,eAAa,KAAK;AAClB,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,SAA+B,MAAM,cAAc;IACvD;IACA,GAAI,gBAAgB;KAAC,IAAI;KAAe,MAAM,aAAa;KAAI,GAAG,EAAE;IACpE;IACD,CAAC;AAGF,OAAI,OAAO,MAAM,gBAAgB,aAAa,eAAe;IAC3D,MAAMC,mBAA2C,EAAE;AACnD,WAAO,QAAQ,OAAO,KAAK,aAAa,CAAC,SAAS,CAAC,WAAW,UAA4C;AACxG,YAAO,QAAQ,KAAK,CAAC,SAAS,CAAC,KAAKC,aAA6B;AAC/D,uBAAiB,GAAG,UAAU,GAAG,SAASA;OAC1C;MACF;IACF,MAAMC,SAAqB,EAAC,cAAc,kBAAiB;AAC3D,gBAAY,cAAc,GAAE,WAAW,QAAO,CAAC;;AAKjD,sBAAmB,SAAS;AAC5B,WAAQ,OAAO;WACRL,KAAc;AACrB,YAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,IAAI,CAAC,CAAC;YACrD;AACR,gBAAa,MAAM;;IAGvB;EAAC;EAAS;EAAU;EAAS;EAAe;EAAY,CACzD;AAKD,iBAAgB;AACd,MAAI,mBAAmB,aAAa,aAAa;AAC/C,eAAY,YAAY,gBAAgB;AACxC,sBAAmB,KAAK;;IAEzB,CAAC,iBAAiB,aAAa,YAAY,CAAC;AAE/C,iBAAgB;AACd,MAAI,eAAe,YAAY,cAG7B;AAGF,iBAAe,UAAU;AACzB,iBAAe;IACd,CAAC,cAAc,CAAC;AAInB,iBAAgB;AACd,MAAI,CAAC,MAAM,MAAM,gBAAgB,CAAC,aAAa,cAC7C;EAGF,MAAMM,eAAuB,KAAK,KAAK,YAAY,2BAA2B;EAI9E,MAAMH,mBAA2C,EAAE;AACnD,SAAO,QAAQ,KAAK,KAAK,aAAa,CAAC,SAAS,CAAC,WAAW,UAA4C;AACtG,UAAO,QAAQ,KAAK,CAAC,SAAS,CAAC,KAAKC,aAA6B;AAC/D,qBAAiB,GAAG,UAAU,GAAG,SAASA;KAC1C;IACF;EAEF,MAAMC,SAAqB,EAAC,cAAc,kBAAiB;EAI3D,MAAME,kBAA8C,GAAE,eAAe,QAAO;AAC5E,MAAI,YAAY,mBAAmB,YAAY,oBAAoB,aACjE,iBAAgB,YAAY,mBAAmB;AAEjD,MAAI,YAAY,oBAAoB,YAAY,qBAAqB,aACnE,iBAAgB,YAAY,oBAAoB;AAGlD,cAAY,cAAc,gBAAgB;IACzC,CAAC,MAAM,MAAM,cAAc,aAAa,cAAc,CAAC;CAE1D,MAAMC,QAAa;EACjB;EACA;EACA;EACA;EACA;EACD;AAED,QAAO,oBAACC,wBAAgB;EAAgB;EAAQ;GAAoC;;AAGtF,+BAAe"}

package/dist/contexts/FlowMeta/useFlowMeta.js

@@ -0,0 +1,14 @@
+import FlowMetaContext_default from "./FlowMetaContext.js";
+import { useContext } from "react";
+
+//#region src/contexts/FlowMeta/useFlowMeta.ts
+const useFlowMeta = () => {
+	const context = useContext(FlowMetaContext_default);
+	if (!context) throw new Error("useFlowMeta must be used within a FlowMetaProvider");
+	return context;
+};
+var useFlowMeta_default = useFlowMeta;
+
+//#endregion
+export { useFlowMeta_default as default };
+//# sourceMappingURL=useFlowMeta.js.map

package/dist/contexts/FlowMeta/useFlowMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowMeta.js","names":["context: FlowMetaContextValue | null","FlowMetaContext"],"sources":["../../../src/contexts/FlowMeta/useFlowMeta.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {useContext} from 'react';\nimport FlowMetaContext, {FlowMetaContextValue} from './FlowMetaContext';\n\nconst useFlowMeta = (): FlowMetaContextValue => {\n  const context: FlowMetaContextValue | null = useContext(FlowMetaContext);\n  if (!context) {\n    throw new Error('useFlowMeta must be used within a FlowMetaProvider');\n  }\n  return context;\n};\n\nexport default useFlowMeta;\n"],"mappings":";;;;AAqBA,MAAM,oBAA0C;CAC9C,MAAMA,UAAuC,WAAWC,wBAAgB;AACxE,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,qDAAqD;AAEvE,QAAO;;AAGT,0BAAe"}