@adyen/kyc-components 4.0.0-beta.5 → 4.0.0-beta.7

package/dist/useForm-C66YXYZG.js

@@ -0,0 +1,1694 @@
+;
+{
+  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] = "485ea493-c135-47be-a588-a19ed650ab45", e._sentryDebugIdIdentifier = "sentry-dbid-485ea493-c135-47be-a588-a19ed650ab45");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
+import cx from "classnames";
+import { useState, useEffect, useRef, useMemo, useCallback, useReducer } from "preact/hooks";
+import { U as useAnalyticsContext, a as useTranslation, V as Icon, w as translateStringOrObject, L as Loader, W as noop, x as Typography, N as createLogger, a9 as isEmpty, az as entriesOf, aG as doArraysMatch } from "./StoreProvider-_YW7glEh.js";
+import { computed, signal, useSignal, useSignalEffect } from "@preact/signals";
+import { K as KEYBOARD_KEYS } from "./keys-BpNgnAsD.js";
+import { d as debouncedInputEvent } from "./analytics-BY--2-JY.js";
+function Checkbox({
+  id,
+  name,
+  value,
+  className,
+  label,
+  isInvalid,
+  onChange,
+  helper,
+  checked,
+  readonly,
+  disabled,
+  enableTracking = false,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const userEvents = useAnalyticsContext();
+  const handleChange = (newValue) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "input",
+        field: name,
+        returnValue: String(newValue)
+      });
+    }
+    onChange(newValue);
+  };
+  const helperId = `${id}-helper`;
+  const ariaDescribedById = `${helper ? helperId : ""} ${ariaDescribedBy ?? ""}`.trim();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        name,
+        value,
+        "aria-describedby": ariaDescribedById,
+        "aria-invalid": ariaInvalid || isInvalid,
+        "aria-required": ariaRequired,
+        readOnly: readonly,
+        disabled,
+        checked,
+        className: cx([
+          "adyen-kyc-checkbox__input",
+          [className],
+          { "adyen-kyc-checkbox__input--invalid": isInvalid }
+        ]),
+        type: "checkbox",
+        onClick: (event) => {
+          event.stopPropagation();
+          handleChange(!checked);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "adyen-kyc-checkbox__label", children: label }),
+    helper && /* @__PURE__ */ jsx("span", { id: helperId, className: "adyen-kyc-checkbox__helper-text", children: helper })
+  ] });
+}
+const ARIA_ERROR_SUFFIX = "-ariaError";
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    let r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+const useId = (prefix) => {
+  const [uuid] = useState(uuidv4());
+  return `${prefix}_${uuid}`;
+};
+const MaybeFieldset = ({
+  children,
+  className,
+  name,
+  disabled,
+  el,
+  dataTestId
+}) => el === "fieldset" ? /* @__PURE__ */ jsx("fieldset", { name, disabled, className, "data-testid": dataTestId, children }) : /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, children });
+const Field = ({
+  className,
+  classNameModifiers = [],
+  children,
+  disabled,
+  optional,
+  errorMessage,
+  formatGuidance,
+  helper,
+  helperPosition = "above",
+  isValid,
+  label,
+  name,
+  showErrorIconBottom = false,
+  showErrorIcon = true,
+  el = "div",
+  dataTestId,
+  onBlur,
+  onFieldBlur,
+  onFocus
+}) => {
+  const uniqueId = useId("field");
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const Label = el === "fieldset" ? "legend" : "label";
+  useEffect(() => {
+    if (!errorMessage) return;
+    const returnValue = typeof errorMessage === "string" && errorMessage || typeof errorMessage === "object" && errorMessage.key || "invalid";
+    userEvents.addFieldEvent("Encountered error", {
+      actionType: "input",
+      field: name,
+      returnType: "validation",
+      returnValue
+    });
+  }, [name, errorMessage, userEvents]);
+  const elementIds = {
+    label: `${uniqueId}-label`,
+    helper: `${uniqueId}-helper`,
+    error: `${uniqueId}${ARIA_ERROR_SUFFIX}`,
+    guidanceText: `${uniqueId}-guidanceText`
+  };
+  const inputDescribedBy = `${errorMessage ? elementIds.error : ""} ${helper ? elementIds.helper : ""} ${formatGuidance ? elementIds.guidanceText : ""}`.trim();
+  return /* @__PURE__ */ jsxs(
+    MaybeFieldset,
+    {
+      className: cx(
+        "adyen-kyc-field",
+        className,
+        classNameModifiers.map((m) => `adyen-kyc-field--${m}`),
+        {
+          "adyen-kyc-field--error": !!errorMessage,
+          "adyen-kyc-field--valid": isValid,
+          "adyen-kyc-field--disabled": disabled
+        }
+      ),
+      name,
+      disabled,
+      el,
+      dataTestId,
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          Label,
+          {
+            id: elementIds.label,
+            htmlFor: el === "fieldset" ? void 0 : uniqueId,
+            className: cx("adyen-kyc-label__text", {
+              "adyen-kyc-label__text--error": !!errorMessage
+            }),
+            children: [
+              label,
+              optional && /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-optional-label", children: [
+                " ",
+                t(($) => $["optional"])
+              ] })
+            ]
+          }
+        ),
+        helper && helperPosition === "above" && /* @__PURE__ */ jsx("span", { id: elementIds.helper, className: "adyen-kyc-helper-text adyen-kyc-helper-text__above", children: helper }),
+        /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-input-wrapper", children: [
+          children({
+            id: uniqueId,
+            "aria-labelledby": elementIds.label,
+            "aria-describedby": inputDescribedBy,
+            isInvalid: !!errorMessage,
+            isValid: !!isValid,
+            onBlurHandler: (e) => {
+              if (typeof onBlur === "function") onBlur(e);
+              if (typeof onFieldBlur === "function") onFieldBlur(e);
+            },
+            onFocusHandler: (e) => {
+              if (typeof onFocus === "function") onFocus(e);
+            }
+          }),
+          helper && helperPosition === "below" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: elementIds.helper,
+              className: "adyen-kyc-helper-text adyen-kyc-helper-text__below",
+              children: helper
+            }
+          ),
+          isValid && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-input__inline-validation adyen-kyc-input__inline-validation--valid", children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }),
+          !!errorMessage && !showErrorIconBottom && showErrorIcon && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-input__inline-validation adyen-kyc-input__inline-validation--invalid", children: /* @__PURE__ */ jsx(Icon, { name: "field-error" }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { "aria-live": "polite", "aria-atomic": true, className: "adyen-kyc-error-text", children: [
+          /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: `${label}:` }),
+          !!errorMessage && typeof errorMessage !== "boolean" && /* @__PURE__ */ jsxs("span", { id: elementIds.error, children: [
+            translateStringOrObject(t, errorMessage),
+            showErrorIconBottom && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-input__inline-validation adyen-kyc-input__inline-validation--invalid-bottom", children: /* @__PURE__ */ jsx(Icon, { name: "field-error" }) })
+          ] })
+        ] }),
+        !errorMessage && formatGuidance && /* @__PURE__ */ jsx("span", { id: elementIds.guidanceText, "aria-live": "polite", className: "adyen-kyc-guidance-text", children: formatGuidance })
+      ]
+    }
+  );
+};
+const loaderWrapperLoader = "adyen-kyc-loader-wrapper-loader";
+const loaderWrapperLoaderActive = "adyen-kyc-loader-wrapper-loader-active";
+const styles$1 = {
+  loaderWrapperLoader,
+  loaderWrapperLoaderActive
+};
+const LoaderWrapper = ({
+  children,
+  status,
+  formOpacityWhenLoading = 0,
+  loaderSize = "medium",
+  showSpinner = true,
+  className
+}) => {
+  const opacitySyle = status === "loading" ? {
+    opacity: formOpacityWhenLoading
+  } : { opacity: 1 };
+  const loaderWrapperClass = cx(styles$1.loaderWrapperLoader, {
+    [styles$1.loaderWrapperLoaderActive]: status === "loading" && showSpinner
+  });
+  const overlayClass = cx(styles$1.loaderWrapper, className);
+  return /* @__PURE__ */ jsxs("div", { className: overlayClass, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx("div", { className: loaderWrapperClass, children: /* @__PURE__ */ jsx(Loader, { size: loaderSize }) }),
+    /* @__PURE__ */ jsx("div", { className: styles$1.loaderWrapperForm, style: opacitySyle, children })
+  ] });
+};
+const createSelectFocus = ({
+  activeItems,
+  filteredItems: items
+}) => {
+  const numberOfItems = computed(() => items.value.length - 1);
+  const focused = signal();
+  const getDefaultFocusedItem = () => {
+    const firstActiveOption = activeItems.value.find((option) => !option.disabled);
+    const firstEnabledOption = items.value.find((option) => !option.disabled);
+    return firstActiveOption ?? firstEnabledOption;
+  };
+  const focusedItemIndex = computed(() => {
+    const currFocus = focused.value;
+    const toFind = focusedIsItem(currFocus) ? currFocus : getDefaultFocusedItem();
+    if (!toFind) {
+      console.warn("[Select] No existing focused item, and none of the filtered items are enabled");
+      return 0;
+    }
+    return items.value.findIndex((i) => i.id === toFind.id);
+  });
+  const findPotentialIndex = (currentIndex, direction) => {
+    const potentialIndex = direction === "down" ? currentIndex + 1 : currentIndex - 1;
+    const potentialItem = items.value[potentialIndex];
+    if (potentialIndex < 0 || potentialIndex > numberOfItems.value) {
+      return "exceedsBounds";
+    }
+    if (potentialItem.disabled) {
+      return findPotentialIndex(potentialIndex, direction);
+    }
+    return potentialIndex;
+  };
+  const moveFocusToNextItem = () => {
+    const nextIndex = findPotentialIndex(focusedItemIndex.value, "down");
+    if (nextIndex !== "exceedsBounds") focused.value = items.value[nextIndex];
+  };
+  const moveFocusToPreviousItem = () => {
+    const prevIndex = findPotentialIndex(focusedItemIndex.value, "up");
+    if (prevIndex !== "exceedsBounds") focused.value = items.value[prevIndex];
+  };
+  const moveFocusToFirstItem = () => {
+    let currIndex = focusedItemIndex.value;
+    while (true) {
+      const before = findPotentialIndex(currIndex, "up");
+      if (before === "exceedsBounds") break;
+      currIndex = before;
+    }
+    focused.value = items.value[currIndex];
+  };
+  const moveFocusToLastItem = () => {
+    let currIndex = focusedItemIndex.value;
+    while (true) {
+      const after = findPotentialIndex(currIndex, "down");
+      if (after === "exceedsBounds") break;
+      currIndex = after;
+    }
+    focused.value = items.value[currIndex];
+  };
+  const focusInput = () => {
+    focused.value = "input";
+  };
+  const focusItem = (item) => {
+    focused.value = item;
+  };
+  const focusDefaultItem = () => {
+    focused.value = getDefaultFocusedItem();
+  };
+  const focusNothing = () => {
+    focused.value = void 0;
+  };
+  return {
+    focused,
+    moveFocusToFirstItem,
+    moveFocusToLastItem,
+    moveFocusToNextItem,
+    moveFocusToPreviousItem,
+    focusInput,
+    focusItem,
+    focusDefaultItem,
+    focusNothing
+  };
+};
+const useSelectFocus = (options) => {
+  const [selectFocus] = useState(createSelectFocus(options));
+  return selectFocus;
+};
+const focusedIsItem = (focused) => Boolean(focused) && typeof focused === "object";
+const useWatchingSignal = (value) => {
+  const signal2 = useSignal(value);
+  if (signal2.peek() !== value) signal2.value = value;
+  return signal2;
+};
+const simulateTextChangeFromKeyboardEvent = (keyDownEvent, value) => {
+  const { key } = keyDownEvent;
+  let newValue = value;
+  if (key === KEYBOARD_KEYS.backspace) {
+    newValue = newValue.slice(0, newValue.length - 1);
+  } else if (key.length === 1) {
+    newValue += key;
+  }
+  return newValue;
+};
+function useMirrorProp(prop, propOnChange, defaultVal) {
+  const [isMirroring] = useState(propOnChange !== void 0);
+  const [local, setLocal] = useState(defaultVal);
+  if (isMirroring) {
+    return [prop, propOnChange];
+  } else {
+    return [local, setLocal];
+  }
+}
+const selectInputWrapper = "adyen-kyc-select-input-wrapper";
+const selectInput = "adyen-kyc-select-input";
+const selectInputActive = "adyen-kyc-select-input--active";
+const selectInputReadonly = "adyen-kyc-select-input--readonly";
+const selectInputInvalid = "adyen-kyc-select-input--invalid";
+const selectInputMinimal = "adyen-kyc-select-input--minimal";
+const selectInputSearch = "adyen-kyc-select-input-search";
+const selectInputFilterable = "adyen-kyc-select-input--filterable";
+const selectInputWrapperFilterable = "adyen-kyc-select-input-wrapper--filterable";
+const selectInputWrapperNonFilterable = "adyen-kyc-select-input-wrapper--non-filterable";
+const selectInputListOpen = "adyen-kyc-select-input--list-open";
+const selectInputNonFilterable = "adyen-kyc-select-input--non-filterable";
+const selectInputPlaceholder = "adyen-kyc-select-input--placeholder";
+const ignorePointerEvents = "adyen-kyc-ignore-pointer-events";
+const handlePointerEvents = "adyen-kyc-handle-pointer-events";
+const styles = {
+  selectInputWrapper,
+  selectInput,
+  selectInputActive,
+  selectInputReadonly,
+  selectInputInvalid,
+  selectInputMinimal,
+  selectInputSearch,
+  selectInputFilterable,
+  selectInputWrapperFilterable,
+  selectInputWrapperNonFilterable,
+  selectInputListOpen,
+  selectInputNonFilterable,
+  selectInputPlaceholder,
+  ignorePointerEvents,
+  handlePointerEvents
+};
+const isAppleMobile = /iPhone|iPad/.test(navigator.platform);
+function SelectButton({
+  id,
+  name,
+  active,
+  readonly,
+  showList,
+  isInvalid,
+  onClick,
+  onButtonKeyDown,
+  filterable,
+  isFiltering,
+  placeholder,
+  focusProps: { focused },
+  selectListId,
+  onInput,
+  behaviour,
+  loading,
+  text,
+  enableTracking = false,
+  onFocus,
+  inputRef,
+  minimal,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel
+}) {
+  const userEvents = useAnalyticsContext();
+  const wrapperRef = useRef(null);
+  useSignalEffect(() => {
+    if (focused.value === "input") {
+      inputRef.current?.focus();
+    }
+  });
+  const handleFocus = (e) => {
+    if (readonly) return;
+    if (enableTracking)
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "focus",
+        field: name
+      });
+    onFocus(e);
+  };
+  const handleClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (readonly) return;
+    onClick();
+  };
+  const handleKeyDown = (e) => {
+    if (!readonly) onButtonKeyDown(e);
+  };
+  const handleInput = (e) => {
+    if (filterable && !readonly) onInput(e.target.value);
+  };
+  const truncatedDisplayValue = useMemo(() => {
+    if (active.length === 0) return void 0;
+    const activeText = active.map(({ selectedOptionName, name: name2 }) => selectedOptionName ?? name2).join(", ");
+    return activeText.length > 50 ? activeText.substring(0, 50) + "..." : activeText;
+  }, [active]);
+  const title = active?.length ? active.map(({ name: name2 }) => name2).join(",") : placeholder;
+  const isFocused = focused.value === "input";
+  const value = useMemo(() => {
+    if (behaviour === "textIsData" || focused.value !== void 0 && // can be focusing either the input or one of the options
+    filterable && isFiltering)
+      return text;
+    return truncatedDisplayValue;
+  }, [behaviour, text, focused.value, filterable, isFiltering, truncatedDisplayValue]);
+  return (
+    // In this case, the `<input>` within is fully accessible - this `onClick` is simply handling the situation
+    // where there is no `<label>` around the component. In that case, we should handle click events as if they
+    // occurred on the input.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx({
+          [styles.selectInputWrapper]: true,
+          [styles.selectInputMinimal]: minimal,
+          [styles.selectInputReadonly]: readonly,
+          [styles.selectInputActive]: isFocused,
+          [styles.selectInputListOpen]: showList,
+          [styles.selectInputInvalid]: isInvalid,
+          [styles.selectInputSearch]: filterable === "prefiltered",
+          [styles.selectInputWrapperFilterable]: filterable,
+          [styles.selectInputWrapperNonFilterable]: !filterable,
+          // To resolve a bug where filterable select `<input>`s weren't focusable on iOS
+          [styles.ignorePointerEvents]: isAppleMobile
+        }),
+        ref: wrapperRef,
+        onClick: handleClick,
+        onFocusIn: handleFocus,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              name,
+              title,
+              ref: inputRef,
+              type: filterable ? "text" : "button",
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-owns": selectListId,
+              "aria-controls": selectListId,
+              "aria-expanded": showList,
+              "aria-describedby": ariaDescribedBy,
+              "aria-disabled": readonly,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-autocomplete": filterable ? "list" : void 0,
+              autoComplete: "off",
+              className: cx({
+                [styles.selectInput]: true,
+                [styles.selectInputFilterable]: filterable,
+                [styles.selectInputNonFilterable]: !filterable,
+                [styles.selectInputMinimal]: minimal,
+                [styles.selectInputReadonly]: readonly,
+                // To resolve a bug where filterable select `<input>`s weren't focusable on iOS
+                [styles.handlePointerEvents]: isAppleMobile
+              }),
+              placeholder,
+              value,
+              disabled: readonly,
+              onClick: handleClick,
+              onInput: handleInput,
+              onKeyDown: handleKeyDown
+            }
+          ),
+          !filterable && !value ? /* @__PURE__ */ jsx("span", { className: styles.selectInputPlaceholder, children: placeholder }) : void 0,
+          loading && /* @__PURE__ */ jsx(Loader, { size: "small", dot: true })
+        ]
+      }
+    )
+  );
+}
+const SelectListItem = ({
+  id,
+  item,
+  selected,
+  isMulti,
+  isSearch,
+  children,
+  onSelect,
+  onKeyDown,
+  onFocus,
+  className
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    "aria-disabled": !!item.disabled,
+    "aria-selected": selected,
+    className: cx([
+      "adyen-kyc-dropdown-element",
+      {
+        "adyen-kyc-dropdown-element--active": selected,
+        "adyen-kyc-dropdown-element--disabled": !!item.disabled,
+        "adyen-kyc-dropdown-multi-element": isMulti,
+        "adyen-kyc-dropdown-element-description": !isMulti && !isSearch && item.description,
+        "adyen-kyc-dropdown-search-element": isSearch
+      },
+      className
+    ]),
+    "data-disabled": !!item.disabled,
+    "data-value": item.id,
+    onFocus: (event) => {
+      if (item.disabled) return;
+      onFocus?.(event);
+    },
+    onClick: (e) => {
+      e.preventDefault();
+      if (item.disabled) return;
+      onSelect(!selected);
+    },
+    onKeyDown: (e) => {
+      if (item.disabled) return;
+      onKeyDown(e);
+    },
+    role: "option",
+    tabIndex: -1,
+    children: isMulti ? /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none", width: "100%" }, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id,
+        onChange: noop,
+        label: item.name,
+        disabled: item.disabled,
+        helper: item.description,
+        checked: selected,
+        name: `adyen-kyc-dropdown-element__checkbox adyen-kyc-dropdown-element__checkbox--${item.id}`
+      }
+    ) }) : children ? [children] : /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-dropdown-element__icon", children: item.icon }),
+      item.description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            el: "span",
+            variant: "body-strongest",
+            className: "adyen-kyc-dropdown-element__label",
+            children: item.name
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            el: "span",
+            color: "secondary",
+            className: "adyen-kyc-dropdown-element-description__text",
+            children: item.description
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("span", { className: "adyen-kyc-dropdown-element__label", children: item.name })
+    ] })
+  }
+);
+const logger$1 = createLogger();
+const DEFAULT_ITEM_HEIGHT = 36;
+function SelectList({
+  selectListId,
+  active,
+  filteredItems,
+  showList,
+  isMulti,
+  inputRef,
+  isSearch,
+  loading,
+  getSearchItem,
+  onKeyDown,
+  onSelect,
+  minimal,
+  maxVisibleItems = 5,
+  focusProps: {
+    focused,
+    focusItem,
+    focusDefaultItem,
+    moveFocusToNextItem,
+    moveFocusToPreviousItem,
+    moveFocusToFirstItem,
+    moveFocusToLastItem
+  }
+}) {
+  const { t } = useTranslation("ui");
+  const [startIndex, setStartIndex] = useState(0);
+  const [endIndex, setEndIndex] = useState(maxVisibleItems);
+  const listRef = useRef(null);
+  const calculatedItemHeight = (() => {
+    if (listRef.current && showList) {
+      const height2 = listRef.current.firstElementChild?.firstElementChild?.clientHeight;
+      if (height2 !== void 0) return height2;
+    }
+  })();
+  const itemHeight = calculatedItemHeight || DEFAULT_ITEM_HEIGHT;
+  const totalItems = filteredItems.length;
+  const visibleItems = useMemo(
+    () => filteredItems.slice(startIndex, endIndex),
+    [endIndex, filteredItems, startIndex]
+  );
+  const findElementForItem = useCallback(
+    (item) => {
+      const listContainer = listRef.current;
+      if (!listContainer) return;
+      return listContainer.querySelector(
+        `[role="option"][data-value="${item.id}"]`
+      );
+    },
+    [listRef]
+  );
+  const recalculateScrollIndexes = useCallback(() => {
+    if (!listRef.current) return;
+    const { scrollTop } = listRef.current;
+    const maxStartIndex = totalItems < maxVisibleItems ? totalItems : totalItems - maxVisibleItems;
+    const newStartIndex = Math.min(Math.max(0, Math.floor(scrollTop / itemHeight)), maxStartIndex);
+    const newEndIndex = Math.min(newStartIndex + maxVisibleItems, totalItems);
+    setStartIndex(newStartIndex);
+    setEndIndex(newEndIndex);
+  }, [totalItems, maxVisibleItems, itemHeight, listRef]);
+  useEffect(() => {
+    recalculateScrollIndexes();
+  }, [recalculateScrollIndexes]);
+  const scrollItemIntoView = useCallback(
+    (item) => {
+      if (!listRef.current) return;
+      const itemIndex = filteredItems.indexOf(item);
+      if (itemIndex === -1) {
+        return;
+      }
+      const maxScrollTop = totalItems * itemHeight;
+      listRef.current.scrollTop = Math.min(itemHeight * (itemIndex + 0.5), maxScrollTop);
+    },
+    [filteredItems, itemHeight, totalItems, listRef]
+  );
+  const acquireFocusForItem = useCallback(
+    (item) => {
+      let itemEl = findElementForItem(item);
+      if (!itemEl) {
+        scrollItemIntoView(item);
+      }
+      setTimeout(() => {
+        itemEl = itemEl ?? findElementForItem(item);
+        if (itemEl) {
+          itemEl.focus();
+        } else {
+          logger$1.warn("[SelectList] still cannot see the option", item.name);
+        }
+      }, 20);
+    },
+    [findElementForItem, scrollItemIntoView]
+  );
+  useSignalEffect(() => {
+    const currFocused = focused.value;
+    if (focusedIsItem(currFocused)) {
+      acquireFocusForItem(currFocused);
+    }
+  });
+  const listListeners = {
+    [KEYBOARD_KEYS.arrowUp]: moveFocusToPreviousItem,
+    [KEYBOARD_KEYS.arrowDown]: moveFocusToNextItem,
+    [KEYBOARD_KEYS.home]: moveFocusToFirstItem,
+    [KEYBOARD_KEYS.end]: moveFocusToLastItem
+  };
+  const onListKeydown = (event) => {
+    const listener = listListeners[event.key];
+    if (listener) {
+      event.preventDefault();
+      listener();
+    }
+  };
+  const getItems = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropdown-element adyen-kyc-dropdown-element--no-options", children: t(($) => $["loading"]) });
+    }
+    if (!filteredItems.length) {
+      if (startIndex !== 0 || endIndex !== maxVisibleItems) {
+        setStartIndex(0);
+        setEndIndex(maxVisibleItems);
+      }
+      return /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropdown-element adyen-kyc-dropdown-element--no-options", children: t(($) => $["noOptionsFound"]) });
+    }
+    if (visibleItems.length) {
+      return visibleItems.map((item) => /* @__PURE__ */ jsx(
+        SelectListItem,
+        {
+          item,
+          id: item.id,
+          onKeyDown: (event) => onKeyDown(event, item),
+          onFocus: (event) => {
+            focusItem(item);
+            event.stopPropagation();
+          },
+          onSelect: () => onSelect(item),
+          selected: !!active.find((activeItem) => activeItem.id === item.id),
+          isMulti,
+          isSearch,
+          children: getSearchItem && getSearchItem(item)
+        },
+        item.id
+      ));
+    }
+    return null;
+  };
+  const height = useMemo(() => {
+    if (loading) return "auto";
+    return totalItems > maxVisibleItems && itemHeight ? `${itemHeight * maxVisibleItems}px` : "auto";
+  }, [itemHeight, totalItems, loading, maxVisibleItems]);
+  const allItemsVisible = totalItems <= maxVisibleItems;
+  const [showAbove, setShowAbove] = useState(false);
+  useEffect(() => {
+    const list = listRef.current;
+    const input = inputRef.current;
+    const resizeObserver = new ResizeObserver(() => {
+      const dropdownHeight = list.offsetHeight;
+      const windowHeight = window.innerHeight;
+      const position = input.getBoundingClientRect().bottom;
+      const isSpaceBelow = windowHeight - position > dropdownHeight;
+      const isSpaceAbove = position > dropdownHeight;
+      setShowAbove(!isSpaceBelow && isSpaceAbove);
+    });
+    resizeObserver.observe(list);
+    return () => resizeObserver.disconnect();
+  }, [inputRef, listRef]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx({
+        "adyen-kyc-dropdown-list": true,
+        "adyen-kyc-dropdown-list--minimal": minimal,
+        "adyen-kyc-dropdown-list--active": showList,
+        "adyen-kyc-dropdown-list--above": showAbove
+      }),
+      id: selectListId,
+      role: "listbox",
+      onScroll: recalculateScrollIndexes,
+      style: {
+        overflowY: allItemsVisible ? "hidden" : "auto",
+        position: "absolute",
+        height
+      },
+      onKeyDown: onListKeydown,
+      onFocus: focusDefaultItem,
+      tabIndex: -1,
+      ref: listRef,
+      children: /* @__PURE__ */ jsxs(
+        "ul",
+        {
+          className: "adyen-kyc-dropdown-list__transformer",
+          style: {
+            transform: `translateY(${startIndex * itemHeight}px)`
+          },
+          children: [
+            getItems(),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  // fake the height of the remaining items in the list so scroll position is correct
+                  height: `${(totalItems - endIndex) * itemHeight}px`
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const Select = ({
+  id,
+  items,
+  filterable = true,
+  readonly = false,
+  onChange,
+  onSelect,
+  selected,
+  name,
+  isInvalid = false,
+  placeholder = "",
+  isMulti,
+  enableTracking = false,
+  maxVisibleItems,
+  getSearchItem,
+  onBlur = noop,
+  text: filterTextProp,
+  setText: setFilterTextProp,
+  showList: showListProp,
+  setShowList: setShowListProp,
+  behaviour = "textIsFilter",
+  loading = false,
+  minimal = false,
+  "aria-describedby": ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  excludedValues
+}) => {
+  const userEvents = useAnalyticsContext();
+  const selectContainerRef = useRef(null);
+  const inputRef = useRef(null);
+  const selectListId = useId("select");
+  const [textFilter, setTextFilter] = useMirrorProp(filterTextProp, setFilterTextProp, "");
+  const [isShowList, setIsShowList] = useMirrorProp(showListProp, setShowListProp, false);
+  const [isFiltering, setIsFiltering] = useState(false);
+  const active = useMemo(() => {
+    if (selected === void 0) return [];
+    return (Array.isArray(selected) ? selected : [selected]).map((s) => {
+      if (typeof s === "object") return s;
+      return items.find((i) => i.id === s);
+    }).filter(Boolean);
+  }, [items, selected]);
+  const filtered = useMemo(() => {
+    const availableItems = items.filter((item) => !excludedValues?.includes(item));
+    return availableItems.filter((item) => {
+      if (filterable === "prefiltered" || !isFiltering) return true;
+      return item.name.toLowerCase().includes(textFilter.toLowerCase());
+    });
+  }, [filterable, isFiltering, items, textFilter, excludedValues]);
+  const activeSignal = useWatchingSignal(active);
+  const filteredSignal = useWatchingSignal(filtered);
+  const focusProps = useSelectFocus({
+    activeItems: activeSignal,
+    filteredItems: filteredSignal
+  });
+  const {
+    focusInput,
+    focusItem,
+    focusDefaultItem,
+    focusNothing,
+    moveFocusToNextItem,
+    moveFocusToPreviousItem
+  } = focusProps;
+  const closeList = useCallback(
+    (shiftFocusTo) => {
+      if (behaviour === "textIsFilter") setTextFilter("");
+      setIsShowList(false);
+      switch (shiftFocusTo) {
+        case "input":
+          focusInput();
+          break;
+        case "nothing":
+          focusNothing();
+          break;
+      }
+    },
+    [behaviour, focusInput, focusNothing, setIsShowList, setTextFilter]
+  );
+  const showList = useCallback(() => {
+    if (!isShowList) setIsShowList(true);
+  }, [isShowList, setIsShowList]);
+  const handleSelect = useCallback(
+    (selectedItem) => {
+      setIsFiltering(false);
+      if (readonly) return;
+      if (isMulti) {
+        const isAlreadySelected = active.find((item) => item.id === selectedItem.id);
+        const newActiveItems = isAlreadySelected ? active.filter((i) => i.id !== selectedItem.id) : [...active, selectedItem];
+        onSelect?.(newActiveItems);
+        onChange?.({ target: { value: newActiveItems.map((i) => i.id), name: name ?? "" } });
+        focusItem(selectedItem);
+      } else {
+        const handleOnSelect = onSelect;
+        const handleOnChange = onChange;
+        handleOnSelect?.(selectedItem);
+        handleOnChange?.({ target: { value: selectedItem.id, name: name ?? "" } });
+        closeList("input");
+      }
+      if (enableTracking) {
+        userEvents.addFieldEvent("Interacted with form field", {
+          actionType: "select",
+          field: name,
+          returnValue: selectedItem.id
+        });
+      }
+    },
+    [
+      readonly,
+      isMulti,
+      enableTracking,
+      active,
+      onSelect,
+      onChange,
+      name,
+      focusItem,
+      closeList,
+      userEvents
+    ]
+  );
+  const handleBlur = (e) => {
+    onBlur(e);
+  };
+  const handleInputKeyDown = async (e) => {
+    if (e.key === KEYBOARD_KEYS.enter && isShowList) {
+      if (filtered.length === 1) {
+        handleSelect(filtered[0]);
+      } else {
+        e.preventDefault();
+      }
+    } else if (e.key === KEYBOARD_KEYS.escape) {
+      closeList("nothing");
+    } else if (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space && (!filterable || !isShowList)) {
+      e.preventDefault();
+      e.stopPropagation();
+      showList();
+      focusDefaultItem();
+    } else if (e.key === KEYBOARD_KEYS.arrowUp || e.key === KEYBOARD_KEYS.arrowDown) {
+      e.preventDefault();
+      e.stopPropagation();
+      showList();
+      focusDefaultItem();
+      switch (e.key) {
+        case KEYBOARD_KEYS.arrowUp:
+          moveFocusToPreviousItem();
+          break;
+        case KEYBOARD_KEYS.arrowDown:
+          moveFocusToNextItem();
+          break;
+      }
+    } else if (e.key === KEYBOARD_KEYS.tab) {
+      closeList("nothing");
+    }
+  };
+  const handleClickOutside = (e) => {
+    if (!selectContainerRef.current?.contains(e.target)) {
+      closeList("nothing");
+    }
+  };
+  const handleListItemKeyDown = (e, item) => {
+    switch (e.key) {
+      case KEYBOARD_KEYS.escape:
+        e.preventDefault();
+        closeList("input");
+        break;
+      case KEYBOARD_KEYS.space:
+      case KEYBOARD_KEYS.enter:
+        handleSelect(item);
+        break;
+      case KEYBOARD_KEYS.tab:
+        closeList("nothing");
+        break;
+      case KEYBOARD_KEYS.arrowUp:
+      case KEYBOARD_KEYS.arrowDown:
+      case KEYBOARD_KEYS.home:
+      case KEYBOARD_KEYS.end:
+        break;
+      default: {
+        e.preventDefault();
+        e.stopPropagation();
+        handleTextFilter(simulateTextChangeFromKeyboardEvent(e, textFilter));
+        focusInput();
+      }
+    }
+  };
+  const handleTextFilter = useCallback(
+    (value) => {
+      showList();
+      setIsFiltering(true);
+      setTextFilter(value);
+      if (enableTracking) {
+        debouncedInputEvent({ actionType: "input", field: name });
+      }
+    },
+    [enableTracking, name, setTextFilter, showList]
+  );
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx({ "adyen-kyc-dropdown": true, "adyen-kyc-dropdown--minimal": minimal }),
+      ref: selectContainerRef,
+      onFocusOut: handleBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectButton,
+          {
+            id,
+            name,
+            active,
+            filterable,
+            isFiltering,
+            isInvalid,
+            onButtonKeyDown: handleInputKeyDown,
+            onInput: handleTextFilter,
+            placeholder,
+            readonly,
+            selectListId,
+            showList: isShowList,
+            focusProps,
+            "aria-describedby": ariaDescribedBy || "",
+            "aria-label": ariaLabel || "",
+            "aria-labelledby": ariaLabelledBy || "",
+            isMulti: Boolean(isMulti),
+            loading,
+            behaviour,
+            text: textFilter,
+            inputRef,
+            enableTracking,
+            minimal,
+            onClick: () => {
+              if (isShowList) {
+                closeList("input");
+              } else {
+                showList();
+                focusInput();
+              }
+            },
+            onFocus: () => focusInput()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectList,
+          {
+            active,
+            filteredItems: filtered,
+            onKeyDown: handleListItemKeyDown,
+            onSelect: handleSelect,
+            selectListId,
+            showList: isShowList,
+            textFilter,
+            isMulti: Boolean(isMulti),
+            isSearch: filterable === "prefiltered",
+            getSearchItem,
+            loading,
+            maxVisibleItems,
+            focusProps,
+            inputRef,
+            minimal
+          }
+        )
+      ]
+    }
+  );
+};
+class ValidationResult {
+  validationResults;
+  constructor(results) {
+    this.validationResults = results;
+  }
+  /** Checks if all validation rules have passed */
+  get isValid() {
+    return this.validationResults.reduce((acc, result) => acc && result.isValid, true);
+  }
+  /** Checks if any validation rule returned an error */
+  hasError() {
+    return Boolean(this.getError());
+  }
+  /** Returns the first validation result that returned an error */
+  getError() {
+    return this.validationResults.find((result) => result.hasError);
+  }
+  /** Used to add async validation results to the static validation result*/
+  addError(result) {
+    this.validationResults.push(result);
+    return this.validationResults;
+  }
+}
+const logger = createLogger();
+const useAsyncValidator = (asyncRules) => {
+  const [asyncValidationResults, setAsyncValidationResults] = useState({});
+  const clearAsyncValidationResults = useCallback(
+    (field) => setAsyncValidationResults((existingResults) => ({
+      ...existingResults,
+      [field]: void 0
+    })),
+    []
+  );
+  const triggerAsyncValidation = useCallback(
+    (field, formState, mode) => {
+      const rule = asyncRules?.[field];
+      if (!rule || !rule.modes.includes(mode)) {
+        clearAsyncValidationResults(field);
+        return;
+      }
+      const value = formState.data[field];
+      return rule.asyncValidate(formState.data[field], { state: formState }).then((isValid) => {
+        setAsyncValidationResults((existingResults) => ({
+          ...existingResults,
+          [field]: new ValidationResult([
+            {
+              isValid,
+              errorMessage: typeof rule.errorMessage === "function" ? rule.errorMessage(value, { state: formState }) : rule.errorMessage,
+              hasError: !isValid
+            }
+          ])
+        }));
+      }).catch(logger.error);
+    },
+    [asyncRules, clearAsyncValidationResults]
+  );
+  return {
+    asyncValidationResults,
+    triggerAsyncValidation,
+    clearAsyncValidationResults
+  };
+};
+const useStaticValidator = (rules) => {
+  const getRulesForField = useCallback(
+    (field) => {
+      const fallbackRule = {
+        validate: () => true,
+        modes: ["blur", "input"]
+      };
+      const fieldRules = rules?.[field] ?? [fallbackRule];
+      return Array.isArray(fieldRules) ? fieldRules : [fieldRules];
+    },
+    [rules]
+  );
+  const triggerStaticValidation = useCallback(
+    ({ key, value, mode = "blur" }, context) => {
+      const fieldRules = getRulesForField(key);
+      const isFieldOptional = !!context?.state.optionalFields?.includes(key);
+      const isFieldObscured = !!context?.state.obscuredFields?.includes(key);
+      const validationRulesResult = fieldRules.map((rule) => {
+        const shouldValidate = rule.modes.includes(mode) && !isFieldObscured;
+        const isValid = isFieldOptional && isEmpty(value) ? true : rule.validate(value, context);
+        return {
+          isValid,
+          errorMessage: typeof rule.errorMessage === "function" ? rule.errorMessage(value, context) : rule.errorMessage,
+          hasError: shouldValidate && !isValid
+        };
+      });
+      return new ValidationResult(validationRulesResult);
+    },
+    [getRulesForField]
+  );
+  return {
+    triggerStaticValidation
+  };
+};
+const omitKeys = (obj, omit) => Object.keys(obj).filter((k) => !omit.includes(k)).reduce((a, c) => {
+  a[c] = obj[c];
+  return a;
+}, {});
+const addKeys = (obj, add, initialValue, defaultData, pendingData) => add.reduce(
+  (a, c) => ({
+    ...a,
+    [c]: a[c] ?? pendingData?.[c] ?? defaultData?.[c] ?? initialValue
+  }),
+  obj
+);
+function getDataByFields(formData, fieldKeys) {
+  return entriesOf(formData).reduce((acc, [key, val]) => {
+    if (fieldKeys.includes(key)) {
+      return { ...acc, [key]: val };
+    }
+    return acc;
+  }, {});
+}
+const processField = ({
+  key,
+  value = null,
+  mode,
+  defaultData,
+  fieldContext,
+  formatters,
+  staticValidate,
+  asyncValidate
+}) => {
+  const formatterFn = formatters?.[key]?.formatter ? formatters[key]?.formatter : formatters?.[key];
+  const formattedValue = formatterFn && typeof formatterFn === "function" ? formatterFn(value, fieldContext) : value;
+  const shouldValidateField = !(defaultData?.[key] === value && !!defaultData?.[key]);
+  if (shouldValidateField && value) {
+    asyncValidate(key, fieldContext.state, mode);
+  }
+  const validationResult = shouldValidateField ? staticValidate({ key, value: formattedValue, mode }, fieldContext) : new ValidationResult([
+    {
+      isValid: true,
+      hasError: false
+    }
+  ]);
+  return [formattedValue, validationResult];
+};
+function init({
+  schema,
+  defaultData,
+  fieldProblems,
+  obscuredFields,
+  optionalFields,
+  trustedFields,
+  formatters,
+  staticValidate,
+  asyncValidate
+}) {
+  const getProcessedState = (fieldKey) => {
+    const [formattedValue, validationResult] = processField({
+      key: fieldKey,
+      value: defaultData?.[fieldKey],
+      mode: "blur",
+      formatters,
+      defaultData,
+      fieldContext: {
+        state: {
+          data: defaultData,
+          obscuredFields,
+          optionalFields,
+          trustedFields
+        }
+      },
+      staticValidate,
+      asyncValidate
+    });
+    if (typeof defaultData?.[fieldKey] === "undefined") {
+      return {
+        valid: validationResult.isValid && !fieldProblems?.[fieldKey] || false,
+        errors: null,
+        data: null,
+        fieldProblems: fieldProblems?.[fieldKey] ?? false
+      };
+    }
+    return {
+      valid: validationResult.isValid && !fieldProblems?.[fieldKey] || false,
+      errors: validationResult.getError() ?? null,
+      data: formattedValue,
+      fieldProblems: fieldProblems?.[fieldKey] ?? false
+    };
+  };
+  const formFields = optionalFields ? [...schema, ...optionalFields] : schema;
+  const formData = formFields.reduce(
+    (acc, field) => {
+      const {
+        valid,
+        errors,
+        data,
+        fieldProblems: processedFieldProblems
+      } = getProcessedState(field);
+      return {
+        ...acc,
+        data: { ...acc.data, [field]: data },
+        valid: { ...acc.valid, [field]: valid },
+        errors: { ...acc.errors, [field]: errors },
+        fieldProblems: { ...acc.fieldProblems, [field]: processedFieldProblems }
+      };
+    },
+    {
+      schema,
+      data: {},
+      valid: {},
+      errors: {},
+      fieldProblems: {},
+      obscuredFields,
+      optionalFields,
+      trustedFields
+    }
+  );
+  return formData;
+}
+function reducer({
+  staticValidate,
+  asyncValidate,
+  obscuredFields,
+  optionalFields,
+  trustedFields,
+  formatters
+}) {
+  return (state, {
+    type,
+    key,
+    mode,
+    value,
+    schema,
+    selectedSchema,
+    formValue,
+    fieldProblems,
+    defaultData
+  }) => {
+    const validationSchema = selectedSchema || state.schema;
+    switch (type) {
+      case "setData": {
+        if (!key) return state;
+        return { ...state, data: { ...state.data, [key]: value } };
+      }
+      case "setValid": {
+        if (!key) return state;
+        return { ...state, valid: { ...state.valid, [key]: value } };
+      }
+      case "setErrors": {
+        if (!key) return state;
+        return { ...state, errors: { ...state.errors, [key]: value } };
+      }
+      case "setFieldProblems": {
+        return state?.schema?.reduce(
+          (acc, field) => ({
+            ...acc,
+            fieldProblems: {
+              ...state.fieldProblems,
+              [field]: fieldProblems?.[field] ?? false
+            },
+            valid: { ...state.valid, [field]: state.valid?.[field] && !fieldProblems?.[field] }
+          }),
+          state
+        );
+      }
+      case "setSchema": {
+        if (!schema) return state;
+        const defaultState = init({
+          schema,
+          // requiredFields
+          defaultData,
+          fieldProblems,
+          obscuredFields,
+          optionalFields,
+          trustedFields,
+          staticValidate,
+          asyncValidate
+        });
+        const removedFields = state.optionalFields?.length ? [
+          ...state.schema.filter((field) => !schema.includes(field)),
+          ...state.optionalFields.filter((field) => !optionalFields?.includes(field))
+        ] : state.schema.filter((field) => !schema.includes(field));
+        const newFields = optionalFields?.length ? [
+          ...schema.filter((field) => !state.schema?.includes(field)),
+          ...optionalFields.filter((field) => !state.optionalFields?.includes(field))
+        ] : schema.filter((field) => !state.schema?.includes(field));
+        const local = {
+          data: omitKeys(state.data, newFields),
+          errors: omitKeys(state.errors, newFields),
+          valid: omitKeys(state.valid, newFields),
+          fieldProblems: omitKeys(state.fieldProblems, newFields)
+        };
+        const updatedData = addKeys(
+          omitKeys(state.data, removedFields),
+          newFields,
+          null,
+          defaultState.data,
+          state.local?.data
+        );
+        const updatedValid = addKeys(
+          omitKeys(state.valid, removedFields),
+          newFields,
+          false,
+          defaultState.valid,
+          state.local?.valid
+        );
+        const updatedErrors = addKeys(
+          omitKeys(state.errors, removedFields),
+          newFields,
+          null,
+          defaultState.errors,
+          state.local?.errors
+        );
+        const updatedFieldProblems = addKeys(
+          omitKeys(state.fieldProblems, removedFields),
+          newFields,
+          false,
+          defaultState.fieldProblems,
+          state.local?.fieldProblems
+        );
+        return {
+          ...state,
+          schema,
+          data: updatedData,
+          valid: updatedValid,
+          errors: updatedErrors,
+          fieldProblems: updatedFieldProblems,
+          obscuredFields,
+          optionalFields,
+          trustedFields,
+          local
+        };
+      }
+      case "updateField": {
+        if (!key || !mode) return state;
+        const [formattedValue, validation] = processField({
+          key,
+          value,
+          mode,
+          defaultData,
+          formatters,
+          fieldContext: { state },
+          staticValidate,
+          asyncValidate
+        });
+        const oldValue = state.data[key];
+        const clearFieldProblems = oldValue !== formattedValue;
+        return {
+          ...state,
+          data: { ...state.data, [key]: formattedValue },
+          errors: {
+            ...state.errors,
+            [key]: validation.getError() ?? null
+          },
+          valid: {
+            ...state.valid,
+            [key]: validation.isValid && !state.fieldProblems?.[key] || false
+          },
+          fieldProblems: {
+            ...state.fieldProblems,
+            [key]: clearFieldProblems ? false : state.fieldProblems?.[key] ?? false
+          }
+        };
+      }
+      case "mergeForm": {
+        const mergedState = {
+          ...state,
+          data: { ...state.data, ...formValue?.data },
+          errors: { ...state.errors, ...formValue?.errors },
+          valid: { ...state.valid, ...formValue?.valid },
+          fieldProblems: { ...state.fieldProblems, ...formValue?.fieldProblems }
+        };
+        if (mergedState.valid) {
+          mergedState.isValid = Object.values(mergedState.valid).every((isValid) => isValid);
+        }
+        return mergedState;
+      }
+      case "validateForm": {
+        const formValidation = validationSchema?.reduce(
+          (acc, cur) => {
+            const [formattedValue, validation] = processField({
+              key: cur,
+              value: state.data[cur],
+              mode: "blur",
+              defaultData,
+              formatters,
+              fieldContext: { state },
+              staticValidate,
+              asyncValidate
+            });
+            const oldValue = state.data[cur];
+            const clearFieldProblems = oldValue !== formattedValue;
+            return {
+              valid: {
+                ...acc.valid,
+                [cur]: validation.isValid && !state.fieldProblems?.[cur] || false
+              },
+              errors: {
+                ...acc.errors,
+                [cur]: validation.getError() ?? null
+              },
+              fieldProblems: {
+                ...acc.fieldProblems,
+                [cur]: clearFieldProblems ? false : state.fieldProblems?.[cur] ?? false
+              }
+            };
+          },
+          { valid: state.valid, errors: state.errors, fieldProblems: state.fieldProblems }
+        );
+        return {
+          ...state,
+          valid: formValidation?.valid,
+          errors: formValidation?.errors,
+          fieldProblems: formValidation?.fieldProblems
+        };
+      }
+      default:
+        throw new Error("Undefined useForm action");
+    }
+  };
+}
+const mergeStaticAndAsyncErrorsState = (staticValidationErrors, asyncValidationErrors, schema, setValid, optionalFields) => {
+  const fields = optionalFields ? [...schema, ...optionalFields] : schema;
+  if (!fields.length) return staticValidationErrors;
+  const errors = fields.reduce(
+    (acc, field) => {
+      if (asyncValidationErrors[field]?.getError()) setValid(field, false);
+      return {
+        ...acc,
+        [field]: staticValidationErrors[field] ?? asyncValidationErrors[field]?.getError() ?? null
+      };
+    },
+    {}
+  );
+  return errors;
+};
+function useForm({
+  schema,
+  defaultData,
+  rules,
+  asyncRules,
+  fieldProblems,
+  obscuredFields,
+  optionalFields,
+  trustedFields,
+  formatters,
+  shouldValidate = false
+}) {
+  const { triggerStaticValidation } = useStaticValidator(rules);
+  const { triggerAsyncValidation, asyncValidationResults } = useAsyncValidator(asyncRules);
+  const getRequiredFields = useMemo(
+    () => typeof schema === "function" ? schema : () => schema,
+    [schema]
+  );
+  const getSchema = useMemo(
+    () => defaultData ? getRequiredFields(defaultData) : [],
+    [defaultData, getRequiredFields]
+  );
+  const getReducer = useCallback(
+    () => reducer({
+      staticValidate: triggerStaticValidation,
+      asyncValidate: triggerAsyncValidation,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters
+    }),
+    [
+      triggerStaticValidation,
+      triggerAsyncValidation,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters
+    ]
+  );
+  const initialData = useMemo(
+    () => ({
+      schema: getSchema,
+      defaultData,
+      fieldProblems,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters,
+      staticValidate: triggerStaticValidation,
+      asyncValidate: triggerAsyncValidation
+    }),
+    [
+      getSchema,
+      defaultData,
+      fieldProblems,
+      obscuredFields,
+      optionalFields,
+      trustedFields,
+      formatters,
+      triggerStaticValidation,
+      triggerAsyncValidation
+    ]
+  );
+  const [state, dispatch] = useReducer(getReducer(), initialData, init);
+  const isValid = useMemo(
+    () => state.schema?.every((key) => state.valid[key]),
+    [state.schema, state.valid]
+  );
+  const getTargetValue = useCallback(
+    (key, e) => {
+      if (!e?.target) return e;
+      if (e.target.type === "checkbox") {
+        return !state.data[key];
+      }
+      return e.target.value;
+    },
+    [state.data]
+  );
+  const setErrors = useCallback(
+    (key, value) => dispatch({ type: "setErrors", key, value }),
+    []
+  );
+  const setValid = useCallback(
+    (key, value) => dispatch({ type: "setValid", key, value }),
+    []
+  );
+  const setData = useCallback(
+    (key, value) => dispatch({ type: "setData", key, value }),
+    []
+  );
+  const setSchema = useCallback(
+    (newSchema) => dispatch({ type: "setSchema", schema: newSchema, defaultData }),
+    [defaultData]
+  );
+  const setFieldProblems = useCallback(
+    (newFieldProblems) => dispatch({ type: "setFieldProblems", fieldProblems: newFieldProblems }),
+    []
+  );
+  const mergeForm = useCallback(
+    (formValue) => dispatch({ type: "mergeForm", formValue }),
+    []
+  );
+  const handleChangeFor = useCallback(
+    (key, mode = "blur") => (e) => {
+      const value = getTargetValue(key, e);
+      dispatch({
+        type: "updateField",
+        key,
+        value,
+        mode,
+        defaultData
+      });
+    },
+    [defaultData, getTargetValue]
+  );
+  const triggerValidation = useCallback(
+    (selectedSchema) => {
+      dispatch({
+        type: "validateForm",
+        selectedSchema,
+        defaultData
+      });
+    },
+    [defaultData]
+  );
+  const resetToDefaultData = useCallback(() => {
+    getSchema.forEach((field) => {
+      if (!defaultData || typeof defaultData[field] !== "undefined") {
+        return handleChangeFor(field)(defaultData?.[field]);
+      }
+      setValid(field, false);
+      setErrors(field, null);
+      setData(field, defaultData[field]);
+    });
+  }, [defaultData, getSchema, handleChangeFor, setData, setErrors, setValid]);
+  useEffect(() => {
+    const newSchema = getRequiredFields(state.data);
+    if (!doArraysMatch(state.schema, newSchema)) {
+      setSchema(newSchema);
+    }
+  }, [state.schema, state.data, setSchema, getRequiredFields]);
+  useEffect(() => {
+    if (shouldValidate) {
+      triggerValidation();
+    }
+  }, [shouldValidate, state.schema]);
+  useEffect(() => {
+    if (fieldProblems) {
+      setFieldProblems(fieldProblems);
+    }
+  }, [JSON.stringify(fieldProblems), setFieldProblems]);
+  const formErrors = useMemo(
+    () => mergeStaticAndAsyncErrorsState(
+      state.errors,
+      asyncValidationResults,
+      state.schema,
+      setValid,
+      state.optionalFields
+    ),
+    [asyncValidationResults, state.errors, state.optionalFields, state.schema]
+  );
+  return {
+    mergeForm,
+    setData,
+    setValid,
+    setErrors,
+    setFieldProblems,
+    handleChangeFor,
+    triggerValidation,
+    resetToDefaultData,
+    isValid,
+    schema: state.schema,
+    valid: state.valid,
+    errors: formErrors,
+    data: state.data,
+    fieldProblems: state.fieldProblems
+  };
+}
+export {
+  Checkbox as C,
+  Field as F,
+  LoaderWrapper as L,
+  SelectListItem as S,
+  ValidationResult as V,
+  useForm as a,
+  useId as b,
+  Select as c,
+  getDataByFields as g,
+  uuidv4 as u
+};