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] = "7abeb641-1a0f-4804-8a45-34398ba89aba", e._sentryDebugIdIdentifier = "sentry-dbid-7abeb641-1a0f-4804-8a45-34398ba89aba");
} catch (e) {}
import { n as IconButton } from "./Button-BDEdGXnd.js";
import { t as KEYBOARD_KEYS } from "./keys-C4gD4IDn.js";
import { useLayoutEffect, useRef } from "preact/hooks";
import cx from "classnames";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
var Modal_module_default = {
	modal: "adyen-kyc-modal",
	"modal-small": "adyen-kyc-modal-small",
	modalSmall: "adyen-kyc-modal-small",
	"modal-medium": "adyen-kyc-modal-medium",
	modalMedium: "adyen-kyc-modal-medium",
	"modal-large": "adyen-kyc-modal-large",
	modalLarge: "adyen-kyc-modal-large",
	"modal-fit-content": "adyen-kyc-modal-fit-content",
	modalFitContent: "adyen-kyc-modal-fit-content",
	"modal-body": "adyen-kyc-modal-body",
	modalBody: "adyen-kyc-modal-body",
	"modal-body-height": "adyen-kyc-modal-body-height",
	modalBodyHeight: "adyen-kyc-modal-body-height",
	"modal-accessable-title": "adyen-kyc-modal-accessable-title",
	modalAccessableTitle: "adyen-kyc-modal-accessable-title",
	"modal-transition-slide-in": "adyen-kyc-modal-transition-slide-in",
	modalTransitionSlideIn: "adyen-kyc-modal-transition-slide-in",
	"modal-transition-drop-in": "adyen-kyc-modal-transition-drop-in",
	modalTransitionDropIn: "adyen-kyc-modal-transition-drop-in",
	"modal-inset": "adyen-kyc-modal-inset",
	modalInset: "adyen-kyc-modal-inset",
	"modal-button": "adyen-kyc-modal-button",
	modalButton: "adyen-kyc-modal-button",
	"modal-header": "adyen-kyc-modal-header",
	modalHeader: "adyen-kyc-modal-header",
	"modal-content": "adyen-kyc-modal-content",
	modalContent: "adyen-kyc-modal-content",
	"modal-footer": "adyen-kyc-modal-footer",
	modalFooter: "adyen-kyc-modal-footer"
};
//#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 { ModalContent as n, Modal as t };
