@thunderid/react 0.3.0 → 0.3.4

package/dist/cjs/components/presentation/auth/InviteUser/{v2/BaseInviteUser.cjs → BaseInviteUser.cjs}

@@ -1,14 +1,14 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
-const require_ComponentRendererContext = require('../../../../../contexts/ComponentRenderer/ComponentRendererContext.cjs');
-const require_useThunderID = require('../../../../../contexts/ThunderID/useThunderID.cjs');
-const require_useTheme = require('../../../../../contexts/Theme/useTheme.cjs');
-const require_useTranslation = require('../../../../../hooks/useTranslation.cjs');
-const require_Spinner = require('../../../../primitives/Spinner/Spinner.cjs');
-const require_Typography = require('../../../../primitives/Typography/Typography.cjs');
-const require_Alert = require('../../../../primitives/Alert/Alert.cjs');
-const require_Card = require('../../../../primitives/Card/Card.cjs');
-const require_flowTransformer = require('../../../../../utils/v2/flowTransformer.cjs');
-const require_AuthOptionFactory = require('../../AuthOptionFactory.cjs');
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
+const require_ComponentRendererContext = require('../../../../contexts/ComponentRenderer/ComponentRendererContext.cjs');
+const require_useThunderID = require('../../../../contexts/ThunderID/useThunderID.cjs');
+const require_useTheme = require('../../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../../hooks/useTranslation.cjs');
+const require_Spinner = require('../../../primitives/Spinner/Spinner.cjs');
+const require_flowTransformer = require('../../../../utils/flowTransformer.cjs');
+const require_Typography = require('../../../primitives/Typography/Typography.cjs');
+const require_Alert = require('../../../primitives/Alert/Alert.cjs');
+const require_Card = require('../../../primitives/Card/Card.cjs');
+const require_AuthOptionFactory = require('../AuthOptionFactory.cjs');
 const require_BaseInviteUser_styles = require('./BaseInviteUser.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
@@ -19,7 +19,7 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 let __emotion_css = require("@emotion/css");
 __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
-//#region src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx
+//#region src/components/presentation/auth/InviteUser/BaseInviteUser.tsx
 /**
 * Base component for invite user flow.
 * Handles the flow logic for creating a user and generating an invite link.
@@ -50,6 +50,26 @@ const BaseInviteUser = ({ onInitialize, onSubmit, onError, onFlowChange, classNa
 	const [touchedFields, setTouchedFields] = (0, react.useState)({});
 	const [isFormValid, setIsFormValid] = (0, react.useState)(true);
 	const challengeTokenRef = (0, react.useRef)(null);
+	/**
+	* Project server-side validation errors from the most recent flow response into the
+	* local formErrors state so they render alongside client-side errors. First error
+	* per field wins, matching the SDK's single-string-per-field render-prop shape.
+	*/
+	(0, react.useEffect)(() => {
+		const responseFieldErrors = (currentFlow?.data)?.fieldErrors;
+		if (!responseFieldErrors || responseFieldErrors.length === 0) return;
+		const errors = {};
+		const touched = {};
+		for (const fe of responseFieldErrors) if (!(fe.identifier in errors)) {
+			errors[fe.identifier] = fe.message;
+			touched[fe.identifier] = true;
+		}
+		setFormErrors(errors);
+		setTouchedFields((prev) => ({
+			...prev,
+			...touched
+		}));
+	}, [currentFlow]);
 	const initializationAttemptedRef = (0, react.useRef)(false);
 	/**
 	* Restore any challenge token persisted before an OAuth redirect.
@@ -138,10 +158,19 @@ const BaseInviteUser = ({ onInitialize, onSubmit, onError, onFlowChange, classNa
 		const errors = {};
 		const validateComponents = (comps) => {
 			comps.forEach((comp) => {
-				if ((comp.type === "TEXT_INPUT" || comp.type === "EMAIL_INPUT" || comp.type === "SELECT" || comp.type === "PHONE_INPUT" || comp.type === "OTP_INPUT") && comp.required && comp.ref) {
+				if ((comp.type === "TEXT_INPUT" || comp.type === "EMAIL_INPUT" || comp.type === "SELECT" || comp.type === "PHONE_INPUT" || comp.type === "OTP_INPUT" || comp.type === "DATE_INPUT") && comp.ref) {
 					const value = formValues[comp.ref];
-					if (!value || value.trim() === "") errors[comp.ref] = `${comp.label || comp.ref} is required`;
-					if (comp.type === "EMAIL_INPUT" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) errors[comp.ref] = "Please enter a valid email address";
+					if (comp.required && (!value || value.trim() === "")) errors[comp.ref] = `${comp.label || comp.ref} is required`;
+					else {
+						if (comp.type === "EMAIL_INPUT" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) errors[comp.ref] = "Please enter a valid email address";
+						if (value && !errors[comp.ref]) {
+							const ruleValidator = (0, __thunderid_browser.buildValidatorFromRules)(comp.validation);
+							if (ruleValidator) {
+								const message = ruleValidator(value);
+								if (message) errors[comp.ref] = t(message);
+							}
+						}
+					}
 				}
 				if (comp.components && Array.isArray(comp.components)) validateComponents(comp.components);
 			});

package/dist/cjs/components/presentation/auth/InviteUser/BaseInviteUser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInviteUser.cjs","names":["BaseInviteUser: FC<BaseInviteUserProps>","useThunderID","useTranslation","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","styles: any","useStyles","challengeTokenRef: any","responseFieldErrors: FieldError[] | undefined","errors: Record<string, string>","touched: Record<string, boolean>","initializationAttemptedRef: any","tempData: any","storageManager: any","handleError: any","errorMessage: string","extractErrorMessage","normalizeFlowResponseLocal: any","normalizeFlowResponse","components","handleInputChange: any","newErrors: any","handleInputBlur: any","validateForm: any","value: any","handleSubmit: any","validation: any","inputs: any","payload: Record<string, any>","response: any","resetFlow: any","EmbeddedFlowType","components: any","extractHeadings: any","title: string | undefined","subtitle: string | undefined","title","subtitle","filterHeadings: any","renderComponents: any","renderInviteUserComponents","componentsWithoutHeadings: any","renderProps: BaseInviteUserRenderProps","CardPrimitive","Spinner","AlertPrimitive","Typography"],"sources":["../../../../../../src/components/presentation/auth/InviteUser/BaseInviteUser.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 {cx} from '@emotion/css';\nimport {\n  EmbeddedFlowType,\n  FieldError,\n  FlowExecutionError,\n  FlowMetadataResponse,\n  buildValidatorFromRules,\n  logger,\n  OrganizationUnitListResponse,\n  Preferences,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport useStyles from './BaseInviteUser.styles';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport useTheme from '../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../../hooks/useTranslation';\nimport {normalizeFlowResponse, extractErrorMessage} from '../../../../utils/flowTransformer';\nimport AlertPrimitive from '../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../primitives/Card/Card';\nimport Spinner from '../../../primitives/Spinner/Spinner';\nimport Typography from '../../../primitives/Typography/Typography';\nimport {renderInviteUserComponents} from '../AuthOptionFactory';\n\n/**\n * Flow response structure from the backend.\n */\nexport interface InviteUserFlowResponse {\n  challengeToken?: string;\n  data?: {\n    additionalData?: Record<string, any>;\n    components?: any[];\n    fieldErrors?: FieldError[];\n    meta?: {\n      components?: any[];\n    };\n  };\n  error?: FlowExecutionError;\n  executionId: string;\n  flowStatus: 'INCOMPLETE' | 'COMPLETE' | 'ERROR';\n  type?: 'VIEW' | 'REDIRECTION';\n}\n\n/**\n * Render props for custom UI rendering of InviteUser.\n */\nexport interface BaseInviteUserRenderProps {\n  /**\n   * Additional data from the current flow response (e.g. rootOuId, inviteLink).\n   */\n  additionalData?: Record<string, any>;\n\n  /**\n   * Flow components from the current step.\n   */\n  components: any[];\n\n  /**\n   * API error (if any).\n   */\n  error?: Error | null;\n\n  /**\n   * Current flow execution ID.\n   */\n  executionId?: string;\n\n  /**\n   * Field validation errors.\n   */\n  fieldErrors: Record<string, string>;\n\n  /**\n   * Current flow execution ID.\n   */\n  flowExecId?: string;\n\n  /**\n   * Function to handle input blur.\n   */\n  handleInputBlur: (name: string) => void;\n\n  /**\n   * Function to handle input changes.\n   */\n  handleInputChange: (name: string, value: string) => void;\n\n  /**\n   * Function to handle form submission.\n   */\n  handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;\n\n  /**\n   * Loading state.\n   */\n  isLoading: boolean;\n\n  /**\n   * Whether the form is valid.\n   */\n  isValid: boolean;\n\n  /**\n   * Flow metadata returned by the platform (v2 only). `null` while loading or unavailable.\n   */\n  meta: FlowMetadataResponse | null;\n\n  /**\n   * Reset the flow to invite another user.\n   */\n  resetFlow: () => void;\n\n  /**\n   * Subtitle for the current step.\n   */\n  subtitle?: string;\n\n  /**\n   * Title for the current step.\n   */\n  title?: string;\n\n  /**\n   * Touched fields.\n   */\n  touched: Record<string, boolean>;\n\n  /**\n   * Form values for the current step.\n   */\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseInviteUser component.\n */\nexport interface BaseInviteUserProps {\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered.\n   */\n  children?: (props: BaseInviteUserRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Function to fetch child organization units.\n   * When provided, enables the OU tree picker for OU_SELECT components.\n   */\n  fetchOrganizationUnitChildren?: (\n    parentId: string,\n    limit: number,\n    offset: number,\n  ) => Promise<OrganizationUnitListResponse>;\n\n  /**\n   * Whether the SDK is initialized.\n   */\n  isInitialized?: boolean;\n\n  /**\n   * Callback when an error occurs.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: InviteUserFlowResponse) => void;\n\n  /**\n   * Function to initialize the invite user flow.\n   * This should make an authenticated request to the flow/execute endpoint.\n   */\n  onInitialize: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;\n\n  /**\n   * Function to submit flow step data.\n   * This should make an authenticated request to the flow/execute endpoint.\n   */\n  onSubmit: (payload: Record<string, any>) => Promise<InviteUserFlowResponse>;\n\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component.\n   */\n  variant?: CardProps['variant'];\n}\n\n/**\n * Base component for invite user flow.\n * Handles the flow logic for creating a user and generating an invite link.\n *\n * When no children are provided, renders a default UI with:\n * - Loading spinner during initialization\n * - Error alerts for failures\n * - Flow components (user type selection, user details form)\n * - Invite link display with copy functionality\n *\n * Flow steps handled:\n * 1. User type selection (if multiple types available)\n * 2. User details input (username, email)\n * 3. Invite link generation\n */\nconst BaseInviteUser: FC<BaseInviteUserProps> = ({\n  onInitialize,\n  onSubmit,\n  onError,\n  onFlowChange,\n  className = '',\n  children,\n  fetchOrganizationUnitChildren,\n  isInitialized = true,\n  preferences,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: BaseInviteUserProps): ReactElement => {\n  const {meta, isInitialized: isSdkInitialized, getStorageManager} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n  const {theme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const styles: any = useStyles(theme, theme.vars.colors.text.primary);\n  const [isLoading, setIsLoading] = useState(false);\n  const [isFlowInitialized, setIsFlowInitialized] = useState(false);\n  const [currentFlow, setCurrentFlow] = useState<InviteUserFlowResponse | null>(null);\n  const [apiError, setApiError] = useState<Error | null>(null);\n  const [formValues, setFormValues] = useState<Record<string, string>>({});\n  const [formErrors, setFormErrors] = useState<Record<string, string>>({});\n  const [touchedFields, setTouchedFields] = useState<Record<string, boolean>>({});\n  const [isFormValid, setIsFormValid] = useState(true);\n  const challengeTokenRef: any = useRef<string | null>(null);\n\n  /**\n   * Project server-side validation errors from the most recent flow response into the\n   * local formErrors state so they render alongside client-side errors. First error\n   * per field wins, matching the SDK's single-string-per-field render-prop shape.\n   */\n  useEffect(() => {\n    const responseFieldErrors: FieldError[] | undefined = (currentFlow?.data as any)?.fieldErrors;\n    if (!responseFieldErrors || responseFieldErrors.length === 0) {\n      return;\n    }\n    const errors: Record<string, string> = {};\n    const touched: Record<string, boolean> = {};\n    for (const fe of responseFieldErrors) {\n      if (!(fe.identifier in errors)) {\n        errors[fe.identifier] = fe.message;\n        touched[fe.identifier] = true;\n      }\n    }\n    setFormErrors(errors);\n    setTouchedFields((prev: Record<string, boolean>) => ({...prev, ...touched}));\n  }, [currentFlow]);\n\n  const initializationAttemptedRef: any = useRef(false);\n\n  /**\n   * Restore any challenge token persisted before an OAuth redirect.\n   */\n  useEffect(() => {\n    if (!isSdkInitialized) return;\n\n    (async (): Promise<void> => {\n      try {\n        const storageManager: any = await getStorageManager();\n        const tempData: any = await storageManager?.getTemporaryData();\n        if (tempData?.challengeToken) {\n          challengeTokenRef.current = tempData.challengeToken as string;\n        }\n      } catch {\n        // StorageManager unavailable — continue without persisted token\n      }\n    })();\n  }, [isSdkInitialized]);\n\n  /**\n   * Updates challengeTokenRef immediately (stale-closure safe) and persists via\n   * the provider's StorageManager so the token survives OAuth redirects.\n   */\n  const setChallengeToken = async (challengeToken: string | null): Promise<void> => {\n    challengeTokenRef.current = challengeToken;\n    try {\n      const storageManager: any = await getStorageManager();\n      if (storageManager) {\n        if (challengeToken) {\n          await storageManager.setTemporaryDataParameter('challengeToken', challengeToken);\n        } else {\n          await storageManager.removeTemporaryDataParameter('challengeToken');\n        }\n      }\n    } catch {\n      logger.warn('Failed to persist challenge token in storage.');\n    }\n  };\n\n  /**\n   * Handle error responses and extract meaningful error messages.\n   * Uses the transformer's extractErrorMessage function for consistency.\n   */\n  const handleError: any = useCallback(\n    (error: any) => {\n      const errorMessage: string = extractErrorMessage(error, t, 'components.inviteUser.errors.generic');\n\n      // Set the API error state\n      setApiError(error instanceof Error ? error : new Error(errorMessage));\n\n      // Call the onError callback if provided\n      onError?.(error instanceof Error ? error : new Error(errorMessage));\n    },\n    [t, onError],\n  );\n\n  /**\n   * Normalize flow response to ensure component-driven format.\n   * Transforms data.meta.components to data.components.\n   */\n  const normalizeFlowResponseLocal: any = useCallback(\n    (response: InviteUserFlowResponse): InviteUserFlowResponse => {\n      if (!response?.data?.meta?.components) {\n        return response;\n      }\n\n      try {\n        const {components} = normalizeFlowResponse(\n          response,\n          t,\n          {\n            defaultErrorKey: 'components.inviteUser.errors.generic',\n            resolveTranslations: false,\n          },\n          meta,\n        );\n\n        return {\n          ...response,\n          data: {\n            ...response.data,\n            components: components as any,\n          },\n        };\n      } catch {\n        // If transformer throws (e.g., error response), return as-is\n        return response;\n      }\n    },\n    [t, children],\n  );\n\n  /**\n   * Handle input value changes.\n   */\n  const handleInputChange: any = useCallback((name: string, value: string) => {\n    setFormValues((prev: any) => ({...prev, [name]: value}));\n    // Clear error when user starts typing\n    setFormErrors((prev: any) => {\n      const newErrors: any = {...prev};\n      delete newErrors[name];\n      return newErrors;\n    });\n  }, []);\n\n  /**\n   * Handle input blur.\n   */\n  const handleInputBlur: any = useCallback((name: string) => {\n    setTouchedFields((prev: any) => ({...prev, [name]: true}));\n  }, []);\n\n  /**\n   * Validate required fields based on components.\n   */\n  const validateForm: any = useCallback(\n    (components: any[]): {errors: Record<string, string>; isValid: boolean} => {\n      const errors: Record<string, string> = {};\n\n      const validateComponents = (comps: any[]): any => {\n        comps.forEach((comp: any) => {\n          if (\n            (comp.type === 'TEXT_INPUT' ||\n              comp.type === 'EMAIL_INPUT' ||\n              comp.type === 'SELECT' ||\n              comp.type === 'PHONE_INPUT' ||\n              comp.type === 'OTP_INPUT' ||\n              comp.type === 'DATE_INPUT') &&\n            comp.ref\n          ) {\n            const value: any = formValues[comp.ref];\n            if (comp.required && (!value || value.trim() === '')) {\n              errors[comp.ref] = `${comp.label || comp.ref} is required`;\n            } else {\n              // Email validation\n              if (comp.type === 'EMAIL_INPUT' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n                errors[comp.ref] = 'Please enter a valid email address';\n              }\n              // Evaluate declarative validation rules from meta.components[].validation.\n              if (value && !errors[comp.ref]) {\n                const ruleValidator = buildValidatorFromRules(comp.validation);\n                if (ruleValidator) {\n                  const message = ruleValidator(value);\n                  if (message) {\n                    errors[comp.ref] = t(message);\n                  }\n                }\n              }\n            }\n          }\n          if (comp.components && Array.isArray(comp.components)) {\n            validateComponents(comp.components);\n          }\n        });\n      };\n\n      validateComponents(components);\n\n      return {errors, isValid: Object.keys(errors).length === 0};\n    },\n    [formValues],\n  );\n\n  /**\n   * Handle form submission.\n   */\n  const handleSubmit: any = useCallback(\n    async (component: any, data?: Record<string, any>) => {\n      if (!currentFlow) {\n        return;\n      }\n\n      // Validate form before submission\n      const components: any = currentFlow.data?.components || [];\n      const validation: any = validateForm(components);\n\n      if (!validation.isValid) {\n        setFormErrors(validation.errors);\n        setIsFormValid(false);\n        // Mark all fields as touched\n        const touched: Record<string, boolean> = {};\n        Object.keys(validation.errors).forEach((key: any) => {\n          touched[key] = true;\n        });\n        setTouchedFields((prev: any) => ({...prev, ...touched}));\n        return;\n      }\n\n      setIsLoading(true);\n      setApiError(null);\n      setIsFormValid(true);\n\n      try {\n        // Build payload with form values\n        const inputs: any = data || formValues;\n\n        const payload: Record<string, any> = {\n          executionId: currentFlow.executionId,\n          inputs,\n          verbose: true,\n          ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n        };\n\n        // Add action ID if component has one\n        if (component?.id) {\n          payload['action'] = component.id;\n        }\n\n        const rawResponse: any = await onSubmit(payload);\n        const response: any = normalizeFlowResponseLocal(rawResponse);\n        onFlowChange?.(response);\n\n        await setChallengeToken(response.challengeToken ?? null);\n\n        // Check for error status\n        if (response.flowStatus === 'ERROR') {\n          handleError(response);\n          return;\n        }\n\n        // Update current flow and reset form for next step\n        setCurrentFlow(response);\n        setFormValues({});\n        setFormErrors({});\n        setTouchedFields({});\n\n        // Display error from INCOMPLETE response\n        if (response?.error) {\n          handleError(response);\n        }\n      } catch (err) {\n        handleError(err);\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [currentFlow, formValues, validateForm, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal],\n  );\n\n  /**\n   * Reset the flow to invite another user.\n   */\n  const resetFlow: any = useCallback(() => {\n    setIsFlowInitialized(false);\n    setCurrentFlow(null);\n    setApiError(null);\n    setFormValues({});\n    setFormErrors({});\n    setTouchedFields({});\n    initializationAttemptedRef.current = false;\n  }, []);\n\n  /**\n   * Initialize the flow on component mount.\n   */\n  useEffect(() => {\n    if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {\n      initializationAttemptedRef.current = true;\n\n      (async (): Promise<void> => {\n        setIsLoading(true);\n        setApiError(null);\n\n        try {\n          const payload: any = {\n            flowType: EmbeddedFlowType.UserOnboarding,\n            verbose: true,\n          };\n\n          const rawResponse: any = await onInitialize(payload);\n          const response: any = normalizeFlowResponseLocal(rawResponse);\n          await setChallengeToken(response.challengeToken ?? null);\n          setCurrentFlow(response);\n          setIsFlowInitialized(true);\n          onFlowChange?.(response);\n\n          // Check for immediate error\n          if (response.flowStatus === 'ERROR') {\n            handleError(response);\n          }\n        } catch (err) {\n          handleError(err);\n        } finally {\n          setIsLoading(false);\n        }\n      })();\n    }\n  }, [isInitialized, isFlowInitialized, onInitialize, onFlowChange, handleError, normalizeFlowResponseLocal]);\n\n  /**\n   * Recalculate form validity whenever form values or components change.\n   * This ensures the submit button is enabled/disabled correctly as the user types.\n   */\n  useEffect(() => {\n    if (currentFlow && isFlowInitialized) {\n      const components: any = currentFlow.data?.components || [];\n      if (components.length > 0) {\n        const validation: any = validateForm(components);\n        setIsFormValid(validation.isValid);\n      }\n    }\n  }, [formValues, currentFlow, isFlowInitialized, validateForm]);\n\n  /**\n   * Extract title and subtitle from components.\n   */\n  const extractHeadings: any = useCallback((components: any[]): {subtitle?: string; title?: string} => {\n    let title: string | undefined;\n    let subtitle: string | undefined;\n\n    components.forEach((comp: any) => {\n      if (comp.type === 'TEXT') {\n        if (comp.variant === 'HEADING_1' && !title) {\n          title = comp.label;\n        } else if ((comp.variant === 'HEADING_2' || comp.variant === 'SUBTITLE_1') && !subtitle) {\n          subtitle = comp.label;\n        }\n      }\n    });\n\n    return {subtitle, title};\n  }, []);\n\n  /**\n   * Filter out heading components for default rendering.\n   */\n  const filterHeadings: any = useCallback(\n    (components: any[]): any[] =>\n      components.filter(\n        (comp: any) => !(comp.type === 'TEXT' && (comp.variant === 'HEADING_1' || comp.variant === 'HEADING_2')),\n      ),\n    [],\n  );\n\n  /**\n   * Render form components using the factory.\n   */\n  const renderComponents: any = useCallback(\n    (components: any[]): ReactElement[] =>\n      renderInviteUserComponents(\n        components,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        handleInputChange,\n        {\n          _customRenderers: customRenderers,\n          _theme: theme,\n          additionalData: currentFlow?.data?.additionalData,\n          fetchOrganizationUnitChildren,\n          onInputBlur: handleInputBlur,\n          onSubmit: handleSubmit,\n          size,\n          variant,\n        },\n      ),\n    [\n      customRenderers,\n      currentFlow?.data?.additionalData,\n      fetchOrganizationUnitChildren,\n      formValues,\n      touchedFields,\n      formErrors,\n      isLoading,\n      isFormValid,\n      handleInputChange,\n      handleInputBlur,\n      handleSubmit,\n      size,\n      theme,\n      variant,\n    ],\n  );\n\n  // Get components from normalized response, with fallback to meta.components\n  const components: any = currentFlow?.data?.components || currentFlow?.data?.meta?.components || [];\n  const {title, subtitle} = extractHeadings(components);\n  const componentsWithoutHeadings: any = filterHeadings(components);\n\n  // Render props\n  const renderProps: BaseInviteUserRenderProps = {\n    additionalData: currentFlow?.data?.additionalData,\n    components,\n    error: apiError,\n    executionId: currentFlow?.executionId,\n    fieldErrors: formErrors,\n    handleInputBlur,\n    handleInputChange,\n    handleSubmit,\n    isLoading,\n    isValid: isFormValid,\n    meta,\n    resetFlow,\n    subtitle,\n    title,\n    touched: touchedFields,\n    values: formValues,\n  };\n\n  // If children render prop is provided, use it for custom UI\n  if (children) {\n    return <div className={className}>{children(renderProps)}</div>;\n  }\n\n  // Default rendering\n\n  // Waiting for SDK initialization\n  if (!isInitialized) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>\n            <Spinner size=\"medium\" />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Loading state during initialization\n  if (!isFlowInitialized && isLoading) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <div style={{display: 'flex', justifyContent: 'center', padding: '2rem'}}>\n            <Spinner size=\"medium\" />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Error state during initialization\n  if (!currentFlow && apiError) {\n    return (\n      <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <AlertPrimitive variant=\"error\">\n            <AlertPrimitive.Title>Error</AlertPrimitive.Title>\n            <AlertPrimitive.Description>{apiError.message}</AlertPrimitive.Description>\n          </AlertPrimitive>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  // Flow components\n  return (\n    <CardPrimitive className={cx(className, styles.card)} variant={variant}>\n      {(showTitle || showSubtitle) && (title || subtitle) && (\n        <CardPrimitive.Header className={styles.header}>\n          {showTitle && title && (\n            <CardPrimitive.Title level={2} className={styles.title}>\n              {title}\n            </CardPrimitive.Title>\n          )}\n          {showSubtitle && subtitle && (\n            <Typography variant=\"body1\" className={styles.subtitle}>\n              {subtitle}\n            </Typography>\n          )}\n        </CardPrimitive.Header>\n      )}\n      <CardPrimitive.Content>\n        {apiError && (\n          <div style={{marginBottom: '1rem'}}>\n            <AlertPrimitive variant=\"error\">\n              <AlertPrimitive.Description>{apiError.message}</AlertPrimitive.Description>\n            </AlertPrimitive>\n          </div>\n        )}\n        <div>\n          {componentsWithoutHeadings && componentsWithoutHeadings.length > 0\n            ? renderComponents(componentsWithoutHeadings)\n            : !isLoading && (\n                <AlertPrimitive variant=\"warning\">\n                  <Typography variant=\"body1\">No form components available</Typography>\n                </AlertPrimitive>\n              )}\n          {isLoading && (\n            <div style={{display: 'flex', justifyContent: 'center', padding: '1rem'}}>\n              <Spinner size=\"small\" />\n            </div>\n          )}\n        </div>\n      </CardPrimitive.Content>\n    </CardPrimitive>\n  );\n};\n\nexport default BaseInviteUser;\n"],"mappings":"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"}

package/dist/cjs/components/presentation/auth/InviteUser/{v2/BaseInviteUser.styles.cjs → BaseInviteUser.styles.cjs}

@@ -1,10 +1,10 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let __emotion_css = require("@emotion/css");
 __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
-//#region src/components/presentation/auth/InviteUser/v2/BaseInviteUser.styles.ts
+//#region src/components/presentation/auth/InviteUser/BaseInviteUser.styles.ts
 /**
 * Creates styles for the BaseInviteUser component
 * @param theme - The theme object containing design tokens

package/dist/cjs/components/presentation/auth/InviteUser/BaseInviteUser.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInviteUser.styles.cjs","names":["card: string","header: string","title: string"],"sources":["../../../../../../src/components/presentation/auth/InviteUser/BaseInviteUser.styles.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 {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseInviteUser component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    return {\n      card,\n      header,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,OAAe,iBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;qBAErB,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,SAAiB,iBAAG;;;;CAK1B,MAAMC,QAAgB,iBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;AAQ1C,QAAO;EACL;EACA;EACA,UARuB,iBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;EAO1C;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,oCAAe"}

package/dist/cjs/components/presentation/auth/InviteUser/{v2/InviteUser.cjs → InviteUser.cjs}

@@ -1,5 +1,5 @@
-const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
-const require_useThunderID = require('../../../../../contexts/ThunderID/useThunderID.cjs');
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../../contexts/ThunderID/useThunderID.cjs');
 const require_BaseInviteUser = require('./BaseInviteUser.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
@@ -8,7 +8,7 @@ react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
-//#region src/components/presentation/auth/InviteUser/v2/InviteUser.tsx
+//#region src/components/presentation/auth/InviteUser/InviteUser.tsx
 /**
 * InviteUser component for initiating invite user flow.
 *

package/dist/cjs/components/presentation/auth/InviteUser/InviteUser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteUser.cjs","names":["InviteUser: FC<InviteUserProps>","useThunderID","EmbeddedFlowType","BaseInviteUser"],"sources":["../../../../../../src/components/presentation/auth/InviteUser/InviteUser.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 {EmbeddedFlowType, getOrganizationUnitChildren, OrganizationUnitListResponse} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useCallback} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseInviteUser, {BaseInviteUserRenderProps, InviteUserFlowResponse} from './BaseInviteUser';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\n\n/**\n * Render props for InviteUser (re-exported for convenience).\n */\nexport type InviteUserRenderProps = BaseInviteUserRenderProps;\n\n/**\n * Props for the InviteUser component.\n */\nexport interface InviteUserProps {\n  /**\n   * Render props function for custom UI.\n   * If not provided, default UI will be rendered by the SDK.\n   */\n  children?: (props: InviteUserRenderProps) => ReactNode;\n\n  /**\n   * Custom CSS class name.\n   */\n  className?: string;\n\n  /**\n   * Callback when an error occurs.\n   */\n  onError?: (error: Error) => void;\n\n  /**\n   * Callback when the flow state changes.\n   */\n  onFlowChange?: (response: InviteUserFlowResponse) => void;\n\n  /**\n   * Whether to show the subtitle.\n   */\n  showSubtitle?: boolean;\n\n  /**\n   * Whether to show the title.\n   */\n  showTitle?: boolean;\n\n  /**\n   * Size variant for the component.\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Theme variant for the component card.\n   */\n  variant?: 'outlined' | 'elevated';\n}\n\n/**\n * InviteUser component for initiating invite user flow.\n *\n * This component is designed for admin users in the thunder-develop app to:\n * 1. Select a user type (if multiple available)\n * 2. Enter user details (username, email)\n * 3. Generate an invite link for the end user\n *\n * The component uses the authenticated ThunderID SDK context to make API calls\n * with the admin's access token (requires 'system' scope).\n *\n * @example\n * ```tsx\n * import { InviteUser } from '@thunderid/react';\n *\n * const InviteUserPage = () => {\n *   const [inviteLink, setInviteLink] = useState<string>();\n *\n *   return (\n *     <InviteUser\n *       onInviteLinkGenerated={(link, executionId) => setInviteLink(link)}\n *       onError={(error) => console.error(error)}\n *     >\n *       {({ values, components, isLoading, handleInputChange, handleSubmit, inviteLink, isInviteGenerated }) => (\n *         <div>\n *           {isInviteGenerated ? (\n *             <div>\n *               <h2>Invite Link Generated!</h2>\n *               <p>{inviteLink}</p>\n *             </div>\n *           ) : (\n *             // Render form based on components\n *           )}\n *         </div>\n *       )}\n *     </InviteUser>\n *   );\n * };\n * ```\n */\nconst InviteUser: FC<InviteUserProps> = ({\n  onError,\n  onFlowChange,\n  className,\n  children,\n  size = 'medium',\n  variant = 'outlined',\n  showTitle = true,\n  showSubtitle = true,\n}: InviteUserProps): ReactElement => {\n  const {http, baseUrl, getAccessToken, isInitialized} = useThunderID();\n\n  /**\n   * Initialize the invite user flow.\n   * Makes an authenticated request to /flow/execute with flowType: USER_ONBOARDING.\n   */\n  const handleInitialize = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        flowType: EmbeddedFlowType.UserOnboarding,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: `${baseUrl}/flow/execute`,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  /**\n   * Submit flow step data.\n   * Makes an authenticated request to /flow/execute with the step data.\n   */\n  const handleSubmit = async (payload: Record<string, any>): Promise<InviteUserFlowResponse> => {\n    const response: any = await http.request({\n      data: {\n        ...payload,\n        verbose: true,\n      },\n      headers: {\n        Accept: 'application/json',\n        'Content-Type': 'application/json',\n      },\n      method: 'POST',\n      url: `${baseUrl}/flow/execute`,\n    } as any);\n\n    return response.data as InviteUserFlowResponse;\n  };\n\n  const fetchOrganizationUnitChildren: (\n    parentId: string,\n    limit: number,\n    offset: number,\n  ) => Promise<OrganizationUnitListResponse> = useCallback(\n    async (parentId: string, limit: number, offset: number): Promise<OrganizationUnitListResponse> => {\n      const accessToken: string = await getAccessToken();\n\n      return getOrganizationUnitChildren({\n        baseUrl,\n        headers: {Authorization: `Bearer ${accessToken}`},\n        limit,\n        offset,\n        organizationUnitId: parentId,\n      });\n    },\n    [baseUrl, getAccessToken],\n  );\n\n  return (\n    <BaseInviteUser\n      onInitialize={handleInitialize}\n      onSubmit={handleSubmit}\n      onError={onError}\n      onFlowChange={onFlowChange}\n      className={className}\n      fetchOrganizationUnitChildren={fetchOrganizationUnitChildren}\n      isInitialized={isInitialized}\n      size={size}\n      variant={variant}\n      showTitle={showTitle}\n      showSubtitle={showSubtitle}\n    >\n      {children}\n    </BaseInviteUser>\n  );\n};\n\nexport default InviteUser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,MAAMA,cAAmC,EACvC,SACA,cACA,WACA,UACA,OAAO,UACP,UAAU,YACV,YAAY,MACZ,eAAe,WACoB;CACnC,MAAM,EAAC,MAAM,SAAS,gBAAgB,kBAAiBC,8BAAc;;;;;CAMrE,MAAM,mBAAmB,OAAO,YAAkE;AAehG,UAdsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,UAAUC,qCAAiB;IAC3B,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK,GAAG,QAAQ;GACjB,CAAQ,EAEO;;;;;;CAOlB,MAAM,eAAe,OAAO,YAAkE;AAc5F,UAbsB,MAAM,KAAK,QAAQ;GACvC,MAAM;IACJ,GAAG;IACH,SAAS;IACV;GACD,SAAS;IACP,QAAQ;IACR,gBAAgB;IACjB;GACD,QAAQ;GACR,KAAK,GAAG,QAAQ;GACjB,CAAQ,EAEO;;AAsBlB,QACE,2CAACC;EACC,cAAc;EACd,UAAU;EACD;EACK;EACH;EACX,sDArBF,OAAO,UAAkB,OAAe,WAA0D;AAGhG,+DAAmC;IACjC;IACA,SAAS,EAAC,eAAe,UAJC,MAAM,gBAAgB,IAIC;IACjD;IACA;IACA,oBAAoB;IACrB,CAAC;KAEJ,CAAC,SAAS,eAAe,CAC1B;EAUkB;EACT;EACG;EACE;EACG;EAEb;GACc;;AAIrB,yBAAe"}

package/dist/cjs/components/presentation/auth/Recovery/BaseRecovery.cjs

@@ -1,20 +1,401 @@
 const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.cjs');
+const require_ComponentRendererContext = require('../../../../contexts/ComponentRenderer/ComponentRendererContext.cjs');
+const require_FlowProvider = require('../../../../contexts/Flow/FlowProvider.cjs');
 const require_useThunderID = require('../../../../contexts/ThunderID/useThunderID.cjs');
-const require_BaseRecovery = require('./v1/BaseRecovery.cjs');
-const require_BaseRecovery$1 = require('./v2/BaseRecovery.cjs');
+const require_useFlow = require('../../../../contexts/Flow/useFlow.cjs');
+const require_useTheme = require('../../../../contexts/Theme/useTheme.cjs');
+const require_ComponentPreferencesContext = require('../../../../contexts/I18n/ComponentPreferencesContext.cjs');
+const require_useTranslation = require('../../../../hooks/useTranslation.cjs');
+const require_useForm = require('../../../../hooks/useForm.cjs');
+const require_Spinner = require('../../../primitives/Spinner/Spinner.cjs');
+const require_flowTransformer = require('../../../../utils/flowTransformer.cjs');
+const require_Typography = require('../../../primitives/Typography/Typography.cjs');
+const require_Alert = require('../../../primitives/Alert/Alert.cjs');
+const require_Card = require('../../../primitives/Card/Card.cjs');
+const require_AuthOptionFactory = require('../AuthOptionFactory.cjs');
+const require_BaseSignUp_styles = require('../SignUp/BaseSignUp.styles.cjs');
+const require_getAuthComponentHeadings = require('../../../../utils/getAuthComponentHeadings.cjs');
+const require_Logo = require('../../../primitives/Logo/Logo.cjs');
 let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/presentation/auth/Recovery/BaseRecovery.tsx
-const BaseRecovery = (props) => {
-	const { platform } = require_useThunderID.default();
-	if (platform === __thunderid_browser.Platform.ThunderID) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseRecovery$1.default, { ...props });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseRecovery.default, { ...props });
+/**
+* Internal component that renders the V2 recovery UI and manages flow state.
+*
+* @internal
+*/
+const BaseRecoveryContent = ({ onInitialize, onSubmit, onError, onFlowChange, onComplete, error: externalError, className = "", inputClassName = "", buttonClassName = "", errorClassName = "", messageClassName = "", size = "medium", variant = "outlined", isInitialized, children, showTitle = true, showSubtitle = true }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const customRenderers = (0, react.useContext)(require_ComponentRendererContext.default);
+	const { t } = require_useTranslation.default();
+	const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = require_useFlow.default();
+	const { meta } = require_useThunderID.default();
+	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [isFlowInitialized, setIsFlowInitialized] = (0, react.useState)(false);
+	const [currentFlow, setCurrentFlow] = (0, react.useState)(null);
+	const [apiError, setApiError] = (0, react.useState)(null);
+	const initializationAttemptedRef = (0, react.useRef)(false);
+	const challengeTokenRef = (0, react.useRef)(null);
+	const handleError = (0, react.useCallback)((error) => {
+		const errorMessage = require_flowTransformer.extractErrorMessage(error, t);
+		setApiError(error instanceof Error ? error : new Error(errorMessage));
+		clearMessages();
+		addMessage({
+			message: errorMessage,
+			type: "error"
+		});
+	}, [
+		t,
+		addMessage,
+		clearMessages
+	]);
+	const normalizeFlowResponseLocal = (0, react.useCallback)((response) => {
+		if (response?.data?.components && Array.isArray(response.data.components)) return response;
+		if (response?.data) {
+			const { components } = require_flowTransformer.normalizeFlowResponse(response, t, {
+				defaultErrorKey: "components.recovery.errors.generic",
+				resolveTranslations: false
+			}, meta);
+			return {
+				...response,
+				data: {
+					...response.data,
+					components
+				}
+			};
+		}
+		return response;
+	}, [t, meta]);
+	const extractFormFields = (0, react.useCallback)((components) => {
+		const fields = [];
+		const processComponents = (comps) => {
+			comps.forEach((component) => {
+				if (component.type === __thunderid_browser.EmbeddedFlowComponentType.TextInput || component.type === __thunderid_browser.EmbeddedFlowComponentType.PasswordInput || component.type === __thunderid_browser.EmbeddedFlowComponentType.EmailInput || component.type === __thunderid_browser.EmbeddedFlowComponentType.Select || component.type === __thunderid_browser.EmbeddedFlowComponentType.DateInput) {
+					const fieldName = component.ref || component.id;
+					const ruleValidator = (0, __thunderid_browser.buildValidatorFromRules)(component.validation);
+					fields.push({
+						initialValue: "",
+						name: fieldName,
+						required: component.required || false,
+						validator: (value) => {
+							if (component.required && (!value || value.trim() === "")) return t("validations.required.field.error");
+							if ((component.type === __thunderid_browser.EmbeddedFlowComponentType.EmailInput || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return t("field.email.invalid");
+							if (ruleValidator && value) {
+								const ruleMessage = ruleValidator(value);
+								if (ruleMessage) return t(ruleMessage);
+							}
+							return null;
+						}
+					});
+				}
+				if (component.components && Array.isArray(component.components)) processComponents(component.components);
+			});
+		};
+		processComponents(components);
+		return fields;
+	}, [t]);
+	const { values: formValues, touched: touchedFields, errors: formErrors, isValid: isFormValid, setValue: setFormValue, setTouched: setFormTouched, setErrors: setFormErrors, clearErrors: clearFormErrors, validateForm, touchAllFields, reset: resetForm } = require_useForm.useForm({
+		fields: currentFlow?.data?.components ? extractFormFields(currentFlow.data.components) : [],
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		validateOnBlur: true,
+		validateOnChange: false
+	});
+	/**
+	* Project server-side validation errors from the most recent flow response into the
+	* form's `errors` state. See BaseSignIn for the same pattern.
+	*/
+	(0, react.useEffect)(() => {
+		clearFormErrors();
+		const responseFieldErrors = (currentFlow?.data)?.fieldErrors;
+		if (!responseFieldErrors || responseFieldErrors.length === 0) return;
+		const errors = {};
+		for (const fe of responseFieldErrors) if (!(fe.identifier in errors)) errors[fe.identifier] = fe.message;
+		setFormErrors(errors);
+		Object.keys(errors).forEach((field) => setFormTouched(field, true));
+	}, [
+		currentFlow,
+		setFormErrors,
+		setFormTouched,
+		clearFormErrors
+	]);
+	const setupFormFields = (0, react.useCallback)((flowResponse) => {
+		const fields = extractFormFields(flowResponse.data?.components || []);
+		const initialValues = {};
+		fields.forEach((field) => {
+			initialValues[field.name] = field.initialValue || "";
+		});
+		resetForm();
+		Object.keys(initialValues).forEach((key) => setFormValue(key, initialValues[key]));
+	}, [
+		extractFormFields,
+		resetForm,
+		setFormValue
+	]);
+	const handleInputChange = (name, value) => {
+		setFormValue(name, value);
+	};
+	const handleInputBlur = (name) => {
+		setFormTouched(name, true);
+	};
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!currentFlow) return;
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		setIsLoading(true);
+		setApiError(null);
+		clearMessages();
+		try {
+			const filteredInputs = {};
+			if (data) Object.entries(data).forEach(([key, value]) => {
+				if (value !== null && value !== void 0 && value !== "") filteredInputs[key] = value;
+			});
+			const payload = {
+				...currentFlow.executionId && { executionId: currentFlow.executionId },
+				...component.id && { action: component.id },
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {},
+				inputs: filteredInputs
+			};
+			const rawResponse = await onSubmit?.(payload);
+			if (!rawResponse) return;
+			const response = normalizeFlowResponseLocal(rawResponse);
+			onFlowChange?.(response);
+			if (response.challengeToken !== void 0) challengeTokenRef.current = response.challengeToken ?? null;
+			if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Error) {
+				handleError(response);
+				onError?.(new Error(require_flowTransformer.extractErrorMessage(response, t)));
+				return;
+			}
+			if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Complete) {
+				onComplete?.(response);
+				return;
+			}
+			if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Incomplete) {
+				setCurrentFlow(response);
+				setupFormFields(response);
+				if (response?.error) handleError(response);
+			}
+		} catch (err) {
+			handleError(err);
+			onError?.(err);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	const containerClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery"),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${size}`),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${variant}`)
+	], className);
+	const inputClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input--large")
+	], inputClassName);
+	const buttonClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button--large")
+	], buttonClassName);
+	const errorClasses = (0, __emotion_css.cx)([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__error")], errorClassName);
+	const messageClasses = (0, __emotion_css.cx)([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__messages")], messageClassName);
+	const renderComponents = (0, react.useCallback)((components) => require_AuthOptionFactory.renderRecoveryComponents(components, formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, {
+		_customRenderers: customRenderers,
+		_theme: theme,
+		buttonClassName: buttonClasses,
+		inputClassName: inputClasses,
+		meta,
+		onInputBlur: handleInputBlur,
+		onSubmit: handleSubmit,
+		size,
+		variant
+	}), [
+		customRenderers,
+		buttonClasses,
+		formErrors,
+		formValues,
+		handleInputBlur,
+		handleSubmit,
+		inputClasses,
+		isFormValid,
+		meta,
+		isLoading,
+		size,
+		theme,
+		touchedFields,
+		variant
+	]);
+	(0, react.useEffect)(() => {
+		if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
+			initializationAttemptedRef.current = true;
+			(async () => {
+				setIsLoading(true);
+				setApiError(null);
+				clearMessages();
+				try {
+					const rawResponse = await onInitialize?.();
+					if (!rawResponse) return;
+					const response = normalizeFlowResponseLocal(rawResponse);
+					if (response.challengeToken !== void 0) challengeTokenRef.current = response.challengeToken ?? null;
+					if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Error) {
+						handleError(response);
+						onError?.(new Error(require_flowTransformer.extractErrorMessage(response, t)));
+					}
+					setCurrentFlow(response);
+					setIsFlowInitialized(true);
+					onFlowChange?.(response);
+					if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Complete) {
+						onComplete?.(response);
+						return;
+					}
+					if (response.flowStatus === __thunderid_browser.EmbeddedRecoveryFlowStatus.Incomplete) {
+						setupFormFields(response);
+						if (response?.error) handleError(response);
+					}
+				} catch (err) {
+					handleError(err);
+					onError?.(err);
+				} finally {
+					setIsLoading(false);
+				}
+			})();
+		}
+	}, [
+		isFlowInitialized,
+		isInitialized,
+		normalizeFlowResponseLocal,
+		onComplete,
+		onError,
+		onFlowChange,
+		onInitialize,
+		setupFormFields,
+		t
+	]);
+	if (children) {
+		if (typeof children === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClasses,
+			children: children({
+				components: currentFlow?.data?.components || [],
+				error: apiError,
+				fieldErrors: formErrors,
+				handleInputChange,
+				handleSubmit,
+				isLoading,
+				isValid: isFormValid,
+				messages: flowMessages || [],
+				meta,
+				subtitle: flowSubtitle || t("recovery.subheading"),
+				title: flowTitle || t("recovery.heading"),
+				touched: touchedFields,
+				validateForm: () => {
+					const result = validateForm();
+					return {
+						fieldErrors: result.errors,
+						isValid: result.isValid
+					};
+				},
+				values: formValues
+			})
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClasses,
+			children
+		});
+	}
+	if (!isFlowInitialized && isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: styles.loadingContainer,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "medium" })
+		}) })
+	});
+	if (!currentFlow) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Alert.default, {
+			variant: "error",
+			className: errorClasses,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Title, { children: t("errors.heading") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: t("errors.recovery.flow.initialization.failure") })]
+		}) })
+	});
+	const { title, subtitle, componentsWithoutHeadings } = require_getAuthComponentHeadings.default(currentFlow.data?.components || [], flowTitle, flowSubtitle, t("recovery.heading"), t("recovery.subheading"));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		variant,
+		children: [(showTitle || showSubtitle) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Header, {
+			className: styles.header,
+			children: [showTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Title, {
+				level: 2,
+				className: styles.title,
+				children: title
+			}), showSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				variant: "body1",
+				className: styles.subtitle,
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Content, { children: [
+			externalError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.flowMessagesContainer,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: "error",
+					className: (0, __emotion_css.cx)(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: externalError.message })
+				})
+			}),
+			flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.flowMessagesContainer,
+				children: flowMessages.map((message, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+					className: (0, __emotion_css.cx)(styles.flowMessageItem, messageClasses),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: message.message })
+				}, message.id || index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.contentContainer,
+				children: componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderComponents(componentsWithoutHeadings) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: "warning",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						variant: "body1",
+						children: t("errors.recovery.components.not.available")
+					})
+				})
+			})
+		] })]
+	});
 };
-var BaseRecovery_default$2 = BaseRecovery;
+/**
+* BaseRecovery component for ThunderIDV2 that provides an embedded account/password recovery flow.
+* Accepts API functions as props to maintain framework independence.
+*/
+const BaseRecovery = ({ preferences, showLogo = true,...rest }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [showLogo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: styles.logoContainer,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Logo.default, { size: "large" })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FlowProvider.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseRecoveryContent, {
+		showLogo,
+		...rest
+	}) })] });
+	if (!preferences) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentPreferencesContext.default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseRecovery_default = BaseRecovery;
 
 //#endregion
-exports.default = BaseRecovery_default$2;
+exports.default = BaseRecovery_default;
 //# sourceMappingURL=BaseRecovery.cjs.map