"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_breakpoints = require("../styles/breakpoints.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_utils_emotion = require("../utils/emotion.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_utils = require("../styles/utils.cjs");
const require_utils_toReactNodes_toReactNodes = require("../utils/toReactNodes/toReactNodes.cjs");
const require_utils_toReactNodes_setReactNodesTypography = require("../utils/toReactNodes/setReactNodesTypography.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
const require_components_Button = require("./Button.cjs");
const require_styles_tokens_spacing = require("../styles/tokens/spacing.cjs");
const require_hooks_useLiveRef = require("../hooks/useLiveRef.cjs");
const require_types_typeGuard = require("../types/typeGuard.cjs");
const require_components_Drawer = require("./Drawer.cjs");
const require_components_IconWithCircleBackground = require("./IconWithCircleBackground.cjs");
const require_components_ProgressBar = require("./ProgressBar.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
react = require_chunk.__toESM(react);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let react_dom = require("react-dom");
react_dom = require_chunk.__toESM(react_dom);
//#region src/components/Modal.tsx
function isSubmitLinkWithHref(submitLink) {
	return Boolean(submitLink && "href" in submitLink);
}
function Modal({ visible, topContent, title, description, children, onClose, onCancel, cancelDisabled, cancelHidden, ghost, onSubmit, submitDisabled, submitLoading, submitLoadingKind, submitText, submitIcon, submitLink, cancelText = "Cancel", firstFocusRef, smKind = "default", top, nonDismissable = false, autoFocus = true, width = 460, progressBar, buttonOrder, buttonLayout = "horizontal", extraActions, handleBack, appendToElement, bottomContent, topLeftIcon, drawerKind, drawerPadding, drawerCloseButton = true, drawerAlignBottom, drawerDisableTouchMove, overlayBackground }) {
	const visibleChangedRef = (0, react.useRef)(false);
	const [visibleChanged, setVisibleChanged] = (0, react.useState)(false);
	const nodeRef = (0, react.useRef)(null);
	const [defaultFirstFocusRef, defaultFirstFocusRefCb] = require_hooks_useLiveRef.useLiveRef();
	const ref = firstFocusRef || defaultFirstFocusRef;
	const [nodeReady, setNodeReady] = react.default.useState(false);
	const overlayRef = (0, react.useRef)(null);
	const prevFocusedElement = (0, react.useRef)();
	const modalContainerRef = (0, react.useRef)(null);
	const bp = require_styles_breakpoints.useBreakpoints();
	const isSm = bp.current("sm");
	(0, react.useEffect)(() => {
		if (visible !== visibleChangedRef.current) {
			visibleChangedRef.current = visible;
			setVisibleChanged(true);
		}
	}, [visible]);
	(0, react.useEffect)(() => {
		if (visibleChanged) setVisibleChanged(false);
	}, [visibleChanged]);
	(0, react.useEffect)(() => {
		prevFocusedElement.current = document.activeElement;
		const elementToAppendTo = appendToElement ?? document.body;
		if (!nodeRef.current) {
			nodeRef.current = document.createElement("div");
			elementToAppendTo.appendChild(nodeRef.current);
		}
		setNodeReady(true);
		return () => {
			if (nodeRef.current) {
				elementToAppendTo.removeChild(nodeRef.current);
				nodeRef.current = null;
			}
		};
	}, [appendToElement]);
	(0, react.useEffect)(() => {
		const handleOutsideClick = (event) => {
			if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) onClose();
		};
		const handleKeyDown = (event) => {
			if (visible && event.key === "Escape" && !nonDismissable) onClose();
		};
		if (visible) {
			if (modalContainerRef.current) modalContainerRef.current.addEventListener("keydown", handleKeyDown);
			if (overlayRef.current) overlayRef.current.addEventListener("click", handleOutsideClick);
		} else {
			if (modalContainerRef.current) modalContainerRef.current.removeEventListener("keydown", handleKeyDown);
			if (overlayRef.current) overlayRef.current.removeEventListener("click", handleOutsideClick);
		}
		const containerRef = modalContainerRef.current;
		const overlayRefVar = overlayRef.current;
		return () => {
			if (containerRef) containerRef.removeEventListener("keydown", handleKeyDown);
			if (overlayRefVar) overlayRefVar.removeEventListener("click", handleOutsideClick);
		};
	}, [
		onClose,
		visible,
		nonDismissable
	]);
	(0, react.useLayoutEffect)(() => {
		if (visible) {
			if (visibleChanged) prevFocusedElement.current = document.activeElement;
			if (typeof ref === "object" && ref?.current && autoFocus) ref.current.focus();
		} else if (visibleChanged && prevFocusedElement.current) prevFocusedElement.current.focus();
	}, [
		visible,
		visibleChanged,
		ref,
		autoFocus
	]);
	function onClickCloseButton(event) {
		event?.stopPropagation();
		onClose();
	}
	function onSubmitForm(e) {
		e.preventDefault();
		e.stopPropagation();
		if (!submitDisabled && onSubmit) onSubmit();
	}
	function onClickCancel() {
		if (onCancel) onCancel();
		else onClose();
	}
	const linkIsHref = isSubmitLinkWithHref(submitLink);
	const linkIsRoute = !linkIsHref && submitLink;
	const displayCancelAbove = !!buttonOrder ? buttonOrder === "cancel-first" : !isSm;
	const displayCancelBelow = !!buttonOrder ? buttonOrder === "submit-first" : isSm;
	const buttonContent = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
		extraActions?.filter((action) => action.placement === "above").map(({ placement, text, ...rest }, i) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
			text,
			...rest
		}, text || `no-text-${i}`)),
		displayCancelAbove && !cancelHidden && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
			disabled: cancelDisabled,
			onClick: onClickCancel,
			text: cancelText
		}),
		(onSubmit || submitLink) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
			kind: "primary",
			disabled: submitDisabled,
			icon: submitIcon,
			text: submitText ?? "Continue",
			loading: submitLoading,
			loadingKind: submitLoadingKind,
			to: linkIsRoute ? submitLink.to : void 0,
			externalLink: linkIsHref ? submitLink.href : void 0,
			filename: linkIsHref ? submitLink.filename : void 0,
			type: submitLink ? "button" : "submit",
			onClick: submitLink ? onSubmit : void 0
		}),
		displayCancelBelow && !cancelHidden && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
			disabled: cancelDisabled,
			onClick: onClickCancel,
			text: cancelText
		}),
		extraActions?.filter((action) => action.placement === "below").map(({ placement, text, ...rest }, i) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Button.Button, {
			text,
			...rest
		}, text || `no-text-${i}`))
	] });
	let titleContent = null;
	if (title) titleContent = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ModalTitle, { children: require_utils_toReactNodes_toReactNodes.toReactNodes(require_utils_toReactNodes_setReactNodesTypography.setDefaultReactNodesTypography(title, { default: {
		type: "Headline",
		heading: "h4",
		size: "Small"
	} })) });
	let descriptionContent = null;
	if (description) descriptionContent = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ModalDescription, { children: require_utils_toReactNodes_toReactNodes.toReactNodes(require_utils_toReactNodes_setReactNodesTypography.setDefaultReactNodesTypography(description, { default: {
		type: "Body",
		size: "ExtraSmall"
	} })) });
	let topContentNode = null;
	if (topContent) if (require_types_typeGuard.isReactNode(topContent)) topContentNode = topContent;
	else topContentNode = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
		css: { marginBottom: require_styles_tokens_spacing.Spacing.px.xl },
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_IconWithCircleBackground.IconWithCircleBackground, { ...topContent })
	});
	const modalContent = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react.Fragment, { children: [
		progressBar ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
			css: { marginBottom: "20px" },
			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_ProgressBar.ProgressBar, {
				progressPercentage: progressBar.progressPercentage,
				isSm: progressBar.isSm
			})
		}) : null,
		topContentNode,
		titleContent,
		descriptionContent,
		children,
		onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ModalButtonColumn, { children: buttonContent }) : null
	] });
	let content;
	if (smKind === "drawer" && isSm) content = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Drawer.Drawer, {
		onClose: () => onClickCloseButton(),
		closeButton: drawerCloseButton,
		nonDismissable,
		handleBack,
		kind: drawerKind ?? "default",
		padding: drawerPadding !== void 0 ? `${drawerPadding}px` : void 0,
		alignBottom: drawerAlignBottom,
		disableTouchMove: drawerDisableTouchMove ?? false,
		top,
		children: modalContent
	});
	else content = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react.Fragment, { children: [!(smKind === "fullscreen" && bp.isSm()) ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ModalOverlay, {
		ref: overlayRef,
		overlayBackground
	}) : null, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ModalContainer, {
		"aria-modal": true,
		"aria-hidden": true,
		tabIndex: -1,
		onClick: (event) => {
			event.stopPropagation();
		},
		role: "dialog",
		ref: modalContainerRef,
		top: top || (smKind === "default" ? require_styles_common.standardContentInset.smPx : 0),
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(ModalContent, {
			width,
			ghost,
			smKind,
			children: [
				!firstFocusRef && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
				!ghost && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(ModalNavigation, { children: [handleBack ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(BackButton, {
					onClick: handleBack,
					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
						name: "ChevronLeft",
						width: 16
					})
				}) : topLeftIcon ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, { ...topLeftIcon }) : null, !nonDismissable && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CloseButton, {
					onClick: onClickCloseButton,
					type: "button",
					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
						name: "Close",
						width: 9
					})
				})] }),
				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ModalContentInner, {
					ghost,
					children: modalContent
				}),
				bottomContent && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
					css: { marginTop: "auto" },
					children: bottomContent
				})
			]
		})
	})] });
	return visible && nodeReady && nodeRef.current ? react_dom.default.createPortal(onSubmit ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("form", {
		onSubmit: onSubmitForm,
		children: content
	}) : content, nodeRef.current) : null;
}
const DefaultFocusTarget = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  position: absolute;
  top: -30px;
  width: 0;
  height: 0;
