@adyen/kyc-components 4.0.0-compact.0 → 4.0.0-compact.2

package/dist/{MaskedInput-BZ7t98eu.js → Spacer-BcPESwGJ.js}

@@ -2,18 +2,41 @@
 {
   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] = "e585ebce-5107-43e9-ac0b-89e54142ad27", e._sentryDebugIdIdentifier = "sentry-dbid-e585ebce-5107-43e9-ac0b-89e54142ad27");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "9f7dda11-545d-4212-80c0-4a951ee8aaf9", e._sentryDebugIdIdentifier = "sentry-dbid-9f7dda11-545d-4212-80c0-4a951ee8aaf9");
   } catch (e) {
   }
 }
 ;
-import { ay as cloneObject, a9 as isEmpty, a as useTranslation, V as Icon } from "./StoreProvider-BlaJzXSZ.js";
+import { useMemo, useState, useEffect, useCallback, useLayoutEffect, useRef } from "preact/hooks";
+import { c as useLegalEntity, R as ROOT_LE, X as useExperimentsContext, aA as getCapabilityProblems, g as getLegalEntityCountry, aB as cloneObject, C as CountryCodes, aC as hasText, aD as isValidMinLength, aE as matchesRegex, W as isEmpty, aF as NO_ALPHABET_REGEX, aG as EMOJI_REGEX, aH as hasRepeatedCharacters, aI as isInvalidName, aJ as OTHER_ENTITIES_VALID_CHAR_REGEX, aK as LATIN_SPACE_MARK_PUNCTUATION_REGEX, aL as standardKatakanaValidator, aM as standardKanjiValidator, a2 as useAnalyticsContext, P as createLogger, u as useTranslation, az as StateContext, L as Loader, a3 as Icon, G as Typography, Y as IconButton } from "./StoreProvider-D0o_745u.js";
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useState, useCallback, useLayoutEffect, useRef, useEffect, useMemo } from "preact/hooks";
-import { F as Field } from "./useForm-C1DW3mPC.js";
-import { K as KEYBOARD_KEYS } from "./keys-BpNgnAsD.js";
-import { forwardRef } from "preact/compat";
-import { u as useForwardedRef, a as InputBase, I as InputText } from "./InputText-BX5sG9WJ.js";
+import { a as Alert } from "./Alert-BjepSgqS.js";
+import cx from "classnames";
+import { a as debouncedInputEvent } from "./debouncedInputEvent-DbzJEMPo.js";
+import { Suspense, lazy, forwardRef } from "preact/compat";
+import { b as useId } from "./useToastContext-CbM0O-ZH.js";
+import { R as Radio } from "./CountryField-BKLmbhSX.js";
+import { F as Field } from "./useForm-BkgSiM1i.js";
+import { K as KEYBOARD_KEYS } from "./Modal-qvqrnkl9.js";
+import { u as useForwardedRef, a as InputBase, I as InputText } from "./InputText-DXkZ7fwq.js";
+const useCapabilityProblems = () => {
+  const { data: rootLegalEntity } = useLegalEntity(ROOT_LE);
+  const { isExperimentEnabled } = useExperimentsContext();
+  const problems = useMemo(
+    () => rootLegalEntity ? getCapabilityProblems(
+      rootLegalEntity,
+      getLegalEntityCountry(rootLegalEntity),
+      isExperimentEnabled
+    ) : void 0,
+    [rootLegalEntity, isExperimentEnabled]
+  );
+  return problems;
+};
+const getProblemsForEntity = (capabilityProblems, entityType, entityId) => capabilityProblems[entityType]?.[entityId];
+const TrustedFieldsProviders = {
+  SINGPASS: "singpass",
+  KOMPANY: "kompany"
+};
 const makeArrayOfRepeatedObjects = (length, obj) => {
   const array = [];
   for (let i = 0; i < length; i += 1) {
@@ -128,7 +151,7 @@ const nonInputs = (str, options) => Array.from(str).map((char) => ({
   includeInValue: options?.includeInValue ?? false,
   displayEagerly: options?.displayEagerly ?? true
 }));
-const spacer = nonInputs(" ")[0];
+const spacer$1 = 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 });
@@ -137,7 +160,557 @@ const makeMask = (...tokens) => ({
   tokens,
   possibleShifts: findPossibleShifts(tokens)
 });
