;
{
  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] = "a3d534b0-4754-4fb4-9858-f84edbb13855", e._sentryDebugIdIdentifier = "sentry-dbid-a3d534b0-4754-4fb4-9858-f84edbb13855");
  } catch (e) {
  }
}
;
import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
import cx from "classnames";
import { useRef, useLayoutEffect } from "preact/hooks";
import { t as IconButton } from "./StoreProvider-CqQrndhS.js";
const KEYBOARD_KEYS = {
  arrowDown: "ArrowDown",
  arrowUp: "ArrowUp",
  arrowLeft: "ArrowLeft",
  arrowRight: "ArrowRight",
  enter: "Enter",
  escape: "Escape",
  space: " ",
  tab: "Tab",
  backspace: "Backspace",
  home: "Home",
  end: "End"
};
const modal = "adyen-kyc-modal";
const modalSmall = "adyen-kyc-modal-small";
const modalMedium = "adyen-kyc-modal-medium";
const modalLarge = "adyen-kyc-modal-large";
const modalBody = "adyen-kyc-modal-body";
const modalBodyHeight = "adyen-kyc-modal-body-height";
const modalTransitionSlideIn = "adyen-kyc-modal-transition-slide-in";
const modalTransitionDropIn = "adyen-kyc-modal-transition-drop-in";
const modalInset = "adyen-kyc-modal-inset";
const modalButton = "adyen-kyc-modal-button";
const modalHeader = "adyen-kyc-modal-header";
const modalContent = "adyen-kyc-modal-content";
const modalFooter = "adyen-kyc-modal-footer";
const styles = {
  modal,
  modalSmall,
  modalMedium,
  modalLarge,
  modalBody,
  modalBodyHeight,
  modalTransitionSlideIn,
  modalTransitionDropIn,
  modalInset,
  modalButton,
  modalHeader,
  modalContent,
  modalFooter
};
const Modal = ({
  ariaLabel,
  children,
  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: styles.modalTransitionSlideIn,
    dropIn: styles.modalTransitionDropIn
  };
  const sizeStyle = {
    small: styles.modalSmall,
    medium: styles.modalMedium,
    large: styles.modalLarge,
    fullscreen: null
  };
  const rootClassname = cx(styles.modal, transitionStyle[transition], sizeStyle[size]);
  const bodyClassname = cx(styles.modalBody, {
    [styles.modalInset]: inset,
    [styles.modalBodyHeight]: size !== "small"
  });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx("style", { children: `html,body { overflow: hidden !important; }` }),
    /* @__PURE__ */ jsxs(
      "dialog",
      {
        "aria-label": ariaLabel,
        "aria-modal": "true",
        className: rootClassname,
        onClose,
        ref: dialogRef,
        children: [
          shouldShowCloseButton && /* @__PURE__ */ jsx("div", { className: styles.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 })
        ]
      }
    )
  ] });
};
const ModalHeader = ({ children }) => /* @__PURE__ */ jsx("header", { className: styles.modalHeader, children });
const ModalContent = ({ children }) => /* @__PURE__ */ jsx("section", { className: styles.modalContent, children });
const ModalFooter = ({ children }) => /* @__PURE__ */ jsx("footer", { className: styles.modalFooter, children });
export {
  KEYBOARD_KEYS as K,
  Modal as M,
  ModalContent as a,
  ModalHeader as b,
  ModalFooter as c
};