`;
const ModalOverlay = _emotion_styled.default.div`
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: ${require_styles_z_index.z.modalOverlay};
  width: 100vw;
  height: 100dvh;
  background: ${({ overlayBackground, theme }) => overlayBackground ? require_styles_themes.getColor(theme, overlayBackground) : "rgba(0, 0, 0, 0.5)"};
`;
const ModalContainer = _emotion_styled.default.div`
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: ${require_styles_z_index.z.modalContainer};
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${({ theme }) => theme.text};
  ${(props) => `top: ${props.top}px;`}
`;
const contentTopMarginPx = 24;
const ModalDescription = _emotion_styled.default.div`
  color: ${({ theme }) => theme.mcNeutral};
  margin-top: ${require_styles_tokens_spacing.Spacing.px.sm};
  & + * {
    margin-top: ${contentTopMarginPx}px;
  }
`;
const ModalButtonRow = _emotion_styled.default.div`
  margin-top: ${require_styles_tokens_spacing.Spacing.px.lg};
  display: flex;
  ${require_styles_breakpoints.bp.sm(`
    flex-direction: column;
  `)}
  gap: 10px;

  ${require_components_Button.ButtonSelector()} {
    width: 50%;
    ${require_styles_breakpoints.bp.sm(`
      width: 100%;
    `)}
  }
