@thunderid/react 1.5.0 → 1.7.0

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

@@ -1,634 +0,0 @@
-import { css, cx } from "../../../styles/emotion.js";
-import Button_default from "../../primitives/Button/Button.js";
-import { affixPostfixKey, affixPrefixKey } from "../../../utils/composeAffixedInputs.js";
-import Typography_default from "../../primitives/Typography/Typography.js";
-import { getConsentOptionalKey } from "../../adapters/ConsentCheckboxList.js";
-import Consent_default from "../../adapters/Consent.js";
-import FacebookButton_default from "../../adapters/FacebookButton.js";
-import FlowTimer_default from "../../adapters/FlowTimer.js";
-import GitHubButton_default from "../../adapters/GitHubButton.js";
-import GoogleButton_default from "../../adapters/GoogleButton.js";
-import ImageComponent_default from "../../adapters/ImageComponent.js";
-import LinkedInButton_default from "../../adapters/LinkedInButton.js";
-import MicrosoftButton_default from "../../adapters/MicrosoftButton.js";
-import SignInWithEthereumButton_default from "../../adapters/SignInWithEthereumButton.js";
-import SmsOtpButton_default from "../../adapters/SmsOtpButton.js";
-import DatePicker_default from "../../primitives/DatePicker/DatePicker.js";
-import Select_default from "../../primitives/Select/Select.js";
-import { createField } from "../../factories/FieldFactory.js";
-import CopyableText_default from "../../primitives/CopyableText/CopyableText.js";
-import Divider_default from "../../primitives/Divider/Divider.js";
-import flowIconRegistry_default from "../../primitives/Icons/flowIconRegistry.js";
-import KeyValueList_default from "../../primitives/KeyValueList/KeyValueList.js";
-import AffixedField_default from "../../primitives/AffixedField/AffixedField.js";
-import BaseAuthFlowSelect_default from "../../primitives/AuthFlowSelect/BaseAuthFlowSelect.js";
-import BaseUserSelect_default from "../../primitives/UserSelect/BaseUserSelect.js";
-import BaseUserTypeSelect_default from "../../primitives/UserTypeSelect/BaseUserTypeSelect.js";
-import { ConsentConstants, EmbeddedFlowComponentType, EmbeddedFlowEventType, FieldType, createPackageComponentLogger, parseKeyValuePairs, resolveEmojiUrisInHtml, resolveFlowTemplateLiterals } from "@thunderid/browser";
-import { cloneElement } from "react";
-import { jsx } from "react/jsx-runtime";
-import DOMPurify from "dompurify";
-
-//#region src/components/presentation/auth/AuthOptionFactory.tsx
-const logger$1 = 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 ??= 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 ??= 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 EmbeddedFlowComponentType.EmailInput: return FieldType.Email;
-		case EmbeddedFlowComponentType.PhoneInput: return FieldType.Tel;
-		case EmbeddedFlowComponentType.PasswordInput: return FieldType.Password;
-		case EmbeddedFlowComponentType.TextInput:
-		default: return 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 ? 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 resolveFlowTemplateLiterals(text, {
-			meta: options.meta,
-			t: options.t || ((k) => k)
-		});
-	};
-	const resourceSelectProps = () => {
-		const identifier = component.ref;
-		const isTouched = touchedFields[identifier] || false;
-		return {
-			className: 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$1.warn(`${typeName} component type is not supported. Skipping render.`);
-		return null;
-	};
-	switch (component.type) {
-		case EmbeddedFlowComponentType.TextInput:
-		case EmbeddedFlowComponentType.PasswordInput:
-		case EmbeddedFlowComponentType.EmailInput:
-		case 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 = affixPrefixKey(identifier, options.vendor);
-				const postfixStateKey = affixPostfixKey(identifier, options.vendor);
-				const defaultPrefixValue = hasPrefixes ? typeof component.prefixes === "string" ? component.prefixes : component.prefixes[0].value : "";
-				const selectedPrefix = formValues[prefixStateKey] ?? defaultPrefixValue;
-				return /* @__PURE__ */ jsx(AffixedField_default, {
-					className: 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 cloneElement(createField({
-				className: 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 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 cloneElement(createField({
-				className: 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: FieldType.Otp,
-				value
-			}), { key });
-		}
-		case EmbeddedFlowComponentType.Action: {
-			const actionId = component.id;
-			const eventType = component.eventType || "";
-			const buttonText = resolve(component.label);
-			const componentVariant = component.variant || "";
-			const shouldSkipValidation = eventType.toUpperCase() !== EmbeddedFlowEventType.Submit;
-			const buttonType = {
-				[EmbeddedFlowEventType.Submit]: "submit",
-				[EmbeddedFlowEventType.Reset]: "reset",
-				[EmbeddedFlowEventType.Cancel]: "button",
-				[EmbeddedFlowEventType.Trigger]: "button",
-				[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() === EmbeddedFlowEventType.Submit) {
-						const isDeny = componentVariant.toLowerCase() !== "primary";
-						const decisions = {
-							approved: !isDeny,
-							...isDeny ? { reason: 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[getConsentOptionalKey(p.purposeId, e.name)] === "true",
-									name: e.name
-								}))],
-								purposeName: p.purposeName
-							}))
-						};
-						formData["consent_decisions"] = JSON.stringify(decisions);
-					}
-					if (eventType.toUpperCase() === EmbeddedFlowEventType.Submit) options.onSubmit(component, formData, shouldSkipValidation);
-					else {
-						resetForm();
-						options.onSubmit(component, {}, shouldSkipValidation);
-					}
-				}
-			};
-			const socialButtonClassName = cx(options.buttonClassName, component.classes);
-			if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType, componentVariant)) return /* @__PURE__ */ jsx(GoogleButton_default, {
-				id: component.id,
-				onClick: handleClick,
-				className: socialButtonClassName
-			}, key);
-			if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType, componentVariant)) return /* @__PURE__ */ jsx(GitHubButton_default, {
-				id: component.id,
-				onClick: handleClick,
-				className: socialButtonClassName
-			}, key);
-			if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType, componentVariant)) return /* @__PURE__ */ jsx(FacebookButton_default, {
-				id: component.id,
-				onClick: handleClick,
-				className: socialButtonClassName
-			}, key);
-			if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType, componentVariant)) return /* @__PURE__ */ jsx(MicrosoftButton_default, {
-				id: component.id,
-				onClick: handleClick,
-				className: socialButtonClassName
-			}, key);
-			if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType, componentVariant)) return /* @__PURE__ */ jsx(LinkedInButton_default, {
-				id: component.id,
-				onClick: handleClick,
-				className: socialButtonClassName
-			}, key);
-			if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType, componentVariant)) return /* @__PURE__ */ jsx(SignInWithEthereumButton_default, {
-				id: component.id,
-				onClick: handleClick,
-				className: socialButtonClassName
-			}, key);
-			if (actionId === "prompt_mobile" || eventType === "prompt_mobile") return /* @__PURE__ */ jsx(SmsOtpButton_default, {
-				id: component.id,
-				onClick: handleClick,
-				className: socialButtonClassName
-			}, key);
-			const startIconEl = component.startIcon ? /* @__PURE__ */ jsx("img", {
-				src: component.startIcon,
-				alt: "",
-				"aria-hidden": "true",
-				className: getAuthOptionIconClass()
-			}) : null;
-			const endIconEl = component.endIcon ? /* @__PURE__ */ jsx("img", {
-				src: component.endIcon,
-				alt: "",
-				"aria-hidden": "true",
-				className: getAuthOptionIconClass()
-			}) : null;
-			return /* @__PURE__ */ jsx(Button_default, {
-				fullWidth: true,
-				id: component.id,
-				onClick: handleClick,
-				disabled: isLoading || !isFormValid && !shouldSkipValidation || options.isTimeoutDisabled || component.config?.disabled,
-				className: 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 EmbeddedFlowComponentType.Text: {
-			const variant = getTypographyVariant(component.variant);
-			const textAlignClass = css({
-				marginBottom: 2,
-				textAlign: typeof component?.align === "string" ? component.align : "left"
-			});
-			return /* @__PURE__ */ jsx(Typography_default, {
-				id: component.id,
-				className: cx(component.classes, textAlignClass),
-				variant,
-				children: resolve(component.label)
-			}, key);
-		}
-		case EmbeddedFlowComponentType.Divider: return /* @__PURE__ */ jsx(Divider_default, { children: resolve(component.label) || "" }, key);
-		case 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__ */ jsx(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: cx(options.inputClassName, component.classes)
-			}, key);
-		}
-		case EmbeddedFlowComponentType.DateInput: {
-			const identifier = component.ref;
-			const value = formValues[identifier] || "";
-			const error = touchedFields[identifier] || false ? formErrors[identifier] : void 0;
-			return /* @__PURE__ */ jsx(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: cx(options.inputClassName, component.classes)
-			}, key);
-		}
-		case EmbeddedFlowComponentType.OuSelect: return skipUnsupported("OU_SELECT");
-		case EmbeddedFlowComponentType.UserSelect: return options.fetchUsers ? /* @__PURE__ */ jsx(BaseUserSelect_default, {
-			...resourceSelectProps(),
-			fetchUsers: options.fetchUsers
-		}, key) : skipUnsupported("USER_SELECT");
-		case EmbeddedFlowComponentType.AuthFlowSelect: return options.fetchAuthFlows ? /* @__PURE__ */ jsx(BaseAuthFlowSelect_default, {
-			...resourceSelectProps(),
-			fetchAuthFlows: options.fetchAuthFlows
-		}, key) : skipUnsupported("AUTH_FLOW_SELECT");
-		case EmbeddedFlowComponentType.UserTypeSelect: return options.fetchUserTypes ? /* @__PURE__ */ jsx(BaseUserTypeSelect_default, {
-			...resourceSelectProps(),
-			fetchUserTypes: options.fetchUserTypes
-		}, key) : skipUnsupported("USER_TYPE_SELECT");
-		case EmbeddedFlowComponentType.Block:
-			if (component.components && component.components.length > 0) {
-				const formClass = 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__ */ jsx("form", {
-					id: component.id,
-					className: cx(component.classes, formClass),
-					onSubmit: (event) => event.preventDefault(),
-					children: blockComponents
-				}, key);
-			}
-			return null;
-		case EmbeddedFlowComponentType.RichText: {
-			const richTextAction = component.action;
-			const dispatchRichTextAction = () => {
-				if (!richTextAction || !options.onSubmit) return;
-				const eventTypeValue = String(richTextAction.eventType ?? EmbeddedFlowEventType.Submit);
-				const shouldSkipValidation = eventTypeValue.toUpperCase() === String(EmbeddedFlowEventType.Trigger);
-				const syntheticAction = {
-					eventType: eventTypeValue,
-					id: `${component.id}_action`,
-					ref: richTextAction.ref,
-					type: 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__ */ jsx("div", {
-				className: getRichTextClass(),
-				onClick: handleRichTextClick,
-				onKeyDown: handleRichTextKeyDown,
-				dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label))) }
-			}, key);
-		}
-		case EmbeddedFlowComponentType.Image: {
-			const explicitHeight = resolve(component.height?.toString());
-			const explicitWidth = resolve(component.width?.toString());
-			return /* @__PURE__ */ jsx(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 EmbeddedFlowComponentType.Icon: {
-			const iconName = component.name || "";
-			const IconComponent = flowIconRegistry_default[iconName];
-			if (!IconComponent) {
-				logger$1.warn(`Unknown icon name: "${iconName}". Skipping render.`);
-				return null;
-			}
-			return /* @__PURE__ */ jsx(IconComponent, {
-				size: component.size || 24,
-				color: component.color || "currentColor"
-			}, key);
-		}
-		case 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 = 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__ */ jsx("div", {
-				id: component.id,
-				className: cx(component.classes, stackClass),
-				children: stackChildren
-			}, key);
-		}
-		case EmbeddedFlowComponentType.Consent: {
-			const consentPromptRawData = options.additionalData?.["consentPrompt"];
-			return /* @__PURE__ */ jsx(Consent_default, {
-				consentData: consentPromptRawData,
-				formValues,
-				onInputChange,
-				t: options.t
-			}, key);
-		}
-		case EmbeddedFlowComponentType.Timer: {
-			const textTemplate = resolve(component.label) || "Time remaining: {time}";
-			const timeoutMs = Number(options.additionalData?.["stepTimeout"]) || 0;
-			return /* @__PURE__ */ jsx(FlowTimer_default, {
-				expiresIn: timeoutMs > 0 ? Math.max(0, Math.floor((timeoutMs - Date.now()) / 1e3)) : 0,
-				textTemplate
-			}, key);
-		}
-		case EmbeddedFlowComponentType.CopyableText: {
-			const sourceKey = component.source;
-			const value = sourceKey && options.additionalData ? String(options.additionalData[sourceKey] ?? "") : "";
-			return /* @__PURE__ */ jsx(CopyableText_default, {
-				label: resolve(component.label) || void 0,
-				masked: Boolean(component.masked),
-				value
-			}, key);
-		}
-		case EmbeddedFlowComponentType.KeyValueList: {
-			const sourceKey = component.source;
-			const pairs = parseKeyValuePairs(sourceKey && options.additionalData ? options.additionalData[sourceKey] : void 0).map((pair) => ({
-				...pair,
-				label: resolve(pair.label)
-			}));
-			if (pairs.length === 0) return null;
-			return /* @__PURE__ */ jsx(KeyValueList_default, {
-				label: resolve(component.label) || void 0,
-				pairs
-			}, key);
-		}
-		default:
-			logger$1.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
-export { renderInviteUserComponents, renderRecoveryComponents, renderSignInComponents, renderSignUpComponents };
-//# sourceMappingURL=AuthOptionFactory.js.map