@adyen/kyc-components 4.8.0 → 4.9.0-beta.0

package/dist/MaskedInput-BFPSwRto.js

@@ -0,0 +1,714 @@
+try {
+	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "5578987d-4bf0-4f8e-93a0-3f0fe10e66a1", e._sentryDebugIdIdentifier = "sentry-dbid-5578987d-4bf0-4f8e-93a0-3f0fe10e66a1");
+} catch (e) {}
+import { a as Icon, r as useTranslation } from "./translation-BFxyJ1c5.js";
+import { r as cloneObject } from "./useAnalyticsContext-BVFDMrVE.js";
+import { y as isEmpty } from "./validatorUtils-DRapRJ6z.js";
+import { t as KEYBOARD_KEYS } from "./keys-fzUbt2xF.js";
+import { t as Field } from "./Field-pcJkjIG_.js";
+import { n as useForwardedRef, r as InputBase, t as InputText } from "./InputText-C30dZxS4.js";
+import { forwardRef } from "preact/compat";
+import { useCallback as useCallback$1, useEffect as useEffect$1, useLayoutEffect, useMemo as useMemo$1, useRef as useRef$1, useState as useState$1 } from "preact/hooks";
+import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
+//#region src/utils/makeArrayOfRepeatedObjects.ts
+var makeArrayOfRepeatedObjects = (length, obj) => {
+	const array = [];
+	for (let i = 0; i < length; i += 1) array.push(cloneObject(obj));
+	return array;
+};
+//#endregion
+//#region src/utils/masking/shiftRight.ts
+var shiftRight = (possibleShifts, matchedTokens, remainingTokens) => {
+	let shiftsToTry = [...possibleShifts];
+	let current = {
+		matchedTokens,
+		remainingTokens
+	};
+	while (current.remainingTokens.length > 0 && shiftsToTry.length > 0) {
+		const possibleShift = shiftsToTry[0];
+		const shifted = tryShift(current.matchedTokens, current.remainingTokens, possibleShift.fromIndex, possibleShift.shiftDistance);
+		if (shifted === "notPossible") shiftsToTry = shiftsToTry.slice(1);
+		else {
+			current = shifted;
+			shiftsToTry = [...possibleShifts];
+		}
+	}
+	return current;
+};
+/**
+* Returns all possible shifts of optional inputs, sorted by best to worst
+* @param mask
+*/
+var findPossibleShifts = (mask) => {
+	const inputOnlyMask = mask.filter((t) => t.type === "input");
+	const optionals = inputOnlyMask.filter((t) => t.optional);
+	const possibleShifts = [];
+	for (const optional of optionals) {
+		const index = inputOnlyMask.indexOf(optional);
+		for (let i = index + 1; i < inputOnlyMask.length; i += 1) if (inputOnlyMask[i].type === "input") possibleShifts.push({
+			fromIndex: index,
+			shiftDistance: i - index
+		});
+	}
+	return possibleShifts.sort((s1, s2) => {
+		if (s1.fromIndex === s2.fromIndex) return s2.shiftDistance - s1.shiftDistance;
+		return s1.fromIndex - s2.fromIndex;
+	});
+};
+var tryShift = (matchedTokens, remainingTokens, fromIndex, shiftDistance) => {
+	const normalizedTokens = [...matchedTokens.map((token, i) => ({
+		...token,
+		currentValue: token.char,
+		originalIndex: i
+	})), ...remainingTokens.map((token, i) => ({
+		...token,
+		currentValue: null,
+		originalIndex: i + matchedTokens.length
+	}))];
+	const normalizedInputTokens = normalizedTokens.filter((token) => token.type === "input");
+	if (normalizedTokens[fromIndex].currentValue === null) return "notPossible";
+	if (shiftDistance > normalizedInputTokens.slice(fromIndex + 1).filter((t) => !t.currentValue).length) return "notPossible";
+	for (let i = 0; i < normalizedInputTokens.length; i += 1) {
+		const token = normalizedInputTokens[i];
+		if (i < fromIndex) token.potentialValue = token.currentValue;
+		else if (i < fromIndex + shiftDistance) token.potentialValue = null;
+		else token.potentialValue = normalizedInputTokens[i - shiftDistance].currentValue;
+	}
+	if (!normalizedInputTokens.every((token) => {
+		if (!token.potentialValue) return token.optional;
+		return token.allow?.test(token.potentialValue) ?? true;
+	})) return "notPossible";
+	let matchedUpTo = 0;
+	for (let i = 0; i < normalizedTokens.length; i += 1) {
+		const token = normalizedInputTokens.find((t) => t.originalIndex === i) ?? normalizedTokens[i];
+		if (token.type === "input" && !token.potentialValue && !token.optional) break;
+		matchedUpTo = i + 1;
+	}
+	return {
+		matchedTokens: normalizedTokens.slice(0, matchedUpTo).map((token) => ({
+			...token,
+			char: token.type === "nonInput" ? token.char : token.potentialValue
+		})),
+		remainingTokens: normalizedTokens.slice(matchedUpTo)
+	};
+};
+//#endregion
+//#region src/utils/masking/maskHelpers.ts
+var nonInputs = (str, options) => Array.from(str).map((char) => ({
+	type: "nonInput",
+	char,
+	includeInValue: options?.includeInValue ?? false,
+	displayEagerly: options?.displayEagerly ?? true
+}));
+var spacer = nonInputs(" ")[0];
+var alphaInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, {
+	type: "input",
+	allow: /[A-Za-z]/,
+	optional
+});
+var numericInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, {
+	type: "input",
+	allow: /\d/,
+	optional
+});
+var alphanumericInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, {
+	type: "input",
+	allow: /[\dA-Za-z]/,
+	optional
+});
+var customInputs = (length, regex, optional = false) => makeArrayOfRepeatedObjects(length, {
+	type: "input",
+	allow: regex,
+	optional
+});
+var makeMask = (...tokens) => ({
+	tokens,
+	possibleShifts: findPossibleShifts(tokens)
+});
+//#endregion
+//#region src/utils/isValueObscured.ts
+var isValueObscured = (value) => typeof value === "string" && !!value.match(/[*]{1,}/)?.length;
+//#endregion
+//#region src/utils/masking/displayValueToPureValue.ts
+var cachedStripPatterns = /* @__PURE__ */ new Map();
+var makeStripPattern = (mask) => {
+	const inputPatterns = mask.tokens.filter((token) => token.type === "input" && !!token.allow).map((token) => token.allow);
+	const nonInputChars = mask.tokens.filter((token) => token.type === "nonInput" && !token.includeInValue).map((token) => token.char);
+	const strippedChars = [...new Set(nonInputChars.filter((char) => !inputPatterns.some((pattern) => pattern.test(char))))];
+	const stripPattern = new RegExp(`[${strippedChars.join("")}]`, "g");
+	cachedStripPatterns.set(mask, stripPattern);
+	return stripPattern;
+};
+/**
+* Takes a formatted value and converts it back into a pure value by stripping the non-input /
+* non-included characters in a given {@link Mask}.
+*
+* This is the inverse of {@link matchAgainstMask}.
+*
+* @see matchAgainstMask
+*/
+var displayValueToPureValue = (displayValue, mask) => {
+	const stripPattern = cachedStripPatterns.get(mask) ?? makeStripPattern(mask);
+	return displayValue.replaceAll(stripPattern, "");
+};
+//#endregion
+//#region src/utils/masking/stripNonAllowedValues.ts
+var cachedAllowedPatterns = /* @__PURE__ */ new Map();
+/**
+* Creates a regular expression that matches any of the provided patterns.
+*
+* @param regexArray - An array of regular expressions.
+* @returns A combined regular expression.
+*/
+var combineRegexArray = (regexArray) => {
+	const combinedPattern = regexArray.map((pattern) => {
+		const match = String(pattern).match(/\/?(.*)\//);
+		return match ? match[1] : pattern;
+	}).join("|");
+	return new RegExp(`(?:${combinedPattern})`, "g");
+};
+/**
+* Creates a regular expression that matches the allowed input patterns for the given mask.
+*
+* @param mask - The mask definition.
+* @returns The compiled regular expression.
+*/
+var createAllowedPattern = (mask) => {
+	const inputPatterns = mask.tokens.filter((token) => token.type === "input" && !!token.allow).map((token) => token.allow);
+	const allowedRegex = combineRegexArray([...new Set(inputPatterns.map((r) => r.toString()))].map((str) => {
+		const [_, pattern] = str.match(/\/(.*)\/([gimsuy]*)/) || [];
+		return new RegExp(pattern);
+	}));
+	cachedAllowedPatterns.set(mask, allowedRegex);
+	return allowedRegex;
+};
+var replaceNonMatchingChars = (value, allowedInputPatterns) => {
+	const matches = value.match(allowedInputPatterns);
+	return matches ? matches.join("") : "";
+};
+var stripNonAllowedValues = (pureValue, mask) => {
+	return replaceNonMatchingChars(pureValue, cachedAllowedPatterns.get(mask) ?? createAllowedPattern(mask));
+};
+//#endregion
+//#region src/utils/masking/matchAgainstMask.ts
+var getAvailableInputTokens = (tokens) => {
+	const availableTokens = [];
+	for (const token of tokens) {
+		if (token.type === "nonInput") {
+			if (token.includeInValue) availableTokens.push({
+				...token,
+				offset: tokens.indexOf(token)
+			});
+			continue;
+		}
+		availableTokens.push({
+			...token,
+			offset: tokens.indexOf(token)
+		});
+		if (token.type !== "input" || !token.optional) break;
+	}
+	return availableTokens;
+};
+var findMatchingToken = (tokensWithOffset, char) => tokensWithOffset.find((token) => token.type === "nonInput" || !token.allow || token.allow.test(char)) ?? null;
+var getEagerSuffix = (tokens) => {
+	let suffix = "";
+	for (const token of tokens) {
+		if (token.type === "input") if (token.optional) continue;
+		else break;
+		if (!token.displayEagerly) break;
+		suffix += token.char;
+	}
+	return suffix;
+};
+var getPotentialForMoreOptionalInput = (tokens) => tokens.some((token) => token.type === "input" && token.optional);
+/**
+* Takes some pure value e.g. `NL123456` and a {@link Mask}, and returns a `partialCorrect`,
+* `correct` or `mismatch` {@link MaskResult} accordingly.
+*
+* This is the inverse of {@link displayValueToPureValue}.
+*
+* @returns the result of matching the given value against the mask
+* @param pureValue the pure, unformatted input value
+* @param mask the mask to match against
+* @param acceptObscuredValue whether to accept
+*
+* @see displayValueToPureValue
+*/
+var matchAgainstMask = (pureValue, mask, acceptObscuredValue = false, stripNonAllowedInputs = false) => {
+	let tokensToProcess = [...mask.tokens];
+	let charsToProcess = pureValue;
+	let charIndex = 0;
+	let matchedTokens = [];
+	if (acceptObscuredValue && isValueObscured(pureValue)) return {
+		outcome: "obscureCorrect",
+		displayValue: pureValue
+	};
+	const shiftChars = (increment) => {
+		charIndex += increment;
+		charsToProcess = charsToProcess.slice(increment);
+	};
+	const shiftTokens = (increment) => {
+		tokensToProcess = tokensToProcess.slice(increment);
+	};
+	const displayValue = () => matchedTokens.map((token) => token.char).join("");
+	const getNonInputCharacters = () => matchedTokens.filter((token) => token.type === "nonInput" && token.includeInValue === false).map((token) => token.char).join("");
+	while (true) {
+		let partialDisplayValue = displayValue();
+		if (stripNonAllowedInputs) {
+			partialDisplayValue = partialDisplayValue.replaceAll(getNonInputCharacters(), "");
+			if (!partialDisplayValue.length) partialDisplayValue = stripNonAllowedValues(charsToProcess, mask);
+		}
+		const char = charsToProcess[0];
+		const token = tokensToProcess[0];
+		if (!char && !tokensToProcess.some((t) => t.type === "input" && !t.optional)) return {
+			outcome: "correct",
+			displayValue: displayValue() + getEagerSuffix(tokensToProcess),
+			potentialForMoreOptionalInput: getPotentialForMoreOptionalInput(tokensToProcess)
+		};
+		if (!char) {
+			const output = shiftRight(mask.possibleShifts, matchedTokens, tokensToProcess);
+			matchedTokens = output.matchedTokens;
+			tokensToProcess = output.remainingTokens;
+			return {
+				outcome: "partialCorrect",
+				displayValue: displayValue() + getEagerSuffix(tokensToProcess)
+			};
+		}
+		if (!token) return {
+			outcome: "mismatch",
+			badChar: char,
+			mismatchAtChar: charIndex,
+			mismatchedToken: "inputTooLong",
+			partialDisplayValue
+		};
+		if (token.type === "nonInput") {
+			if (token.includeInValue) {
+				if (char !== token.char) return {
+					outcome: "mismatch",
+					badChar: char,
+					mismatchAtChar: charIndex,
+					mismatchedToken: token,
+					partialDisplayValue
+				};
+				shiftChars(1);
+			}
+			matchedTokens.push(token);
+			shiftTokens(1);
+		}
+		if (token.type === "input") {
+			const matchingToken = findMatchingToken(getAvailableInputTokens(tokensToProcess), char);
+			if (!matchingToken) return {
+				outcome: "mismatch",
+				badChar: char,
+				mismatchAtChar: charIndex,
+				mismatchedToken: token,
+				partialDisplayValue
+			};
+			matchedTokens.push({
+				...matchingToken,
+				char
+			});
+			shiftTokens(matchingToken.offset + 1);
+			shiftChars(1);
+		}
+	}
+};
+//#endregion
+//#region src/components/ui/molecules/InputEmail/InputEmail.tsx
+var InputEmail = forwardRef(({ onInput, transformInput, ...props }, ref) => {
+	const [cursorPosition, setCursorPosition] = useState$1(null);
+	const localRef = useForwardedRef(ref);
+	const inputHandler = useCallback$1((event) => {
+		const inputEl = event.currentTarget;
+		if (transformInput) {
+			setCursorPosition(inputEl.selectionStart);
+			const transformedInput = transformInput(inputEl.value);
+			onInput({
+				...event,
+				target: {
+					...event.target,
+					value: transformedInput
+				}
+			});
+		} else onInput(event);
+	}, [transformInput, onInput]);
+	useLayoutEffect(() => {
+		if (cursorPosition && localRef.current?.selectionStart !== cursorPosition) localRef?.current?.setSelectionRange(cursorPosition, cursorPosition, "none");
+	}, [cursorPosition, localRef]);
+	return /* @__PURE__ */ jsx(InputBase, {
+		...props,
+		onInput: inputHandler,
+		ref: localRef,
+		type: "email",
+		autoCapitalize: "off"
+	});
+});
+//#endregion
+//#region src/components/ui/molecules/InputTelephone/InputTelephone.tsx
+var InputTelephone = forwardRef(({ onInput, transformInput, ...props }, ref) => {
+	const [cursorPosition, setCursorPosition] = useState$1(null);
+	const localRef = useForwardedRef(ref);
+	const inputHandler = useCallback$1((event) => {
+		const inputEl = event.currentTarget;
+		if (transformInput) {
+			setCursorPosition(inputEl.selectionStart);
+			const transformedInput = transformInput(inputEl.value);
+			onInput({
+				...event,
+				target: {
+					...event.target,
+					value: transformedInput
+				}
+			});
+		} else onInput(event);
+	}, [transformInput, onInput]);
+	useLayoutEffect(() => {
+		if (cursorPosition && localRef.current?.selectionStart !== cursorPosition) localRef?.current?.setSelectionRange(cursorPosition, cursorPosition, "none");
+	}, [cursorPosition, localRef]);
+	return /* @__PURE__ */ jsx(InputBase, {
+		...props,
+		onInput: inputHandler,
+		ref: localRef,
+		type: "tel"
+	});
+});
+var MaskedInput_module_default = {
+	mismatch: "adyen-kyc-mismatch",
+	mismatchShake: "adyen-kyc-mismatchShake"
+};
+//#endregion
+//#region src/components/ui/molecules/MaskedInput/MaskedInput.tsx
+var deriveInputState = (isValid, isFocused, isDisabled, isOptional, hasNullishValue, hasBlurred, errorMessage, shouldValidate, potentiallyMoreOptionalCharacters, formatGuidance, t) => {
+	if (isDisabled) return { isError: false };
+	if (isOptional && hasNullishValue) return { isError: false };
+	if (isValid && (!potentiallyMoreOptionalCharacters || !isFocused)) return {
+		isError: false,
+		text: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+			name: "checkmark-small",
+			className: "adyen-kyc-helper-text__valid-format-check"
+		}), t(($) => $["formatIsCorrect"])] })
+	};
+	if (isFocused && formatGuidance) return {
+		isError: false,
+		text: formatGuidance
+	};
+	if (!isValid && (shouldValidate || hasBlurred)) return {
+		isError: true,
+		errorMessage,
+		text: formatGuidance
+	};
+	return { isError: false };
+};
+var MISMATCH_ANIMATION_NAME = "mismatchShake";
+var Inner = ({ name, inputState, optional, disabled, readonly, placeholder, displayValue, inputRef, type, id, showingMismatch, onInput, onBlur, onFocus, onPaste, onKeyDown, ...props }) => {
+	switch (type) {
+		case "text": return /* @__PURE__ */ jsx(InputText, {
+			id,
+			"aria-describedby": props["aria-describedby"],
+			"aria-label": props["aria-label"],
+			"aria-labelledby": props["aria-labelledby"],
+			"aria-invalid": inputState.isError,
+			"aria-placeholder": placeholder,
+			ref: inputRef,
+			name,
+			isValid: !inputState.isError,
+			isInvalid: inputState.isError,
+			required: !optional,
+			disabled,
+			readonly,
+			placeholder,
+			value: displayValue,
+			className: showingMismatch ? MaskedInput_module_default.mismatch : void 0,
+			onInput,
+			onPaste,
+			onKeyDown,
+			onFocusHandler: onFocus,
+			onBlurHandler: onBlur
+		});
+		case "email": return /* @__PURE__ */ jsx(InputEmail, {
+			id,
+			"aria-describedby": props["aria-describedby"],
+			"aria-label": props["aria-label"],
+			"aria-labelledby": props["aria-labelledby"],
+			"aria-invalid": inputState.isError,
+			"aria-placeholder": placeholder,
+			ref: inputRef,
+			name,
+			isValid: !inputState.isError,
+			isInvalid: inputState.isError,
+			required: !optional,
+			disabled,
+			readonly,
+			placeholder,
+			value: displayValue,
+			onInput,
+			onPaste,
+			onKeyDown,
+			onFocusHandler: onFocus,
+			onBlurHandler: onBlur
+		});
+		case "tel": return /* @__PURE__ */ jsx(InputTelephone, {
+			id,
+			"aria-describedby": props["aria-describedby"],
+			"aria-label": props["aria-label"],
+			"aria-labelledby": props["aria-labelledby"],
+			"aria-invalid": inputState.isError,
+			"aria-placeholder": placeholder,
+			ref: inputRef,
+			name,
+			isValid: !inputState.isError,
+			isInvalid: inputState.isError,
+			required: !optional,
+			disabled,
+			readonly,
+			placeholder,
+			value: displayValue,
+			onInput,
+			onPaste,
+			onKeyDown,
+			onFocusHandler: onFocus,
+			onBlurHandler: onBlur
+		});
+	}
+};
+var MaskedInput = ({ value, onInput, onBlur, onFocus, onMismatch: onMismatchExternal, isValid: validationIsValid, errorMessage, shouldValidate, mask, name, label, placeholder, transformOnType, type = "text", readonly = false, disabled = false, optional = false, formatGuidance = "", acceptObscuredValue = false, helper, helperPosition = "below", useFieldComponent = true, stripNonAllowedInputs = false }) => {
+	const hasExistingData = !isEmpty(value);
+	const [preservingMismatchedValue, setPreservingMismatchedValue] = useState$1(false);
+	const [isFocused, setIsFocused] = useState$1(false);
+	const [hasBlurred, setHasBlurred] = useState$1(hasExistingData);
+	const [caretReturnPosition, setCaretReturnPosition] = useState$1(null);
+	const inputRef = useRef$1(null);
+	const [showingMismatch, setShowingMismatch] = useState$1(false);
+	const { t } = useTranslation("ui");
+	const onAnimationEnd = (event) => {
+		if (!event.animationName.includes(MISMATCH_ANIMATION_NAME)) return;
+		setShowingMismatch(false);
+	};
+	const onMismatch = useCallback$1((mismatch) => {
+		if (!inputRef.current) return;
+		setShowingMismatch(true);
+		inputRef.current.addEventListener("animationend", onAnimationEnd);
+		onMismatchExternal?.(mismatch);
+	}, [onMismatchExternal]);
+	useEffect$1(() => {
+		const inputEl = inputRef.current;
+		if (inputEl) return () => {
+			inputEl.removeEventListener("animationend", onAnimationEnd);
+		};
+	}, []);
+	const getMaskResult = useCallback$1((pureValue) => {
+		if (!mask) return {
+			outcome: "partialCorrect",
+			displayValue: pureValue
+		};
+		return matchAgainstMask(transformOnType ? transformOnType(pureValue) : pureValue, mask, acceptObscuredValue, stripNonAllowedInputs);
+	}, [
+		mask,
+		transformOnType,
+		acceptObscuredValue,
+		stripNonAllowedInputs
+	]);
+	const displayValueToPure = useCallback$1((displayValue) => {
+		if (!mask) return displayValue;
+		return displayValueToPureValue(displayValue, mask);
+	}, [mask]);
+	const maskResult = useMemo$1(() => getMaskResult(value), [getMaskResult, value]);
+	const displayValue = preservingMismatchedValue ? value : maskResult.outcome === "mismatch" ? maskResult.partialDisplayValue : maskResult.displayValue;
+	const inputState = deriveInputState(validationIsValid && maskResult.outcome !== "mismatch", isFocused, disabled, optional, !displayValue, hasBlurred, errorMessage, shouldValidate, maskResult.outcome === "correct" && !!maskResult.potentialForMoreOptionalInput, formatGuidance, t);
+	useEffect$1(() => {
+		if (mask && maskResult.outcome === "mismatch") {
+			const strippedValue = displayValueToPure(value);
+			if (getMaskResult(strippedValue).outcome !== "mismatch") {
+				onInput(strippedValue);
+				return;
+			}
+			setPreservingMismatchedValue(true);
+			if (stripNonAllowedInputs) onInput(maskResult.partialDisplayValue);
+		}
+	}, [
+		mask,
+		maskResult,
+		value,
+		onInput,
+		displayValueToPure,
+		getMaskResult,
+		stripNonAllowedInputs
+	]);
+	useLayoutEffect(() => {
+		if (caretReturnPosition && inputRef.current && caretReturnPosition !== inputRef.current.selectionStart) {
+			inputRef.current.setSelectionRange(caretReturnPosition, caretReturnPosition, "none");
+			setCaretReturnPosition(null);
+		}
+	}, [caretReturnPosition]);
+	const handleInput = useCallback$1((event) => {
+		const inputEl = event.currentTarget;
+		const newPureValue = displayValueToPure(inputEl.value);
+		const newMaskResult = getMaskResult(newPureValue);
+		const returnCaretLater = (offset = 0) => {
+			if (!inputEl.selectionStart) return;
+			setCaretReturnPosition(inputEl.selectionStart + offset);
+		};
+		const cancelInput = () => {
+			returnCaretLater(-1);
+			inputEl.value = displayValue;
+			if (typeof event.preventDefault === "function") {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		if (newMaskResult.outcome === "mismatch") {
+			if (newMaskResult.partialDisplayValue) {
+				if (newMaskResult.mismatchedToken === "inputTooLong" && displayValue) {
+					cancelInput();
+					onMismatch(newMaskResult);
+					return;
+				}
+				cancelInput();
+				onMismatch(newMaskResult);
+				setPreservingMismatchedValue(false);
+				onInput(newMaskResult.partialDisplayValue);
+				return;
+			}
+			cancelInput();
+			onMismatch(newMaskResult);
+			return;
+		}
+		if (inputEl.selectionStart && inputEl.selectionStart < inputEl.value.length) returnCaretLater();
+		setPreservingMismatchedValue(false);
+		inputEl.value = newMaskResult.displayValue;
+		onInput(newPureValue);
+	}, [
+		displayValue,
+		displayValueToPure,
+		getMaskResult,
+		onInput,
+		onMismatch
+	]);
+	const handleBlur = useCallback$1((event, fieldOnBlur) => {
+		fieldOnBlur?.(event);
+		const eventWithProcessedValue = {
+			...event,
+			currentTarget: {
+				...event.currentTarget,
+				value: displayValueToPure(event.currentTarget.value)
+			},
+			target: {
+				...event.target,
+				value: displayValueToPure(event.currentTarget.value)
+			}
+		};
+		onBlur?.(eventWithProcessedValue);
+		setIsFocused(false);
+		setHasBlurred(true);
+	}, [displayValueToPure, onBlur]);
+	const handlePaste = useCallback$1((event) => {
+		const pasteValue = event.clipboardData?.getData("text/plain");
+		const inputEl = event.currentTarget;
+		const { selectionStart, selectionEnd } = inputEl;
+		if (!pasteValue || !selectionStart || selectionStart !== selectionEnd) return;
+		const pureDisplayValue = displayValueToPure(displayValue);
+		const purePasteValue = displayValueToPure(pasteValue);
+		const newPureValue = pureDisplayValue.slice(0, selectionStart) + purePasteValue + pureDisplayValue.slice(selectionStart);
+		if (newPureValue.startsWith(pureDisplayValue + pureDisplayValue)) {
+			const withPrefixRemoved = newPureValue.replace(pureDisplayValue, "");
+			event.preventDefault();
+			inputEl.value = withPrefixRemoved;
+			handleInput({
+				...event,
+				currentTarget: inputEl,
+				target: inputEl
+			});
+		}
+	}, [
+		displayValue,
+		displayValueToPure,
+		handleInput
+	]);
+	const handleFocus = useCallback$1((event, fieldOnFocus) => {
+		onFocus?.();
+		fieldOnFocus?.(event);
+		setIsFocused(true);
+	}, [onFocus]);
+	const handleKeyDown = useCallback$1((event) => {
+		const inputEl = event.currentTarget;
+		const isCaretAtEndWithNoSelection = inputEl.selectionStart === inputEl.value.length && inputEl.selectionStart === inputEl.selectionEnd;
+		if (event.key !== KEYBOARD_KEYS.backspace || !isCaretAtEndWithNoSelection) return;
+		event.preventDefault();
+		const withLastCharRemoved = value.slice(0, value.length - 1);
+		const newMaskResult = getMaskResult(withLastCharRemoved);
+		if (newMaskResult.outcome === "mismatch") {
+			inputEl.value = newMaskResult.partialDisplayValue;
+			onMismatch(newMaskResult);
+		} else {
+			inputEl.value = newMaskResult.displayValue;
+			onInput(withLastCharRemoved);
+		}
+	}, [
+		getMaskResult,
+		onInput,
+		onMismatch,
+		value
+	]);
+	const getHelper = () => {
+		if (inputState.isError) return inputState.text;
+		if (helper) return /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("div", { children: helper }), /* @__PURE__ */ jsx("div", { children: inputState.text })] });
+		return inputState.text;
+	};
+	return useFieldComponent ? /* @__PURE__ */ jsx(Field, {
+		name,
+		label,
+		isValid: !inputState.isError,
+		errorMessage: inputState.errorMessage || inputState.isError,
+		helper: getHelper(),
+		helperPosition,
+		disabled,
+		optional,
+		children: ({ onBlurHandler: fieldOnBlur, onFocusHandler: fieldOnFocus, id, ...childProps }) => /* @__PURE__ */ jsx(Inner, {
+			...childProps,
+			id,
+			name,
+			optional,
+			disabled,
+			readonly,
+			placeholder,
+			displayValue,
+			inputRef,
+			inputState,
+			type,
+			showingMismatch,
+			onInput: handleInput,
+			onBlur: (event) => {
+				handleBlur(event, fieldOnBlur);
+			},
+			onPaste: handlePaste,
+			onFocus: (event) => {
+				handleFocus(event, fieldOnFocus);
+			},
+			onKeyDown: handleKeyDown
+		})
+	}) : /* @__PURE__ */ jsx(Inner, {
+		name,
+		"aria-label": label,
+		optional,
+		disabled,
+		readonly,
+		placeholder,
+		displayValue,
+		inputRef,
+		inputState,
+		type,
+		showingMismatch,
+		onInput: handleInput,
+		onBlur: (event) => {
+			handleBlur(event);
+		},
+		onPaste: handlePaste,
+		onFocus: (event) => {
+			handleFocus(event);
+		},
+		onKeyDown: handleKeyDown
+	});
+};
+//#endregion
+export { alphanumericInputs as a, nonInputs as c, alphaInputs as i, numericInputs as l, InputEmail as n, customInputs as o, isValueObscured as r, makeMask as s, MaskedInput as t, spacer as u };