@adyen/kyc-components 4.23.0 → 4.24.0-beta.0

package/dist/Select-ByVcS_J2.js

@@ -1,1093 +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] = "689c835c-65fb-4a81-93c5-d7e7491f5b91", e._sentryDebugIdIdentifier = "sentry-dbid-689c835c-65fb-4a81-93c5-d7e7491f5b91");
-} catch (e) {}
-import { r as useTranslation } from "./translation-BOm4lmPx.js";
-import { I as ToastContextProvider } from "./resolveEnvironment-BYEL10Nc.js";
-import { t as createLogger } from "./logger-Z8AeTE4x.js";
-import { t as Icon } from "./Icon-C3S5_kkS.js";
-import { t as Typography } from "./Typography-CAc_f5Iq.js";
-import { t as Loader } from "./Loader-BEpMlKm2.js";
-import { i as noop, o as entriesOf } from "./genUtils-Ce61IJs8.js";
-import { i as useAnalyticsContext, r as KEYBOARD_KEYS, t as Modal } from "./Modal-BsivDPTd.js";
-import { t as useId } from "./useId-oOIS1nsj.js";
-import { n as debouncedInputEvent, t as Checkbox } from "./Checkbox-B730k3Yy.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import cx from "classnames";
-import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
-import { computed, signal, useSignal, useSignalEffect } from "@preact/signals";
-var LoaderWrapper_module_default = {
-	"loader-wrapper-loader": "_loader-wrapper-loader_17ekf_1",
-	loaderWrapperLoader: "_loader-wrapper-loader_17ekf_1",
-	"loader-wrapper-loader-active": "_loader-wrapper-loader-active_17ekf_11",
-	loaderWrapperLoaderActive: "_loader-wrapper-loader-active_17ekf_11"
-};
-//#endregion
-//#region src/components/ui/atoms/LoaderWrapper/LoaderWrapper.tsx
-var LoaderWrapper = ({ children, status, formOpacityWhenLoading = 0, loaderSize = "medium", showSpinner = true, className }) => {
-	const opacitySyle = status === "loading" ? { opacity: formOpacityWhenLoading } : { opacity: 1 };
-	const showLoader = status === "loading" && showSpinner;
-	const loaderWrapperClass = cx(LoaderWrapper_module_default.loaderWrapperLoader, { [LoaderWrapper_module_default.loaderWrapperLoaderActive]: showLoader });
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx(LoaderWrapper_module_default.loaderWrapper, className),
-		style: { position: "relative" },
-		children: [showLoader && /* @__PURE__ */ jsx("div", {
-			className: loaderWrapperClass,
-			children: /* @__PURE__ */ jsx(Loader, { size: loaderSize })
-		}), /* @__PURE__ */ jsx("div", {
-			className: LoaderWrapper_module_default.loaderWrapperForm,
-			style: opacitySyle,
-			children
-		})]
-	});
-};
-//#endregion
-//#region src/language/utils.ts
-/**
-* Returns a LanguageCode from locale
-* @param locale - The locale the user wants to use
-*
-* @example for getLanguageCode('en-US')
-* // returns 'en'
-*/
-var getLanguageCode = (locale) => {
-	const [languageCode] = locale.split("-");
-	return languageCode;
-};
-var isTranslationObject = (value) => value !== null && typeof value === "object" && "key" in value && "values" in value;
-/**
-* A helper function to translate a `Translatable` type, which can be either a simple string key
-* or an object with a key and values for interpolation. It uses the provided `i18next` `t` function.
-*
-* @param t - The `i18next` translation function.
-* @param translatable - The string or object to translate.
-* @returns The translated string.
-*/
-var translateTranslatable = (t, translatable) => {
-	if (!translatable) return void 0;
-	if (isTranslationObject(translatable)) return t(($) => $[translatable.key], translatable.values);
-	return t(($) => $[translatable]);
-};
-//#endregion
-//#region src/hooks/formUtils.ts
-/**
-* Creates a new object with specified keys omitted.
-*
-* @param obj - The source object
-* @param omit - Array of keys to omit from the result
-* @returns A new object without the omitted keys
-*/
-var omitKeys = (obj, omit) => {
-	const filtered = { ...obj };
-	for (const key of omit) delete filtered[key];
-	return filtered;
-};
-/**
-* Adds keys to an object with values resolved from multiple sources.
-* Priority: existing value > pendingData > defaultData > initialValue
-*
-* @param obj - The base object to extend
-* @param add - Array of keys to add
-* @param initialValue - Fallback value if no other source has the key
-* @param defaultData - Default values for keys
-* @param pendingData - Pending values (highest priority after existing)
-* @returns A new object with the added keys
-*/
-var addKeys = (obj, add, initialValue, defaultData, pendingData) => {
-	const extended = { ...obj };
-	for (const key of add) if (!(key in extended) || extended[key] === void 0) extended[key] = pendingData?.[key] ?? defaultData?.[key] ?? initialValue;
-	return extended;
-};
-/**
-* @description Extracts the field schema data from the form schema using the field component
-*
-* @param formData The data of the form using the field component
-* @param fieldKeys The keys in the field schema
-* @returns An object containing only the field schemas form data
-*/
-function getDataByFields(formData, fieldKeys) {
-	return entriesOf(formData).reduce((acc, [key, val]) => {
-		if (fieldKeys.includes(key)) return {
-			...acc,
-			[key]: val
-		};
-		return acc;
-	}, {});
-}
-//#endregion
-//#region src/utils/validation/validationResult.ts
-var ValidationResult = class {
-	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;
-	}
-};
-//#endregion
-//#region src/components/ui/atoms/Modal/MaybeModal.tsx
-/**
-* Renders a modal or an inline div
-* @returns {Modal|HTMLDivElement}
-*/
-var MaybeModal = ({ ariaLabel, children, inline = false, inset, onClose, showCloseButton, size }) => {
-	return inline ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Modal, {
-		onClose,
-		ariaLabel,
-		size,
-		inset,
-		showCloseButton,
-		children: /* @__PURE__ */ jsx(ToastContextProvider, { children })
-	});
-};
-var ProgressBar_module_default = {
-	"progress-bar": "_progress-bar_1d5l3_1",
-	progressBar: "_progress-bar_1d5l3_1",
-	"progress-bar-rounded": "_progress-bar-rounded_1d5l3_8",
-	progressBarRounded: "_progress-bar-rounded_1d5l3_8",
-	"progress-bar-indicator": "_progress-bar-indicator_1d5l3_12",
-	progressBarIndicator: "_progress-bar-indicator_1d5l3_12"
-};
-//#endregion
-//#region src/components/ui/atoms/ProgressBar/ProgressBar.tsx
-var ProgressBar = ({ progress, ariaLabel, rounded = false }) => {
-	const clamp = (value) => {
-		return Math.min(Math.max(value, 0), 100);
-	};
-	const clampedProgress = clamp(progress);
-	const cssWidth = `${clampedProgress}%`;
-	return /* @__PURE__ */ jsx("div", {
-		className: cx(ProgressBar_module_default.progressBar, { [ProgressBar_module_default.progressBarRounded]: rounded }),
-		role: "progressbar",
-		"aria-label": ariaLabel,
-		"aria-valuenow": clampedProgress,
-		"aria-valuemin": 0,
-		"aria-valuemax": 100,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: ProgressBar_module_default.progressBarIndicator,
-			style: { width: cssWidth },
-			children: [progress, "%"]
-		})
-	});
-};
-//#endregion
-//#region src/components/ui/molecules/ErrorPanel/constants.ts
-var ARIA_ERROR_SUFFIX = "-ariaError";
-//#endregion
-//#region src/components/ui/atoms/Field/Field.tsx
-/**
-* Internal component to render either a wrapping `<div>` for a single input field,
-* or a `<fieldset>` for a group of related inputs (like RadioGroupCard or RadioGroup).
-*/
-var 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
-});
-/**
-* A wrapper component for form inputs that provides consistent layout and handling for labels,
-* descriptions (ex. helper text, error text), validation, styling, etc.
-* For use with various input components like `InputText`, `InputDate`, `Select`, etc.
-* 
-* FieldChildProps are props passed to children which include a unique identifier (id) and other validation/a11y related props
-*
-* @example
-* ```tsx
-* <Field name="lastName" label="Last name" isValid={valid?.lastName} helper="This is helper text" >
-{(childProps) => (
-<InputText
-{...childProps}
-name="lastName"
-value={data?.lastName}
-/>
-)}
-</Field>
-* ```
-*/
-var Field = ({ className, 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;
-		userEvents.addFieldEvent("Encountered error", {
-			actionType: "input",
-			field: name,
-			returnType: "validation",
-			returnValue: errorMessage.key
-		});
-	}, [
-		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, {
-			"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
-					}),
-					!!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" })
-					})
-				]
-			}),
-			!!errorMessage?.message && /* @__PURE__ */ jsxs("div", {
-				"aria-live": "polite",
-				"aria-atomic": true,
-				className: "adyen-kyc-error-text",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "u-screen-reader-only",
-					children: `${label}:`
-				}), /* @__PURE__ */ jsxs("span", {
-					id: elementIds.error,
-					children: [errorMessage.message, 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
-			})
-		]
-	});
-};
-//#endregion
-//#region src/components/ui/atoms/Select/useSelectFocus.ts
-var 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();
-		const itemsValue = items.value;
-		if (!toFind) {
-			console.warn("[Select] No existing focused item, and none of the filtered items are enabled");
-			return 0;
-		}
-		return itemsValue.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
-	};
-};
-var useSelectFocus = (options) => {
-	const [selectFocus] = useState(createSelectFocus(options));
-	return selectFocus;
-};
-var focusedIsItem = (focused) => Boolean(focused) && typeof focused === "object";
-//#endregion
-//#region src/utils/signals/useWatchingSignal.ts
-/**
-* Returns a signal "watching" its given value. Whenever the value changes, the signal will update.
-*
-* @param value
-*/
-var useWatchingSignal = (value) => {
-	const signal = useSignal(value);
-	if (signal.peek() !== value) signal.value = value;
-	return signal;
-};
-//#endregion
-//#region src/utils/simulateTextChangeFromKeyboardEvent.ts
-/**
-* This is useful for when you want to figure out what effect a keyboard event would have on
-* some arbitrary existing text, as if it were happening on an `<input>`'s value.
-*
-* This is not a perfect simulation, real input handling is much more complex.
-*
-* @param keyDownEvent the actual event which occurred, probably on some other element
-* @param value the existing value of the input
-*/
-var 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;
-};
-//#endregion
-//#region src/utils/useMirrorProp.ts
-/**
-* This is a 'hacky' way to handle components which may have props either controlled or uncontrolled.
-*
-* Avoid using it if at all possible - generally it's better to write a controlled inner component
-* and simply make an uncontrolled version which wraps it.
-*
-* * If controlled, we mirror the prop state and propagate changes upwards via {@link propOnChange}.
-* * If uncontrolled, it is effectively a simple {@link useState()}.
-*
-* *Note: if mirroring, both `prop` and `propOnChange` **must** be provided.*
-*
-* @param prop the prop to be mirrored
-* @param propOnChange the handler to propagate changes from below back upwards
-* @param defaultVal the default value, only used if we aren't mirroring
-*/
-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];
-}
-var SelectButton_module_default = {
-	"select-input-wrapper": "_select-input-wrapper_hsi38_1",
-	selectInputWrapper: "_select-input-wrapper_hsi38_1",
-	"select-input__icon": "_select-input__icon_hsi38_25",
-	selectInputIcon: "_select-input__icon_hsi38_25",
-	"select-input": "_select-input_hsi38_1",
-	selectInput: "_select-input_hsi38_1",
-	"select-input--active": "_select-input--active_hsi38_36",
-	selectInputActive: "_select-input--active_hsi38_36",
-	"select-input--readonly": "_select-input--readonly_hsi38_45",
-	selectInputReadonly: "_select-input--readonly_hsi38_45",
-	"select-input--invalid": "_select-input--invalid_hsi38_64",
-	selectInputInvalid: "_select-input--invalid_hsi38_64",
-	"select-input--minimal": "_select-input--minimal_hsi38_68",
-	selectInputMinimal: "_select-input--minimal_hsi38_68",
-	"select-input-search": "_select-input-search_hsi38_76",
-	selectInputSearch: "_select-input-search_hsi38_76",
-	"select-input-search__icon": "_select-input-search__icon_hsi38_82",
-	selectInputSearchIcon: "_select-input-search__icon_hsi38_82",
-	"select-input--filterable": "_select-input--filterable_hsi38_91",
-	selectInputFilterable: "_select-input--filterable_hsi38_91",
-	"select-input-wrapper--filterable": "_select-input-wrapper--filterable_hsi38_100",
-	selectInputWrapperFilterable: "_select-input-wrapper--filterable_hsi38_100",
-	"select-input-wrapper--non-filterable": "_select-input-wrapper--non-filterable_hsi38_104",
-	selectInputWrapperNonFilterable: "_select-input-wrapper--non-filterable_hsi38_104",
-	"select-input--list-open": "_select-input--list-open_hsi38_119",
-	selectInputListOpen: "_select-input--list-open_hsi38_119",
-	"select-input--non-filterable": "_select-input--non-filterable_hsi38_144",
-	selectInputNonFilterable: "_select-input--non-filterable_hsi38_144",
-	"select-input--placeholder": "_select-input--placeholder_hsi38_149",
-	selectInputPlaceholder: "_select-input--placeholder_hsi38_149",
-	"ignore-pointer-events": "_ignore-pointer-events_hsi38_155",
-	ignorePointerEvents: "_ignore-pointer-events_hsi38_155",
-	"handle-pointer-events": "_handle-pointer-events_hsi38_159",
-	handlePointerEvents: "_handle-pointer-events_hsi38_159"
-};
-//#endregion
-//#region src/components/ui/atoms/SelectButton/SelectButton.tsx
-var 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.currentTarget.value);
-	};
-	const truncatedDisplayValue = useMemo(() => {
-		if (active.length === 0) return void 0;
-		const activeText = active.map(({ selectedOptionName, name }) => selectedOptionName ?? name).join(", ");
-		return activeText.length > 50 ? activeText.substring(0, 50) + "..." : activeText;
-	}, [active]);
-	const title = active?.length ? active.map(({ name }) => name).join(",") : placeholder;
-	const isFocused = focused.value === "input";
-	const value = useMemo(() => {
-		if (behaviour === "textIsData" || focused.value !== void 0 && filterable && isFiltering) return text;
-		return truncatedDisplayValue;
-	}, [
-		behaviour,
-		text,
-		focused.value,
-		filterable,
-		isFiltering,
-		truncatedDisplayValue
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx({
-			[SelectButton_module_default.selectInputWrapper]: true,
-			[SelectButton_module_default.selectInputMinimal]: minimal,
-			[SelectButton_module_default.selectInputReadonly]: readonly,
-			[SelectButton_module_default.selectInputActive]: isFocused,
-			[SelectButton_module_default.selectInputListOpen]: showList,
-			[SelectButton_module_default.selectInputInvalid]: isInvalid,
-			[SelectButton_module_default.selectInputSearch]: filterable === "prefiltered",
-			[SelectButton_module_default.selectInputWrapperFilterable]: filterable,
-			[SelectButton_module_default.selectInputWrapperNonFilterable]: !filterable,
-			[SelectButton_module_default.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({
-					[SelectButton_module_default.selectInput]: true,
-					[SelectButton_module_default.selectInputFilterable]: filterable,
-					[SelectButton_module_default.selectInputNonFilterable]: !filterable,
-					[SelectButton_module_default.selectInputMinimal]: minimal,
-					[SelectButton_module_default.selectInputReadonly]: readonly,
-					[SelectButton_module_default.handlePointerEvents]: isAppleMobile
-				}),
-				placeholder,
-				value,
-				disabled: readonly,
-				onClick: handleClick,
-				onInput: handleInput,
-				onKeyDown: handleKeyDown
-			}),
-			!filterable && !value ? /* @__PURE__ */ jsx("span", {
-				className: SelectButton_module_default.selectInputPlaceholder,
-				children: placeholder
-			}) : void 0,
-			loading && /* @__PURE__ */ jsx(Loader, { size: "small" })
-		]
-	});
-}
-//#endregion
-//#region src/components/ui/atoms/SelectListItem/SelectListItem.tsx
-var 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",
-		children: item.name
-	}), /* @__PURE__ */ jsx(Typography, {
-		el: "span",
-		color: "secondary",
-		children: item.description
-	})] }) : /* @__PURE__ */ jsx("span", { children: item.name })] })
-});
-//#endregion
-//#region src/components/ui/atoms/SelectList/SelectList.tsx
-var logger = createLogger();
-var 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 itemHeight = (() => {
-		if (listRef.current && showList) {
-			const height = (listRef.current.firstElementChild?.firstElementChild)?.clientHeight;
-			if (height !== void 0) return height;
-		}
-	})() || 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]);
-	/**
-	* When we scroll, we need to figure out which items are now in view.
-	* This also needs to be done whenever the filtered items change.
-	*/
-	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 + .5), maxScrollTop);
-		recalculateScrollIndexes();
-	}, [
-		filteredItems,
-		itemHeight,
-		totalItems,
-		listRef,
-		recalculateScrollIndexes
-	]);
-	const acquireFocusForItem = useCallback((item) => {
-		let itemEl = findElementForItem(item);
-		if (!itemEl) scrollItemIntoView(item);
-		setTimeout(() => {
-			itemEl = itemEl ?? findElementForItem(item);
-			if (itemEl) itemEl.focus();
-			else logger.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",
-			children: t(($) => $["loading"])
-		});
-		if (!filteredItems.length) {
-			if (startIndex !== 0 || endIndex !== maxVisibleItems) {
-				setStartIndex(0);
-				setEndIndex(maxVisibleItems);
-			}
-			return /* @__PURE__ */ jsx("div", {
-				className: "adyen-kyc-dropdown-element",
-				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;
-			setShowAbove(!(windowHeight - position > dropdownHeight) && position > dropdownHeight);
-		});
-		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: { height: `${(totalItems - endIndex) * itemHeight}px` } })]
-		})
-	});
-}
-//#endregion
-//#region src/components/ui/atoms/Select/Select.tsx
-var 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 [];
-		const selectedAsArray = Array.isArray(selected) ? selected : [selected], activeItems = [];
-		for (const s of selectedAsArray) {
-			if (typeof s === "object") {
-				activeItems.push(s);
-				continue;
-			}
-			const item = items.find((i) => i.id === s);
-			if (item) activeItems.push(item);
-		}
-		return activeItems;
-	}, [items, selected]);
-	const filtered = useMemo(() => {
-		return items.filter((item) => !excludedValues?.includes(item)).filter((item) => {
-			if (filterable === "prefiltered" || !isFiltering) return true;
-			return item.name.toLowerCase().includes(textFilter.toLowerCase());
-		});
-	}, [
-		filterable,
-		isFiltering,
-		items,
-		textFilter,
-		excludedValues
-	]);
-	const focusProps = useSelectFocus({
-		activeItems: useWatchingSignal(active),
-		filteredItems: useWatchingSignal(filtered)
-	});
-	const { focusInput, focusItem, focusDefaultItem, focusNothing, moveFocusToNextItem, moveFocusToPreviousItem } = focusProps;
-	/**
-	* Closes the selectList, empties the text filter and focuses the button element
-	*/
-	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 newActiveItems = active.find((item) => item.id === selectedItem.id) ? 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);
-	};
-	/**
-	* Handle keyDown events on the selectList button
-	* Opens the selectList and focuses the first element if available
-	* @param e - KeyboardEvent
-	*/
-	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");
-	};
-	/**
-	* Close the select list when clicking outside the list
-	* @param e - MouseEvent
-	*/
-	const handleClickOutside = (e) => {
-		if (!selectContainerRef.current?.contains(e.target)) closeList("nothing");
-	};
-	/**
-	* Handle keyDown events on the list elements
-	* Navigates through the list, or select an element, or focus the filter input, or close the menu.
-	* @param e - KeyDownEvent
-	* @param item - the item for which the keyboard event was triggered
-	*/
-	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();
-		}
-	};
-	/**
-	* Updates the state with the current text filter value
-	*/
-	const handleTextFilter = useCallback((value) => {
-		showList();
-		setIsFiltering(true);
-		setTextFilter(value);
-		if (enableTracking) debouncedInputEvent(userEvents, {
-			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
-		})]
-	});
-};
-//#endregion
-export { MaybeModal as a, getDataByFields as c, isTranslationObject as d, translateTranslatable as f, ProgressBar as i, omitKeys as l, SelectListItem as n, ValidationResult as o, LoaderWrapper as p, Field as r, addKeys as s, Select as t, getLanguageCode as u };