@thunderid/react 0.0.5 → 0.2.0

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

@@ -0,0 +1,293 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.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_useTranslation = require('../../../../../hooks/useTranslation.cjs');
+const require_useForm = require('../../../../../hooks/useForm.cjs');
+const require_Spinner = require('../../../../primitives/Spinner/Spinner.cjs');
+const require_Typography = require('../../../../primitives/Typography/Typography.cjs');
+const require_Alert = require('../../../../primitives/Alert/Alert.cjs');
+const require_Card = require('../../../../primitives/Card/Card.cjs');
+const require_Logo = require('../../../../primitives/Logo/Logo.cjs');
+const require_BaseSignUp_styles = require('../../SignUp/BaseSignUp.styles.cjs');
+const require_RecoveryOptionFactory = require('./RecoveryOptionFactory.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/auth/Recovery/v1/BaseRecovery.tsx
+/**
+* Internal component that renders the recovery UI and manages flow state.
+*
+* @internal
+*/
+const BaseRecoveryContent = ({ onInitialize, onSubmit, onError, onFlowChange, onComplete, className = "", inputClassName = "", buttonClassName = "", errorClassName = "", messageClassName = "", size = "medium", variant = "outlined", isInitialized, children, showTitle = true, showSubtitle = true }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const { t } = require_useTranslation.default();
+	const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = require_useFlow.default();
+	require_useThunderID.default();
+	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
+	const handleError = (0, react.useCallback)((error) => {
+		let errorMessage = t("errors.recovery.flow.failure");
+		if (error && typeof error === "object") {
+			if (error.code && (error.message || error.description)) errorMessage = error.description || error.message;
+			else if (error instanceof Error && error.name === "ThunderIDAPIError") try {
+				const errorResponse = JSON.parse(error.message);
+				errorMessage = errorResponse.description || errorResponse.message || error.message;
+			} catch {
+				errorMessage = error.message;
+			}
+			else if (error.message) errorMessage = error.message;
+		} else if (typeof error === "string") errorMessage = error;
+		clearMessages();
+		addMessage({
+			message: errorMessage,
+			type: "error"
+		});
+	}, [
+		t,
+		addMessage,
+		clearMessages
+	]);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [isFlowInitialized, setIsFlowInitialized] = (0, react.useState)(false);
+	const [currentFlow, setCurrentFlow] = (0, react.useState)(null);
+	const initializationAttemptedRef = (0, react.useRef)(false);
+	const extractFormFields = (0, react.useCallback)((components) => {
+		const fields = [];
+		const processComponents = (comps) => {
+			comps.forEach((component) => {
+				if (component.type === __thunderid_browser.EmbeddedFlowComponentType.Input) {
+					const config = component.config || {};
+					fields.push({
+						initialValue: config.defaultValue || "",
+						name: config.name || component.id,
+						required: config.required || false,
+						validator: (value) => {
+							if (config.required && (!value || value.trim() === "")) return t("validations.required.field.error");
+							if (config.type === "email" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return t("field.email.invalid");
+							if (config.type === "password" && value && value.length < 8) return t("field.password.weak");
+							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, validateForm, touchAllFields, reset: resetForm } = require_useForm.useForm({
+		fields: currentFlow?.data?.components ? extractFormFields(currentFlow.data.components) : [],
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		validateOnBlur: true,
+		validateOnChange: true
+	});
+	const setupFormFields = (0, react.useCallback)((flowResponse) => {
+		const fields = extractFormFields(flowResponse.data?.components || []);
+		const initialValues = {};
+		fields.forEach((field) => {
+			initialValues[field.name] = field.initialValue || "";
+		});
+		resetForm();
+		Object.keys(initialValues).forEach((key) => setFormValue(key, initialValues[key]));
+	}, [
+		extractFormFields,
+		resetForm,
+		setFormValue
+	]);
+	const handleInputChange = (0, react.useCallback)((name, value) => {
+		setFormValue(name, value);
+		setFormTouched(name, true);
+	}, [setFormValue, setFormTouched]);
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!currentFlow) return;
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		setIsLoading(true);
+		clearMessages();
+		try {
+			const filteredInputs = {};
+			if (data) Object.entries(data).forEach(([key, value]) => {
+				if (value !== null && value !== void 0 && value !== "") filteredInputs[key] = value;
+			});
+			const payload = {
+				...currentFlow.flowId && { flowId: currentFlow.flowId },
+				flowType: currentFlow.flowType || "RECOVERY",
+				inputs: filteredInputs,
+				...component.id && { actionId: component.id }
+			};
+			const response = await onSubmit?.(payload);
+			if (!response) return;
+			onFlowChange?.(response);
+			if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Complete) {
+				onComplete?.(response);
+				return;
+			}
+			if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Incomplete) {
+				setCurrentFlow(response);
+				setupFormFields(response);
+			}
+		} catch (err) {
+			handleError(err);
+			onError?.(err);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	const containerClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery"),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${size}`),
+		(0, __thunderid_browser.withVendorCSSClassPrefix)(`recovery--${variant}`)
+	], className);
+	const inputClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__input--large")
+	], inputClassName);
+	const buttonClasses = (0, __emotion_css.cx)([
+		(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button"),
+		size === "small" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button--small"),
+		size === "large" && (0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__button--large")
+	], buttonClassName);
+	const errorClasses = (0, __emotion_css.cx)([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__error")], errorClassName);
+	const messageClasses = (0, __emotion_css.cx)([(0, __thunderid_browser.withVendorCSSClassPrefix)("recovery__messages")], messageClassName);
+	const renderComponents = (0, react.useCallback)((components) => require_RecoveryOptionFactory.renderRecoveryComponents(components, formValues, touchedFields, formErrors, isLoading, isFormValid, handleInputChange, {
+		buttonClassName: buttonClasses,
+		inputClassName: inputClasses,
+		onSubmit: handleSubmit,
+		size,
+		variant
+	}), [
+		buttonClasses,
+		formErrors,
+		formValues,
+		handleInputChange,
+		handleSubmit,
+		inputClasses,
+		isFormValid,
+		isLoading,
+		size,
+		touchedFields,
+		variant
+	]);
+	(0, react.useEffect)(() => {
+		if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
+			initializationAttemptedRef.current = true;
+			(async () => {
+				setIsLoading(true);
+				clearMessages();
+				try {
+					const response = await onInitialize?.();
+					setCurrentFlow(response);
+					setIsFlowInitialized(true);
+					onFlowChange?.(response);
+					if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Complete) {
+						onComplete?.(response);
+						return;
+					}
+					if (response.flowStatus === __thunderid_browser.EmbeddedFlowStatus.Incomplete) setupFormFields(response);
+				} catch (err) {
+					handleError(err);
+					onError?.(err);
+				} finally {
+					setIsLoading(false);
+				}
+			})();
+		}
+	}, [
+		clearMessages,
+		handleError,
+		isFlowInitialized,
+		isInitialized,
+		onComplete,
+		onError,
+		onFlowChange,
+		onInitialize,
+		setupFormFields
+	]);
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: containerClasses,
+		children
+	});
+	if (!isFlowInitialized && isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: styles.loadingContainer,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "medium" })
+		}) })
+	});
+	if (!currentFlow) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Content, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Alert.default, {
+			variant: "error",
+			className: errorClasses,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Title, { children: t("errors.heading") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: t("errors.recovery.flow.initialization.failure") })]
+		}) })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default, {
+		className: (0, __emotion_css.cx)(containerClasses, styles.card),
+		variant,
+		children: [(showTitle || showSubtitle) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Header, {
+			className: styles.header,
+			children: [showTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Card.default.Title, {
+				level: 2,
+				className: styles.title,
+				children: flowTitle || t("recovery.heading")
+			}), showSubtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				variant: "body1",
+				className: styles.subtitle,
+				children: flowSubtitle || t("recovery.subheading")
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default.Content, { children: [flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: styles.flowMessagesContainer,
+			children: flowMessages.map((message, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+				variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+				className: (0, __emotion_css.cx)(styles.flowMessageItem, messageClasses),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default.Description, { children: message.message })
+			}, message.id || index))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: styles.contentContainer,
+			children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+				variant: "warning",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+					variant: "body1",
+					children: t("errors.recovery.components.not.available")
+				})
+			})
+		})] })]
+	});
+};
+/**
+* BaseRecovery component for ThunderID V1 that provides an embedded account/password recovery flow.
+* Accepts API functions as props to maintain framework independence.
+*
+* @internal
+*/
+const BaseRecovery = ({ showLogo = true,...rest }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_BaseSignUp_styles.default(theme, colorScheme);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [showLogo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: styles.logoContainer,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Logo.default, { size: "large" })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FlowProvider.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseRecoveryContent, {
+		showLogo,
+		...rest
+	}) })] });
+};
+var BaseRecovery_default = BaseRecovery;
+
+//#endregion
+exports.default = BaseRecovery_default;
+//# sourceMappingURL=BaseRecovery.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseRecovery.cjs","names":["BaseRecoveryContent: FC<PropsWithChildren<BaseRecoveryProps>>","useTheme","useTranslation","useFlow","styles: any","useStyles","handleError: any","errorMessage: string","errorResponse: any","initializationAttemptedRef: any","extractFormFields: any","fields: FormField[]","EmbeddedFlowComponentType","config: any","useForm","setupFormFields: any","fields: any","initialValues: Record<string, string>","handleInputChange: (name: string, value: string) => void","filteredInputs: Record<string, any>","payload: EmbeddedFlowExecuteRequestPayload","response: any","EmbeddedFlowStatus","containerClasses: any","inputClasses: any","buttonClasses: any","errorClasses: any","messageClasses: any","renderComponents: any","renderRecoveryComponents","CardPrimitive","Spinner","AlertPrimitive","Typography","BaseRecovery: FC<PropsWithChildren<BaseRecoveryProps>>","Logo","FlowProvider"],"sources":["../../../../../../../src/components/presentation/auth/Recovery/v1/BaseRecovery.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {\n  EmbeddedFlowExecuteRequestPayload,\n  EmbeddedFlowExecuteResponse,\n  EmbeddedFlowStatus,\n  EmbeddedFlowComponentType,\n  withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement, useEffect, useState, useCallback, useRef} from 'react';\nimport {renderRecoveryComponents} from './RecoveryOptionFactory';\nimport FlowProvider from '../../../../../contexts/Flow/FlowProvider';\nimport useFlow from '../../../../../contexts/Flow/useFlow';\nimport useTheme from '../../../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../../../contexts/ThunderID/useThunderID';\nimport {useForm, FormField} from '../../../../../hooks/useForm';\nimport useTranslation from '../../../../../hooks/useTranslation';\nimport AlertPrimitive from '../../../../primitives/Alert/Alert';\n// eslint-disable-next-line import/no-named-as-default\nimport CardPrimitive, {CardProps} from '../../../../primitives/Card/Card';\nimport Logo from '../../../../primitives/Logo/Logo';\nimport Spinner from '../../../../primitives/Spinner/Spinner';\nimport Typography from '../../../../primitives/Typography/Typography';\nimport useStyles from '../../SignUp/BaseSignUp.styles';\n\n/**\n * Render props for custom UI rendering.\n */\nexport interface BaseRecoveryRenderProps {\n  components: any[];\n  errors: Record<string, string>;\n  handleInputChange: (name: string, value: string) => void;\n  handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;\n  isLoading: boolean;\n  isValid: boolean;\n  messages: {message: string; type: string}[];\n  subtitle: string;\n  title: string;\n  touched: Record<string, boolean>;\n  validateForm: () => {errors: Record<string, string>; isValid: boolean};\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseRecovery component.\n */\nexport interface BaseRecoveryProps {\n  afterRecoveryUrl?: string;\n  buttonClassName?: string;\n  className?: string;\n  errorClassName?: string;\n  inputClassName?: string;\n  isInitialized?: boolean;\n  messageClassName?: string;\n  onComplete?: (response: EmbeddedFlowExecuteResponse) => void;\n  onError?: (error: Error) => void;\n  onFlowChange?: (response: EmbeddedFlowExecuteResponse) => void;\n  onInitialize?: (payload?: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;\n  onSubmit?: (payload: EmbeddedFlowExecuteRequestPayload) => Promise<EmbeddedFlowExecuteResponse>;\n  showLogo?: boolean;\n  showSubtitle?: boolean;\n  showTitle?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  variant?: CardProps['variant'];\n}\n\n/**\n * Internal component that renders the recovery UI and manages flow state.\n *\n * @internal\n */\nconst BaseRecoveryContent: FC<PropsWithChildren<BaseRecoveryProps>> = ({\n  onInitialize,\n  onSubmit,\n  onError,\n  onFlowChange,\n  onComplete,\n  className = '',\n  inputClassName = '',\n  buttonClassName = '',\n  errorClassName = '',\n  messageClassName = '',\n  size = 'medium',\n  variant = 'outlined',\n  isInitialized,\n  children,\n  showTitle = true,\n  showSubtitle = true,\n}: PropsWithChildren<BaseRecoveryProps>): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const {t} = useTranslation();\n  const {subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages} = useFlow();\n  useThunderID();\n  const styles: any = useStyles(theme, colorScheme);\n\n  const handleError: any = useCallback(\n    (error: any) => {\n      let errorMessage: string = t('errors.recovery.flow.failure');\n\n      if (error && typeof error === 'object') {\n        if (error.code && (error.message || error.description)) {\n          errorMessage = error.description || error.message;\n        } else if (error instanceof Error && error.name === 'ThunderIDAPIError') {\n          try {\n            const errorResponse: any = JSON.parse(error.message);\n            errorMessage = errorResponse.description || errorResponse.message || error.message;\n          } catch {\n            errorMessage = error.message;\n          }\n        } else if (error.message) {\n          errorMessage = error.message;\n        }\n      } else if (typeof error === 'string') {\n        errorMessage = error;\n      }\n\n      clearMessages();\n      addMessage({message: errorMessage, type: 'error'});\n    },\n    [t, addMessage, clearMessages],\n  );\n\n  const [isLoading, setIsLoading] = useState(false);\n  const [isFlowInitialized, setIsFlowInitialized] = useState(false);\n  const [currentFlow, setCurrentFlow] = useState<EmbeddedFlowExecuteResponse | null>(null);\n\n  const initializationAttemptedRef: any = useRef(false);\n\n  const extractFormFields: any = useCallback(\n    (components: any[]): FormField[] => {\n      const fields: FormField[] = [];\n\n      const processComponents = (comps: any[]): any => {\n        comps.forEach((component: any) => {\n          if (component.type === EmbeddedFlowComponentType.Input) {\n            const config: any = component.config || {};\n            fields.push({\n              initialValue: config.defaultValue || '',\n              name: config.name || component.id,\n              required: config.required || false,\n              validator: (value: string) => {\n                if (config.required && (!value || value.trim() === '')) {\n                  return t('validations.required.field.error');\n                }\n                if (config.type === 'email' && value && !/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(value)) {\n                  return t('field.email.invalid');\n                }\n                if (config.type === 'password' && value && value.length < 8) {\n                  return t('field.password.weak');\n                }\n                return null;\n              },\n            });\n          }\n\n          if (component.components && Array.isArray(component.components)) {\n            processComponents(component.components);\n          }\n        });\n      };\n\n      processComponents(components);\n      return fields;\n    },\n    [t],\n  );\n\n  const formFields: any = currentFlow?.data?.components ? extractFormFields(currentFlow.data.components) : [];\n\n  const form: any = useForm<Record<string, string>>({\n    fields: formFields,\n    initialValues: {},\n    requiredMessage: t('validations.required.field.error'),\n    validateOnBlur: true,\n    validateOnChange: true,\n  });\n\n  const {\n    values: formValues,\n    touched: touchedFields,\n    errors: formErrors,\n    isValid: isFormValid,\n    setValue: setFormValue,\n    setTouched: setFormTouched,\n    validateForm,\n    touchAllFields,\n    reset: resetForm,\n  } = form;\n\n  const setupFormFields: any = useCallback(\n    (flowResponse: EmbeddedFlowExecuteResponse) => {\n      const fields: any = extractFormFields(flowResponse.data?.components || []);\n      const initialValues: Record<string, string> = {};\n      fields.forEach((field: any) => {\n        initialValues[field.name] = field.initialValue || '';\n      });\n      resetForm();\n      Object.keys(initialValues).forEach((key: any) => setFormValue(key, initialValues[key]));\n    },\n    [extractFormFields, resetForm, setFormValue],\n  );\n\n  const handleInputChange: (name: string, value: string) => void = useCallback(\n    (name: string, value: string): void => {\n      setFormValue(name, value);\n      setFormTouched(name, true);\n    },\n    [setFormValue, setFormTouched],\n  );\n\n  const handleSubmit = async (component: any, data?: Record<string, any>, skipValidation?: boolean): Promise<void> => {\n    if (!currentFlow) return;\n\n    if (!skipValidation) {\n      touchAllFields();\n      const validation: ReturnType<typeof validateForm> = validateForm();\n      if (!validation.isValid) return;\n    }\n\n    setIsLoading(true);\n    clearMessages();\n\n    try {\n      const filteredInputs: Record<string, any> = {};\n      if (data) {\n        Object.entries(data).forEach(([key, value]: [string, any]) => {\n          if (value !== null && value !== undefined && value !== '') {\n            filteredInputs[key] = value;\n          }\n        });\n      }\n\n      const payload: EmbeddedFlowExecuteRequestPayload = {\n        ...(currentFlow.flowId && {flowId: currentFlow.flowId}),\n        flowType: (currentFlow as any).flowType || 'RECOVERY',\n        inputs: filteredInputs,\n        ...(component.id && {actionId: component.id as string}),\n      };\n\n      const response: any = await onSubmit?.(payload);\n      if (!response) return;\n      onFlowChange?.(response);\n\n      if (response.flowStatus === EmbeddedFlowStatus.Complete) {\n        onComplete?.(response);\n        return;\n      }\n\n      if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {\n        setCurrentFlow(response);\n        setupFormFields(response);\n      }\n    } catch (err) {\n      handleError(err);\n      onError?.(err as Error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const containerClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('recovery'),\n      withVendorCSSClassPrefix(`recovery--${size}`),\n      withVendorCSSClassPrefix(`recovery--${variant}`),\n    ],\n    className,\n  );\n\n  const inputClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('recovery__input'),\n      size === 'small' && withVendorCSSClassPrefix('recovery__input--small'),\n      size === 'large' && withVendorCSSClassPrefix('recovery__input--large'),\n    ],\n    inputClassName,\n  );\n\n  const buttonClasses: any = cx(\n    [\n      withVendorCSSClassPrefix('recovery__button'),\n      size === 'small' && withVendorCSSClassPrefix('recovery__button--small'),\n      size === 'large' && withVendorCSSClassPrefix('recovery__button--large'),\n    ],\n    buttonClassName,\n  );\n\n  const errorClasses: any = cx([withVendorCSSClassPrefix('recovery__error')], errorClassName);\n  const messageClasses: any = cx([withVendorCSSClassPrefix('recovery__messages')], messageClassName);\n\n  const renderComponents: any = useCallback(\n    (components: any[]): ReactElement[] =>\n      renderRecoveryComponents(\n        components,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        handleInputChange,\n        {\n          buttonClassName: buttonClasses,\n          inputClassName: inputClasses,\n          onSubmit: handleSubmit,\n          size,\n          variant,\n        },\n      ),\n    [\n      buttonClasses,\n      formErrors,\n      formValues,\n      handleInputChange,\n      handleSubmit,\n      inputClasses,\n      isFormValid,\n      isLoading,\n      size,\n      touchedFields,\n      variant,\n    ],\n  );\n\n  useEffect(() => {\n    if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {\n      initializationAttemptedRef.current = true;\n\n      (async (): Promise<void> => {\n        setIsLoading(true);\n        clearMessages();\n\n        try {\n          const response: any = await onInitialize?.();\n          setCurrentFlow(response);\n          setIsFlowInitialized(true);\n          onFlowChange?.(response);\n\n          if (response.flowStatus === EmbeddedFlowStatus.Complete) {\n            onComplete?.(response);\n            return;\n          }\n\n          if (response.flowStatus === EmbeddedFlowStatus.Incomplete) {\n            setupFormFields(response);\n          }\n        } catch (err) {\n          handleError(err);\n          onError?.(err as Error);\n        } finally {\n          setIsLoading(false);\n        }\n      })();\n    }\n  }, [\n    clearMessages,\n    handleError,\n    isFlowInitialized,\n    isInitialized,\n    onComplete,\n    onError,\n    onFlowChange,\n    onInitialize,\n    setupFormFields,\n  ]);\n\n  if (children) {\n    return <div className={containerClasses}>{children}</div>;\n  }\n\n  if (!isFlowInitialized && isLoading) {\n    return (\n      <CardPrimitive className={cx(containerClasses, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <div className={styles.loadingContainer}>\n            <Spinner size=\"medium\" />\n          </div>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  if (!currentFlow) {\n    return (\n      <CardPrimitive className={cx(containerClasses, styles.card)} variant={variant}>\n        <CardPrimitive.Content>\n          <AlertPrimitive variant=\"error\" className={errorClasses}>\n            <AlertPrimitive.Title>{t('errors.heading')}</AlertPrimitive.Title>\n            <AlertPrimitive.Description>{t('errors.recovery.flow.initialization.failure')}</AlertPrimitive.Description>\n          </AlertPrimitive>\n        </CardPrimitive.Content>\n      </CardPrimitive>\n    );\n  }\n\n  return (\n    <CardPrimitive className={cx(containerClasses, styles.card)} variant={variant}>\n      {(showTitle || showSubtitle) && (\n        <CardPrimitive.Header className={styles.header}>\n          {showTitle && (\n            <CardPrimitive.Title level={2} className={styles.title}>\n              {flowTitle || t('recovery.heading')}\n            </CardPrimitive.Title>\n          )}\n          {showSubtitle && (\n            <Typography variant=\"body1\" className={styles.subtitle}>\n              {flowSubtitle || t('recovery.subheading')}\n            </Typography>\n          )}\n        </CardPrimitive.Header>\n      )}\n      <CardPrimitive.Content>\n        {flowMessages && flowMessages.length > 0 && (\n          <div className={styles.flowMessagesContainer}>\n            {flowMessages.map((message: any, index: number) => (\n              <AlertPrimitive\n                key={message.id || index}\n                variant={message.type?.toLowerCase() === 'error' ? 'error' : 'info'}\n                className={cx(styles.flowMessageItem, messageClasses)}\n              >\n                <AlertPrimitive.Description>{message.message}</AlertPrimitive.Description>\n              </AlertPrimitive>\n            ))}\n          </div>\n        )}\n        <div className={styles.contentContainer}>\n          {currentFlow.data?.components && currentFlow.data.components.length > 0 ? (\n            renderComponents(currentFlow.data.components)\n          ) : (\n            <AlertPrimitive variant=\"warning\">\n              <Typography variant=\"body1\">{t('errors.recovery.components.not.available')}</Typography>\n            </AlertPrimitive>\n          )}\n        </div>\n      </CardPrimitive.Content>\n    </CardPrimitive>\n  );\n};\n\n/**\n * BaseRecovery component for ThunderID V1 that provides an embedded account/password recovery flow.\n * Accepts API functions as props to maintain framework independence.\n *\n * @internal\n */\nconst BaseRecovery: FC<PropsWithChildren<BaseRecoveryProps>> = ({\n  showLogo = true,\n  ...rest\n}: PropsWithChildren<BaseRecoveryProps>): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: any = useStyles(theme, colorScheme);\n\n  return (\n    <div>\n      {showLogo && (\n        <div className={styles.logoContainer}>\n          <Logo size=\"large\" />\n        </div>\n      )}\n      <FlowProvider>\n        <BaseRecoveryContent showLogo={showLogo} {...rest} />\n      </FlowProvider>\n    </div>\n  );\n};\n\nexport default BaseRecovery;\n"],"mappings":"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"}

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

