@adyen/kyc-components 4.0.0 → 4.2.0-beta.0

package/dist/MaskedInput-DEaltj9a.js

@@ -0,0 +1,811 @@
+;
+{
+  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] = "fdae05cd-07d8-49c2-b254-1cb71160b48f", e._sentryDebugIdIdentifier = "sentry-dbid-fdae05cd-07d8-49c2-b254-1cb71160b48f");
+  } catch (e) {
+  }
+}
+;
+import { ab as cloneObject, ai as isEmpty, u as useTranslation, r as Icon } from "./StoreProvider-qjyWZhxu.js";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { useState, useCallback, useLayoutEffect, useRef, useEffect, useMemo } from "preact/hooks";
+import { F as Field } from "./Field-CpaVW2RZ.js";
+import { K as KEYBOARD_KEYS } from "./Modal-sn2wYRN6.js";
+import { forwardRef } from "preact/compat";
+import { u as useForwardedRef, a as InputBase, I as InputText } from "./InputText-DmFCHVKa.js";
+const makeArrayOfRepeatedObjects = (length, obj) => {
+  const array = [];
+  for (let i = 0; i < length; i += 1) {
+    array.push(cloneObject(obj));
+  }
+  return array;
+};
+const 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;
+};
+const 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) {
+      const laterToken = inputOnlyMask[i];
+      if (laterToken.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;
+  });
+};
+const 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";
+  }
+  const emptyInputsAfter = normalizedInputTokens.slice(fromIndex + 1).filter((t) => !t.currentValue);
+  if (shiftDistance > emptyInputsAfter.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;
+    }
+  }
+  const allValid = normalizedInputTokens.every((token) => {
+    if (!token.potentialValue) {
+      return token.optional;
+    }
+    return token.allow?.test(token.potentialValue) ?? true;
+  });
+  if (!allValid) 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;
+  }
+  const newMatchedTokens = normalizedTokens.slice(0, matchedUpTo).map((token) => ({
+    ...token,
+    char: token.type === "nonInput" ? token.char : token.potentialValue
+  }));
+  const newRemainingTokens = normalizedTokens.slice(matchedUpTo);
+  return {
+    matchedTokens: newMatchedTokens,
+    remainingTokens: newRemainingTokens
+  };
+};
+const nonInputs = (str, options) => Array.from(str).map((char) => ({
+  type: "nonInput",
+  char,
+  includeInValue: options?.includeInValue ?? false,
+  displayEagerly: options?.displayEagerly ?? true
+}));
+const spacer = nonInputs(" ")[0];
+const alphaInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, { type: "input", allow: /[A-Za-z]/, optional });
+const numericInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, { type: "input", allow: /\d/, optional });
+const alphanumericInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, { type: "input", allow: /[\dA-Za-z]/, optional });
+const customInputs = (length, regex, optional = false) => makeArrayOfRepeatedObjects(length, { type: "input", allow: regex, optional });
+const makeMask = (...tokens) => ({
+  tokens,
+  possibleShifts: findPossibleShifts(tokens)
+});
+const isValueObscured = (value) => typeof value === "string" && !!value.match(/[*]{1,}/)?.length;
+const cachedStripPatterns = /* @__PURE__ */ new Map();
+const 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;
+};
+const displayValueToPureValue = (displayValue, mask) => {
+  const stripPattern = cachedStripPatterns.get(mask) ?? makeStripPattern(mask);
+  return displayValue.replaceAll(stripPattern, "");
+};
+const cachedAllowedPatterns = /* @__PURE__ */ new Map();
+const combineRegexArray = (regexArray) => {
+  const combinedPattern = regexArray.map((pattern) => {
+    const match = String(pattern).match(/\/?(.*)\//);
+    return match ? match[1] : pattern;
+  }).join("|");
+  return new RegExp(`(?:${combinedPattern})`, "g");
+};
+const createAllowedPattern = (mask) => {
+  const inputPatterns = mask.tokens.filter((token) => token.type === "input" && !!token.allow).map((token) => token.allow);
+  const uniqueRegexSet = new Set(inputPatterns.map((r) => r.toString()));
+  const uniqueRegexArray = [...uniqueRegexSet].map((str) => {
+    const [_, pattern] = str.match(/\/(.*)\/([gimsuy]*)/) || [];
+    return new RegExp(pattern);
+  });
+  const allowedRegex = combineRegexArray(uniqueRegexArray);
+  cachedAllowedPatterns.set(mask, allowedRegex);
+  return allowedRegex;
+};
+const replaceNonMatchingChars = (value, allowedInputPatterns) => {
+  const matches = value.match(allowedInputPatterns);
+  return matches ? matches.join("") : "";
+};
+const stripNonAllowedValues = (pureValue, mask) => {
+  return replaceNonMatchingChars(
+    pureValue,
+    cachedAllowedPatterns.get(mask) ?? createAllowedPattern(mask)
+  );
+};
+const 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;
+};
+const findMatchingToken = (tokensWithOffset, char) => tokensWithOffset.find(
+  (token) => token.type === "nonInput" || !token.allow || token.allow.test(char)
+) ?? null;
+const 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;
+};
+const getPotentialForMoreOptionalInput = (tokens) => tokens.some((token) => token.type === "input" && token.optional);
+const 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 availableTokens = getAvailableInputTokens(tokensToProcess);
+      const matchingToken = findMatchingToken(availableTokens, char);
+      if (!matchingToken)
+        return {
+          outcome: "mismatch",
+          badChar: char,
+          mismatchAtChar: charIndex,
+          mismatchedToken: token,
+          partialDisplayValue
+        };
+      matchedTokens.push({ ...matchingToken, char });
+      shiftTokens(matchingToken.offset + 1);
+      shiftChars(1);
+    }
+  }
+};
+const InputEmail = forwardRef(
+  ({ onInput, transformInput, ...props }, ref) => {
+    const [cursorPosition, setCursorPosition] = useState(null);
+    const localRef = useForwardedRef(ref);
+    const inputHandler = useCallback(
+      (event) => {
+        const inputEl = event.currentTarget;
+        if (transformInput) {
+          setCursorPosition(inputEl.selectionStart);
+          const transformedInput = transformInput(inputEl.value);
+          const eventWithTransformedValue = {
+            ...event,
+            target: { ...event.target, value: transformedInput }
+          };
+          onInput(eventWithTransformedValue);
+        } 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"
+      }
+    );
+  }
+);
+const InputTelephone = forwardRef(
+  ({ onInput, transformInput, ...props }, ref) => {
+    const [cursorPosition, setCursorPosition] = useState(null);
+    const localRef = useForwardedRef(ref);
+    const inputHandler = useCallback(
+      (event) => {
+        const inputEl = event.currentTarget;
+        if (transformInput) {
+          setCursorPosition(inputEl.selectionStart);
+          const transformedInput = transformInput(inputEl.value);
+          const eventWithTransformedValue = {
+            ...event,
+            target: { ...event.target, value: transformedInput }
+          };
+          onInput(eventWithTransformedValue);
+        } 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" });
+  }
+);
+const mismatch = "adyen-kyc-mismatch";
+const styles = {
+  mismatch
+};
+const 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, { 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
+  };
+};
+const MISMATCH_ANIMATION_NAME = "mismatchShake";
+const 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 ? styles.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
+        }
+      );
+  }
+};
+const 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(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [hasBlurred, setHasBlurred] = useState(hasExistingData);
+  const [caretReturnPosition, setCaretReturnPosition] = useState(null);
+  const inputRef = useRef(null);
+  const [showingMismatch, setShowingMismatch] = useState(false);
+  const { t } = useTranslation("ui");
+  const onAnimationEnd = (event) => {
+    if (!event.animationName.includes(MISMATCH_ANIMATION_NAME)) return;
+    setShowingMismatch(false);
+  };
+  const onMismatch = useCallback(
+    (mismatch2) => {
+      if (!inputRef.current) return;
+      setShowingMismatch(true);
+      inputRef.current.addEventListener("animationend", onAnimationEnd);
+      onMismatchExternal?.(mismatch2);
+    },
+    [onMismatchExternal]
+  );
+  useEffect(() => {
+    const inputEl = inputRef.current;
+    if (inputEl) {
+      return () => {
+        inputEl.removeEventListener("animationend", onAnimationEnd);
+      };
+    }
+  }, []);
+  const getMaskResult = useCallback(
+    (pureValue) => {
+      if (!mask) return { outcome: "partialCorrect", displayValue: pureValue };
+      return matchAgainstMask(
+        transformOnType ? transformOnType(pureValue) : pureValue,
+        mask,
+        acceptObscuredValue,
+        stripNonAllowedInputs
+      );
+    },
+    [mask, transformOnType, acceptObscuredValue, stripNonAllowedInputs]
+  );
+  const displayValueToPure = useCallback(
+    (displayValue2) => {
+      if (!mask) return displayValue2;
+      return displayValueToPureValue(displayValue2, mask);
+    },
+    [mask]
+  );
+  const maskResult = useMemo(() => 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(() => {
+    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(
+    (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(
+    (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(
+    (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();
+        handleInput({
+          ...event,
+          target: { ...event.target, value: withPrefixRemoved }
+        });
+      }
+    },
+    [displayValue, displayValueToPure, handleInput]
+  );
+  const handleFocus = useCallback(
+    (event, fieldOnFocus) => {
+      onFocus?.();
+      fieldOnFocus?.(event);
+      setIsFocused(true);
+    },
+    [onFocus]
+  );
+  const handleKeyDown = useCallback(
+    (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
+    }
+  );
+};
+export {
+  InputEmail as I,
+  MaskedInput as M,
+  nonInputs as a,
+  alphaInputs as b,
+  customInputs as c,
+  alphanumericInputs as d,
+  isValueObscured as i,
+  makeMask as m,
+  numericInputs as n,
+  spacer as s
+};