@thunderid/react 1.5.0 → 1.6.0

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

@@ -1,642 +0,0 @@
-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('../../adapters/ConsentCheckboxList.cjs');
-const require_Consent = require('../../adapters/Consent.cjs');
-const require_FacebookButton = require('../../adapters/FacebookButton.cjs');
-const require_FlowTimer = require('../../adapters/FlowTimer.cjs');
-const require_GitHubButton = require('../../adapters/GitHubButton.cjs');
-const require_GoogleButton = require('../../adapters/GoogleButton.cjs');
-const require_ImageComponent = require('../../adapters/ImageComponent.cjs');
-const require_LinkedInButton = require('../../adapters/LinkedInButton.cjs');
-const require_MicrosoftButton = require('../../adapters/MicrosoftButton.cjs');
-const require_SignInWithEthereumButton = require('../../adapters/SignInWithEthereumButton.cjs');
-const require_SmsOtpButton = require('../../adapters/SmsOtpButton.cjs');
-const require_DatePicker = require('../../primitives/DatePicker/DatePicker.cjs');
-const require_Select = require('../../primitives/Select/Select.cjs');
-const require_FieldFactory = require('../../factories/FieldFactory.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_AffixedField = require('../../primitives/AffixedField/AffixedField.cjs');
-const require_BaseAuthFlowSelect = require('../../primitives/AuthFlowSelect/BaseAuthFlowSelect.cjs');
-const require_BaseUserSelect = require('../../primitives/UserSelect/BaseUserSelect.cjs');
-const require_BaseUserTypeSelect = require('../../primitives/UserTypeSelect/BaseUserTypeSelect.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/presentation/auth/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