@@ -0,0 +1,43 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../../../contexts/ThunderID/useThunderID.cjs');
+const require_BaseRecovery = require('./BaseRecovery.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/presentation/auth/Recovery/v1/Recovery.tsx
+/**
+* Recovery component for ThunderID V1 that provides an embedded account/password recovery flow.
+*/
+const Recovery = ({ className, size = "medium", afterRecoveryUrl, onError, onComplete, children,...rest }) => {
+	const { recover, isInitialized } = require_useThunderID.default();
+	const handleInitialize = async (payload) => {
+		return await recover(payload || { flowType: __thunderid_browser.EmbeddedFlowType.Recovery });
+	};
+	const handleOnSubmit = async (payload) => await recover(payload);
+	const handleComplete = (response) => {
+		onComplete?.(response);
+		if (afterRecoveryUrl) window.location.href = afterRecoveryUrl;
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseRecovery.default, {
+		afterRecoveryUrl,
+		onInitialize: handleInitialize,
+		onSubmit: handleOnSubmit,
+		onError,
+		onComplete: handleComplete,
+		className,
+		size,
+		isInitialized,
+		showLogo: true,
+		showTitle: false,
+		showSubtitle: false,
+		children,
+		...rest
+	});
+};
+var Recovery_default = Recovery;
+
+//#endregion
+exports.default = Recovery_default;
+//# sourceMappingURL=Recovery.cjs.map

package/dist/cjs/components/presentation/auth/Recovery/v1/Recovery.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Recovery.cjs","names":["Recovery: FC<RecoveryProps>","useThunderID","EmbeddedFlowType","BaseRecovery"],"sources":["../../../../../../../src/components/presentation/auth/Recovery/v1/Recovery.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse, EmbeddedFlowType} from '@thunderid/browser';\nimport {FC, PropsWithChildren, ReactElement} from 'react';\nimport BaseRecovery, {BaseRecoveryProps} from './BaseRecovery';\nimport useThunderID from '../../../../../contexts/ThunderID/useThunderID';\n\nexport type RecoveryProps = PropsWithChildren<BaseRecoveryProps>;\n\n/**\n * Recovery component for ThunderID V1 that provides an embedded account/password recovery flow.\n */\nconst Recovery: FC<RecoveryProps> = ({\n  className,\n  size = 'medium',\n  afterRecoveryUrl,\n  onError,\n  onComplete,\n  children,\n  ...rest\n}: RecoveryProps): ReactElement => {\n  const {recover, isInitialized} = useThunderID();\n\n  const handleInitialize = async (\n    payload?: EmbeddedFlowExecuteRequestPayload,\n  ): Promise<EmbeddedFlowExecuteResponse> => {\n    const initialPayload: any = payload || {flowType: EmbeddedFlowType.Recovery};\n    return (await recover(initialPayload)) as EmbeddedFlowExecuteResponse;\n  };\n\n  const handleOnSubmit = async (payload: EmbeddedFlowExecuteRequestPayload): Promise<EmbeddedFlowExecuteResponse> =>\n    (await recover(payload)) as EmbeddedFlowExecuteResponse;\n\n  const handleComplete = (response: EmbeddedFlowExecuteResponse): void => {\n    onComplete?.(response);\n\n    if (afterRecoveryUrl) {\n      window.location.href = afterRecoveryUrl;\n    }\n  };\n\n  return (\n    <BaseRecovery\n      afterRecoveryUrl={afterRecoveryUrl}\n      onInitialize={handleInitialize}\n      onSubmit={handleOnSubmit}\n      onError={onError}\n      onComplete={handleComplete}\n      className={className}\n      size={size}\n      isInitialized={isInitialized}\n      showLogo={true}\n      showTitle={false}\n      showSubtitle={false}\n      children={children}\n      {...rest}\n    />\n  );\n};\n\nexport default Recovery;\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAMA,YAA+B,EACnC,WACA,OAAO,UACP,kBACA,SACA,YACA,SACA,GAAG,WAC8B;CACjC,MAAM,EAAC,SAAS,kBAAiBC,8BAAc;CAE/C,MAAM,mBAAmB,OACvB,YACyC;AAEzC,SAAQ,MAAM,QADc,WAAW,EAAC,UAAUC,qCAAiB,UAAS,CACvC;;CAGvC,MAAM,iBAAiB,OAAO,YAC3B,MAAM,QAAQ,QAAQ;CAEzB,MAAM,kBAAkB,aAAgD;AACtE,eAAa,SAAS;AAEtB,MAAI,iBACF,QAAO,SAAS,OAAO;;AAI3B,QACE,2CAACC;EACmB;EAClB,cAAc;EACd,UAAU;EACD;EACT,YAAY;EACD;EACL;EACS;EACf,UAAU;EACV,WAAW;EACX,cAAc;EACJ;EACV,GAAI;GACJ;;AAIN,uBAAe"}

