@thunderid/react 1.4.1 → 1.6.0

package/dist/cjs/components/auth/flow/AuthOptionFactory.cjs

@@ -0,0 +1,642 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_composeAffixedInputs = require('../../../utils/composeAffixedInputs.cjs');
+const require_Typography = require('../../primitives/Typography/Typography.cjs');
+const require_ConsentCheckboxList = require('./ConsentCheckboxList.cjs');
+const require_Consent = require('./Consent.cjs');
+const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs');
+const require_Select = require('../../primitives/Select/Select.cjs');
+const require_FieldFactory = require('./FieldFactory.cjs');
+const require_FlowTimer = require('./FlowTimer.cjs');
+const require_ImageComponent = require('./ImageComponent.cjs');
+const require_AffixedField = require('../../primitives/AffixedField/AffixedField.cjs');
+const require_BaseAuthFlowSelect = require('../../primitives/AuthFlowSelect/BaseAuthFlowSelect.cjs');
+const require_CopyableText = require('../../primitives/CopyableText/CopyableText.cjs');
+const require_Divider = require('../../primitives/Divider/Divider.cjs');
+const require_flowIconRegistry = require('../../primitives/Icons/flowIconRegistry.cjs');
+const require_KeyValueList = require('../../primitives/KeyValueList/KeyValueList.cjs');
+const require_BaseUserSelect = require('../../primitives/UserSelect/BaseUserSelect.cjs');
+const require_BaseUserTypeSelect = require('../../primitives/UserTypeSelect/BaseUserTypeSelect.cjs');
+const require_FacebookButton = require('../buttons/FacebookButton.cjs');
+const require_GitHubButton = require('../buttons/GitHubButton.cjs');
+const require_GoogleButton = require('../buttons/GoogleButton.cjs');
+const require_LinkedInButton = require('../buttons/LinkedInButton.cjs');
+const require_MicrosoftButton = require('../buttons/MicrosoftButton.cjs');
+const require_SignInWithEthereumButton = require('../buttons/SignInWithEthereumButton.cjs');
+const require_SmsOtpButton = require('../buttons/SmsOtpButton.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 dompurify = require("dompurify");
+dompurify = require_rolldown_runtime.__toESM(dompurify);
+
+//#region src/components/auth/flow/AuthOptionFactory.tsx
+const logger = (0, __thunderid_browser.createPackageComponentLogger)("@thunderid/react", "AuthOptionFactory");
+/**
+* Replaces `emoji:` URIs embedded in HTML before DOMPurify sanitization.
+*
+* DOMPurify strips unknown URI schemes from attributes (e.g. `src="emoji:🦊"` → `src=""`).
+* This function converts:
+*   - `<img src="emoji:X" alt="Y">` → `<span role="img" aria-label="Y">X</span>`
+*   - Any remaining `emoji:X` text occurrences → `X`
+*/
+let richTextClassCache;
+/** Ensures rich-text content (including all inner elements from the server) always word-wraps. */
+function getRichTextClass() {
+	richTextClassCache ??= require_emotion.css`
+    overflow-wrap: anywhere;
+    & * {
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    & .rich-text-align-left {
+      text-align: left;
+    }
+    & .rich-text-align-center {
+      text-align: center;
+    }
+    & .rich-text-align-right {
+      text-align: right;
+    }
+    & .rich-text-align-justify {
+      text-align: justify;
+    }
+    & a,
+    & .rich-text-link {
+      text-decoration: underline;
+    }
+    & span[role='img'] {
+      display: inline-block;
+    }
+  `;
+	return richTextClassCache;
+}
+let authOptionIconClassCache;
+function getAuthOptionIconClass() {
+	authOptionIconClassCache ??= require_emotion.css({
+		height: "1.25em",
+		objectFit: "contain",
+		width: "1.25em"
+	});
+	return authOptionIconClassCache;
+}
+/**
+* Get the appropriate FieldType for an input component.
+*/
+/** Upper bound on STACK grid slots, so a mistyped `items` cannot render thousands of cells. */
+const MAX_STACK_ITEMS = 12;
+const getFieldType = (variant) => {
+	switch (variant) {
+		case __thunderid_browser.EmbeddedFlowComponentType.EmailInput: return __thunderid_browser.FieldType.Email;
+		case __thunderid_browser.EmbeddedFlowComponentType.PhoneInput: return __thunderid_browser.FieldType.Tel;
+		case __thunderid_browser.EmbeddedFlowComponentType.PasswordInput: return __thunderid_browser.FieldType.Password;
+		case __thunderid_browser.EmbeddedFlowComponentType.TextInput:
+		default: return __thunderid_browser.FieldType.Text;
+	}
+};
+/**
+* Get typography variant from component variant.
+*/
+const getTypographyVariant = (variant) => {
+	return {
+		BODY_1: "body1",
+		BODY_2: "body2",
+		BUTTON_TEXT: "button",
+		CAPTION: "caption",
+		HEADING_1: "h1",
+		HEADING_2: "h2",
+		HEADING_3: "h3",
+		HEADING_4: "h4",
+		HEADING_5: "h5",
+		HEADING_6: "h6",
+		OVERLINE: "overline",
+		SUBTITLE_1: "subtitle1",
+		SUBTITLE_2: "subtitle2"
+	}[variant] || "h3";
+};
+/**
+* Check if a button text or action matches a social provider.
+*/
+const matchesSocialProvider = (actionId, eventType, buttonText, provider, authType, _componentVariant) => {
+	const providerId = `${provider}_auth`;
+	const providerMatches = actionId === providerId || eventType === providerId;
+	if (buttonText.toLowerCase().includes(provider)) return true;
+	if (authType === "signup") return providerMatches || buttonText.toLowerCase().includes(provider);
+	return providerMatches;
+};
+/**
+* Create an auth component from flow component configuration.
+*/
+const createAuthComponentFromFlow = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, authType, options = {}) => {
+	const theme = options._theme;
+	const customRenderers = options._customRenderers ?? {};
+	const key = options.key || component.id;
+	const customRenderer = customRenderers[component.id] ?? customRenderers[component.type];
+	if (customRenderer) {
+		const rendered = customRenderer(component, {
+			additionalData: options.additionalData,
+			authType,
+			formErrors,
+			formValues,
+			isFormValid,
+			isLoading,
+			meta: options.meta,
+			resetForm,
+			onInputBlur: options.onInputBlur,
+			onInputChange,
+			onSubmit: options.onSubmit,
+			touchedFields
+		});
+		return rendered ? (0, react.cloneElement)(rendered, { key }) : null;
+	}
+	/** Resolve any remaining {{t()}} or {{meta()}} template expressions in a string at render time. */
+	const resolve = (text) => {
+		if (!text || !options.t && !options.meta) return text || "";
+		return (0, __thunderid_browser.resolveFlowTemplateLiterals)(text, {
+			meta: options.meta,
+			t: options.t || ((k) => k)
+		});
+	};
+	const resourceSelectProps = () => {
+		const identifier = component.ref;
+		const isTouched = touchedFields[identifier] || false;
+		return {
+			className: require_emotion.cx(options.inputClassName, component.classes),
+			component,
+			error: isTouched ? formErrors[identifier] : void 0,
+			id: component.id,
+			label: resolve(component.label) || "",
+			name: identifier,
+			onBlur: () => options.onInputBlur?.(identifier),
+			onChange: (event) => onInputChange(identifier, event.target.value),
+			onError: options.onPickerError,
+			placeholder: resolve(component.placeholder),
+			required: component.required,
+			value: formValues[identifier] || ""
+		};
+	};
+	const skipUnsupported = (typeName) => {
+		logger.warn(`${typeName} component type is not supported. Skipping render.`);
+		return null;
+	};
+	switch (component.type) {
+		case __thunderid_browser.EmbeddedFlowComponentType.TextInput:
+		case __thunderid_browser.EmbeddedFlowComponentType.PasswordInput:
+		case __thunderid_browser.EmbeddedFlowComponentType.EmailInput:
+		case __thunderid_browser.EmbeddedFlowComponentType.PhoneInput: {
+			const identifier = component.ref;
+			const value = formValues[identifier] || "";
+			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
+			const fieldType = getFieldType(component.type);
+			const hasPrefixes = !!component.prefixes && component.prefixes.length > 0;
+			const hasPostfix = typeof component.postfix === "string" && component.postfix.length > 0;
+			if (hasPrefixes || hasPostfix) {
+				const prefixStateKey = require_composeAffixedInputs.affixPrefixKey(identifier, options.vendor);
+				const postfixStateKey = require_composeAffixedInputs.affixPostfixKey(identifier, options.vendor);
+				const defaultPrefixValue = hasPrefixes ? typeof component.prefixes === "string" ? component.prefixes : component.prefixes[0].value : "";
+				const selectedPrefix = formValues[prefixStateKey] ?? defaultPrefixValue;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AffixedField.default, {
+					className: require_emotion.cx(options.inputClassName, component.classes),
+					id: component.id,
+					label: resolve(component.label) || "",
+					name: identifier,
+					placeholder: resolve(component.placeholder) || "",
+					required: component.required || false,
+					error,
+					value,
+					type: fieldType,
+					prefixes: component.prefixes,
+					prefixValue: selectedPrefix,
+					onChange: (e) => onInputChange(identifier, e.target.value),
+					onBlur: () => options.onInputBlur?.(identifier),
+					onPrefixChange: (newPrefix) => onInputChange(prefixStateKey, newPrefix),
+					onFocus: () => {
+						if (hasPrefixes && formValues[prefixStateKey] === void 0) onInputChange(prefixStateKey, defaultPrefixValue);
+						if (hasPostfix && formValues[postfixStateKey] === void 0) onInputChange(postfixStateKey, component.postfix);
+					}
+				}, key);
+			}
+			return (0, react.cloneElement)(require_FieldFactory.createField({
+				className: require_emotion.cx(options.inputClassName, component.classes),
+				error,
+				id: component.id,
+				label: resolve(component.label) || "",
+				name: identifier,
+				onBlur: () => options.onInputBlur?.(identifier),
+				onChange: (newValue) => onInputChange(identifier, newValue),
+				placeholder: resolve(component.placeholder) || "",
+				required: component.required || false,
+				type: fieldType,
+				value
+			}), { key });
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.OtpInput: {
+			const identifier = component.ref;
+			const value = formValues[identifier] || "";
+			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
+			const reportedLength = Number(options.additionalData?.["otpLength"]);
+			const otpLength = Number.isInteger(reportedLength) && reportedLength > 0 ? reportedLength : void 0;
+			const numericOnly = options.additionalData?.["otpNumericOnly"] !== "false";
+			return (0, react.cloneElement)(require_FieldFactory.createField({
+				className: require_emotion.cx(options.inputClassName, component.classes),
+				error,
+				id: component.id,
+				label: resolve(component.label) || "",
+				length: otpLength,
+				name: identifier,
+				numericOnly,
+				onBlur: () => options.onInputBlur?.(identifier),
+				onChange: (newValue) => onInputChange(identifier, newValue),
+				placeholder: resolve(component.placeholder) || "",
+				required: component.required || false,
+				type: __thunderid_browser.FieldType.Otp,
+				value
+			}), { key });
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Action: {
+			const actionId = component.id;
+			const eventType = component.eventType || "";
+			const buttonText = resolve(component.label);
+			const componentVariant = component.variant || "";
+			const shouldSkipValidation = eventType.toUpperCase() !== __thunderid_browser.EmbeddedFlowEventType.Submit;
+			const buttonType = {
+				[__thunderid_browser.EmbeddedFlowEventType.Submit]: "submit",
+				[__thunderid_browser.EmbeddedFlowEventType.Reset]: "reset",
+				[__thunderid_browser.EmbeddedFlowEventType.Cancel]: "button",
+				[__thunderid_browser.EmbeddedFlowEventType.Trigger]: "button",
+				[__thunderid_browser.EmbeddedFlowEventType.Back]: "button"
+			}[eventType.toUpperCase()] ?? "submit";
+			const handleClick = () => {
+				if (options.onSubmit) {
+					const formData = {};
+					Object.keys(formValues).forEach((field) => {
+						formData[field] = formValues[field];
+					});
+					const consentPrompt = options.additionalData?.["consentPrompt"];
+					if (consentPrompt && eventType.toUpperCase() === __thunderid_browser.EmbeddedFlowEventType.Submit) {
+						const isDeny = componentVariant.toLowerCase() !== "primary";
+						const decisions = {
+							approved: !isDeny,
+							...isDeny ? { reason: __thunderid_browser.ConsentConstants.REASON_USER_DENIED } : {},
+							purposes: consentPrompt.purposes.map((p) => ({
+								approved: !isDeny,
+								elements: [...(p.essential ?? []).map((e) => ({
+									approved: !isDeny,
+									name: e.name
+								})), ...(p.optional ?? []).map((e) => ({
+									approved: !isDeny && formValues[require_ConsentCheckboxList.getConsentOptionalKey(p.purposeId, e.name)] === "true",
+									name: e.name
+								}))],
+								purposeName: p.purposeName
+							}))
+						};
+						formData["consent_decisions"] = JSON.stringify(decisions);
+					}
+					if (eventType.toUpperCase() === __thunderid_browser.EmbeddedFlowEventType.Submit) options.onSubmit(component, formData, shouldSkipValidation);
+					else {
+						resetForm();
+						options.onSubmit(component, {}, shouldSkipValidation);
+					}
+				}
+			};
+			const socialButtonClassName = require_emotion.cx(options.buttonClassName, component.classes);
+			if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GoogleButton.default, {
+				id: component.id,
+				onClick: handleClick,
+				className: socialButtonClassName
+			}, key);
+			if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GitHubButton.default, {
+				id: component.id,
+				onClick: handleClick,
+				className: socialButtonClassName
+			}, key);
+			if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FacebookButton.default, {
+				id: component.id,
+				onClick: handleClick,
+				className: socialButtonClassName
+			}, key);
+			if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MicrosoftButton.default, {
+				id: component.id,
+				onClick: handleClick,
+				className: socialButtonClassName
+			}, key);
+			if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LinkedInButton.default, {
+				id: component.id,
+				onClick: handleClick,
+				className: socialButtonClassName
+			}, key);
+			if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType, componentVariant)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SignInWithEthereumButton.default, {
+				id: component.id,
+				onClick: handleClick,
+				className: socialButtonClassName
+			}, key);
+			if (actionId === "prompt_mobile" || eventType === "prompt_mobile") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SmsOtpButton.default, {
+				id: component.id,
+				onClick: handleClick,
+				className: socialButtonClassName
+			}, key);
+			const startIconEl = component.startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: component.startIcon,
+				alt: "",
+				"aria-hidden": "true",
+				className: getAuthOptionIconClass()
+			}) : null;
+			const endIconEl = component.endIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: component.endIcon,
+				alt: "",
+				"aria-hidden": "true",
+				className: getAuthOptionIconClass()
+			}) : null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+				fullWidth: true,
+				id: component.id,
+				onClick: handleClick,
+				disabled: isLoading || !isFormValid && !shouldSkipValidation || options.isTimeoutDisabled || component.config?.disabled,
+				className: require_emotion.cx(options.buttonClassName, component.classes),
+				"data-testid": "thunderid-signin-submit",
+				variant: component.variant?.toLowerCase() === "primary" ? "solid" : "outline",
+				color: component.variant?.toLowerCase() === "primary" ? "primary" : "secondary",
+				startIcon: startIconEl,
+				endIcon: endIconEl,
+				type: buttonType,
+				children: buttonText || "Submit"
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Text: {
+			const variant = getTypographyVariant(component.variant);
+			const textAlignClass = require_emotion.css({
+				marginBottom: 2,
+				textAlign: typeof component?.align === "string" ? component.align : "left"
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				id: component.id,
+				className: require_emotion.cx(component.classes, textAlignClass),
+				variant,
+				children: resolve(component.label)
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Divider: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Divider.default, { children: resolve(component.label) || "" }, key);
+		case __thunderid_browser.EmbeddedFlowComponentType.Select: {
+			const identifier = component.ref;
+			const value = formValues[identifier] || "";
+			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
+			const selectOptions = (component.options || []).map((opt) => ({
+				label: typeof opt === "string" ? opt : String(opt.label ?? opt.value ?? ""),
+				value: typeof opt === "string" ? opt : String(opt.value ?? "")
+			}));
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.default, {
+				id: component.id,
+				name: identifier,
+				label: resolve(component.label) || "",
+				placeholder: resolve(component.placeholder),
+				required: component.required,
+				options: selectOptions,
+				value,
+				error,
+				onChange: (e) => onInputChange(identifier, e.target.value),
+				onBlur: () => options.onInputBlur?.(identifier),
+				className: require_emotion.cx(options.inputClassName, component.classes)
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.DateInput: {
+			const identifier = component.ref;
+			const value = formValues[identifier] || "";
+			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DatePicker.default, {
+				id: component.id,
+				name: identifier,
+				label: resolve(component.label) || "",
+				placeholder: resolve(component.placeholder),
+				required: component.required,
+				dateFormat: component.dateFormat,
+				value,
+				error,
+				onChange: (e) => onInputChange(identifier, e.target.value),
+				onBlur: () => options.onInputBlur?.(identifier),
+				className: require_emotion.cx(options.inputClassName, component.classes)
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.OuSelect: return skipUnsupported("OU_SELECT");
+		case __thunderid_browser.EmbeddedFlowComponentType.UserSelect: return options.fetchUsers ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseUserSelect.default, {
+			...resourceSelectProps(),
+			fetchUsers: options.fetchUsers
+		}, key) : skipUnsupported("USER_SELECT");
+		case __thunderid_browser.EmbeddedFlowComponentType.AuthFlowSelect: return options.fetchAuthFlows ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseAuthFlowSelect.default, {
+			...resourceSelectProps(),
+			fetchAuthFlows: options.fetchAuthFlows
+		}, key) : skipUnsupported("AUTH_FLOW_SELECT");
+		case __thunderid_browser.EmbeddedFlowComponentType.UserTypeSelect: return options.fetchUserTypes ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseUserTypeSelect.default, {
+			...resourceSelectProps(),
+			fetchUserTypes: options.fetchUserTypes
+		}, key) : skipUnsupported("USER_TYPE_SELECT");
+		case __thunderid_browser.EmbeddedFlowComponentType.Block:
+			if (component.components && component.components.length > 0) {
+				const formClass = require_emotion.css({
+					display: "flex",
+					flexDirection: "column",
+					gap: `calc(${theme?.vars?.spacing?.unit ?? "4px"} * 2)`
+				});
+				const blockComponents = component.components.map((childComponent, index) => createAuthComponentFromFlow(childComponent, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, authType, {
+					...options,
+					key: childComponent.id || `${component.id}_${index}`
+				})).filter(Boolean);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+					id: component.id,
+					className: require_emotion.cx(component.classes, formClass),
+					onSubmit: (event) => event.preventDefault(),
+					children: blockComponents
+				}, key);
+			}
+			return null;
+		case __thunderid_browser.EmbeddedFlowComponentType.RichText: {
+			const richTextAction = component.action;
+			const dispatchRichTextAction = () => {
+				if (!richTextAction || !options.onSubmit) return;
+				const eventTypeValue = String(richTextAction.eventType ?? __thunderid_browser.EmbeddedFlowEventType.Submit);
+				const shouldSkipValidation = eventTypeValue.toUpperCase() === String(__thunderid_browser.EmbeddedFlowEventType.Trigger);
+				const syntheticAction = {
+					eventType: eventTypeValue,
+					id: `${component.id}_action`,
+					ref: richTextAction.ref,
+					type: __thunderid_browser.EmbeddedFlowComponentType.Action
+				};
+				const formData = {};
+				Object.keys(formValues).forEach((field) => {
+					formData[field] = formValues[field];
+				});
+				options.onSubmit(syntheticAction, formData, shouldSkipValidation);
+			};
+			const isMatchingSentinelAnchor = (anchor) => anchor.getAttribute("data-action-ref") === richTextAction?.ref;
+			const handleRichTextClick = richTextAction ? (event) => {
+				const anchor = event.target.closest("a");
+				if (!anchor || !isMatchingSentinelAnchor(anchor)) return;
+				event.preventDefault();
+				dispatchRichTextAction();
+			} : void 0;
+			const handleRichTextKeyDown = richTextAction ? (event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				const anchor = event.target.closest("a");
+				if (!anchor || !isMatchingSentinelAnchor(anchor)) return;
+				event.preventDefault();
+				dispatchRichTextAction();
+			} : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: getRichTextClass(),
+				onClick: handleRichTextClick,
+				onKeyDown: handleRichTextKeyDown,
+				dangerouslySetInnerHTML: { __html: dompurify.default.sanitize((0, __thunderid_browser.resolveEmojiUrisInHtml)(resolve(component.label))) }
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Image: {
+			const explicitHeight = resolve(component.height?.toString());
+			const explicitWidth = resolve(component.width?.toString());
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageComponent.default, {
+				component: { config: {
+					alt: resolve(component.alt) || resolve(component.label) || "Image",
+					height: explicitHeight || (options.inStack ? "50" : "auto"),
+					src: resolve(component.src),
+					width: explicitWidth || (options.inStack ? "50" : "100%")
+				} },
+				formErrors: void 0,
+				formValues: void 0,
+				isFormValid: false,
+				isLoading: false,
+				onInputChange: () => {
+					throw new Error("Function not implemented.");
+				},
+				touchedFields: void 0
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Icon: {
+			const iconName = component.name || "";
+			const IconComponent = require_flowIconRegistry.default[iconName];
+			if (!IconComponent) {
+				logger.warn(`Unknown icon name: "${iconName}". Skipping render.`);
+				return null;
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {
+				size: component.size || 24,
+				color: component.color || "currentColor"
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Stack: {
+			const direction = component.direction || "row";
+			const gap = component.gap ?? 2;
+			const align = component.align || "center";
+			const justify = component.justify || "flex-start";
+			const rawItems = component.items;
+			const parsedItems = typeof rawItems === "string" ? Number(rawItems) : typeof rawItems === "number" ? rawItems : NaN;
+			const items = Number.isFinite(parsedItems) && Math.floor(parsedItems) >= 2 ? Math.min(Math.floor(parsedItems), MAX_STACK_ITEMS) : null;
+			const isColumn = direction.startsWith("column");
+			const gridJustify = component.justify ?? "stretch";
+			const track = gridJustify === "stretch" ? "1fr" : "auto";
+			const stackClass = require_emotion.css(items !== null ? {
+				alignItems: component.align ?? "stretch",
+				display: "grid",
+				gap: `${gap * .5}rem`,
+				gridAutoFlow: isColumn ? "column" : "row",
+				justifyContent: gridJustify,
+				width: "100%",
+				...isColumn ? { gridTemplateRows: `repeat(${items}, ${track})` } : { gridTemplateColumns: `repeat(${items}, ${track})` }
+			} : {
+				alignItems: align,
+				display: "flex",
+				flexDirection: direction,
+				flexWrap: "wrap",
+				gap: `${gap * .5}rem`,
+				justifyContent: justify
+			});
+			const stackChildren = component.components ? component.components.map((childComponent, index) => createAuthComponentFromFlow(childComponent, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, authType, {
+				...options,
+				inStack: true,
+				key: childComponent.id || `${component.id}_${index}`
+			})) : [];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: component.id,
+				className: require_emotion.cx(component.classes, stackClass),
+				children: stackChildren
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Consent: {
+			const consentPromptRawData = options.additionalData?.["consentPrompt"];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Consent.default, {
+				consentData: consentPromptRawData,
+				formValues,
+				onInputChange,
+				t: options.t
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Timer: {
+			const textTemplate = resolve(component.label) || "Time remaining: {time}";
+			const timeoutMs = Number(options.additionalData?.["stepTimeout"]) || 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FlowTimer.default, {
+				expiresIn: timeoutMs > 0 ? Math.max(0, Math.floor((timeoutMs - Date.now()) / 1e3)) : 0,
+				textTemplate
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.CopyableText: {
+			const sourceKey = component.source;
+			const value = sourceKey && options.additionalData ? String(options.additionalData[sourceKey] ?? "") : "";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopyableText.default, {
+				label: resolve(component.label) || void 0,
+				masked: Boolean(component.masked),
+				value
+			}, key);
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.KeyValueList: {
+			const sourceKey = component.source;
+			const pairs = (0, __thunderid_browser.parseKeyValuePairs)(sourceKey && options.additionalData ? options.additionalData[sourceKey] : void 0).map((pair) => ({
+				...pair,
+				label: resolve(pair.label)
+			}));
+			if (pairs.length === 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KeyValueList.default, {
+				label: resolve(component.label) || void 0,
+				pairs
+			}, key);
+		}
+		default:
+			logger.warn(`Unsupported component type: ${component.type}. Skipping render.`);
+			return null;
+	}
+};
+/**
+* Processes an array of components and renders them as React elements for sign-in.
+*/
+const renderSignInComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, options) => components.map((component, index) => createAuthComponentFromFlow(component, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, "signin", {
+	...options,
+	key: component.id || index
+})).filter((x) => x !== null);
+/**
+* Processes an array of components and renders them as React elements for sign-up.
+*/
+const renderSignUpComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, options) => components.map((component, index) => createAuthComponentFromFlow(component, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, "signup", {
+	...options,
+	key: component.id || index
+})).filter((x) => x !== null);
+/**
+* Processes an array of components and renders them as React elements for recovery flow.
+*/
+const renderRecoveryComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, options) => components.map((component, index) => createAuthComponentFromFlow(component, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, "recovery", {
+	...options,
+	key: component.id || index
+})).filter((x) => x !== null);
+/**
+* Processes an array of components and renders them as React elements for invite user.
+* This is used by both InviteUser and AcceptInvite components.
+*/
+const renderInviteUserComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, options) => components.map((component, index) => createAuthComponentFromFlow(component, formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, onInputChange, "signup", {
+	...options,
+	key: component.id || index
+})).filter((x) => x !== null);
+
+//#endregion
+exports.renderInviteUserComponents = renderInviteUserComponents;
+exports.renderRecoveryComponents = renderRecoveryComponents;
+exports.renderSignInComponents = renderSignInComponents;
+exports.renderSignUpComponents = renderSignUpComponents;
+//# sourceMappingURL=AuthOptionFactory.cjs.map