+const isExistingFile = (file) => "existing" in file && file.existing;
+const isNewlyUploadedFile = (file) => !isExistingFile(file);
+function getLocalizedIdDocumentTypeOptions(country) {
+  switch (country) {
+    case CountryCodes.Japan:
+      return [
+        { id: "driversLicense", name: "driversLicense", hasBackPage: true },
+        { id: "passport", name: "passport", hasBackPage: false },
+        { id: "identityCard", name: "identityCard__JP", hasBackPage: true }
+      ];
+    default:
+      return [
+        { id: "driversLicense", name: "driversLicense", hasBackPage: true },
+        { id: "passport", name: "passport", hasBackPage: false },
+        { id: "identityCard", name: "identityCard", hasBackPage: true }
+      ];
+  }
+}
 const isValueObscured = (value) => typeof value === "string" && !!value.match(/[*]{1,}/)?.length;
+const uppercase = (str) => str?.toUpperCase() ?? str;
+const validateNotEmptyOnBlur = {
+  modes: ["blur"],
+  validate: (val) => !isEmpty(val),
+  errorMessage: "fieldIsRequired"
+};
+const validateLegalCompanyName = [
+  {
+    modes: ["blur"],
+    validate: hasText,
+    errorMessage: "fieldIsRequired"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(NO_ALPHABET_REGEX, input),
+    errorMessage: "nameMustContainLetters"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(EMOJI_REGEX, input) && !hasRepeatedCharacters(input) && isValidMinLength(input, 3) && !isInvalidName(input) && matchesRegex(OTHER_ENTITIES_VALID_CHAR_REGEX, input),
+    errorMessage: "checkForTypos"
+  }
+];
+const validateJaHaniLegalCompanyName = [
+  {
+    modes: ["blur"],
+    validate: hasText,
+    errorMessage: "fieldIsRequired"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => standardKanjiValidator(input),
+    errorMessage: "nameMustContainLetters"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(EMOJI_REGEX, input) && !hasRepeatedCharacters(input) && isValidMinLength(input, 3) && !isInvalidName(input) && matchesRegex(OTHER_ENTITIES_VALID_CHAR_REGEX, input),
+    errorMessage: "checkForTypos"
+  }
+];
+const validateJaKanaLegalCompanyName = [
+  {
+    modes: ["blur"],
+    validate: hasText,
+    errorMessage: "fieldIsRequired"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => standardKatakanaValidator(input),
+    errorMessage: "nameMustContainLetters"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(EMOJI_REGEX, input) && !hasRepeatedCharacters(input) && isValidMinLength(input, 3) && !isInvalidName(input) && matchesRegex(OTHER_ENTITIES_VALID_CHAR_REGEX, input),
+    errorMessage: "checkForTypos"
+  }
+];
+const validateLatinSpaceMarkPunctuationOnlyOnBlur = {
+  modes: ["blur"],
+  validate: (input) => matchesRegex(LATIN_SPACE_MARK_PUNCTUATION_REGEX, input),
+  errorMessage: "kanjiAndKanaCharactersAreNotAllowed"
+};
+const validatePatternOnBlur = (pattern) => ({
+  modes: ["blur"],
+  validate: (val) => !!val && pattern.test(val)
+});
+function ContextGuidance({
+  title,
+  content,
+  titleId,
+  contentId,
+  trackingParams
+}) {
+  const userEvents = useAnalyticsContext();
+  const onGuidanceToggle = (status) => {
+    userEvents.addFieldEvent("Clicked accordion", {
+      actionType: status,
+      field: "context guidance",
+      label: titleId,
+      content: contentId,
+      ...trackingParams
+    });
+  };
+  return /* @__PURE__ */ jsx(Alert, { title, type: "collapsible", variant: "info", onToggle: onGuidanceToggle, children: content });
+}
+const convertFullToHalf = (str) => str.replace(/[！-～]/g, (r) => String.fromCharCode(r.charCodeAt(0) - 65248));
+const logger = createLogger();
+function TextArea(props) {
+  const {
+    autoCorrect,
+    isInvalid,
+    isValid,
+    readonly = null,
+    spellCheck,
+    disabled,
+    maxLength,
+    className,
+    trimOnBlur,
+    enableTracking = false,
+    name,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-labelledby": ariaLabelledBy
+  } = props;
+  const { t } = useTranslation("ui");
+  const userEvents = useAnalyticsContext();
+  const [value, setValue] = useState("");
+  if (Object.prototype.hasOwnProperty.call(props, "onChange")) {
+    logger.error("Error: Form fields that rely on InputBase may not have an onChange property");
+  }
+  const handleInput = (e) => {
+    if (enableTracking) {
+      debouncedInputEvent(userEvents, {
+        actionType: "input",
+        field: name
+      });
+    }
+    e.currentTarget.value = convertFullToHalf(e.currentTarget.value);
+    setValue(e.currentTarget.value);
+    props?.onInput?.(e);
+  };
+  const handleBlur = (e) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "blur",
+        field: name
+      });
+    }
+    props?.onBlurHandler?.(e);
+    if (trimOnBlur) {
+      e.currentTarget.value = e.currentTarget.value.trim();
+    }
+    props?.onBlur?.(e);
+  };
+  const handleFocus = (e) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "focus",
+        field: name
+      });
+    }
+    props?.onFocusHandler?.(e);
+  };
+  const inputClassNames = cx("adyen-kyc-input", "adyen-kyc-input--textarea", className, {
+    "adyen-kyc-input--invalid": isInvalid,
+    "adyen-kyc-field--valid": isValid,
+    "adyen-kyc-input--disabled": disabled
+  });
+  const charactersLeft = maxLength - value.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...props,
+        className: inputClassNames,
+        readOnly: readonly,
+        spellCheck,
+        autoCorrect,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        "aria-labelledby": ariaLabelledBy,
+        ...disabled && { "aria-disabled": true },
+        onInput: handleInput,
+        onBlur: handleBlur,
+        onFocus: handleFocus
+      }
+    ),
+    !isInvalid && maxLength && charactersLeft >= 0 ? /* @__PURE__ */ jsx("span", { className: "adyen-kyc-input__counter", children: t(($) => $["xCharactersLeft"], { charactersLeft }) }) : null
+  ] });
+}
+function StateContextSetter({ stateRef }) {
+  if (stateRef.current.setState) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StateContext.Consumer, { children: (stateContextValue) => {
+    const { dispatch, setActiveForms } = stateContextValue;
+    stateRef.current.setState = dispatch;
+    stateRef.current.setActiveForms = setActiveForms;
+    return null;
+  } });
+}
+const Image = ({
+  lazyLoadedImage,
+  className
+}) => {
+  const LazyLoadedImageComponent = lazyLoadedImage;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loader, {}), children: /* @__PURE__ */ jsx(LazyLoadedImageComponent, { className, "aria-hidden": true }) });
+};
+const getDocumentGuidancePrefix = (documentType) => {
+  switch (documentType) {
+    case "passport":
+      return "passport";
+    case "driversLicense":
+    case "identityCard":
+      return "id";
+    case "bankStatement":
+    case "vatDocument":
+    case "registrationDocument":
+    case "proofOfAddress":
+    case "proofOfResidency":
+    default:
+      return "document";
+  }
+};
+const documentBlurredImage = lazy(() => import("./document-blurred-2Zpodj3_.js"));
+const documentCutOffImage = lazy(() => import("./document-cut-off-ClS7RiOp.js"));
+const documentExpiredImage = lazy(() => import("./document-expired-CjksBq-N.js"));
+const documentFrontImage = lazy(() => import("./document-front-DiAairT3.js"));
+const idBlurredImage = lazy(() => import("./id-blurred-9dzBOWCE.js"));
+const idCutOffImage = lazy(() => import("./id-cut-off-CohJCI2h.js"));
+const idFrontImage = lazy(() => import("./id-front-CSZfvdRg.js"));
+const idGlareImage = lazy(() => import("./id-glare-Q2JWo5ts.js"));
+const passportBlurredImage = lazy(() => import("./passport-blurred-B4UDQfmc.js"));
+const passportCutOffImage = lazy(() => import("./passport-cut-off-C0N2mgLk.js"));
+const passportFrontImage = lazy(() => import("./passport-front-BwA7wR91.js"));
+const passportGlareImage = lazy(() => import("./passport-glare-Mg2ixsYA.js"));
+const documentMap = {
+  "document-blurred": documentBlurredImage,
+  "document-cutoff": documentCutOffImage,
+  "document-expired": documentExpiredImage,
+  "document-front": documentFrontImage,
+  "id-blurred": idBlurredImage,
+  "id-cutoff": idCutOffImage,
+  "id-front": idFrontImage,
+  "id-glare": idGlareImage,
+  "passport-blurred": passportBlurredImage,
+  "passport-cutoff": passportCutOffImage,
+  "passport-front": passportFrontImage,
+  "passport-glare": passportGlareImage
+};
+function DocumentGuidance({ type, className }) {
+  const { t } = useTranslation("ui");
+  const documentGuidanceItems = useMemo(() => {
+    const guidancePrefix = getDocumentGuidancePrefix(type);
+    const guidanceItems = [
+      { svgName: `${guidancePrefix}-front`, translationKey: "good", valid: true },
+      { svgName: `${guidancePrefix}-cutoff`, translationKey: "notCutOff" },
+      { svgName: `${guidancePrefix}-blurred`, translationKey: "notBlurry" },
+      guidancePrefix === "document" ? { svgName: `document-expired`, translationKey: "notExpired" } : { svgName: `${guidancePrefix}-glare`, translationKey: "noGlare" }
+    ];
+    return type === "constitutionalDocument" ? guidanceItems.filter((item) => item.svgName !== "document-expired") : guidanceItems;
+  }, [type]);
+  return /* @__PURE__ */ jsx("div", { className: cx("adyen-kyc-document-guidance", className), children: /* @__PURE__ */ jsx("div", { className: "adyen-kyc-document-guidance__container", children: documentGuidanceItems.map((item) => /* @__PURE__ */ jsxs("figure", { className: "adyen-kyc-document-guidance__item", children: [
+    /* @__PURE__ */ jsx(Image, { lazyLoadedImage: documentMap[item.svgName] }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "adyen-kyc-document-guidance__description", children: [
+      item.valid ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "adyen-kyc-document-guidance__icon" }) : /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "cross",
+          className: "adyen-kyc-document-guidance__icon adyen-kyc-document-guidance__icon--invalid"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "adyen-kyc-document-guidance__description-text", children: t(($) => $[item.translationKey]) })
+    ] })
+  ] }, item.translationKey)) }) });
+}
+function bytesToSize(bytes) {
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  if (bytes === 0) return "n/a";
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
+  if (i === 0) return `${bytes} ${sizes[i]}`;
+  return `${(bytes / 1024 ** i).toFixed()} ${sizes[i]}`;
+}
+function DropzoneFile(props) {
+  const { file, errorMessage, onDelete, loading } = props;
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  let documentIcon;
+  const formatSize = (bytes) => {
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+    if (!bytes || bytes === 0) return "n/a";
+    const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
+    if (i === 0) return `${bytes} ${sizes[i]}`;
+    return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
+  };
+  switch (file.type?.split("/")[0]) {
+    case "image":
+      documentIcon = "image";
+      break;
+    default:
+      documentIcon = "document";
+  }
+  useEffect(() => {
+    if (!errorMessage) return;
+    userEvents.addFieldEvent("Encountered error", {
+      actionType: "change",
+      field: "dropzone file",
+      returnType: "validation",
+      returnValue: errorMessage
+    });
+  }, [errorMessage, userEvents]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("adyen-kyc-dropzone-file", { "adyen-kyc-dropzone-file--error": errorMessage }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-dropzone-file__details", children: [
+          /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-dropzone-file__labels", children: [
+            errorMessage ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                testId: "document-invalid",
+                name: "warning",
+                className: "adyen-kyc-dropzone-file__icon"
+              }
+            ) : /* @__PURE__ */ jsx(
+              Icon,
+              {
+                testId: "document-valid",
+                name: documentIcon,
+                className: "adyen-kyc-dropzone-file__icon"
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", className: "adyen-kyc-dropzone-file__name", children: file.name }),
+            /* @__PURE__ */ jsx(Typography, { className: "adyen-kyc-dropzone-file__size", children: isNewlyUploadedFile(file) && formatSize(file.size) })
+          ] }),
+          errorMessage && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone-file__error", children: t(($) => $[errorMessage]) })
+        ] }),
+        loading ? /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone-file__loading", children: /* @__PURE__ */ jsx(Loader, { size: "medium" }) }) : errorMessage ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ariaLabel: t(($) => $["close"]),
+            icon: "cross",
+            variant: "tertiary",
+            onClick: onDelete
+          }
+        ) : /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ariaLabel: t(($) => $["deleteDocument"]),
+            icon: "bin",
+            variant: "tertiary",
+            onClick: onDelete
+          }
+        )
+      ]
+    }
+  );
+}
+const hasDuplicates = (arr) => arr.some((item, currIndex) => arr.indexOf(item) !== currIndex);
+const defaultFileValidationOptions = {
+  allowedFileTypes: ["JPG", "JPEG", "PNG", "PDF"],
+  maxNumberOfFiles: 1,
+  maxSize: 4194304,
+  // 4MB by default
+  isOptional: false
+};
+const filterOnlyNewlyUploadedFiles = (files) => files.filter(isNewlyUploadedFile);
+const fileValidationRules = ({
+  allowedFileTypes,
+  maxNumberOfFiles,
+  maxSize,
+  isOptional
+}) => [
+  {
+    validate: (files) => {
+      if (isOptional && (!files || files.length === 0)) return true;
+      return Boolean(files && files.length > 0);
+    },
+    errorMessage: "fieldIsRequired",
+    modes: ["blur", "input"]
+  },
+  {
+    validate: (files) => {
+      if (!files) return true;
+      return files.length <= maxNumberOfFiles;
+    },
+    errorMessage: "tooManyFiles",
+    modes: ["blur", "input"]
+  },
+  {
+    validate: (files) => {
+      if (!files) return true;
+      return !hasDuplicates(files.map((file) => file.name));
+    },
+    errorMessage: "duplicatedFiles",
+    modes: ["blur", "input"]
+  },
+  {
+    validate: (files) => {
+      if (!files) return true;
+      return filterOnlyNewlyUploadedFiles(files).every(
+        (file) => allowedFileTypes.some(
+          (filetype) => file.name.toLowerCase().endsWith(filetype.toLowerCase())
+        )
+      );
+    },
+    errorMessage: "unsupportedFiletype",
+    modes: ["blur", "input"]
+  },
+  {
+    validate: (files) => {
+      if (!files) return true;
+      return filterOnlyNewlyUploadedFiles(files).every((file) => !file.size || file.size < maxSize);
+    },
+    errorMessage: "maximumFileSizeExceeded",
+    modes: ["blur", "input"]
+  }
+];
+const RadioCard = ({
+  optionId,
+  optionName,
+  optionDescription,
+  optionSubtitle,
+  name,
+  isInvalid,
+  isSelected,
+  onSelect,
+  classNames,
+  disabled,
+  loading,
+  icon,
+  body,
+  footer,
+  floatingRadio
+}) => {
+  const id = useId("radio");
+  const elementIds = {
+    label: `${id}-label`,
+    description: `${id}-description`,
+    subtitle: `${id}-subtitle`
+  };
+  const ariaDescribedBy = `${optionSubtitle ? elementIds.subtitle : ""} ${optionDescription || body ? elementIds.description : ""}`.trim();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-testId": optionId,
+      className: cx([
+        "adyen-kyc-radio-card",
+        classNames?.label,
+        { "adyen-kyc-radio-card--disabled": disabled }
+      ]),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: cx("adyen-kyc-radio-card__icon", classNames?.icon), "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-radio-card__content", children: [
+          /* @__PURE__ */ jsx("div", { className: "adyen-kyc-radio-card__header adyen-kyc-u-display-flex adyen-kyc-u-align-items-center", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx([
+                "adyen-kyc-radio-group-card__label",
+                classNames?.header,
+                { "adyen-kyc-radio-group-card__label--invalid": isInvalid }
+              ]),
+              children: [
+                optionSubtitle && /* @__PURE__ */ jsxs("div", { id: elementIds.subtitle, className: "adyen-kyc-radio-group-card__subtitle", children: [
+                  optionSubtitle,
+                  /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: "." })
+                ] }),
+                /* @__PURE__ */ jsx("span", { id: elementIds.label, children: optionName })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: elementIds.description,
+              className: cx("adyen-kyc-radio-card__body", classNames?.body),
+              children: body ?? optionDescription
+            }
+          ),
+          footer && /* @__PURE__ */ jsx("div", { className: cx("adyen-kyc-radio-card__footer", classNames?.footer), children: footer })
+        ] }),
+        loading ? /* @__PURE__ */ jsx("span", { className: "adyen-kyc-radio-card__loading-icon", children: /* @__PURE__ */ jsx(Loader, { size: "small" }) }) : /* @__PURE__ */ jsx(
+          Radio,
+          {
+            id,
+            "aria-describedby": ariaDescribedBy,
+            "aria-labelledby": elementIds.label,
+            checked: isSelected,
+            groupName: name,
+            onClick: onSelect,
+            value: optionId,
+            disabled,
+            className: cx({ "adyen-kyc-radio-group-card__radio--floating": floatingRadio })
+          }
+        )
+      ]
+    },
+    optionId
+  );
+};
+const RadioGroupCard = ({
+  options,
+  name,
+  onSelect,
+  selected,
+  isInvalid,
+  className,
+  optionId,
+  optionName,
+  optionDescription,
+  optionSubtitle,
+  optionClassNames,
+  renderOptionIcon,
+  renderOptionBody,
+  renderOptionFooter,
+  isOptionDisabled,
+  floatingRadio,
+  enableTracking = false
+}) => {
+  const userEvents = useAnalyticsContext();
+  const handleSelect = (option) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "input",
+        field: name,
+        returnValue: typeof option === "string" ? option : void 0
+      });
+    }
+    onSelect(option);
+  };
+  return /* @__PURE__ */ jsx("div", { className: className ?? "adyen-kyc-radio-group-card", children: options.map((option) => /* @__PURE__ */ jsx(
+    RadioCard,
+    {
+      optionId: optionId(option),
+      optionName: optionName(option),
+      optionDescription: optionDescription?.(option),
+      optionSubtitle: optionSubtitle?.(option),
+      isInvalid,
+      isSelected: selected === option,
+      onSelect: () => handleSelect(option),
+      name,
+      classNames: optionClassNames?.(option),
+      icon: renderOptionIcon?.(option),
+      body: renderOptionBody?.(option),
+      footer: renderOptionFooter?.(option),
+      disabled: isOptionDisabled?.(option),
+      floatingRadio
+    },
+    optionId(option)
+  )) });
+};
 const cachedStripPatterns = /* @__PURE__ */ new Map();
 const makeStripPattern = (mask) => {
   const inputPatterns = mask.tokens.filter((token) => token.type === "input" && !!token.allow).map((token) => token.allow);
@@ -305,7 +878,7 @@ const InputEmail = forwardRef(
     const localRef = useForwardedRef(ref);
     const inputHandler = useCallback(
       (event) => {
-        const inputEl = event.target;
+        const inputEl = event.currentTarget;
         if (transformInput) {
           setCursorPosition(inputEl.selectionStart);
           const transformedInput = transformInput(inputEl.value);
@@ -343,7 +916,7 @@ const InputTelephone = forwardRef(
     const localRef = useForwardedRef(ref);
     const inputHandler = useCallback(
       (event) => {
-        const inputEl = event.target;
+        const inputEl = event.currentTarget;
         if (transformInput) {
           setCursorPosition(inputEl.selectionStart);
           const transformedInput = transformInput(inputEl.value);
@@ -367,7 +940,7 @@ const InputTelephone = forwardRef(
   }
 );
 const mismatch = "adyen-kyc-mismatch";
-const styles = {
+const styles$1 = {
   mismatch
 };
 const deriveInputState = (isValid, isFocused, isDisabled, isOptional, hasNullishValue, hasBlurred, errorMessage, shouldValidate, potentiallyMoreOptionalCharacters, formatGuidance, t) => {
@@ -443,7 +1016,7 @@ const Inner = ({
           readonly,
           placeholder,
           value: displayValue,
-          className: showingMismatch ? styles.mismatch : void 0,
+          className: showingMismatch ? styles$1.mismatch : void 0,
           onInput,
           onPaste,
           onKeyDown,
@@ -537,7 +1110,7 @@ const MaskedInput = ({
   const [caretReturnPosition, setCaretReturnPosition] = useState(null);
   const inputRef = useRef(null);
   const [showingMismatch, setShowingMismatch] = useState(false);
-  const { t } = useTranslation("common");
+  const { t } = useTranslation("ui");
   const onAnimationEnd = (event) => {
     if (!event.animationName.includes(MISMATCH_ANIMATION_NAME)) return;
     setShowingMismatch(false);
@@ -614,7 +1187,7 @@ const MaskedInput = ({
   }, [caretReturnPosition]);
   const handleInput = useCallback(
     (event) => {
-      const inputEl = event.target;
+      const inputEl = event.currentTarget;
       const newPureValue = displayValueToPure(inputEl.value);
       const newMaskResult = getMaskResult(newPureValue);
       const returnCaretLater = (offset = 0) => {
@@ -660,9 +1233,13 @@ const MaskedInput = ({
       fieldOnBlur?.(event);
       const eventWithProcessedValue = {
         ...event,
+        currentTarget: {
+          ...event.currentTarget,
+          value: displayValueToPure(event.currentTarget.value)
+        },
         target: {
           ...event.target,
-          value: displayValueToPure(event.target.value)
+          value: displayValueToPure(event.currentTarget.value)
         }
       };
       onBlur?.(eventWithProcessedValue);
@@ -674,7 +1251,7 @@ const MaskedInput = ({
   const handlePaste = useCallback(
     (event) => {
       const pasteValue = event.clipboardData?.getData("text/plain");
-      const inputEl = event.target;
+      const inputEl = event.currentTarget;
       const { selectionStart, selectionEnd } = inputEl;
       if (!pasteValue || !selectionStart || selectionStart !== selectionEnd) return;
       const pureDisplayValue = displayValueToPure(displayValue);
@@ -701,7 +1278,7 @@ const MaskedInput = ({
   );
   const handleKeyDown = useCallback(
     (event) => {
-      const inputEl = event.target;
+      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();
@@ -785,15 +1362,55 @@ const MaskedInput = ({
     }
   );
 };
+const createFormRules = (rules) => rules;
+const resolveFieldMetadata = (countryEntry, params, defaultMetadata) => {
+  if (typeof countryEntry === "object") {
+    return countryEntry;
+  }
+  if (typeof countryEntry === "function") {
+    return countryEntry(params);
+  }
+  return defaultMetadata;
+};
+const spacer = "adyen-kyc-spacer";
+const styles = {
+  spacer
+};
+const Spacer = () => /* @__PURE__ */ jsx("div", { className: styles.spacer });
 export {
-  InputEmail as I,
+  isNewlyUploadedFile as A,
+  isValueObscured as B,
+  ContextGuidance as C,
+  DropzoneFile as D,
+  Image as I,
   MaskedInput as M,
-  nonInputs as a,
-  alphaInputs as b,
-  customInputs as c,
-  alphanumericInputs as d,
-  isValueObscured as i,
+  RadioGroupCard as R,
+  StateContextSetter as S,
+  TrustedFieldsProviders as T,
+  validateNotEmptyOnBlur as a,
+  alphanumericInputs as b,
+  alphaInputs as c,
+  nonInputs as d,
+  validateLegalCompanyName as e,
+  validateLatinSpaceMarkPunctuationOnlyOnBlur as f,
+  validateJaKanaLegalCompanyName as g,
+  validateJaHaniLegalCompanyName as h,
+  useCapabilityProblems as i,
+  getProblemsForEntity as j,
+  customInputs as k,
+  defaultFileValidationOptions as l,
   makeMask as m,
   numericInputs as n,
-  spacer as s
+  fileValidationRules as o,
+  bytesToSize as p,
+  DocumentGuidance as q,
+  resolveFieldMetadata as r,
+  spacer$1 as s,
+  TextArea as t,
+  uppercase as u,
+  validatePatternOnBlur as v,
+  getLocalizedIdDocumentTypeOptions as w,
+  createFormRules as x,
+  InputEmail as y,
+  Spacer as z
 };