package/dist/cjs/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.cjs

@@ -0,0 +1,163 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_FacebookButton = require('../../../../adapters/FacebookButton.cjs');
+const require_GitHubButton = require('../../../../adapters/GitHubButton.cjs');
+const require_GoogleButton = require('../../../../adapters/GoogleButton.cjs');
+const require_LinkedInButton = require('../../../../adapters/LinkedInButton.cjs');
+const require_MicrosoftButton = require('../../../../adapters/MicrosoftButton.cjs');
+const require_SignInWithEthereumButton = require('../../../../adapters/SignInWithEthereumButton.cjs');
+const require_ImageComponent = require('../../../../adapters/ImageComponent.cjs');
+const require_CheckboxInput = require('../../../../adapters/CheckboxInput.cjs');
+const require_DateInput = require('../../../../adapters/DateInput.cjs');
+const require_DividerComponent = require('../../../../adapters/DividerComponent.cjs');
+const require_EmailInput = require('../../../../adapters/EmailInput.cjs');
+const require_FormContainer = require('../../../../adapters/FormContainer.cjs');
+const require_NumberInput = require('../../../../adapters/NumberInput.cjs');
+const require_PasswordInput = require('../../../../adapters/PasswordInput.cjs');
+const require_SelectInput = require('../../../../adapters/SelectInput.cjs');
+const require_SubmitButton = require('../../../../adapters/SubmitButton.cjs');
+const require_TelephoneInput = require('../../../../adapters/TelephoneInput.cjs');
+const require_TextInput = require('../../../../adapters/TextInput.cjs');
+const require_Typography = require('../../../../adapters/Typography.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
+/**
+* Creates the appropriate recovery component based on the component type.
+*/
+const createRecoveryComponent = ({ component, onSubmit,...rest }) => {
+	switch (component.type) {
+		case __thunderid_browser.EmbeddedFlowComponentType.Typography: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Input: {
+			const inputVariant = component.variant?.toUpperCase() ?? "";
+			const inputType = component.config["type"]?.toLowerCase() ?? "";
+			if (inputVariant === "EMAIL" || inputType === "email") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmailInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "PASSWORD" || inputType === "password") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PasswordInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "TELEPHONE" || inputType === "tel") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TelephoneInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "NUMBER" || inputType === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "DATE" || inputType === "date") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DateInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "CHECKBOX" || inputType === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckboxInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Button: {
+			const buttonVariant = component.variant?.toUpperCase();
+			const buttonText = component.config["text"] || component.config["label"] || "";
+			if (buttonVariant === "SOCIAL") {
+				if (buttonText.toLowerCase().includes("google")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GoogleButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("github")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GitHubButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("microsoft")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MicrosoftButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("facebook")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FacebookButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("linkedin")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LinkedInButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("ethereum")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SignInWithEthereumButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SubmitButton.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Form: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormContainer.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Select: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SelectInput.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Divider: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DividerComponent.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Image: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageComponent.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
+	}
+};
+/**
+* Convenience function that creates the appropriate recovery component from flow component data.
+*/
+const createRecoveryOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createRecoveryComponent({
+	component,
+	formErrors,
+	formValues,
+	isFormValid,
+	isLoading,
+	onInputChange,
+	touchedFields,
+	...options
+});
+/**
+* Processes an array of components and renders them as React elements for recovery flow.
+*/
+const renderRecoveryComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map((component, index) => createRecoveryOptionFromComponent(component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, {
+	...options,
+	key: component.id || index
+})).filter(Boolean);
+
+//#endregion
+exports.renderRecoveryComponents = renderRecoveryComponents;
+//# sourceMappingURL=RecoveryOptionFactory.cjs.map

package/dist/cjs/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecoveryOptionFactory.cjs","names":["EmbeddedFlowComponentType","Typography","inputVariant: string","inputType: string","EmailInput","PasswordInput","TelephoneInput","NumberInput","DateInput","CheckboxInput","TextInput","buttonVariant: string | undefined","buttonText: string","GoogleButton","GitHubButton","MicrosoftButton","FacebookButton","LinkedInButton","SignInWithEthereumButton","ButtonComponent","FormContainer","SelectInput","DividerComponent","ImageComponent"],"sources":["../../../../../../../src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {EmbeddedFlowComponent, EmbeddedFlowComponentType} from '@thunderid/browser';\nimport {ReactElement} from 'react';\nimport {AdapterProps} from '../../../../../models/adapters';\nimport CheckboxInput from '../../../../adapters/CheckboxInput';\nimport DateInput from '../../../../adapters/DateInput';\nimport DividerComponent from '../../../../adapters/DividerComponent';\nimport EmailInput from '../../../../adapters/EmailInput';\nimport FacebookButton from '../../../../adapters/FacebookButton';\n// eslint-disable-next-line import/no-cycle\nimport FormContainer from '../../../../adapters/FormContainer';\nimport GitHubButton from '../../../../adapters/GitHubButton';\nimport GoogleButton from '../../../../adapters/GoogleButton';\nimport ImageComponent from '../../../../adapters/ImageComponent';\nimport LinkedInButton from '../../../../adapters/LinkedInButton';\nimport MicrosoftButton from '../../../../adapters/MicrosoftButton';\nimport NumberInput from '../../../../adapters/NumberInput';\nimport PasswordInput from '../../../../adapters/PasswordInput';\nimport SelectInput from '../../../../adapters/SelectInput';\nimport SignInWithEthereumButton from '../../../../adapters/SignInWithEthereumButton';\nimport ButtonComponent from '../../../../adapters/SubmitButton';\nimport TelephoneInput from '../../../../adapters/TelephoneInput';\nimport TextInput from '../../../../adapters/TextInput';\nimport Typography from '../../../../adapters/Typography';\n\n/**\n * Creates the appropriate recovery component based on the component type.\n */\nexport const createRecoveryComponent = ({component, onSubmit, ...rest}: AdapterProps): ReactElement => {\n  switch (component.type) {\n    case EmbeddedFlowComponentType.Typography:\n      return <Typography component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Input: {\n      // Determine input type based on variant or config\n      const inputVariant: string = component.variant?.toUpperCase() ?? '';\n      const inputType: string = (component.config['type'] as string)?.toLowerCase() ?? '';\n\n      if (inputVariant === 'EMAIL' || inputType === 'email') {\n        return <EmailInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'PASSWORD' || inputType === 'password') {\n        return <PasswordInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'TELEPHONE' || inputType === 'tel') {\n        return <TelephoneInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'NUMBER' || inputType === 'number') {\n        return <NumberInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'DATE' || inputType === 'date') {\n        return <DateInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'CHECKBOX' || inputType === 'checkbox') {\n        return <CheckboxInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      return <TextInput component={component} onSubmit={onSubmit} {...rest} />;\n    }\n\n    case EmbeddedFlowComponentType.Button: {\n      const buttonVariant: string | undefined = component.variant?.toUpperCase();\n      const buttonText: string = (component.config['text'] as string) || (component.config['label'] as string) || '';\n\n      // TODO: The connection type should come as metadata.\n      if (buttonVariant === 'SOCIAL') {\n        if (buttonText.toLowerCase().includes('google')) {\n          return (\n            <GoogleButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </GoogleButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('github')) {\n          return (\n            <GitHubButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </GitHubButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('microsoft')) {\n          return (\n            <MicrosoftButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </MicrosoftButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('facebook')) {\n          return (\n            <FacebookButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </FacebookButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('linkedin')) {\n          return (\n            <LinkedInButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </LinkedInButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('ethereum')) {\n          return (\n            <SignInWithEthereumButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </SignInWithEthereumButton>\n          );\n        }\n      }\n\n      // Use the generic ButtonComponent for all other button variants\n      // It will handle PRIMARY, SECONDARY, TEXT, SOCIAL mappings internally\n      return <ButtonComponent component={component} onSubmit={onSubmit} {...rest} />;\n    }\n\n    case EmbeddedFlowComponentType.Form:\n      return <FormContainer component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Select:\n      return <SelectInput component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Divider:\n      return <DividerComponent component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Image:\n      return <ImageComponent component={component} onSubmit={onSubmit} {...rest} />;\n\n    default:\n      return <div />;\n  }\n};\n\n/**\n * Convenience function that creates the appropriate recovery component from flow component data.\n */\nexport const createRecoveryOptionFromComponent = (\n  component: EmbeddedFlowComponent,\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    buttonClassName?: string;\n    inputClassName?: string;\n    key?: string | number;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;\n    size?: 'small' | 'medium' | 'large';\n    variant?: any;\n  },\n): ReactElement =>\n  createRecoveryComponent({\n    component,\n    formErrors,\n    formValues,\n    isFormValid,\n    isLoading,\n    onInputChange,\n    touchedFields,\n    ...options,\n  });\n\n/**\n * Processes an array of components and renders them as React elements for recovery flow.\n */\nexport const renderRecoveryComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    buttonClassName?: string;\n    inputClassName?: string;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;\n    size?: 'small' | 'medium' | 'large';\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createRecoveryOptionFromComponent(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        {\n          ...options,\n          // Use component id as key, fallback to index\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter(Boolean);\n"],"mappings":"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"}