@thunderid/react 1.13.0 → 1.15.0

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.js

@@ -0,0 +1,354 @@
+import { cx } from "../../../styles/emotion.js";
+import ComponentRendererContext_default from "../../../contexts/ComponentRenderer/ComponentRendererContext.js";
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import ComponentPreferencesContext_default from "../../../contexts/I18n/ComponentPreferencesContext.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import { extractErrorMessage, normalizeFlowResponse } from "../../../utils/flowTransformer.js";
+import { useForm } from "../../../hooks/useForm.js";
+import Spinner_default from "../../primitives/Spinner/Spinner.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import composeAffixedInputs_default from "../../../utils/composeAffixedInputs.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
+import { renderVerificationComponents } from "../../auth/flow/AuthOptionFactory.js";
+import getAuthComponentHeadings_default from "../../../utils/getAuthComponentHeadings.js";
+import BaseVerifyAttribute_styles_default from "./BaseVerifyAttribute.styles.js";
+import { AttributeVerificationConstants, EmbeddedFlowComponentType, EmbeddedSelfFlowStatus, bem, buildValidatorFromRules, getFlowStepComponents, resolveFlowTemplateLiterals, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { cloneElement, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/account/VerifyAttribute/BaseVerifyAttribute.tsx
+const collectFlowIds = ({ actions, inputs }) => ({
+	actions: new Set(actions.map((component) => component.id)),
+	fields: new Map(inputs.map((component) => [component.ref ?? component.id, component.type]))
+});
+const withFlowTestIds = (node, ids) => {
+	if (Array.isArray(node)) return node.map((child) => withFlowTestIds(child, ids));
+	if (!isValidElement(node)) return node;
+	const props = node.props;
+	if (typeof props.name === "string" && ids.fields.has(props.name)) {
+		const testId$1 = `thunderid-field-${props.name}`;
+		if (ids.fields.get(props.name) === EmbeddedFlowComponentType.OtpInput) return /* @__PURE__ */ jsx("div", {
+			"data-testid": testId$1,
+			children: node
+		}, node.key);
+		return cloneElement(node, { "data-testid": testId$1 });
+	}
+	const testId = node.key !== null && ids.actions.has(String(node.key)) ? `thunderid-action-${String(node.key)}` : void 0;
+	const children = props.children === void 0 ? void 0 : withFlowTestIds(props.children, ids);
+	if (!testId && children === props.children) return node;
+	return cloneElement(node, {
+		...testId && { "data-testid": testId },
+		...props.children !== void 0 && { children }
+	});
+};
+/**
+* Internal component that renders the verification steps and manages flow state.
+*
+* @internal
+*/
+const BaseVerifyAttributeContent = ({ attributeDisplayName = "", buttonClassName = "", children = void 0, className = "", inputClassName = "", isInitialized = true, onCancel = void 0, onComplete = void 0, onDone = void 0, onError = void 0, onFlowChange = void 0, onInitialize = void 0, onSubmit = void 0, showSubtitle = true, showTitle = true, size = "medium", variant = "outlined" }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const customRenderers = useContext(ComponentRendererContext_default);
+	const { t } = useTranslation_default();
+	const { meta, vendor } = useThunderID_default();
+	const styles = BaseVerifyAttribute_styles_default(theme, colorScheme);
+	const [state, setState] = useState("loading");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [currentFlow, setCurrentFlow] = useState(null);
+	const [error, setError] = useState(null);
+	const isSubmittingRef = useRef(false);
+	const initializationAttemptedRef = useRef(false);
+	const challengeTokenRef = useRef(null);
+	const labelParams = { attribute: attributeDisplayName };
+	const normalize = useCallback((response) => {
+		if (!response?.data || Array.isArray(response.data.components)) return response;
+		const { components } = normalizeFlowResponse(response, t, {
+			defaultErrorKey: "user.verification.error",
+			resolveTranslations: false,
+			throwOnError: false
+		}, meta);
+		return {
+			...response,
+			data: {
+				...response.data,
+				components
+			}
+		};
+	}, [t, meta]);
+	const extractFormFields = useCallback((components) => getFlowStepComponents(components).inputs.map((component) => {
+		const ruleValidator = buildValidatorFromRules(component.validation);
+		return {
+			initialValue: "",
+			name: component.ref ?? component.id,
+			required: component.required ?? false,
+			validator: (value) => {
+				if (component.required && (!value || value.trim() === "")) return t("validations.required.field.error");
+				if (ruleValidator && value) {
+					const ruleMessage = ruleValidator(value);
+					if (ruleMessage) return t(ruleMessage);
+				}
+				return null;
+			}
+		};
+	}), [t]);
+	const formFields = useMemo(() => extractFormFields(currentFlow?.data?.components ?? []), [currentFlow, extractFormFields]);
+	const { values: formValues, touched: touchedFields, errors: formErrors, isValid: isFormValid, setValue: setFormValue, setTouched: setFormTouched, setTouchedFields, setErrors: setFormErrors, clearErrors: clearFormErrors, validateForm, touchAllFields, reset: resetForm } = useForm({
+		fields: formFields,
+		initialValues: {},
+		requiredMessage: t("validations.required.field.error"),
+		validateOnBlur: true,
+		validateOnChange: false
+	});
+	useEffect(() => {
+		clearFormErrors();
+		const responseFieldErrors = currentFlow?.data?.fieldErrors;
+		if (!responseFieldErrors || responseFieldErrors.length === 0) return;
+		const errors = {};
+		const touched = {};
+		responseFieldErrors.forEach((fe) => {
+			if (!(fe.identifier in errors)) {
+				errors[fe.identifier] = fe.message;
+				touched[fe.identifier] = true;
+			}
+		});
+		setTouchedFields(touched);
+		setFormErrors(errors);
+	}, [
+		currentFlow,
+		setFormErrors,
+		setTouchedFields,
+		clearFormErrors
+	]);
+	const handleResponse = useCallback((rawResponse) => {
+		const response = normalize(rawResponse);
+		onFlowChange?.(response);
+		if (response.challengeToken !== void 0) challengeTokenRef.current = response.challengeToken ?? null;
+		if (response.flowStatus === EmbeddedSelfFlowStatus.Error) {
+			const message = extractErrorMessage(response, t, "user.verification.error");
+			setError(message);
+			setState("failed");
+			onError?.(new Error(message));
+			return;
+		}
+		if (response.flowStatus === EmbeddedSelfFlowStatus.Complete) {
+			setError(null);
+			setState("complete");
+			onComplete?.(response);
+			return;
+		}
+		setCurrentFlow((previous) => response.data?.additionalData || !previous?.data?.additionalData ? response : {
+			...response,
+			data: {
+				...response.data,
+				additionalData: previous.data.additionalData
+			}
+		});
+		resetForm();
+		setError(response.error ? extractErrorMessage(response, t, "user.verification.error") : null);
+		setState("active");
+	}, [
+		normalize,
+		onFlowChange,
+		onError,
+		onComplete,
+		resetForm,
+		t
+	]);
+	const handleFailure = useCallback((caughtError) => {
+		setError(t("user.verification.error"));
+		setState("failed");
+		onError?.(caughtError instanceof Error ? caughtError : new Error(String(caughtError)));
+	}, [onError, t]);
+	useEffect(() => {
+		if (!isInitialized || initializationAttemptedRef.current) return;
+		initializationAttemptedRef.current = true;
+		(async () => {
+			try {
+				const response = await onInitialize?.();
+				if (response) handleResponse(response);
+			} catch (caughtError) {
+				handleFailure(caughtError);
+			}
+		})();
+	}, [
+		isInitialized,
+		onInitialize,
+		handleResponse,
+		handleFailure
+	]);
+	const handleInputChange = (name, value) => {
+		setFormValue(name, value);
+	};
+	const handleInputBlur = (name) => {
+		setFormTouched(name, true);
+	};
+	const handleSubmit = async (component, data, skipValidation) => {
+		if (!currentFlow || isSubmittingRef.current) return;
+		if (!skipValidation) {
+			touchAllFields();
+			if (!validateForm().isValid) return;
+		}
+		isSubmittingRef.current = true;
+		setIsSubmitting(true);
+		setError(null);
+		try {
+			const composedData = data ? composeAffixedInputs_default(data, vendor) : {};
+			const inputs = Object.fromEntries(Object.entries(composedData).filter(([, value]) => value !== null && value !== void 0 && value !== ""));
+			const response = await onSubmit?.({
+				executionId: currentFlow.executionId,
+				...component.id && { action: component.id },
+				...challengeTokenRef.current ? { challengeToken: challengeTokenRef.current } : {},
+				inputs
+			});
+			if (response) handleResponse(response);
+		} catch (caughtError) {
+			handleFailure(caughtError);
+		} finally {
+			isSubmittingRef.current = false;
+			setIsSubmitting(false);
+		}
+	};
+	const additionalData = currentFlow?.data?.additionalData ?? {};
+	const maskedDestination = additionalData[AttributeVerificationConstants.MASKED_DESTINATION_KEY];
+	const destination = typeof maskedDestination === "string" && maskedDestination ? maskedDestination : null;
+	const headings = getAuthComponentHeadings_default(currentFlow?.data?.components ?? [], void 0, void 0, t("user.verification.heading", labelParams), t("user.verification.subheading.generic"));
+	const { componentsWithoutHeadings } = headings;
+	const step = getFlowStepComponents(componentsWithoutHeadings ?? []);
+	const isAwaitingLink = state === "active" && formFields.length === 0 && step.actions.length === 0;
+	const title = resolveFlowTemplateLiterals(headings.title, {
+		meta,
+		t
+	});
+	const hasFlowSubtitle = !!headings.headingComponents.subheading;
+	let subtitle = resolveFlowTemplateLiterals(headings.subtitle, {
+		meta,
+		t
+	});
+	let destinationText = null;
+	if (destination && hasFlowSubtitle) destinationText = t("user.verification.destination", { destination });
+	else if (destination) subtitle = t(isAwaitingLink ? "user.verification.subheading.link" : "user.verification.subheading", { destination });
+	const isLoading = state === "loading" || isSubmitting;
+	const containerClasses = cx(withVendorCSSClassPrefix("verify-attribute"), withVendorCSSClassPrefix(`verify-attribute--${size}`), withVendorCSSClassPrefix(`verify-attribute--${variant}`), styles["root"], variant === "outlined" ? styles["card"] : "", className);
+	if (children) {
+		const resend = state === "active" ? step.resend : void 0;
+		return /* @__PURE__ */ jsx("div", {
+			className: containerClasses,
+			children: children({
+				additionalData,
+				components: componentsWithoutHeadings ?? [],
+				destination,
+				destinationText,
+				error,
+				fieldErrors: formErrors,
+				handleInputChange,
+				handleResend: resend ? () => handleSubmit(resend, void 0, true) : void 0,
+				handleSubmit,
+				isAwaitingLink,
+				isComplete: state === "complete",
+				isFailed: state === "failed",
+				isLoading,
+				isValid: isFormValid,
+				onCancel,
+				onDone: isAwaitingLink ? onDone : void 0,
+				subtitle,
+				successMessage: t("user.verification.success", labelParams),
+				title,
+				touched: touchedFields,
+				values: formValues
+			})
+		});
+	}
+	const alertClasses = cx(withVendorCSSClassPrefix(bem("verify-attribute", "alert")), styles["alert"]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		"aria-busy": isLoading,
+		children: [
+			state === "active" && (showTitle || showSubtitle) && /* @__PURE__ */ jsxs("div", {
+				className: cx(withVendorCSSClassPrefix(bem("verify-attribute", "header")), styles["header"]),
+				children: [showTitle && /* @__PURE__ */ jsx(Typography_default, {
+					variant: "h5",
+					className: cx(withVendorCSSClassPrefix(bem("verify-attribute", "heading")), styles["heading"]),
+					children: title
+				}), showSubtitle && /* @__PURE__ */ jsxs(Typography_default, {
+					variant: "body2",
+					className: cx(withVendorCSSClassPrefix(bem("verify-attribute", "subheading")), styles["subheading"]),
+					children: [subtitle, destinationText && /* @__PURE__ */ jsx("span", {
+						className: withVendorCSSClassPrefix(bem("verify-attribute", "destination")),
+						children: ` ${destinationText}`
+					})]
+				})]
+			}),
+			state === "loading" && /* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("verify-attribute", "loading")), styles["loading"]),
+				children: /* @__PURE__ */ jsx(Spinner_default, { size: "medium" })
+			}),
+			error && /* @__PURE__ */ jsx(Alert_default, {
+				variant: "error",
+				className: alertClasses,
+				children: /* @__PURE__ */ jsx(Alert_default.Description, { children: error })
+			}),
+			state === "complete" && /* @__PURE__ */ jsx(Alert_default, {
+				variant: "success",
+				className: alertClasses,
+				children: /* @__PURE__ */ jsx(Alert_default.Description, { children: t("user.verification.success", labelParams) })
+			}),
+			state === "active" && /* @__PURE__ */ jsx("div", {
+				className: cx(withVendorCSSClassPrefix(bem("verify-attribute", "content")), styles["content"]),
+				children: withFlowTestIds(renderVerificationComponents(componentsWithoutHeadings ?? [], formValues, touchedFields, formErrors, isLoading, isFormValid, resetForm, handleInputChange, {
+					_customRenderers: customRenderers,
+					_theme: theme,
+					additionalData,
+					buttonClassName: cx(withVendorCSSClassPrefix(bem("verify-attribute", "button")), buttonClassName),
+					inputClassName: cx(withVendorCSSClassPrefix(bem("verify-attribute", "input")), inputClassName),
+					meta,
+					onInputBlur: handleInputBlur,
+					onSubmit: (component, data, skip) => {
+						handleSubmit(component, data, skip);
+					},
+					size,
+					t,
+					variant,
+					vendor
+				}), collectFlowIds(step))
+			}),
+			(!!onCancel || isAwaitingLink && !!onDone) && /* @__PURE__ */ jsxs("div", {
+				className: cx(withVendorCSSClassPrefix(bem("verify-attribute", "actions")), styles["actions"]),
+				children: [isAwaitingLink && onDone && /* @__PURE__ */ jsx(Button_default, {
+					size: "small",
+					color: "primary",
+					variant: "solid",
+					onClick: onDone,
+					"data-testid": "thunderid-action-verificationDone",
+					children: t("user.verification.buttons.done.text")
+				}), onCancel && /* @__PURE__ */ jsx(Button_default, {
+					size: "small",
+					color: "secondary",
+					variant: "outline",
+					onClick: onCancel,
+					disabled: isSubmitting,
+					"data-testid": "thunderid-action-verificationCancel",
+					children: state === "active" || state === "loading" ? t("user.verification.buttons.cancel.text") : t("user.verification.buttons.close.text")
+				})]
+			})
+		]
+	});
+};
+/**
+* BaseVerifyAttribute renders the server-described steps of a self attribute verification flow.
+* Accepts API functions as props to stay framework independent.
+*/
+const BaseVerifyAttribute = ({ preferences = void 0,...rest }) => {
+	const content = /* @__PURE__ */ jsx(BaseVerifyAttributeContent, { ...rest });
+	if (!preferences) return content;
+	return /* @__PURE__ */ jsx(ComponentPreferencesContext_default.Provider, {
+		value: preferences,
+		children: content
+	});
+};
+var BaseVerifyAttribute_default = BaseVerifyAttribute;
+
+//#endregion
+export { BaseVerifyAttribute_default as default };
+//# sourceMappingURL=BaseVerifyAttribute.js.map

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVerifyAttribute.js","names":["props: {children?: ReactNode; name?: unknown}","testId","testId: string | undefined","children: ReactNode","BaseVerifyAttributeContent: FC<Omit<BaseVerifyAttributeProps, 'preferences'>>","useTheme","customRenderers: ComponentRendererMap","ComponentRendererContext","useTranslation","useThunderID","styles: Record<string, string>","useStyles","isSubmittingRef: MutableRefObject<boolean>","initializationAttemptedRef: MutableRefObject<boolean>","challengeTokenRef: MutableRefObject<string | null>","labelParams: Record<string, string>","formFields: FormField[]","responseFieldErrors: FieldError[] | undefined","errors: Record<string, string>","touched: Record<string, boolean>","response: EmbeddedSelfFlowResponse","message: string","response: EmbeddedSelfFlowResponse | undefined","composedData: Record<string, string>","composeAffixedInputs","inputs: Record<string, string>","additionalData: Record<string, unknown>","maskedDestination: unknown","destination: string | null","headings: ReturnType<typeof getAuthComponentHeadings>","getAuthComponentHeadings","step: FlowStepComponents","isAwaitingLink: boolean","title: string","subtitle: string","destinationText: string | null","isLoading: boolean","containerClasses: string","resend: EmbeddedFlowComponent | undefined","alertClasses: string","Typography","Spinner","AlertPrimitive","Button","BaseVerifyAttribute: FC<BaseVerifyAttributeProps>","content: ReactElement","ComponentPreferencesContext"],"sources":["../../../../src/components/account/VerifyAttribute/BaseVerifyAttribute.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  AttributeVerificationConstants,\n  EmbeddedFlowComponent,\n  EmbeddedFlowComponentType,\n  EmbeddedSelfFlowRequest,\n  EmbeddedSelfFlowResponse,\n  EmbeddedSelfFlowStatus,\n  FieldError,\n  FlowStepComponents,\n  Preferences,\n  bem,\n  buildValidatorFromRules,\n  getFlowStepComponents,\n  resolveFlowTemplateLiterals,\n  withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport {\n  FC,\n  MutableRefObject,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useStyles from './BaseVerifyAttribute.styles';\nimport ComponentRendererContext, {\n  ComponentRendererMap,\n} from '../../../contexts/ComponentRenderer/ComponentRendererContext';\nimport ComponentPreferencesContext from '../../../contexts/I18n/ComponentPreferencesContext';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport {FormField, useForm} from '../../../hooks/useForm';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport composeAffixedInputs from '../../../utils/composeAffixedInputs';\nimport {extractErrorMessage, normalizeFlowResponse} from '../../../utils/flowTransformer';\nimport getAuthComponentHeadings from '../../../utils/getAuthComponentHeadings';\nimport {renderVerificationComponents} from '../../auth/flow/AuthOptionFactory';\nimport AlertPrimitive from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport Spinner from '../../primitives/Spinner/Spinner';\nimport Typography from '../../primitives/Typography/Typography';\n\ntype VerificationState = 'loading' | 'active' | 'complete' | 'failed';\n\ninterface FlowIds {\n  actions: Set<string>;\n  // Input name (`ref`, else `id`) to component type.\n  fields: Map<string, string>;\n}\n\n// Flow identifiers of the step's inputs and actions.\nconst collectFlowIds = ({actions, inputs}: FlowStepComponents): FlowIds => ({\n  actions: new Set(actions.map((component: EmbeddedFlowComponent) => component.id)),\n  fields: new Map(inputs.map((component: EmbeddedFlowComponent) => [component.ref ?? component.id, component.type])),\n});\n\n// Tags the elements rendered from the flow with `thunderid-field-<ref>` and `thunderid-action-<id>`.\n// The shared factory keys an element by its component id and names an input by its ref.\nconst withFlowTestIds = (node: ReactNode, ids: FlowIds): ReactNode => {\n  if (Array.isArray(node)) return node.map((child: ReactNode) => withFlowTestIds(child, ids));\n  if (!isValidElement(node)) return node;\n\n  const props: {children?: ReactNode; name?: unknown} = node.props as {children?: ReactNode; name?: unknown};\n  if (typeof props.name === 'string' && ids.fields.has(props.name)) {\n    const testId = `thunderid-field-${props.name}`;\n\n    // The OTP field renders one input per character and takes no test identifier, so wrap it.\n    if (ids.fields.get(props.name) === EmbeddedFlowComponentType.OtpInput) {\n      return (\n        <div key={node.key} data-testid={testId}>\n          {node}\n        </div>\n      );\n    }\n\n    return cloneElement(node as ReactElement<Record<string, unknown>>, {'data-testid': testId});\n  }\n\n  const testId: string | undefined =\n    node.key !== null && ids.actions.has(String(node.key)) ? `thunderid-action-${String(node.key)}` : undefined;\n  const children: ReactNode = props.children === undefined ? undefined : withFlowTestIds(props.children, ids);\n  if (!testId && children === props.children) return node;\n\n  return cloneElement(node as ReactElement<Record<string, unknown>>, {\n    ...(testId && {'data-testid': testId}),\n    ...(props.children !== undefined && {children}),\n  });\n};\n\n/**\n * What {@link BaseVerifyAttribute} hands its `children` render function, so the steps can be drawn\n * with any UI.\n */\nexport interface BaseVerifyAttributeRenderProps {\n  additionalData: Record<string, unknown>;\n  /**\n   * The step's components, without its headings.\n   */\n  components: EmbeddedFlowComponent[];\n  /**\n   * Masked destination the code or link was sent to, when the flow reports it.\n   */\n  destination: string | null;\n  /**\n   * Translated \"Sent to …\" line, set when the flow has its own prompt in `subtitle`.\n   */\n  destinationText: string | null;\n  /**\n   * Translated error of the last request, or the refusal.\n   */\n  error: string | null;\n  fieldErrors: Record<string, string>;\n  handleInputChange: (name: string, value: string) => void;\n  /**\n   * Sends a new code. Set only while the step has a resend action.\n   */\n  handleResend?: () => Promise<void>;\n  /**\n   * Submits a step. Pass `skipValidation` for an action, such as a resend, that sends no inputs.\n   */\n  handleSubmit: (\n    component: EmbeddedFlowComponent,\n    data?: Record<string, string>,\n    skipValidation?: boolean,\n  ) => Promise<void>;\n  isAwaitingLink: boolean;\n  isComplete: boolean;\n  /**\n   * Whether the server refused the verification or the request failed; the flow cannot continue.\n   */\n  isFailed: boolean;\n  isLoading: boolean;\n  isValid: boolean;\n  /**\n   * Closes the panel. Set only when the app passes `onCancel`.\n   */\n  onCancel?: () => void;\n  /**\n   * Confirms a link the user opened outside the app. Set only while the step waits for a link and\n   * the app passes `onDone`.\n   */\n  onDone?: () => void;\n  subtitle: string;\n  /**\n   * Translated message for a recorded verification.\n   */\n  successMessage: string;\n  title: string;\n  touched: Record<string, boolean>;\n  values: Record<string, string>;\n}\n\n/**\n * Props for the BaseVerifyAttribute component.\n */\nexport interface BaseVerifyAttributeProps {\n  /**\n   * Label of the attribute being verified, used in the default heading and success message.\n   */\n  attributeDisplayName?: string;\n  buttonClassName?: string;\n  /**\n   * Renders custom UI in place of the default steps. Receives the step, the values and their setters,\n   * submit, resend, cancel, the destination, and the loading, error and completed state.\n   */\n  children?: (props: BaseVerifyAttributeRenderProps) => ReactNode;\n  className?: string;\n  inputClassName?: string;\n  isInitialized?: boolean;\n  /**\n   * Called when the user closes the panel. The close action is shown only when this is set.\n   */\n  onCancel?: () => void;\n  /**\n   * Called once the server has recorded the verification.\n   */\n  onComplete?: (response: EmbeddedSelfFlowResponse) => void;\n  /**\n   * Called when the user selects Done after the flow sent a link, which they confirm outside the app.\n   * The Done action is shown only when this is set.\n   */\n  onDone?: () => void;\n  /**\n   * Called when the server refuses the verification or the request fails.\n   */\n  onError?: (error: Error) => void;\n  onFlowChange?: (response: EmbeddedSelfFlowResponse) => void;\n  onInitialize?: () => Promise<EmbeddedSelfFlowResponse>;\n  onSubmit?: (payload: EmbeddedSelfFlowRequest) => Promise<EmbeddedSelfFlowResponse>;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   */\n  preferences?: Preferences;\n  showSubtitle?: boolean;\n  showTitle?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  variant?: 'outlined' | 'flat';\n}\n\n/**\n * Internal component that renders the verification steps and manages flow state.\n *\n * @internal\n */\nconst BaseVerifyAttributeContent: FC<Omit<BaseVerifyAttributeProps, 'preferences'>> = ({\n  attributeDisplayName = '',\n  buttonClassName = '',\n  children = undefined,\n  className = '',\n  inputClassName = '',\n  isInitialized = true,\n  onCancel = undefined,\n  onComplete = undefined,\n  onDone = undefined,\n  onError = undefined,\n  onFlowChange = undefined,\n  onInitialize = undefined,\n  onSubmit = undefined,\n  showSubtitle = true,\n  showTitle = true,\n  size = 'medium',\n  variant = 'outlined',\n}: Omit<BaseVerifyAttributeProps, 'preferences'>): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const customRenderers: ComponentRendererMap = useContext(ComponentRendererContext);\n  const {t} = useTranslation();\n  const {meta, vendor} = useThunderID();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n\n  const [state, setState] = useState<VerificationState>('loading');\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [currentFlow, setCurrentFlow] = useState<EmbeddedSelfFlowResponse | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  // Set before the first await, so a second call from a custom render cannot send a second code.\n  const isSubmittingRef: MutableRefObject<boolean> = useRef(false);\n\n  // Guards against a second initiation, which would send a second code.\n  const initializationAttemptedRef: MutableRefObject<boolean> = useRef(false);\n  const challengeTokenRef: MutableRefObject<string | null> = useRef<string | null>(null);\n\n  const labelParams: Record<string, string> = {attribute: attributeDisplayName};\n\n  const normalize = useCallback(\n    (response: EmbeddedSelfFlowResponse): EmbeddedSelfFlowResponse => {\n      if (!response?.data || Array.isArray(response.data.components)) {\n        return response;\n      }\n\n      const {components} = normalizeFlowResponse(\n        response,\n        t,\n        {defaultErrorKey: 'user.verification.error', resolveTranslations: false, throwOnError: false},\n        meta,\n      );\n\n      return {...response, data: {...response.data, components}};\n    },\n    [t, meta],\n  );\n\n  const extractFormFields = useCallback(\n    (components: EmbeddedFlowComponent[]): FormField[] =>\n      getFlowStepComponents(components).inputs.map((component: EmbeddedFlowComponent) => {\n        const ruleValidator = buildValidatorFromRules(component.validation);\n        return {\n          initialValue: '',\n          name: component.ref ?? component.id,\n          required: component.required ?? false,\n          validator: (value: string) => {\n            if (component.required && (!value || value.trim() === '')) {\n              return t('validations.required.field.error');\n            }\n            if (ruleValidator && value) {\n              const ruleMessage = ruleValidator(value);\n              if (ruleMessage) {\n                return t(ruleMessage);\n              }\n            }\n            return null;\n          },\n        };\n      }),\n    [t],\n  );\n\n  const formFields: FormField[] = useMemo(\n    () => extractFormFields(currentFlow?.data?.components ?? []),\n    [currentFlow, extractFormFields],\n  );\n\n  const {\n    values: formValues,\n    touched: touchedFields,\n    errors: formErrors,\n    isValid: isFormValid,\n    setValue: setFormValue,\n    setTouched: setFormTouched,\n    setTouchedFields,\n    setErrors: setFormErrors,\n    clearErrors: clearFormErrors,\n    validateForm,\n    touchAllFields,\n    reset: resetForm,\n  } = useForm<Record<string, string>>({\n    fields: formFields,\n    initialValues: {},\n    requiredMessage: t('validations.required.field.error'),\n    validateOnBlur: true,\n    validateOnChange: false,\n  });\n\n  // Project server-side field errors into form state.\n  useEffect(() => {\n    clearFormErrors();\n    const responseFieldErrors: FieldError[] | undefined = currentFlow?.data?.fieldErrors;\n    if (!responseFieldErrors || responseFieldErrors.length === 0) {\n      return;\n    }\n    const errors: Record<string, string> = {};\n    const touched: Record<string, boolean> = {};\n    responseFieldErrors.forEach((fe: FieldError) => {\n      if (!(fe.identifier in errors)) {\n        errors[fe.identifier] = fe.message;\n        touched[fe.identifier] = true;\n      }\n    });\n    setTouchedFields(touched);\n    setFormErrors(errors);\n  }, [currentFlow, setFormErrors, setTouchedFields, clearFormErrors]);\n\n  const handleResponse = useCallback(\n    (rawResponse: EmbeddedSelfFlowResponse): void => {\n      const response: EmbeddedSelfFlowResponse = normalize(rawResponse);\n      onFlowChange?.(response);\n\n      if (response.challengeToken !== undefined) {\n        challengeTokenRef.current = response.challengeToken ?? null;\n      }\n\n      if (response.flowStatus === EmbeddedSelfFlowStatus.Error) {\n        const message: string = extractErrorMessage(response, t, 'user.verification.error');\n        setError(message);\n        setState('failed');\n        onError?.(new Error(message));\n        return;\n      }\n\n      if (response.flowStatus === EmbeddedSelfFlowStatus.Complete) {\n        setError(null);\n        setState('complete');\n        onComplete?.(response);\n        return;\n      }\n\n      // INCOMPLETE: render the step; a rejected code comes back with an error and without\n      // additionalData, so keep the destination and code length of the step that sent the code.\n      setCurrentFlow(\n        (previous: EmbeddedSelfFlowResponse | null): EmbeddedSelfFlowResponse =>\n          response.data?.additionalData || !previous?.data?.additionalData\n            ? response\n            : {...response, data: {...response.data, additionalData: previous.data.additionalData}},\n      );\n      resetForm();\n      setError(response.error ? extractErrorMessage(response, t, 'user.verification.error') : null);\n      setState('active');\n    },\n    [normalize, onFlowChange, onError, onComplete, resetForm, t],\n  );\n\n  const handleFailure = useCallback(\n    (caughtError: unknown): void => {\n      // Show a generic message; an API error body is not meant for the user.\n      setError(t('user.verification.error'));\n      setState('failed');\n      onError?.(caughtError instanceof Error ? caughtError : new Error(String(caughtError)));\n    },\n    [onError, t],\n  );\n\n  useEffect(() => {\n    if (!isInitialized || initializationAttemptedRef.current) {\n      return;\n    }\n    initializationAttemptedRef.current = true;\n\n    void (async (): Promise<void> => {\n      try {\n        const response: EmbeddedSelfFlowResponse | undefined = await onInitialize?.();\n        if (response) {\n          handleResponse(response);\n        }\n      } catch (caughtError) {\n        handleFailure(caughtError);\n      }\n    })();\n  }, [isInitialized, onInitialize, handleResponse, handleFailure]);\n\n  const handleInputChange = (name: string, value: string): void => {\n    setFormValue(name, value);\n  };\n\n  const handleInputBlur = (name: string): void => {\n    setFormTouched(name, true);\n  };\n\n  const handleSubmit = async (\n    component: EmbeddedFlowComponent,\n    data?: Record<string, string>,\n    skipValidation?: boolean,\n  ): Promise<void> => {\n    if (!currentFlow || isSubmittingRef.current) return;\n\n    if (!skipValidation) {\n      touchAllFields();\n      if (!validateForm().isValid) return;\n    }\n\n    isSubmittingRef.current = true;\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      const composedData: Record<string, string> = data ? composeAffixedInputs(data, vendor) : {};\n      const inputs: Record<string, string> = Object.fromEntries(\n        Object.entries(composedData).filter(\n          ([, value]: [string, string]) => value !== null && value !== undefined && value !== '',\n        ),\n      );\n\n      const response: EmbeddedSelfFlowResponse | undefined = await onSubmit?.({\n        executionId: currentFlow.executionId,\n        ...(component.id && {action: component.id}),\n        ...(challengeTokenRef.current ? {challengeToken: challengeTokenRef.current} : {}),\n        inputs,\n      });\n\n      if (response) {\n        handleResponse(response);\n      }\n    } catch (caughtError) {\n      handleFailure(caughtError);\n    } finally {\n      isSubmittingRef.current = false;\n      setIsSubmitting(false);\n    }\n  };\n\n  const additionalData: Record<string, unknown> = currentFlow?.data?.additionalData ?? {};\n  const maskedDestination: unknown = additionalData[AttributeVerificationConstants.MASKED_DESTINATION_KEY];\n  const destination: string | null =\n    typeof maskedDestination === 'string' && maskedDestination ? maskedDestination : null;\n  const headings: ReturnType<typeof getAuthComponentHeadings> = getAuthComponentHeadings(\n    currentFlow?.data?.components ?? [],\n    undefined,\n    undefined,\n    t('user.verification.heading', labelParams),\n    t('user.verification.subheading.generic'),\n  );\n  const {componentsWithoutHeadings} = headings;\n  const step: FlowStepComponents = getFlowStepComponents(componentsWithoutHeadings ?? []);\n  // A step with nothing to enter or submit waits for the user to open a link sent to them.\n  const isAwaitingLink: boolean = state === 'active' && formFields.length === 0 && step.actions.length === 0;\n  const title: string = resolveFlowTemplateLiterals(headings.title, {meta, t});\n  // The flow's own prompt wins; the destination is added beside it, or fills in when the flow has none.\n  const hasFlowSubtitle = !!headings.headingComponents.subheading;\n  let subtitle: string = resolveFlowTemplateLiterals(headings.subtitle, {meta, t});\n  let destinationText: string | null = null;\n  if (destination && hasFlowSubtitle) {\n    destinationText = t('user.verification.destination', {destination});\n  } else if (destination) {\n    subtitle = t(isAwaitingLink ? 'user.verification.subheading.link' : 'user.verification.subheading', {destination});\n  }\n\n  const isLoading: boolean = state === 'loading' || isSubmitting;\n\n  const containerClasses: string = cx(\n    withVendorCSSClassPrefix('verify-attribute'),\n    withVendorCSSClassPrefix(`verify-attribute--${size}`),\n    withVendorCSSClassPrefix(`verify-attribute--${variant}`),\n    styles['root'],\n    variant === 'outlined' ? styles['card'] : '',\n    className,\n  );\n\n  if (children) {\n    const resend: EmbeddedFlowComponent | undefined = state === 'active' ? step.resend : undefined;\n\n    return (\n      <div className={containerClasses}>\n        {children({\n          additionalData,\n          components: componentsWithoutHeadings ?? [],\n          destination,\n          destinationText,\n          error,\n          fieldErrors: formErrors,\n          handleInputChange,\n          handleResend: resend ? (): Promise<void> => handleSubmit(resend, undefined, true) : undefined,\n          handleSubmit,\n          isAwaitingLink,\n          isComplete: state === 'complete',\n          isFailed: state === 'failed',\n          isLoading,\n          isValid: isFormValid,\n          onCancel,\n          onDone: isAwaitingLink ? onDone : undefined,\n          subtitle,\n          successMessage: t('user.verification.success', labelParams),\n          title,\n          touched: touchedFields,\n          values: formValues,\n        })}\n      </div>\n    );\n  }\n\n  const alertClasses: string = cx(withVendorCSSClassPrefix(bem('verify-attribute', 'alert')), styles['alert']);\n\n  return (\n    <div className={containerClasses} aria-busy={isLoading}>\n      {state === 'active' && (showTitle || showSubtitle) && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'header')), styles['header'])}>\n          {showTitle && (\n            <Typography\n              variant=\"h5\"\n              className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'heading')), styles['heading'])}\n            >\n              {title}\n            </Typography>\n          )}\n          {showSubtitle && (\n            <Typography\n              variant=\"body2\"\n              className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'subheading')), styles['subheading'])}\n            >\n              {subtitle}\n              {destinationText && (\n                <span className={withVendorCSSClassPrefix(bem('verify-attribute', 'destination'))}>\n                  {` ${destinationText}`}\n                </span>\n              )}\n            </Typography>\n          )}\n        </div>\n      )}\n\n      {state === 'loading' && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'loading')), styles['loading'])}>\n          <Spinner size=\"medium\" />\n        </div>\n      )}\n\n      {error && (\n        <AlertPrimitive variant=\"error\" className={alertClasses}>\n          <AlertPrimitive.Description>{error}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n\n      {state === 'complete' && (\n        <AlertPrimitive variant=\"success\" className={alertClasses}>\n          <AlertPrimitive.Description>{t('user.verification.success', labelParams)}</AlertPrimitive.Description>\n        </AlertPrimitive>\n      )}\n\n      {state === 'active' && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'content')), styles['content'])}>\n          {withFlowTestIds(\n            renderVerificationComponents(\n              componentsWithoutHeadings ?? [],\n              formValues,\n              touchedFields,\n              formErrors,\n              isLoading,\n              isFormValid,\n              resetForm,\n              handleInputChange,\n              {\n                _customRenderers: customRenderers,\n                _theme: theme,\n                additionalData,\n                buttonClassName: cx(withVendorCSSClassPrefix(bem('verify-attribute', 'button')), buttonClassName),\n                inputClassName: cx(withVendorCSSClassPrefix(bem('verify-attribute', 'input')), inputClassName),\n                meta,\n                onInputBlur: handleInputBlur,\n                onSubmit: (component: EmbeddedFlowComponent, data?: Record<string, string>, skip?: boolean): void => {\n                  void handleSubmit(component, data, skip);\n                },\n                size,\n                t,\n                variant,\n                vendor,\n              },\n            ),\n            collectFlowIds(step),\n          )}\n        </div>\n      )}\n\n      {(!!onCancel || (isAwaitingLink && !!onDone)) && (\n        <div className={cx(withVendorCSSClassPrefix(bem('verify-attribute', 'actions')), styles['actions'])}>\n          {isAwaitingLink && onDone && (\n            <Button\n              size=\"small\"\n              color=\"primary\"\n              variant=\"solid\"\n              onClick={onDone}\n              data-testid=\"thunderid-action-verificationDone\"\n            >\n              {t('user.verification.buttons.done.text')}\n            </Button>\n          )}\n          {onCancel && (\n            <Button\n              size=\"small\"\n              color=\"secondary\"\n              variant=\"outline\"\n              onClick={onCancel}\n              disabled={isSubmitting}\n              data-testid=\"thunderid-action-verificationCancel\"\n            >\n              {state === 'active' || state === 'loading'\n                ? t('user.verification.buttons.cancel.text')\n                : t('user.verification.buttons.close.text')}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * BaseVerifyAttribute renders the server-described steps of a self attribute verification flow.\n * Accepts API functions as props to stay framework independent.\n */\nconst BaseVerifyAttribute: FC<BaseVerifyAttributeProps> = ({\n  preferences = undefined,\n  ...rest\n}: BaseVerifyAttributeProps): ReactElement => {\n  const content: ReactElement = <BaseVerifyAttributeContent {...rest} />;\n\n  if (!preferences) return content;\n\n  return <ComponentPreferencesContext.Provider value={preferences}>{content}</ComponentPreferencesContext.Provider>;\n};\n\nexport default BaseVerifyAttribute;\n"],"mappings":"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"}

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.styles.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates styles for the BaseVerifyAttribute component
+ * @param theme - The theme object containing design tokens
+ * @param colorScheme - The current color scheme (used for memoization)
+ * @returns Object containing CSS class names for component styling
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=BaseVerifyAttribute.styles.d.ts.map

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVerifyAttribute.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/account/VerifyAttribute/BaseVerifyAttribute.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAA2B,MAAM,oBAAoB,CAAC;AAGnE;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA4E3E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.styles.js

@@ -0,0 +1,82 @@
+import { css } from "../../../styles/emotion.js";
+import { withVendorCSSClassPrefix } from "@thunderid/browser";
+
+//#region src/components/account/VerifyAttribute/BaseVerifyAttribute.styles.ts
+/**
+* Creates styles for the BaseVerifyAttribute component
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => {
+	const root = css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} * 2);
+    width: 100%;
+    font-family: ${theme.vars.typography.fontFamily};
+  `;
+	const card = css`
+    padding: calc(${theme.vars.spacing.unit} * 2);
+    border: 1px solid ${theme.vars.colors.border};
+    border-radius: ${theme.vars.borderRadius.medium};
+  `;
+	const header = css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} / 2);
+  `;
+	const heading = css`
+    margin: 0;
+  `;
+	const subheading = css`
+    margin: 0;
+    color: ${theme.vars.colors.text.secondary};
+  `;
+	const content = css`
+    display: flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} * 1.5);
+
+    .${withVendorCSSClassPrefix("otp-field__input-container")} {
+      justify-content: flex-start;
+
+      > input {
+        box-sizing: border-box;
+        flex: 1 1 calc(${theme.vars.spacing.unit} * 4);
+        max-width: calc(${theme.vars.spacing.unit} * 6);
+        min-width: 0;
+      }
+    }
+  `;
+	const alert = css`
+    width: 100%;
+  `;
+	const loading = css`
+    display: flex;
+    justify-content: center;
+    padding: calc(${theme.vars.spacing.unit} * 2);
+  `;
+	return {
+		actions: css`
+    display: flex;
+    gap: ${theme.vars.spacing.unit};
+    align-items: center;
+    justify-content: flex-end;
+  `,
+		alert,
+		card,
+		colorScheme,
+		content,
+		header,
+		heading,
+		loading,
+		root,
+		subheading
+	};
+};
+var BaseVerifyAttribute_styles_default = useStyles;
+
+//#endregion
+export { BaseVerifyAttribute_styles_default as default };
+//# sourceMappingURL=BaseVerifyAttribute.styles.js.map

package/dist/components/account/VerifyAttribute/BaseVerifyAttribute.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseVerifyAttribute.styles.js","names":["root: string","card: string","header: string","heading: string","subheading: string","content: string","alert: string","loading: string"],"sources":["../../../../src/components/account/VerifyAttribute/BaseVerifyAttribute.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseVerifyAttribute component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> => {\n  const root: string = css`\n    display: flex;\n    flex-direction: column;\n    gap: calc(${theme.vars.spacing.unit} * 2);\n    width: 100%;\n    font-family: ${theme.vars.typography.fontFamily};\n  `;\n\n  const card: string = css`\n    padding: calc(${theme.vars.spacing.unit} * 2);\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.medium};\n  `;\n\n  const header: string = css`\n    display: flex;\n    flex-direction: column;\n    gap: calc(${theme.vars.spacing.unit} / 2);\n  `;\n\n  const heading: string = css`\n    margin: 0;\n  `;\n\n  const subheading: string = css`\n    margin: 0;\n    color: ${theme.vars.colors.text.secondary};\n  `;\n\n  const content: string = css`\n    display: flex;\n    flex-direction: column;\n    gap: calc(${theme.vars.spacing.unit} * 1.5);\n\n    .${withVendorCSSClassPrefix('otp-field__input-container')} {\n      justify-content: flex-start;\n\n      > input {\n        box-sizing: border-box;\n        flex: 1 1 calc(${theme.vars.spacing.unit} * 4);\n        max-width: calc(${theme.vars.spacing.unit} * 6);\n        min-width: 0;\n      }\n    }\n  `;\n\n  const alert: string = css`\n    width: 100%;\n  `;\n\n  const loading: string = css`\n    display: flex;\n    justify-content: center;\n    padding: calc(${theme.vars.spacing.unit} * 2);\n  `;\n\n  const actions: string = css`\n    display: flex;\n    gap: ${theme.vars.spacing.unit};\n    align-items: center;\n    justify-content: flex-end;\n  `;\n\n  return {\n    actions,\n    alert,\n    card,\n    colorScheme,\n    content,\n    header,\n    heading,\n    loading,\n    root,\n    subheading,\n  };\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AAYA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,OAAe,GAAG;;;gBAGV,MAAM,KAAK,QAAQ,KAAK;;mBAErB,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,GAAG;oBACN,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,OAAO;;CAGlD,MAAMC,SAAiB,GAAG;;;gBAGZ,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,UAAkB,GAAG;;;CAI3B,MAAMC,aAAqB,GAAG;;aAEnB,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,UAAkB,GAAG;;;gBAGb,MAAM,KAAK,QAAQ,KAAK;;OAEjC,yBAAyB,6BAA6B,CAAC;;;;;yBAKrC,MAAM,KAAK,QAAQ,KAAK;0BACvB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMhD,MAAMC,QAAgB,GAAG;;;CAIzB,MAAMC,UAAkB,GAAG;;;oBAGT,MAAM,KAAK,QAAQ,KAAK;;AAU1C,QAAO;EACL,SARsB,GAAG;;WAElB,MAAM,KAAK,QAAQ,KAAK;;;;EAO/B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,yCAAe"}

package/dist/components/account/VerifyAttribute/VerifyAttribute.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { BaseVerifyAttributeProps } from './BaseVerifyAttribute';
+export type VerifyAttributeProps = Omit<BaseVerifyAttributeProps, 'onInitialize' | 'onSubmit' | 'isInitialized'> & {
+    /**
+     * Name of the signed-in user's attribute to verify, such as `email`. Only a top-level, single-valued
+     * `email` or `mobile` property of the user's schema can be verified; any other is refused without a
+     * request, through `onError`, with `VerifyAttribute-handleInitialize-RuntimeError-001`.
+     */
+    attribute: string;
+    /**
+     * Handle of the `SELF` flow to run. Defaults to the server's shipped
+     * `default-self-attribute-verification-flow`.
+     */
+    flowHandle?: string;
+};
+/**
+ * VerifyAttribute verifies one of the signed-in user's attributes, such as their email address,
+ * by running a self attribute verification flow, named by `flowHandle`. The flow picks the email or
+ * mobile path from the attribute's type, sends a code or a link to the attribute's current value,
+ * and the component renders the steps it describes; for a link it shows a Done action that calls
+ * `onDone`. Every request carries the user's access token. Once the server records the verification,
+ * and when the user selects Done, it re-reads the user's profile so `useUser()` shows the new status.
+ *
+ * It waits for the user schema to load, and refuses an attribute the schema does not declare as an
+ * `email` or `mobile` property, since starting a verification sends a message.
+ *
+ * Mount it with a `key` per attribute: each mount starts a new verification and sends a new code
+ * or link.
+ *
+ * @example
+ * ```tsx
+ * <VerifyAttribute
+ *   attribute="email"
+ *   onComplete={() => setOpen(false)}
+ *   onCancel={() => setOpen(false)}
+ * />
+ * ```
+ */
+declare const VerifyAttribute: FC<VerifyAttributeProps>;
+export default VerifyAttribute;
+//# sourceMappingURL=VerifyAttribute.d.ts.map

package/dist/components/account/VerifyAttribute/VerifyAttribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerifyAttribute.d.ts","sourceRoot":"","sources":["../../../../src/components/account/VerifyAttribute/VerifyAttribute.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAC,EAAE,EAA4B,MAAM,OAAO,CAAC;AACpD,OAA4B,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAC;AAUpF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,wBAAwB,EAAE,cAAc,GAAG,UAAU,GAAG,eAAe,CAAC,GAAG;IACjH;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA6E7C,CAAC;AAEF,eAAe,eAAe,CAAC"}