@adyen/kyc-components/dist/Modal-BLP2aF-u.js

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

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] = "9ce67929-25dc-400e-b22c-e04ea3c6c089", e._sentryDebugIdIdentifier = "sentry-dbid-9ce67929-25dc-400e-b22c-e04ea3c6c089");
} catch (e) {}
import { n as IconButton } from "./Button-i8I2dHP8.js";
import { t as AnalyticsContext } from "./AnalyticsContext-BFrJmsp0.js";
import { useContext, useLayoutEffect, useRef } from "preact/hooks";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
//#region src/context/AnalyticsContext/useAnalyticsContext.tsx
var useAnalyticsContext = () => {
	return useContext(AnalyticsContext);
};
//#endregion
//#region src/constants/keys.ts
var KEYBOARD_KEYS = {
	arrowDown: "ArrowDown",
	arrowUp: "ArrowUp",
	arrowLeft: "ArrowLeft",
	arrowRight: "ArrowRight",
	enter: "Enter",
	escape: "Escape",
	space: " ",
	tab: "Tab",
	backspace: "Backspace",
	home: "Home",
	end: "End",
	shift: "Shift"
};
var Modal_module_default = {
	modal: "_modal_kkggh_1",
	"modal-small": "_modal-small_kkggh_30",
	modalSmall: "_modal-small_kkggh_30",
	"modal-medium": "_modal-medium_kkggh_39",
	modalMedium: "_modal-medium_kkggh_39",
	"modal-large": "_modal-large_kkggh_49",
	modalLarge: "_modal-large_kkggh_49",
	"modal-fit-content": "_modal-fit-content_kkggh_58",
	modalFitContent: "_modal-fit-content_kkggh_58",
	"modal-body": "_modal-body_kkggh_62",
	modalBody: "_modal-body_kkggh_62",
	"modal-body-height": "_modal-body-height_kkggh_69",
	modalBodyHeight: "_modal-body-height_kkggh_69",
	"modal-transition-slide-in": "_modal-transition-slide-in_kkggh_75",
	modalTransitionSlideIn: "_modal-transition-slide-in_kkggh_75",
	"modal-transition-drop-in": "_modal-transition-drop-in_kkggh_91",
	modalTransitionDropIn: "_modal-transition-drop-in_kkggh_91",
	"modal-inset": "_modal-inset_kkggh_105",
	modalInset: "_modal-inset_kkggh_105",
	"modal-button": "_modal-button_kkggh_138",
	modalButton: "_modal-button_kkggh_138",
	"modal-content": "_modal-content_kkggh_145",
	modalContent: "_modal-content_kkggh_145"
};
//#endregion
//#region src/components/ui/atoms/Modal/Modal.tsx
var Modal = ({ ariaLabel, children, fitContent = false, inset = false, onClose, showCloseButton = true, size = "medium", transition = "slideIn" }) => {
	const dialogRef = useRef(null);
	const shouldShowCloseButton = onClose !== void 0 && showCloseButton;
	useLayoutEffect(() => {
		const dialogElement = dialogRef.current;
		if (!dialogElement) return;
		const handleCancel = (event) => {
			event.preventDefault();
			onClose?.();
		};
		const handleKeydown = (event) => {
			if (event.key !== KEYBOARD_KEYS.escape) return;
			event.preventDefault();
			onClose?.();
		};
		try {
			dialogElement.addEventListener("keydown", handleKeydown);
			dialogElement.addEventListener("cancel", handleCancel);
			dialogElement.showModal();
		} catch {
			console.warn("Could not call `showModal()` on the <dialog>; likely it was already removed from the document.");
			return;
		}
		dialogElement.focus();
		dialogElement.blur();
		return () => {
			dialogElement.removeEventListener("cancel", handleCancel);
			dialogElement.removeEventListener("keydown", handleKeydown);
			dialogElement.close();
		};
	}, []);
	const transitionStyle = {
		slideIn: Modal_module_default.modalTransitionSlideIn,
		dropIn: Modal_module_default.modalTransitionDropIn
	};
	const sizeStyle = {
		small: Modal_module_default.modalSmall,
		medium: Modal_module_default.modalMedium,
		large: Modal_module_default.modalLarge,
		fullscreen: null
	};
	const rootClassname = cx(Modal_module_default.modal, transitionStyle[transition], sizeStyle[size], { [Modal_module_default.modalFitContent]: fitContent && (size === "medium" || size === "large") });
	const bodyClassname = cx(Modal_module_default.modalBody, {
		[Modal_module_default.modalInset]: inset,
		[Modal_module_default.modalBodyHeight]: size !== "small" && !fitContent
	});
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `html,body { overflow: hidden !important; }` }), /* @__PURE__ */ jsxs("dialog", {
		"aria-label": ariaLabel,
		className: rootClassname,
		ref: dialogRef,
		children: [shouldShowCloseButton && /* @__PURE__ */ jsx("div", {
			className: Modal_module_default.modalButton,
			children: /* @__PURE__ */ jsx(IconButton, {
				ariaLabel: "Close",
				circle: true,
				icon: "cross",
				onClick: onClose,
				variant: "surface"
			})
		}), /* @__PURE__ */ jsx("div", {
			className: bodyClassname,
			"data-testid": "modal-body",
			children
		})]
	})] });
};
/** @deprecated do not use in new UI. If you need inset styling, use the `inset` prop on the Modal component. */
var ModalContent = ({ children }) => /* @__PURE__ */ jsx("section", {
	className: Modal_module_default.modalContent,
	children
});
//#endregion
export { useAnalyticsContext as i, ModalContent as n, KEYBOARD_KEYS as r, Modal as t };