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

package/dist/useForm-C1DW3mPC.js

@@ -1,1694 +0,0 @@
-;
-{
-  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] = "f4fb991a-94cf-4dac-adac-57ac0590acd3", e._sentryDebugIdIdentifier = "sentry-dbid-f4fb991a-94cf-4dac-adac-57ac0590acd3");
-  } 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-BlaJzXSZ.js";
-import { computed, signal, useSignal, useSignalEffect } from "@preact/signals";
-import { K as KEYBOARD_KEYS } from "./keys-BpNgnAsD.js";
-import { d as debouncedInputEvent } from "./analytics-3-a-Od7Z.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
-};