@thunderid/react 1.4.1 → 1.6.0

package/dist/cjs/components/auth/SignUp/BaseSignUp.cjs

@@ -0,0 +1,718 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.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_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_flowTransformer = require('../../../utils/flowTransformer.cjs');
+const require_useForm = require('../../../hooks/useForm.cjs');
+const require_Spinner = require('../../primitives/Spinner/Spinner.cjs');
+const require_composeAffixedInputs = require('../../../utils/composeAffixedInputs.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('../flow/AuthOptionFactory.cjs');
+const require_passkey = require('../../../utils/passkey.cjs');
+const require_BaseSignUp_styles = require('./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);
+
+//#region src/components/auth/SignUp/BaseSignUp.tsx
+const logger = (0, __thunderid_browser.createPackageComponentLogger)("@thunderid/react", "BaseSignUp");
+/**
+* Internal component that consumes FlowContext and renders the sign-up UI.
+*/
+const BaseSignUpContent = ({ afterSignUpUrl, onInitialize, onSubmit, onError, onFlowChange, onComplete, error: externalError, id, className = "", inputClassName = "", buttonClassName = "", errorClassName = "", messageClassName = "", size = "medium", variant = "outlined", isInitialized, children, showTitle = true, showSubtitle = true, revalidateOnChangeAfterBlur = false }) => {
+	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, isInitialized: isSdkInitialized, getStorageManager, vendor } = 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 [isStorageReady, setIsStorageReady] = (0, react.useState)(false);
+	const [passkeyState, setPasskeyState] = (0, react.useState)({
+		actionId: null,
+		creationOptions: null,
+		error: null,
+		executionId: null,
+		isActive: false
+	});
+	const challengeTokenRef = (0, react.useRef)(null);
+	const initializationAttemptedRef = (0, react.useRef)(false);
+	const passkeyProcessedRef = (0, react.useRef)(false);
+	const isFlowCompletedRef = (0, react.useRef)(false);
+	const cleanupActivePopupRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => () => cleanupActivePopupRef.current?.(), []);
+	/**
+	* Restore any challenge token persisted before an OAuth redirect.
+	*/
+	(0, react.useEffect)(() => {
+		if (!isSdkInitialized) return;
+		(async () => {
+			try {
+				const tempData = await (await getStorageManager())?.getTemporaryData();
+				if (tempData?.challengeToken) challengeTokenRef.current = tempData.challengeToken;
+			} catch {} finally {
+				setIsStorageReady(true);
+			}
+		})();
+	}, [isSdkInitialized]);
+	/**
+	* Updates challengeTokenRef immediately (stale-closure safe) and persists via
+	* the provider's StorageManager so the token survives OAuth redirects.
+	*/
+	const setChallengeToken = async (challengeToken) => {
+		challengeTokenRef.current = challengeToken;
+		try {
+			const storageManager = await getStorageManager();
+			if (storageManager) if (challengeToken) await storageManager.setTemporaryDataParameter("challengeToken", challengeToken);
+			else await storageManager.removeTemporaryDataParameter("challengeToken");
+		} catch {
+			logger.warn("Failed to persist challenge token in storage.");
+		}
+	};
+	/**
+	* Handle error responses and extract meaningful error messages
+	* Uses the transformer's extractErrorMessage function.
+	*/
+	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
+	]);
+	/**
+	* Normalize flow response to ensure component-driven format
+	* Uses normalizeFlowResponse for modern API format responses
+	*/
+	const normalizeFlowResponseLocal = (0, react.useCallback)((response) => {
+		if (response?.data) {
+			const { components } = require_flowTransformer.normalizeFlowResponse(response, t, {
+				defaultErrorKey: "components.signUp.errors.generic",
+				resolveTranslations: false
+			}, meta);
+			return {
+				...response,
+				data: {
+					...response.data,
+					components
+				}
+			};
+		}
+		return response;
+	}, [t, meta]);
+	/**
+	* Extract form fields from flow components
+	*/
+	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 (ruleValidator && value) {
+								const ruleMessage = ruleValidator(value);
+								if (ruleMessage) return t(ruleMessage);
+							}
+							if ((component.type === __thunderid_browser.EmbeddedFlowComponentType.EmailInput || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return t("field.email.invalid");
+							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, setTouchedFields, setErrors: setFormErrors, clearErrors: clearFormErrors, validateForm, touchAllFields, reset: resetForm } = require_useForm.useForm({
+		fields: (0, react.useMemo)(() => (currentFlow?.data)?.components ? extractFormFields(currentFlow.data.components) : [], [currentFlow, extractFormFields]),
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		revalidateOnChangeAfterBlur,
+		validateOnBlur: true,
+		validateOnChange: false
+	});
+	(0, react.useEffect)(() => {
+		clearFormErrors();
+		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;
+		}
+		setTouchedFields(touched);
+		setFormErrors(errors);
+	}, [
+		currentFlow,
+		setFormErrors,
+		setTouchedFields,
+		clearFormErrors
+	]);
+	/**
+	* Setup form fields based on the current flow.
+	*/
+	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
+	]);
+	/**
+	* Determine whether a completed flow finished on a display-only screen.
+	* Such a completion must be rendered, not redirected past.
+	*/
+	const isDisplayOnlyCompletion = (response) => {
+		const data = response?.data;
+		const components = data?.components ?? data?.meta?.components;
+		return response?.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Complete && Array.isArray(components) && components.length > 0 && !response?.assertion && !data?.redirectURL && !response?.redirectUrl;
+	};
+	/**
+	* Handle a completed flow. A flow can complete on a display-only screen; in
+	* that case render the screen and skip onComplete so the wrapper does not
+	* immediately redirect away from it. Otherwise hand off to onComplete.
+	*/
+	const handleFlowCompletion = (response) => {
+		if (isDisplayOnlyCompletion(response)) {
+			const normalized = normalizeFlowResponseLocal(response);
+			setCurrentFlow(normalized);
+			setupFormFields(normalized);
+			return;
+		}
+		isFlowCompletedRef.current = true;
+		onComplete?.(response);
+	};
+	/**
+	* Handle input value changes.
+	* Only updates the value without marking as touched.
+	* Touched state is set on blur to avoid premature validation.
+	*/
+	const handleInputChange = (name, value) => {
+		setFormValue(name, value);
+	};
+	/**
+	* Handle input blur event.
+	* Marks the field as touched, which triggers validation.
+	*/
+	const handleInputBlur = (name) => {
+		setFormTouched(name, true);
+	};
+	/**
+	* Check if the response contains a redirection URL and perform the redirect if necessary.
+	* @param response - The sign-up response
+	* @param existingPopup - A popup still open from the previous redirect, navigated instead of opening a new one
+	* @returns true if a redirect was performed, false otherwise
+	*/
+	const handleRedirectionIfNeeded = (response, existingPopup) => {
+		if (response?.type === __thunderid_browser.EmbeddedSignUpFlowType.Redirection && (response?.data)?.redirectURL) {
+			/**
+			* Open a popup window to handle redirection prompts for social sign-up
+			*/
+			const redirectUrl = response.data.redirectURL;
+			const expectedState = new URL(redirectUrl).searchParams.get("state");
+			const isThisRound = (state) => !expectedState || state === expectedState;
+			const reusablePopup = existingPopup && !existingPopup.closed ? existingPopup : null;
+			if (reusablePopup) reusablePopup.location.href = redirectUrl;
+			const popup = reusablePopup ?? window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
+			if (!popup) {
+				logger.error("Failed to open popup window");
+				return false;
+			}
+			let hasProcessedCallback = false;
+			let popupMonitor = null;
+			let messageHandler = null;
+			/**
+			* Clean up event listener and popup monitor
+			*/
+			const cleanup = () => {
+				if (messageHandler) window.removeEventListener("message", messageHandler);
+				if (popupMonitor) clearInterval(popupMonitor);
+			};
+			cleanupActivePopupRef.current = cleanup;
+			/**
+			* Continue the flow with the provider's callback, then close the popup, unless a chained REDIRECTION
+			* (e.g. the account-linking re-authentication) takes it over.
+			*/
+			const continueWithCode = async (code, state) => {
+				const payload = {
+					...currentFlow?.executionId && { executionId: currentFlow.executionId },
+					inputs: {
+						code,
+						state
+					},
+					...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {}
+				};
+				try {
+					const continueResponse = await onSubmit(payload);
+					cleanup();
+					await setChallengeToken(continueResponse.challengeToken ?? null);
+					onFlowChange?.(continueResponse);
+					if (continueResponse.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Error) {
+						handleError(continueResponse);
+						onError?.(continueResponse);
+					} else if (continueResponse.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Complete) handleFlowCompletion(continueResponse);
+					else if (continueResponse.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Incomplete) {
+						const normalizedContinueResponse = normalizeFlowResponseLocal(continueResponse);
+						if (normalizedContinueResponse?.type === __thunderid_browser.EmbeddedSignUpFlowType.Redirection) {
+							if (!handleRedirectionIfNeeded(normalizedContinueResponse, popup)) {
+								popup.close();
+								const popupError = new Error(t("errors.signup.popup.failure"));
+								handleError(popupError);
+								onError?.(popupError);
+							}
+							return;
+						}
+						setCurrentFlow(normalizedContinueResponse);
+						setupFormFields(normalizedContinueResponse);
+						if (normalizedContinueResponse?.error) handleError(normalizedContinueResponse);
+					}
+					popup.close();
+				} catch (err) {
+					handleError(err);
+					onError?.(err);
+					popup.close();
+					cleanup();
+				}
+			};
+			/**
+			* Add an event listener to the window to capture the message from the popup
+			*/
+			messageHandler = async function messageEventHandler(event) {
+				/**
+				* Check if the message is from our popup window
+				*/
+				if (event.source !== popup) return;
+				/**
+				* Check the origin of the message to ensure it's from a trusted source
+				*/
+				const expectedOrigin = afterSignUpUrl ? new URL(afterSignUpUrl).origin : window.location.origin;
+				if (event.origin !== expectedOrigin && event.origin !== window.location.origin) return;
+				const { code, state } = event.data;
+				if (code && state && isThisRound(state) && !hasProcessedCallback) {
+					hasProcessedCallback = true;
+					await continueWithCode(code, state);
+				}
+			};
+			window.addEventListener("message", messageHandler);
+			/**
+			* Monitor popup for closure and URL changes
+			*/
+			popupMonitor = setInterval(async () => {
+				try {
+					if (popup.closed) {
+						cleanup();
+						return;
+					}
+					if (hasProcessedCallback) return;
+					try {
+						const popupUrl = popup.location.href;
+						if (popupUrl && (popupUrl.includes("code=") || popupUrl.includes("error="))) {
+							const url = new URL(popupUrl);
+							const code = url.searchParams.get("code");
+							const state = url.searchParams.get("state");
+							const error = url.searchParams.get("error");
+							if (!isThisRound(state)) return;
+							hasProcessedCallback = true;
+							if (error) {
+								logger.error("OAuth error:");
+								popup.close();
+								cleanup();
+								return;
+							}
+							if (code && state) await continueWithCode(code, state);
+						}
+					} catch (e) {}
+				} catch (e) {
+					logger.error("Error monitoring popup:");
+				}
+			}, 1e3);
+			return true;
+		}
+		return false;
+	};
+	/**
+	* Handle component submission (for buttons outside forms).
+	*/
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!currentFlow || isFlowCompletedRef.current) return;
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		setIsLoading(true);
+		setApiError(null);
+		clearMessages();
+		try {
+			const composedData = data ? require_composeAffixedInputs.default(data, vendor) : void 0;
+			const filteredInputs = {};
+			if (composedData) Object.entries(composedData).forEach(([key, value]) => {
+				if (value !== null && value !== void 0 && value !== "") filteredInputs[key] = value;
+			});
+			const response = normalizeFlowResponseLocal(await onSubmit({
+				...currentFlow.executionId && { executionId: currentFlow.executionId },
+				...component.id && { action: component.id },
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {},
+				inputs: filteredInputs
+			}));
+			onFlowChange?.(response);
+			await setChallengeToken(response.challengeToken ?? null);
+			if (response.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Error) {
+				handleError(response);
+				onError?.(new Error(require_flowTransformer.extractErrorMessage(response, t)));
+				return;
+			}
+			if (response.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Complete) {
+				handleFlowCompletion(response);
+				return;
+			}
+			if (response.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Incomplete) {
+				if (handleRedirectionIfNeeded(response)) return;
+				if (response.data?.additionalData?.passkeyCreationOptions) {
+					const { passkeyCreationOptions } = response.data.additionalData;
+					const effectiveExecutionIdForPasskey = response.executionId ?? currentFlow?.executionId;
+					passkeyProcessedRef.current = false;
+					setPasskeyState({
+						actionId: component.id || "submit",
+						creationOptions: passkeyCreationOptions,
+						error: null,
+						executionId: effectiveExecutionIdForPasskey,
+						isActive: true
+					});
+					setIsLoading(false);
+					return;
+				}
+				setCurrentFlow(response);
+				setupFormFields(response);
+				if (response?.error) handleError(response);
+			}
+		} catch (err) {
+			handleError(err);
+			onError?.(err);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	/**
+	* Handle passkey registration when passkey state becomes active.
+	* This effect auto-triggers the browser passkey popup and submits the result.
+	*/
+	(0, react.useEffect)(() => {
+		if (!passkeyState.isActive || !passkeyState.creationOptions || !passkeyState.executionId) return;
+		if (passkeyProcessedRef.current) return;
+		passkeyProcessedRef.current = true;
+		const performPasskeyRegistration = async () => {
+			const passkeyResponse = await require_passkey.handlePasskeyRegistration(passkeyState.creationOptions);
+			const passkeyResponseObj = JSON.parse(passkeyResponse);
+			const inputs = {
+				attestationObject: passkeyResponseObj.response.attestationObject,
+				clientDataJSON: passkeyResponseObj.response.clientDataJSON,
+				credentialId: passkeyResponseObj.id
+			};
+			const processedResponse = normalizeFlowResponseLocal(await onSubmit({
+				executionId: passkeyState.executionId ?? void 0,
+				inputs,
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {}
+			}));
+			onFlowChange?.(processedResponse);
+			if (processedResponse.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Complete) handleFlowCompletion(processedResponse);
+			else {
+				setCurrentFlow(processedResponse);
+				setupFormFields(processedResponse);
+			}
+		};
+		performPasskeyRegistration().then(() => {
+			setPasskeyState({
+				actionId: null,
+				creationOptions: null,
+				error: null,
+				executionId: null,
+				isActive: false
+			});
+		}).catch((error) => {
+			setPasskeyState((prev) => ({
+				...prev,
+				error,
+				isActive: false
+			}));
+			handleError(error);
+			onError?.(error);
+		});
+	}, [
+		passkeyState.isActive,
+		passkeyState.creationOptions,
+		passkeyState.executionId
+	]);
+	const containerClasses = require_emotion.cx([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("signup"),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`signup--${size}`),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`signup--${variant}`)
+	], className);
+	const inputClasses = require_emotion.cx([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("signup__input"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signup__input--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signup__input--large")
+	], inputClassName);
+	const buttonClasses = require_emotion.cx([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("signup__button"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signup__button--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("signup__button--large")
+	], buttonClassName);
+	const errorClasses = require_emotion.cx([(0, __thunderid_browser.withVendorCSSClassPrefix)("signup__error")], errorClassName);
+	const messageClasses = require_emotion.cx([(0, __thunderid_browser.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
+	/**
+	* Render form components based on flow data using the factory
+	*/
+	const renderComponents = (0, react.useCallback)((components) => require_AuthOptionFactory.renderSignUpComponents(components, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, handleInputChange, {
+		_customRenderers: customRenderers,
+		_theme: theme,
+		additionalData: currentFlow?.data?.additionalData,
+		buttonClassName: buttonClasses,
+		inputClassName: inputClasses,
+		meta,
+		onInputBlur: handleInputBlur,
+		onSubmit: handleSubmit,
+		size,
+		t,
+		variant,
+		vendor
+	}), [
+		currentFlow,
+		customRenderers,
+		meta,
+		t,
+		formValues,
+		touchedFields,
+		formErrors,
+		isFormValid,
+		isLoading,
+		size,
+		theme,
+		variant,
+		vendor,
+		inputClasses,
+		buttonClasses,
+		handleSubmit,
+		handleInputBlur
+	]);
+	/**
+	* Parse URL parameters to check for OAuth redirect state.
+	*/
+	const getUrlParams = () => {
+		const urlParams = new URL(window?.location?.href ?? "").searchParams;
+		return {
+			code: urlParams.get("code"),
+			error: urlParams.get("error"),
+			state: urlParams.get("state")
+		};
+	};
+	(0, react.useEffect)(() => {
+		const urlParams = getUrlParams();
+		if (urlParams.code || urlParams.state) return;
+		if (isInitialized && isStorageReady && !isFlowInitialized && !initializationAttemptedRef.current) {
+			initializationAttemptedRef.current = true;
+			(async () => {
+				setIsLoading(true);
+				setApiError(null);
+				clearMessages();
+				try {
+					const payload = challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : void 0;
+					const response = normalizeFlowResponseLocal(await onInitialize?.(payload));
+					await setChallengeToken(response.challengeToken ?? null);
+					setCurrentFlow(response);
+					setIsFlowInitialized(true);
+					onFlowChange?.(response);
+					if (window?.location?.href) {
+						const url = new URL(window.location.href);
+						url.searchParams.delete("executionId");
+						url.searchParams.delete("applicationId");
+						window.history.replaceState({}, "", url.toString());
+					}
+					if (response.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Error) {
+						handleError(response);
+						onError?.(new Error(require_flowTransformer.extractErrorMessage(response, t)));
+						return;
+					}
+					if (response.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Complete) {
+						handleFlowCompletion(response);
+						return;
+					}
+					if (response.flowStatus === __thunderid_browser.EmbeddedSignUpFlowStatus.Incomplete) {
+						setupFormFields(response);
+						if (response?.error) handleError(response);
+					}
+				} catch (err) {
+					handleError(err);
+					onError?.(err);
+				} finally {
+					setIsLoading(false);
+				}
+			})();
+		}
+	}, [
+		isInitialized,
+		isStorageReady,
+		isFlowInitialized,
+		onInitialize,
+		onComplete,
+		onError,
+		onFlowChange,
+		setupFormFields,
+		normalizeFlowResponseLocal,
+		afterSignUpUrl,
+		t
+	]);
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		id,
+		className: containerClasses,
+		children: children({
+			additionalData: currentFlow?.data?.additionalData ?? {},
+			components: (currentFlow?.data)?.components || [],
+			error: apiError,
+			fieldErrors: formErrors,
+			handleInputChange,
+			handleSubmit,
+			isLoading,
+			isValid: isFormValid,
+			messages: flowMessages || [],
+			subtitle: flowSubtitle || t("signup.subheading"),
+			title: flowTitle || t("signup.heading"),
+			touched: touchedFields,
+			validateForm: () => {
+				const result = validateForm();
+				return {
+					fieldErrors: result.errors,
+					isValid: result.isValid
+				};
+			},
+			values: formValues
+		})
+	});
+	if (!isFlowInitialized && isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		id,
+		className: require_emotion.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, {
+		id,
+		className: require_emotion.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.signup.flow.initialization.failure") })]
+		}) })
+	});
+	const { title, subtitle, componentsWithoutHeadings } = require_getAuthComponentHeadings.default(currentFlow.data?.components || [], flowTitle, flowSubtitle, t("signup.heading"), t("signup.subheading"));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default, {
+		id,
+		className: require_emotion.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: require_emotion.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: require_emotion.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.signup.components.not.available")
+					})
+				})
+			})
+		] })]
+	});
+};
+/**
+* BaseSignUp component that provides embedded sign-up flow for ThunderIDV2.
+* This component handles both the presentation layer and sign-up flow logic.
+* It accepts API functions as props to maintain framework independence.
+*/
+const BaseSignUp = ({ 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)(BaseSignUpContent, {
+		showLogo,
+		...rest
+	}) })] });
+	if (!preferences) return content;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComponentPreferencesContext.default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseSignUp_default = BaseSignUp;
+
+//#endregion
+exports.default = BaseSignUp_default;
+//# sourceMappingURL=BaseSignUp.cjs.map