/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../../_virtual/_rolldown/runtime.cjs");
const require_styles_styler = require("../../../styles/styler.cjs");
const require_components_client_Pressable = require("../Pressable.cjs");
const require_components_IconSlot = require("../../IconSlot.cjs");
const require_components_Box = require("../../Box.cjs");
const require_components_HStack = require("../../HStack.cjs");
const require_components_VStack = require("../../VStack.cjs");
const require_components_Scrim = require("../../Scrim.cjs");
const require_utils_exposeAriakitScrollbarWidth = require("../../../utils/exposeAriakitScrollbarWidth.cjs");
const require_components_client_Modal_ModalContext = require("./ModalContext.cjs");
const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
const require_components_client_Modal_ModalActions = require("./ModalActions.cjs");
const require_components_client_Modal_ModalContent = require("./ModalContent.cjs");
const require_components_client_Modal_ModalDescription = require("./ModalDescription.cjs");
const require_components_client_Modal_ModalTitle = require("./ModalTitle.cjs");
const require_components_client_Modal_utils = require("./utils.cjs");
let _yahoo_uds_icons = require("@yahoo/uds-icons");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _ariakit_react = require("@ariakit/react");
let motion_react = require("motion/react");
//#region src/components/client/Modal/Modal.tsx
require_utils_exposeAriakitScrollbarWidth.exposeAriakitScrollbarWidth();
const Modal = ({ children, open, onClose, onOpen, portal = true, modal = true, includeScrim, closeAriaLabel = "Close", slotProps, hideDismissButton = false, reduceMotion: forceReduceMotion = false, closeIcon = _yahoo_uds_icons.Cross, maxWidth = "auto", maxHeight: maxHeightProp = "auto", fullWidth = false, fullHeight = false, title: titleProp, description: descriptionProp, content: contentProp, actions: actionsProp, scrollBehavior = "outside", className, style }) => {
	const prevOpen = (0, react.useRef)(open);
	const positionerRef = (0, react.useRef)(null);
	const { size, variant, animationDuration, animationEasing, gutter } = require_components_client_Modal_UDSModalConfigProvider.useModalConfig();
	const { in: durationIn, out: durationOut } = typeof animationDuration === "number" ? {
		in: animationDuration,
		out: animationDuration
	} : animationDuration;
	const { in: easingIn, out: easingOut } = typeof animationEasing === "string" ? {
		in: animationEasing,
		out: animationEasing
	} : animationEasing;
	const { title: modalTitle, description: modalDescription, content: modalContent, actions: modalActions } = require_components_client_Modal_utils.separateChildren(children);
	const reducedMotion = (0, motion_react.useReducedMotion)() || forceReduceMotion;
	(0, react.useEffect)(() => {
		if (open && !prevOpen.current) onOpen?.();
		prevOpen.current = open;
	}, [open, onOpen]);
	const [shouldLockScroll, setShouldLockScroll] = (0, react.useState)(open);
	if (open && !shouldLockScroll) setShouldLockScroll(true);
	(0, react.useEffect)(() => {
		if (open) return;
		const duration = reducedMotion ? 0 : durationOut;
		const timer = window.setTimeout(() => setShouldLockScroll(false), duration);
		return () => window.clearTimeout(timer);
	}, [
		open,
		reducedMotion,
		durationOut
	]);
	(0, react.useLayoutEffect)(() => {
		if (!open) return;
		const positioner = positionerRef.current;
		const dialog = positioner?.firstElementChild;
		if (!positioner || !dialog) return;
		positioner.style.zIndex = getComputedStyle(dialog).zIndex;
	}, [open]);
	const hasTitleOrDescription = !!(modalTitle || titleProp || modalDescription || descriptionProp);
	const shouldRenderHeader = !!(!hideDismissButton || hasTitleOrDescription);
	const hasContent = !!(modalContent || contentProp);
	const maxHeight = scrollBehavior === "inside" ? maxHeightProp : void 0;
	const classNames = {
		positioner: require_styles_styler.getStyles({
			spacing: gutter,
			className: require_styles_styler.cx("fixed inset-0 z-40", scrollBehavior === "outside" ? "overflow-y-auto" : "overflow-hidden", !reducedMotion && "transition-[opacity,visibility]", open ? "visible opacity-100" : "invisible opacity-0", modal === false && "pointer-events-none")
		}),
		root: require_styles_styler.getStyles({
			modalSizeRoot: size,
			modalVariantRoot: variant,
			className: require_styles_styler.cx("z-40", "uds-bgBlurFallback", fullWidth ? "w-full" : "w-fit", fullHeight && scrollBehavior === "inside" ? "h-full" : "h-fit", "m-auto pointer-events-auto", scrollBehavior === "inside" && "overflow-hidden max-h-full", !reducedMotion && "transition-transform")
		}),
		header: require_styles_styler.getStyles({
			modalSizeSpacingHorizontal: size,
			modalSizeHeader: size,
			flexDirection: "row-reverse",
			justifyContent: "space-between",
			alignItems: hideDismissButton ? "flex-end" : "flex-start"
		}),
		titleDescriptionWrapper: require_styles_styler.getStyles({ modalSizeTitleDescriptionWrapper: size }),
		closeIconContainer: require_styles_styler.getStyles({
			modalSizeCloseIconContainer: size,
			borderRadius: "full",
			className: require_styles_styler.cx(reducedMotion ? "duration-0" : "duration-120", "transition-[background-color]", "bg-carbon-15/0", "hover:bg-carbon-15/10", "active:bg-carbon-15/15", "uds-ring", "[translate:50%_-50%]")
		}),
		closeIcon: require_styles_styler.getStyles({
			modalSizeCloseIcon: size,
			modalVariantCloseIcon: variant
		})
	};
	const backdrop = includeScrim ?? modal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Scrim.Scrim, {
		animateOpacity: true,
		...slotProps?.scrim,
		className: require_styles_styler.cx(!open && "pointer-events-none", slotProps?.scrim?.className),
		style: {
			...slotProps?.scrim?.style,
			...!reducedMotion ? {
				transitionDuration: `${open ? durationIn : durationOut}ms`,
				transitionTimingFunction: open ? easingIn : easingOut
			} : void 0
		}
	}) : false;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.Dialog, {
		open,
		onClose,
		portal,
		modal,
		className: classNames.root,
		backdrop,
		preventBodyScroll: modal ? shouldLockScroll : false,
		alwaysVisible: true,
		autoFocusOnShow: (element) => {
			if (scrollBehavior === "outside") {
				element?.focus({ preventScroll: true });
				positionerRef.current?.scrollTo(0, 0);
				return false;
			}
			return true;
		},
		render: (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
			...slotProps?.positioner,
			ref: positionerRef,
			className: require_styles_styler.cx(classNames.positioner, slotProps?.positioner?.className),
			style: {
				...slotProps?.positioner?.style,
				...!reducedMotion ? {
					transitionDuration: `${open ? durationIn : durationOut}ms`,
					transitionTimingFunction: open ? easingIn : easingOut
				} : void 0
			},
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
				...props,
				...slotProps?.root,
				className: require_styles_styler.cx(props.className, className, slotProps?.root?.className),
				style: {
					...props.style,
					...style,
					...slotProps?.root?.style,
					maxWidth,
					maxHeight,
					...!reducedMotion ? {
						transform: open ? "scale(1)" : "scale(0.95)",
						transitionDuration: `${open ? durationIn : durationOut}ms`,
						transitionTimingFunction: open ? easingIn : easingOut
					} : void 0
				}
			})
		}),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_client_Modal_ModalContext.ModalContext.Provider, {
			value: {
				scrollBehavior,
				shouldRenderHeader,
				hasContent
			},
			children: [
				shouldRenderHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
					...slotProps?.header,
					className: require_styles_styler.cx(classNames.header, slotProps?.header?.className),
					children: [!hideDismissButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.DialogDismiss, {
						render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
							"aria-label": closeAriaLabel,
							onClick: (e) => onClose?.(e.nativeEvent),
							...slotProps?.closeIconContainer,
							className: require_styles_styler.cx(classNames.closeIconContainer, slotProps?.closeIconContainer?.className)
						}),
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
							icon: closeIcon,
							iconProps: {
								color: "inherit",
								...slotProps?.closeIcon,
								className: require_styles_styler.cx(classNames.closeIcon, slotProps?.closeIcon?.className)
							}
						})
					}), hasTitleOrDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
						...slotProps?.titleDescriptionWrapper,
						className: require_styles_styler.cx(classNames.titleDescriptionWrapper, slotProps?.titleDescriptionWrapper?.className),
						children: [modalTitle || (titleProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalTitle.ModalTitle, { children: titleProp }) : null), modalDescription || (descriptionProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalDescription.ModalDescription, { children: descriptionProp }) : null)]
					})]
				}),
				modalContent || (contentProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalContent.ModalContent, { children: contentProp }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, { flexGrow: "1" })),
				modalActions || (actionsProp ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalActions.ModalActions, { children: actionsProp }) : null)
			]
		})
	});
};
Modal.displayName = "Modal";
//#endregion
exports.Modal = Modal;