`;
const ModalButtonColumn = _emotion_styled.default.div`
  display: flex;
  flex-direction: column;
  gap: ${require_styles_tokens_spacing.Spacing.px.sm};

  ${require_components_Button.ButtonSelector()} {
    width: 100%;
  }

  margin-top: ${require_styles_tokens_spacing.Spacing.px.lg};
`;
const ModalTitle = _emotion_styled.default.div`
  margin: 0;
  & + *:not(${require_utils_emotion.select(ModalDescription)}) {
    margin-top: ${contentTopMarginPx}px;
  }
`;
const ModalContent = _emotion_styled.default.div`
  pointer-events: auto;
  transition: width 0.25s ease-in;

  ${({ theme, smKind, ghost }) => ghost ? "" : require_styles_common.overlaySurface({
	theme,
	border: smKind !== "fullscreen"
})}

  ${require_styles_utils.overflowAutoWithoutScrollbars}
  ${require_styles_common.standardContentInset.smCSS.styles}
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;

  ${({ ghost, smKind, width }) => `
    ${ghost ? "" : require_styles_common.standardBorderRadius(16)}
    width: ${width}px;
  `}

  ${({ smKind }) => smKind === "fullscreen" ? require_styles_breakpoints.bp.sm(`
          border-radius: 0px;
          width: 100%;
          height: 100dvh;
        `) : ""}

  ${({ ghost }) => ghost ? "" : "padding: 16px 16px 40px;"}
`;
const ModalNavigation = _emotion_styled.default.div`
  display: grid;
  grid-auto-flow: column;
  width: 100%;
`;
const BackButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  ${require_styles_common.standardFocusOutline}
  width: 24px;
  height: 24px;
  justify-self: flex-start;
`;
const CloseButton = (0, _emotion_styled.default)(require_components_UnstyledButton.UnstyledButton)`
  ${require_styles_common.standardFocusOutline}
  width: 24px;
  height: 24px;
  justify-self: flex-end;
`;
const ModalContentInner = _emotion_styled.default.div`
  ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
  ${(props) => props.ghost ? "" : `${require_styles_breakpoints.bp.sm(`
    padding-left: 10px;
    padding-right: 10px;
  `)}`}
`;
//#endregion
exports.Modal = Modal;
