@ultraviolet/ui 3.21.0 → 3.21.2

package/dist/components/Modal/components/Dialog.js

@@ -1,10 +1,10 @@
 'use client';
 import { __esmMin, __name } from "../../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { Stack, init_Stack } from "../../Stack/index.js";
 import { init_ModalProvider, useModal } from "../ModalProvider.js";
-import { init_styles_css, modalStyle, positionModal, topModal } from "../styles.css.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { init_styles_css, modalStyle, nestedModalScale, nestedModalTop } from "../styles.css.js";
+import { useCallback, useEffect, useRef } from "react";
 import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -12,173 +12,177 @@ import { createPortal } from "react-dom";
 
 //#region src/components/Modal/components/Dialog.tsx
 var stopCancel, Dialog;
-var init_Dialog = __esmMin(() => {
-	init_Stack();
-	init_ModalProvider();
-	init_styles_css();
-	init_objectSpread2();
-	stopCancel = (event) => {
-		event.preventDefault();
-		event.stopPropagation();
-	};
-	Dialog = ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, style, ref, isDrawer }) => {
-		var _dialogRef$current2;
-		const [isVisible, setIsVisible] = useState(false);
-		const containerRef = useRef(document.createElement("div"));
-		const nonDefaultRef = useRef(null);
-		const dialogRef = ref !== null && ref !== void 0 ? ref : nonDefaultRef;
-		const onCloseRef = useRef(onClose);
-		const { registerModal, unregisterModal, openedModals, previsousOpenedModales } = useModal();
-		useEffect(() => {
-			setIsVisible(true);
-		}, []);
-		useEffect(() => {
-			if (!isDrawer) registerModal({
-				id,
-				ref: dialogRef
-			});
-			return () => {
-				unregisterModal(id);
-			};
-		}, [
-			id,
-			registerModal,
-			unregisterModal,
-			dialogRef,
-			isDrawer
-		]);
-		useEffect(() => {
-			const element = containerRef.current;
-			document.body.appendChild(element);
-			return () => {
-				if (document.body.contains(element)) document.body.removeChild(element);
-			};
-		}, []);
-		useEffect(() => {
-			onCloseRef.current = onClose;
-		}, [onClose]);
-		useEffect(() => {
-			var _dialogRef$current;
-			(_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 || _dialogRef$current.focus();
-		}, [dialogRef]);
-		useEffect(() => {
-			const previousOverflow = document.body.style.overflow;
-			if (preventBodyScroll) document.body.style.overflow = "hidden";
-			return () => {
-				document.body.style.overflow = previousOverflow;
-			};
-		}, [preventBodyScroll]);
-		const stopFocus = useCallback((event) => {
-			event.stopPropagation();
-		}, []);
-		const realPosition = [...openedModals].findIndex((object) => object.id === id);
-		const position = [...openedModals].reverse().findIndex((object) => object.id === id);
-		const modalAbove = openedModals[realPosition + 1];
-		const currentModalHeight = (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.offsetHeight;
-		let top = 0;
-		const handleKeyUp = useCallback((event) => {
+function init_Dialog() {
+	return (init_Dialog = __esmMin(() => {
+		init_Stack();
+		init_ModalProvider();
+		init_styles_css();
+		init_objectSpread2();
+		stopCancel = (event) => {
+			event.preventDefault();
 			event.stopPropagation();
-			if (event.key === "Escape" && hideOnEsc) {
-				event.preventDefault();
-				onCloseRef.current();
-			}
-		}, [hideOnEsc]);
-		const handleClose = useCallback((event) => {
-			if (hideOnClickOutside && dialogRef.current && !dialogRef.current.contains(event.target) && (isDrawer || position === 0)) onCloseRef.current();
-		}, [
-			hideOnClickOutside,
-			position,
-			dialogRef,
-			isDrawer
-		]);
-		const handleFocusMove = useCallback((event, firstFocusableEl, lastFocusableEl) => {
-			if (event.shiftKey) {
-				if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
-					if (lastFocusableEl instanceof HTMLElement) lastFocusableEl.focus();
+		};
+		Dialog = ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, backdropStyle, image, style, ref, isDrawer, open }) => {
+			var _dialogRef$current2;
+			const containerRef = useRef(document.createElement("div"));
+			const nonDefaultRef = useRef(null);
+			const dialogRef = ref !== null && ref !== void 0 ? ref : nonDefaultRef;
+			const onCloseRef = useRef(onClose);
+			const { registerModal, unregisterModal, openedModals } = useModal();
+			useEffect(() => {
+				if (isDrawer) return;
+				if (open) registerModal({
+					id,
+					ref: dialogRef
+				});
+				else unregisterModal(id);
+				return () => {
+					unregisterModal(id);
+				};
+			}, [
+				id,
+				open,
+				registerModal,
+				unregisterModal,
+				dialogRef,
+				isDrawer
+			]);
+			useEffect(() => {
+				const element = containerRef.current;
+				document.body.appendChild(element);
+				return () => {
+					if (document.body.contains(element)) document.body.removeChild(element);
+				};
+			}, []);
+			useEffect(() => {
+				onCloseRef.current = onClose;
+			}, [onClose]);
+			useEffect(() => {
+				if (open) {
+					var _dialogRef$current;
+					(_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 || _dialogRef$current.focus();
+				}
+			}, [open, dialogRef]);
+			useEffect(() => {
+				const previousOverflow = document.body.style.overflow;
+				if (preventBodyScroll) document.body.style.overflow = "hidden";
+				return () => {
+					document.body.style.overflow = previousOverflow;
+				};
+			}, [preventBodyScroll]);
+			const stopFocus = useCallback((event) => {
+				event.stopPropagation();
+			}, []);
+			const realPosition = [...openedModals].findIndex((object) => object.id === id);
+			const position = [...openedModals].reverse().findIndex((object) => object.id === id);
+			const modalAbove = openedModals[realPosition + 1];
+			const currentModalHeight = (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.offsetHeight;
+			let top = 0;
+			const handleKeyUp = useCallback((event) => {
+				event.stopPropagation();
+				if (event.key === "Escape" && hideOnEsc) {
 					event.preventDefault();
+					onCloseRef.current();
 				}
-			} else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
-				if (firstFocusableEl instanceof HTMLElement) firstFocusableEl.focus();
-				event.preventDefault();
-			}
-		}, [dialogRef]);
-		const handleFocusTrap = useCallback((event) => {
-			var _dialogRef$current3;
-			event.stopPropagation();
-			if (event.key === "Escape") {
-				event.preventDefault();
-				return;
-			}
-			if (!(event.key === "Tab")) return;
-			const focusableEls = (_dialogRef$current3 = dialogRef.current) === null || _dialogRef$current3 === void 0 ? void 0 : _dialogRef$current3.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])");
-			if ((focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) === 0) event.preventDefault();
-			if (focusableEls) {
-				const elems = [...focusableEls];
-				const firstFocusableEl = elems[0];
-				const lastFocusableEl = elems.at(-1);
-				handleFocusMove(event, firstFocusableEl, lastFocusableEl);
+			}, [hideOnEsc]);
+			const pointerDownTargetRef = useRef(null);
+			const handlePointerDown = useCallback((event) => {
+				pointerDownTargetRef.current = event.target;
+			}, []);
+			const handleClose = useCallback((event) => {
+				const clickedOutside = dialogRef.current && !dialogRef.current.contains(pointerDownTargetRef.current) && !dialogRef.current.contains(event.target);
+				if (hideOnClickOutside && clickedOutside && (isDrawer || position === 0)) onCloseRef.current();
+			}, [
+				hideOnClickOutside,
+				position,
+				dialogRef,
+				isDrawer
+			]);
+			const handleFocusMove = useCallback((event, firstFocusableEl, lastFocusableEl) => {
+				if (event.shiftKey) {
+					if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
+						if (lastFocusableEl instanceof HTMLElement) lastFocusableEl.focus();
+						event.preventDefault();
+					}
+				} else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
+					if (firstFocusableEl instanceof HTMLElement) firstFocusableEl.focus();
+					event.preventDefault();
+				}
+			}, [dialogRef]);
+			const handleFocusTrap = useCallback((event) => {
+				var _dialogRef$current3;
+				event.stopPropagation();
+				if (event.key === "Escape") {
+					event.preventDefault();
+					return;
+				}
+				if (!(event.key === "Tab")) return;
+				const focusableEls = (_dialogRef$current3 = dialogRef.current) === null || _dialogRef$current3 === void 0 ? void 0 : _dialogRef$current3.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])");
+				if ((focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) === 0) event.preventDefault();
+				if (focusableEls) {
+					const elems = [...focusableEls];
+					const firstFocusableEl = elems[0];
+					const lastFocusableEl = elems.at(-1);
+					handleFocusMove(event, firstFocusableEl, lastFocusableEl);
+				}
+			}, [dialogRef, handleFocusMove]);
+			if ((modalAbove === null || modalAbove === void 0 ? void 0 : modalAbove.ref) && typeof modalAbove.ref === "object" && "current" in modalAbove.ref && currentModalHeight) {
+				var _modalAbove$ref$curre;
+				var _modalAbove$ref;
+				top = ((_modalAbove$ref$curre = modalAbove === null || modalAbove === void 0 || (_modalAbove$ref = modalAbove.ref) === null || _modalAbove$ref === void 0 || (_modalAbove$ref = _modalAbove$ref.current) === null || _modalAbove$ref === void 0 ? void 0 : _modalAbove$ref.offsetHeight) !== null && _modalAbove$ref$curre !== void 0 ? _modalAbove$ref$curre : 0) / 2 - currentModalHeight / 2 + 20;
 			}
-		}, [dialogRef, handleFocusMove]);
-		if ((modalAbove === null || modalAbove === void 0 ? void 0 : modalAbove.ref) && typeof modalAbove.ref === "object" && "current" in modalAbove.ref && currentModalHeight) {
-			var _modalAbove$ref$curre;
-			var _modalAbove$ref;
-			top = ((_modalAbove$ref$curre = modalAbove === null || modalAbove === void 0 || (_modalAbove$ref = modalAbove.ref) === null || _modalAbove$ref === void 0 || (_modalAbove$ref = _modalAbove$ref.current) === null || _modalAbove$ref === void 0 ? void 0 : _modalAbove$ref.offsetHeight) !== null && _modalAbove$ref$curre !== void 0 ? _modalAbove$ref$curre : 0) / 2 - currentModalHeight / 2 + 20;
-		}
-		const animation = openedModals.length > 1 && position === 0 && previsousOpenedModales.length < openedModals.length;
-		return createPortal(/* @__PURE__ */ jsx("div", {
-			className: cn(backdropClassName, modalStyle.backdrop({
-				open: true,
-				visible: isVisible
-			})),
-			"data-testid": dataTestId ? `${dataTestId}-backdrop` : void 0,
-			"data-visible": isVisible,
-			onClick: handleClose,
-			onFocus: stopFocus,
-			onKeyDown: () => {},
-			children: /* @__PURE__ */ jsx("dialog", {
-				"aria-label": ariaLabel,
-				"aria-modal": true,
-				className: cn(className, modalStyle.modal({
-					animation,
-					image: !!image,
-					placement,
-					positivePosition: position > 0,
-					size
-				})),
-				"data-size": size,
-				"data-testid": dataTestId,
-				id,
-				onCancel: stopCancel,
-				onClose: stopCancel,
-				onKeyDown: handleFocusTrap,
-				onKeyUp: handleKeyUp,
-				open: true,
-				ref: dialogRef,
-				style: _objectSpread2(_objectSpread2({}, assignInlineVars({
-					[topModal]: `-${top}px`,
-					[positionModal]: `${position * 50}px`
-				})), style),
-				tabIndex: 0,
-				children: image ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
-					alignItems: "flex-end",
-					className: modalStyle.imageContainer,
-					justifyContent: "center",
-					children: /* @__PURE__ */ jsx("img", {
-						alt: "illustration",
-						className: modalStyle.image,
-						height: "auto",
-						src: image,
-						width: "auto"
-					})
-				}), /* @__PURE__ */ jsx(Stack, {
-					className: modalStyle.content,
-					gap: 5,
-					children
-				})] }) : children
-			})
-		}), containerRef.current);
-	};
-});
+			return createPortal(/* @__PURE__ */ jsx("div", {
+				className: cn(backdropClassName, modalStyle.backdrop),
+				style: backdropStyle,
+				"data-testid": dataTestId ? `${dataTestId}-backdrop` : void 0,
+				onPointerDown: handlePointerDown,
+				onPointerUp: handleClose,
+				onFocus: stopFocus,
+				onKeyDown: () => {},
+				children: /* @__PURE__ */ jsx("dialog", {
+					"aria-label": ariaLabel,
+					"aria-modal": true,
+					className: cn(className, modalStyle.modal({
+						image: !!image,
+						placement,
+						positivePosition: position > 0,
+						size
+					})),
+					"data-size": size,
+					"data-testid": dataTestId,
+					id,
+					onCancel: stopCancel,
+					onClose: stopCancel,
+					onKeyDown: handleFocusTrap,
+					onKeyUp: handleKeyUp,
+					open,
+					ref: dialogRef,
+					style: _objectSpread2(_objectSpread2({}, assignInlineVars({
+						[nestedModalTop]: `-${top}px`,
+						[nestedModalScale]: String(1 - position * .1)
+					})), style),
+					tabIndex: 0,
+					children: image ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Stack, {
+						alignItems: "flex-end",
+						className: modalStyle.imageContainer,
+						justifyContent: "center",
+						children: /* @__PURE__ */ jsx("img", {
+							alt: "illustration",
+							className: modalStyle.image,
+							height: "auto",
+							src: image,
+							width: "auto"
+						})
+					}), /* @__PURE__ */ jsx(Stack, {
+						className: modalStyle.content,
+						gap: 5,
+						children
+					})] }) : children
+				})
+			}), containerRef.current);
+		};
+	}))();
+}
 
 //#endregion
 init_Dialog();

