@adyen/kyc-components/dist/MaskedInput-BFPSwRto.js

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

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 };