package/dist/components/Modal/components/Disclosure.js

@@ -4,44 +4,46 @@ import { cloneElement, isValidElement, useEffect, useMemo } from "react";
 
 //#region src/components/Modal/components/Disclosure.tsx
 var Disclosure;
-var init_Disclosure = __esmMin(() => {
-	Disclosure = ({ disclosure, handleOpen, visible, handleClose, toggle, id, ref }) => {
-		useEffect(() => {
-			const element = ref.current;
-			element === null || element === void 0 || element.addEventListener("click", handleOpen);
-			return () => {
-				element === null || element === void 0 || element.removeEventListener("click", handleOpen);
-			};
-		}, [
-			handleOpen,
-			ref,
-			disclosure
-		]);
-		const finalDisclosure = useMemo(() => {
-			if (typeof disclosure === "function") return disclosure({
-				close: handleClose,
-				modalId: id,
-				show: handleOpen,
+function init_Disclosure() {
+	return (init_Disclosure = __esmMin(() => {
+		Disclosure = ({ disclosure, handleOpen, visible, handleClose, toggle, id, ref }) => {
+			useEffect(() => {
+				const element = ref.current;
+				element === null || element === void 0 || element.addEventListener("click", handleOpen);
+				return () => {
+					element === null || element === void 0 || element.removeEventListener("click", handleOpen);
+				};
+			}, [
+				handleOpen,
+				ref,
+				disclosure
+			]);
+			const finalDisclosure = useMemo(() => {
+				if (typeof disclosure === "function") return disclosure({
+					close: handleClose,
+					modalId: id,
+					show: handleOpen,
+					toggle,
+					visible
+				});
+				return disclosure;
+			}, [
+				disclosure,
+				handleOpen,
+				handleClose,
+				id,
 				toggle,
 				visible
+			]);
+			if (!isValidElement(finalDisclosure)) return null;
+			return cloneElement(finalDisclosure, {
+				"aria-controls": id,
+				"aria-haspopup": "dialog",
+				ref
 			});
-			return disclosure;
-		}, [
-			disclosure,
-			handleOpen,
-			handleClose,
-			id,
-			toggle,
-			visible
-		]);
-		if (!isValidElement(finalDisclosure)) return null;
-		return cloneElement(finalDisclosure, {
-			"aria-controls": id,
-			"aria-haspopup": "dialog",
-			ref
-		});
-	};
-});
+		};
+	}))();
+}
 
 //#endregion
 init_Disclosure();

package/dist/components/Modal/constants.css.d.ts

@@ -0,0 +1,11 @@
+import type { StyleRule } from '@vanilla-extract/css';
+import type { ModalPlacement, ModalSize } from './types';
+export declare const MODAL_WIDTH: Record<ModalSize, number>;
+export declare const ANIMATION_DURATION_MS = 250;
+export declare const ANIMATION_EASING_OPACITY = "ease";
+export declare const animationEasingTranslation: `var(--${string})`;
+export declare const animationDuration: `var(--${string})`;
+export declare const animationDurationTranslation: `var(--${string})`;
+export declare const offscreenTranslation: `var(--${string})`;
+export declare const MODAL_PLACEMENT: Record<ModalPlacement, StyleRule>;
+//# sourceMappingURL=constants.css.d.ts.map

package/dist/components/Modal/constants.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.css.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/constants.css.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMjD,CAAA;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAA;AACxC,eAAO,MAAM,wBAAwB,SAAS,CAAA;AAE9C,eAAO,MAAM,0BAA0B,oBAAc,CAAA;AACrD,eAAO,MAAM,iBAAiB,oBAAc,CAAA;AAC5C,eAAO,MAAM,4BAA4B,oBAAc,CAAA;AACvD,eAAO,MAAM,oBAAoB,oBAAc,CAAA;AAE/C,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,cAAc,EAAE,SAAS,CAmE7D,CAAA"}

package/dist/components/Modal/index.js

@@ -8,70 +8,71 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Modal/index.tsx
 var Modal;
-var init_Modal = __esmMin(() => {
-	init_Disclosure();
-	init_ModalContent();
-	init_ModalProvider();
-	Modal = ({ ariaLabel = "modal", id, children, disclosure, hideOnClickOutside = true, hideOnEsc = true, isClosable = true, closeButtonSentiment = "neutral", onClose, onBeforeClose, onOpen, open = false, placement = "center", preventBodyScroll = true, size = "small", className, "data-testid": dataTestId, backdropClassName, image, style, ref, isDrawer }) => {
-		const [visible, setVisible] = useState(false);
-		const controlId = useId();
-		const disclosureRef = useRef(null);
-		const handleOpen = useCallback(() => {
-			setVisible(true);
-			onOpen === null || onOpen === void 0 || onOpen();
-		}, [onOpen]);
-		const handleClose = useCallback(() => {
-			var _disclosureRef$curren;
-			(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
-			if (onClose) onClose();
-			else {
-				const promise = onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose();
-				if (promise && "catch" in promise) promise.catch(() => null);
-				setVisible(false);
-			}
-		}, [onBeforeClose, onClose]);
-		const handleToggle = useCallback(() => {
-			var _disclosureRef$curren2;
-			(_disclosureRef$curren2 = disclosureRef.current) === null || _disclosureRef$curren2 === void 0 || _disclosureRef$curren2.focus();
-			setVisible((current) => !current);
-		}, []);
-		const finalId = id !== null && id !== void 0 ? id : controlId;
-		const Container = useContext(ModalContext) ? Fragment : ModalProvider;
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [disclosure ? /* @__PURE__ */ jsx(Disclosure, {
-			disclosure,
-			handleClose,
-			handleOpen,
-			id: finalId,
-			ref: disclosureRef,
-			toggle: handleToggle,
-			visible
-		}) : null, /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(ModalContent, {
-			ariaLabel,
-			backdropClassName,
-			className,
-			dataTestId,
-			finalId,
-			finalSize: size,
-			handleClose,
-			handleOpen,
-			handleToggle,
-			hideOnClickOutside,
-			hideOnEsc,
-			image,
-			closeButtonSentiment,
-			isClosable,
-			isDrawer,
-			open,
-			placement,
-			preventBodyScroll,
-			ref,
-			style,
-			visible,
-			children
-		}) })] });
-	};
-	Modal.displayName = "Modal";
-});
+function init_Modal() {
+	return (init_Modal = __esmMin(() => {
+		init_Disclosure();
+		init_ModalContent();
+		init_ModalProvider();
+		Modal = ({ ariaLabel = "modal", id, children, disclosure, hideOnClickOutside = true, hideOnEsc = true, isClosable = true, closeButtonSentiment = "neutral", onClose, onBeforeClose, onOpen, open = false, placement = "center", preventBodyScroll = true, size = "small", className, "data-testid": dataTestId, backdropClassName, image, style, ref, isDrawer }) => {
+			const [visible, setVisible] = useState(false);
+			const controlId = useId();
+			const disclosureRef = useRef(null);
+			const handleOpen = useCallback(() => {
+				setVisible(true);
+				onOpen === null || onOpen === void 0 || onOpen();
+			}, [onOpen]);
+			const handleClose = useCallback(() => {
+				var _disclosureRef$curren;
+				(_disclosureRef$curren = disclosureRef.current) === null || _disclosureRef$curren === void 0 || _disclosureRef$curren.focus();
+				if (onClose) onClose();
+				else {
+					const promise = onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose();
+					if (promise && "catch" in promise) promise.catch(() => null);
+					setVisible(false);
+				}
+			}, [onBeforeClose, onClose]);
+			const handleToggle = useCallback(() => {
+				var _disclosureRef$curren2;
+				(_disclosureRef$curren2 = disclosureRef.current) === null || _disclosureRef$curren2 === void 0 || _disclosureRef$curren2.focus();
+				setVisible((current) => !current);
+			}, []);
+			const finalId = id !== null && id !== void 0 ? id : controlId;
+			const Container = useContext(ModalContext) ? Fragment : ModalProvider;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [disclosure ? /* @__PURE__ */ jsx(Disclosure, {
+				disclosure,
+				handleClose,
+				handleOpen,
+				id: finalId,
+				ref: disclosureRef,
+				toggle: handleToggle,
+				visible
+			}) : null, /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(ModalContent, {
+				ariaLabel,
+				backdropClassName,
+				className,
+				dataTestId,
+				finalId,
+				finalSize: size,
+				handleClose,
+				handleOpen,
+				handleToggle,
+				hideOnClickOutside,
+				hideOnEsc,
+				image,
+				closeButtonSentiment,
+				isClosable,
+				isDrawer,
+				open: visible || open,
+				placement,
+				preventBodyScroll,
+				ref,
+				style,
+				children
+			}) })] });
+		};
+		Modal.displayName = "Modal";
+	}))();
+}
 
 //#endregion
 init_Modal();