@evolve.ui/core-components 1.0.0

package/Modal-CiBqXyiK.cjs

@@ -0,0 +1,306 @@
+const require_windowSizeProvider = require("./windowSizeProvider-BMaATFiZ.cjs");
+const require_hooks_usePrevious = require("./hooks/usePrevious.cjs");
+const require_components = require("./components-CL4KcKF0.cjs");
+const require_modal_context = require("./modal/context.cjs");
+const require_modal_useCloseModal = require("./modal/useCloseModal.cjs");
+const require_effectEventListener = require("./effectEventListener-DmVY5Sgy.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let jotai = require("jotai");
+let react_dom = require("react-dom");
+let jotai_utils = require("jotai/utils");
+//#region src/Modal/components/Backdrop/Backdrop.tsx
+const Backdrop = ({ children, closeModalOnBackdropClick, show }) => {
+	const closeModal = require_modal_useCloseModal.useCloseModal("backdrop");
+	const { modalAnimationAtom } = (0, react.useContext)(require_modal_context.ModalContext);
+	const backdropRef = (0, react.useRef)(null);
+	const [modalAnimation, setModalAnimation] = (0, jotai.useAtom)(modalAnimationAtom);
+	(0, react.useEffect)(() => {
+		if (show && modalAnimation === "") setModalAnimation("opening");
+	}, [
+		modalAnimation,
+		setModalAnimation,
+		show
+	]);
+	(0, react.useEffect)(() => {
+		if (!closeModalOnBackdropClick) return;
+		return require_effectEventListener.effectEventListener(window, "mousedown", (event) => {
+			if (event.target === backdropRef.current) closeModal();
+		});
+	}, [closeModal, closeModalOnBackdropClick]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _evolve_ui_theme_system.cn)("hui-modal-backdrop opacity-0", { "fixed bottom-0 left-0 right-0 top-0 z-[1001] flex items-center justify-center bg-background-overlay": show }, "transition-opacity duration-200 ease-in", { "opacity-100": modalAnimation === "opening" }, { "opacity-0": modalAnimation === "closing" }),
+		ref: backdropRef,
+		children
+	});
+};
+//#endregion
+//#region src/Modal/components/PreventModalScroll/PreventModalScroll.tsx
+let openLockCount = 0;
+let previousBodyStyles = null;
+let savedScrollPosition = 0;
+let iosTouchCleanup;
+/**
+* Prevents scrolling of the page while the modal is open.
+* Uses a unified approach with additional touch event handling for iOS Safari.
+*
+* Can be disabled with `preventScrollWhileOpen={false}` on the `Modal`.
+*/
+const PreventModalScroll = () => {
+	(0, react.useEffect)(() => {
+		const body = document.body;
+		if (openLockCount === 0) {
+			const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+			savedScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+			previousBodyStyles = {
+				overflow: body.style.overflow,
+				paddingRight: body.style.paddingRight,
+				position: body.style.position,
+				top: body.style.top,
+				width: body.style.width
+			};
+			const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+			if (scrollBarWidth > 0) body.style.paddingRight = `${scrollBarWidth}px`;
+			body.style.overflow = "hidden";
+			body.style.position = "fixed";
+			body.style.top = `-${savedScrollPosition}px`;
+			body.style.width = "100%";
+			if (isIOS) {
+				const preventDefault = (e) => {
+					const target = e.target;
+					if (!(target.closest("[data-testid=\"modal-content\"]") || target.closest(".hui-modal-container"))) e.preventDefault();
+				};
+				document.addEventListener("touchstart", preventDefault, { passive: false });
+				document.addEventListener("touchmove", preventDefault, { passive: false });
+				iosTouchCleanup = () => {
+					document.removeEventListener("touchstart", preventDefault);
+					document.removeEventListener("touchmove", preventDefault);
+				};
+			}
+		}
+		openLockCount += 1;
+		return () => {
+			openLockCount -= 1;
+			if (openLockCount === 0) {
+				iosTouchCleanup?.();
+				iosTouchCleanup = void 0;
+				body.style.overflow = previousBodyStyles?.overflow ?? "";
+				body.style.position = previousBodyStyles?.position ?? "";
+				body.style.top = previousBodyStyles?.top ?? "";
+				body.style.width = previousBodyStyles?.width ?? "";
+				body.style.paddingRight = previousBodyStyles?.paddingRight ?? "";
+				previousBodyStyles = null;
+				window.scrollTo(0, savedScrollPosition);
+			}
+		};
+	}, []);
+	return null;
+};
+//#endregion
+//#region src/Modal/ComposableModal.tsx
+/**
+* The actual modal logic. This is the "composable" version of the modal.
+*/
+const ComposableModal = ({ children, className, closeModalOnBackdropClick = true, "data-testid": dataTestId, handleClose: handleCloseProp, hasContentPager = false, hasProgressSteps = false, mobileFullScreen = false, onModalCloseAnimationEnd, position = "center", preventScrollWhileOpen = true, show: showProp }) => {
+	const [modalTarget, setModalTarget] = (0, react.useState)(null);
+	const [show, setShow] = (0, react.useState)(showProp);
+	const isMobile = require_windowSizeProvider.useWindowIsMobile();
+	const modalAtoms = (0, react.useMemo)(() => ({
+		closeModalOnBackdropClickAtom: (0, jotai_utils.atomWithReset)(true),
+		isMobileKeyboardOpen: (0, jotai_utils.atomWithReset)(false),
+		modalAnimationAtom: (0, jotai_utils.atomWithReset)(""),
+		modalFullScreenAtom: (0, jotai_utils.atomWithReset)(mobileFullScreen),
+		modalHasFooterAtom: (0, jotai_utils.atomWithReset)(false),
+		modalHasProgressStepsAtom: (0, jotai_utils.atomWithReset)(hasProgressSteps),
+		modalRefAtom: (0, jotai_utils.atomWithReset)({ current: null }),
+		scrollTopAtom: (0, jotai_utils.atomWithReset)(0),
+		showBottomScrollHintAtom: (0, jotai_utils.atomWithReset)(false),
+		showTopScrollHintAtom: (0, jotai_utils.atomWithReset)(false)
+	}), [hasProgressSteps, mobileFullScreen]);
+	const modalAnimation = (0, jotai.useAtomValue)(modalAtoms.modalAnimationAtom);
+	const [isMobileKeyboardOpen, setIsMobileKeyboardOpen] = (0, jotai.useAtom)(modalAtoms.isMobileKeyboardOpen);
+	const handleClose = (0, react.useCallback)((handleCloseData) => {
+		setShow(false);
+		handleCloseProp(handleCloseData);
+	}, [handleCloseProp]);
+	(0, react.useEffect)(() => {
+		const target = document.querySelector(".hui-modal-target");
+		if (!target) throw new Error("Modal target not found, add one in the DOM tree.");
+		setModalTarget(target);
+	}, []);
+	const ref = (0, react.useRef)(null);
+	const [viewportHeight, setViewportHeight] = (0, react.useState)({
+		current: 0,
+		initial: 0
+	});
+	const updateViewport = (0, react.useCallback)(() => {
+		if (typeof window === "undefined" || typeof window.visualViewport === "undefined") return;
+		const currentViewportHeight = window.visualViewport?.height ?? 0;
+		if (viewportHeight.initial === 0) setViewportHeight({
+			current: currentViewportHeight,
+			initial: window.visualViewport?.height ?? 0
+		});
+		else {
+			const isLessThanInitial = Boolean(currentViewportHeight < viewportHeight.initial);
+			setIsMobileKeyboardOpen(isLessThanInitial);
+			setViewportHeight((prev) => ({
+				current: currentViewportHeight,
+				initial: prev.initial
+			}));
+		}
+	}, [setIsMobileKeyboardOpen, viewportHeight.initial]);
+	(0, react.useEffect)(() => {
+		if (typeof window !== "undefined" && typeof window.visualViewport !== "undefined" && isMobile) {
+			updateViewport();
+			window.visualViewport?.addEventListener("resize", updateViewport);
+			return () => window.visualViewport?.removeEventListener("resize", updateViewport);
+		}
+	}, [isMobile, updateViewport]);
+	if (!modalTarget || !show) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_modal_context.ModalContext.Provider, {
+		value: {
+			handleClose,
+			onModalCloseAnimationEnd,
+			...modalAtoms
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HandleShowProp, {
+			setShow,
+			show,
+			showProp
+		})
+	});
+	const modal = (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Backdrop, {
+		closeModalOnBackdropClick,
+		show,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dialog", {
+			"aria-label": "Modal",
+			className: (0, _evolve_ui_theme_system.cn)("hui-modal-container group relative flex", "max-h-[calc(100vh-64px)] w-[588px] flex-col overflow-hidden rounded-md border-none bg-background-primary p-0", "xsMax:w-[375px]", "mobileSmall:!w-full", { "absolute top-lg": position === "top" }, "transition-opacity duration-100 ease-in", {
+				"animate-fadeIn": modalAnimation === "opening" && hasContentPager,
+				"animate-fadeInScaled": modalAnimation === "opening" && !hasContentPager
+			}, { "animate-fadeOut": modalAnimation === "closing" }, { "group/fullscreen mobile:top-0 mobile:flex mobile:h-full mobile:max-h-full mobile:w-screen mobile:min-w-[100vw] mobile:rounded-none": mobileFullScreen }, className),
+			"data-hui-id": "Modal",
+			"data-testid": dataTestId,
+			onAnimationEnd: () => {
+				if (modalAnimation === "closing") onModalCloseAnimationEnd?.();
+			},
+			open: show,
+			ref,
+			children: [
+				preventScrollWhileOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreventModalScroll, {}),
+				children,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, _evolve_ui_theme_system.cn)("relative", {
+						"mobile:group-only/fullscreen:has-[#modal-footer.flex]:min-h-[74px] smMin:has-[#modal-footer.flex]:min-h-[148px]": hasContentPager,
+						"mobile:group-only/fullscreen:hidden": isMobileKeyboardOpen && hasContentPager
+					}),
+					id: "modal-actions-portal"
+				})
+			]
+		})
+	}), modalTarget);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_modal_context.ModalContext.Provider, {
+		value: {
+			handleClose,
+			onModalCloseAnimationEnd,
+			...modalAtoms
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HandleShowProp, {
+			setShow,
+			show,
+			showProp
+		}), modal]
+	});
+};
+const HandleShowProp = ({ setShow, show, showProp }) => {
+	const previousShowProp = require_hooks_usePrevious.usePrevious(showProp);
+	const closeModal = require_modal_useCloseModal.useCloseModal("setShow set to false");
+	(0, react.useEffect)(() => {
+		if (previousShowProp === void 0) return;
+		if (!(showProp !== previousShowProp)) return;
+		if (!(show !== showProp)) return;
+		if (showProp) setShow(true);
+		else closeModal();
+	}, [
+		show,
+		previousShowProp,
+		showProp,
+		closeModal,
+		setShow
+	]);
+	return null;
+};
+//#endregion
+//#region src/Modal/Modal.tsx
+/**
+* Primary component for creating modals.
+* When rendered, it automatically opens the modal and backdrop.
+*
+* These preprovided components give you the styles of the modal.
+*
+* By default, you get a particular preset of the `Modal` component that is used for simple modals.
+* It has (optionally) a title, subtitle, body, and actions.
+*
+* If you need to get a little bit more custom, be sure to read the docs and add `type="composable"` to the this component.
+*
+* Generally, the structure for a modal is:
+* ```tsx
+* <Modal>
+*     <ModalHeader>
+*         <BackButton />
+*         <CloseButton />
+*         <ModalTitle>Modal Title</ModalTitle>
+*     </ModalHeader>
+*     <ModalContent>
+*         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+*         Content, whatever the main body of the modal is.
+*     </ModalContent>
+*     <ModalActions>Actions (usually buttons) go here</ModalActions>
+* </Modal>
+* ```
+*/
+const Modal = ({ className, closeModalOnBackdropClick, "data-testid": dataTestId, handleClose, hasContentPager, hasProgressSteps, mobileFullScreen, onModalCloseAnimationEnd, position, preventScrollWhileOpen, show, ...rest }) => {
+	if (rest.type === "composable") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposableModal, {
+		className,
+		closeModalOnBackdropClick,
+		"data-testid": dataTestId,
+		handleClose,
+		hasContentPager,
+		hasProgressSteps,
+		mobileFullScreen,
+		onModalCloseAnimationEnd,
+		position,
+		preventScrollWhileOpen,
+		show,
+		children: rest.children
+	});
+	const { actions, body, hideClose, onBackClicked, subtitle, title } = rest;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComposableModal, {
+		className,
+		closeModalOnBackdropClick,
+		"data-testid": dataTestId,
+		handleClose,
+		hasContentPager,
+		hasProgressSteps,
+		mobileFullScreen,
+		onModalCloseAnimationEnd,
+		position,
+		preventScrollWhileOpen,
+		show,
+		children: [
+			onBackClicked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.BackButton, { onClick: onBackClicked }),
+			!hideClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.CloseButton, {}),
+			Boolean(title) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ModalHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ModalTitle, { children: title }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components.ModalContent, { children: [Boolean(subtitle) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ModalSubTitle, { children: subtitle }), Boolean(body) && body] }),
+			Boolean(actions) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.ModalActions, { children: actions })
+		]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Modal", {
+	enumerable: true,
+	get: function() {
+		return Modal;
+	}
+});
+
+//# sourceMappingURL=Modal-CiBqXyiK.cjs.map

package/Modal-CiBqXyiK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-CiBqXyiK.cjs","names":["useCloseModal","ModalContext","effectEventListener","useWindowIsMobile","ModalContext","usePrevious","useCloseModal","BackButton","CloseButton","ModalHeader","ModalTitle","ModalContent","ModalSubTitle","ModalActions"],"sources":["../src/Modal/components/Backdrop/Backdrop.tsx","../src/Modal/components/PreventModalScroll/PreventModalScroll.tsx","../src/Modal/ComposableModal.tsx","../src/Modal/Modal.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { useAtom } from 'jotai';\nimport { ReactNode, useContext, useEffect, useRef } from 'react';\n\nimport { effectEventListener } from '../../../utils/effectEventListener';\nimport { ModalContext } from '../../context';\nimport { useCloseModal } from '../../hooks/useCloseModal';\n\ntype Props = {\n    children?: ReactNode;\n    closeModalOnBackdropClick?: boolean;\n    show: boolean;\n};\n\nexport const Backdrop = ({ children, closeModalOnBackdropClick, show }: Props) => {\n    const closeModal = useCloseModal('backdrop');\n    const { modalAnimationAtom } = useContext(ModalContext);\n    const backdropRef = useRef<HTMLDivElement>(null);\n    const [modalAnimation, setModalAnimation] = useAtom(modalAnimationAtom);\n\n    // NEEDS A DELAY TO ALLOW THE MODAL TO ANIMATE IN\n    useEffect(() => {\n        if (show && modalAnimation === '') {\n            setModalAnimation('opening');\n        }\n    }, [modalAnimation, setModalAnimation, show]);\n\n    useEffect(() => {\n        if (!closeModalOnBackdropClick) {\n            return;\n        }\n\n        return effectEventListener(window, 'mousedown', (event: Event) => {\n            if (event.target === backdropRef.current) {\n                closeModal();\n            }\n        });\n    }, [closeModal, closeModalOnBackdropClick]);\n\n    return (\n        <div\n            className={cn(\n                // GENERAL CLOSED\n                'hui-modal-backdrop opacity-0',\n                // OPEN\n                {\n                    'fixed bottom-0 left-0 right-0 top-0 z-[1001] flex items-center justify-center bg-background-overlay':\n                        show,\n                },\n                // GENERAL ANIMATION\n                'transition-opacity duration-200 ease-in',\n                // OPEN ANIMATION\n                { 'opacity-100': modalAnimation === 'opening' },\n                // CLOSE ANIMATION\n                { 'opacity-0': modalAnimation === 'closing' }\n            )}\n            ref={backdropRef}\n        >\n            {children}\n        </div>\n    );\n};\n","import { useEffect } from 'react';\n\n// Open modals share a single body scroll-lock. Module-scoped and ref-counted\n// (local deviation from hammer — mirrors Drawer's lock): hammer's per-instance\n// save/restore leaves the body locked forever when two instances overlap\n// (docs pages embedding multiple open modals, auto-reopening stories), because\n// the later instance saves the earlier one's `overflow: hidden` as \"original\".\n// The first instance to mount captures the body's real styles + scroll\n// position; the last to unmount restores them.\nlet openLockCount = 0;\nlet previousBodyStyles: {\n    overflow: string;\n    paddingRight: string;\n    position: string;\n    top: string;\n    width: string;\n} | null = null;\nlet savedScrollPosition = 0;\nlet iosTouchCleanup: (() => void) | undefined;\n\n/**\n * Prevents scrolling of the page while the modal is open.\n * Uses a unified approach with additional touch event handling for iOS Safari.\n *\n * Can be disabled with `preventScrollWhileOpen={false}` on the `Modal`.\n */\nexport const PreventModalScroll = () => {\n    useEffect(() => {\n        const body = document.body;\n\n        if (openLockCount === 0) {\n            const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);\n\n            // Store current scroll position and original styles\n            savedScrollPosition = window.pageYOffset || document.documentElement.scrollTop;\n            previousBodyStyles = {\n                overflow: body.style.overflow,\n                paddingRight: body.style.paddingRight,\n                position: body.style.position,\n                top: body.style.top,\n                width: body.style.width,\n            };\n\n            // Calculate scrollbar width and add padding to prevent content shift\n            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;\n            if (scrollBarWidth > 0) {\n                body.style.paddingRight = `${scrollBarWidth}px`;\n            }\n\n            // Apply scroll prevention\n            body.style.overflow = 'hidden';\n            body.style.position = 'fixed';\n            body.style.top = `-${savedScrollPosition}px`;\n            body.style.width = '100%';\n\n            // iOS-specific touch event handling\n            if (isIOS) {\n                const preventDefault = (e: TouchEvent) => {\n                    // Allow touch events on modal content but prevent on backdrop\n                    const target = e.target as Element;\n                    const isModalContent =\n                        target.closest('[data-testid=\"modal-content\"]') || target.closest('.hui-modal-container');\n\n                    if (!isModalContent) {\n                        e.preventDefault();\n                    }\n                };\n\n                // Add touch event listeners for iOS\n                document.addEventListener('touchstart', preventDefault, { passive: false });\n                document.addEventListener('touchmove', preventDefault, { passive: false });\n\n                iosTouchCleanup = () => {\n                    document.removeEventListener('touchstart', preventDefault);\n                    document.removeEventListener('touchmove', preventDefault);\n                };\n            }\n        }\n\n        openLockCount += 1;\n\n        // Cleanup function\n        return () => {\n            openLockCount -= 1;\n\n            if (openLockCount === 0) {\n                // Remove iOS touch event listeners if they exist\n                iosTouchCleanup?.();\n                iosTouchCleanup = undefined;\n\n                // Restore original styles\n                body.style.overflow = previousBodyStyles?.overflow ?? '';\n                body.style.position = previousBodyStyles?.position ?? '';\n                body.style.top = previousBodyStyles?.top ?? '';\n                body.style.width = previousBodyStyles?.width ?? '';\n                body.style.paddingRight = previousBodyStyles?.paddingRight ?? '';\n                previousBodyStyles = null;\n\n                // Restore scroll position\n                window.scrollTo(0, savedScrollPosition);\n            }\n        };\n    }, []);\n\n    return null;\n};\n","import { cn } from '@evolve.ui/theme-system';\nimport { useAtom, useAtomValue } from 'jotai';\nimport { atomWithReset } from 'jotai/utils';\nimport { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { usePrevious } from '../hooks/usePrevious';\nimport { useWindowIsMobile } from '../providers';\nimport { Backdrop } from './components/Backdrop/Backdrop';\nimport { PreventModalScroll } from './components/PreventModalScroll/PreventModalScroll';\nimport { ModalContext } from './context';\nimport { useCloseModal } from './hooks/useCloseModal';\n\ntype Props = {\n    /**\n     * Content of the modal.\n     *\n     * Generally, the structure for a modal is:\n     * ```tsx\n     * <Modal>\n     *     <ModalHeader>\n     *         <BackButton />\n     *         <CloseButton />\n     *         <ModalTitle>Modal Title</ModalTitle>\n     *     </ModalHeader>\n     *     <ModalContent>\n     *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>\n     *         Content, whatever the main body of the modal is.\n     *     </ModalContent>\n     *     <ModalActions>Actions (usually buttons) go here</ModalActions>\n     * </Modal>\n     * ```\n     */\n    children: ReactNode;\n    className?: string;\n    /**\n     * If true, the modal will close when the backdrop is clicked.\n     */\n    closeModalOnBackdropClick?: boolean;\n    /**\n     * Optional data-testid for the dialog element\n     */\n    'data-testid'?: string;\n    /**\n     * This is a callback that is called when the modal is trying to close itself.\n     *\n     * It should look something like\n     * ```tsx\n     * handleClose={() => setShow(false)}\n     * ```\n     *\n     * It optionally recieves a data object that is passed to the `useCloseModal` function.\n     * For the close button, this is by default `\"closed\"`.\n     * For the backdrop, this is by default `\"backdrop\"`\n     */\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim\n    handleClose: (handleCloseData?: any) => void;\n    /**\n     * If true, the modal will have a content pager.\n     * This is needed to prevent the modal from scaling upon opening.\n     */\n    hasContentPager?: boolean;\n    /**\n     * Needed for the progress steps to be shown with the correct animation.\n     */\n    hasProgressSteps?: boolean;\n    /**\n     * If true, the modal will be full screen on mobile.\n     */\n    mobileFullScreen?: boolean;\n    /**\n     * This is a callback that is called when the modal close animation ends.\n     */\n    onModalCloseAnimationEnd?: () => void;\n    /**\n     * This is the position of the modal.\n     * It can be either `'center'` or `'top'`.\n     */\n    position?: 'center' | 'top';\n    /**\n     * Prevents scrolling of the page while the modal is open.\n     *\n     * @default true\n     */\n    preventScrollWhileOpen?: boolean;\n    /**\n     * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.\n     */\n    show: boolean;\n};\n\n/**\n * The actual modal logic. This is the \"composable\" version of the modal.\n */\nexport const ComposableModal = ({\n    children,\n    className,\n    closeModalOnBackdropClick = true,\n    'data-testid': dataTestId,\n    handleClose: handleCloseProp,\n    hasContentPager = false,\n    hasProgressSteps = false,\n    mobileFullScreen = false,\n    onModalCloseAnimationEnd,\n    position = 'center',\n    preventScrollWhileOpen = true,\n    show: showProp,\n}: Props) => {\n    const [modalTarget, setModalTarget] = useState<HTMLElement | null>(null);\n    const [show, setShow] = useState(showProp);\n    const isMobile = useWindowIsMobile();\n\n    const modalAtoms = useMemo(\n        () => ({\n            closeModalOnBackdropClickAtom: atomWithReset(true),\n            isMobileKeyboardOpen: atomWithReset<boolean>(false),\n            modalAnimationAtom: atomWithReset<'opening' | 'closing' | ''>(''),\n            modalFullScreenAtom: atomWithReset<boolean>(mobileFullScreen),\n            modalHasFooterAtom: atomWithReset<boolean>(false),\n            modalHasProgressStepsAtom: atomWithReset<boolean>(hasProgressSteps),\n            modalRefAtom: atomWithReset<{ current: HTMLDialogElement | null }>({ current: null }),\n            scrollTopAtom: atomWithReset(0),\n            showBottomScrollHintAtom: atomWithReset<boolean>(false),\n            showTopScrollHintAtom: atomWithReset<boolean>(false),\n        }),\n        [hasProgressSteps, mobileFullScreen]\n    );\n\n    const modalAnimation = useAtomValue(modalAtoms.modalAnimationAtom);\n    const [isMobileKeyboardOpen, setIsMobileKeyboardOpen] = useAtom(modalAtoms.isMobileKeyboardOpen);\n\n    const handleClose = useCallback(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim\n        (handleCloseData?: any) => {\n            setShow(false); // Must be triggered before the handleCloseProp\n\n            handleCloseProp(handleCloseData);\n        },\n        [handleCloseProp]\n    );\n\n    useEffect(() => {\n        const target = document.querySelector('.hui-modal-target');\n\n        if (!target) {\n            throw new Error('Modal target not found, add one in the DOM tree.');\n        }\n\n        setModalTarget(target as HTMLElement);\n    }, []);\n\n    const ref = useRef<HTMLDialogElement | null>(null);\n\n    const [viewportHeight, setViewportHeight] = useState({ current: 0, initial: 0 });\n\n    const updateViewport = useCallback(() => {\n        if (typeof window === 'undefined' || typeof window.visualViewport === 'undefined') {\n            return;\n        }\n\n        const currentViewportHeight = window.visualViewport?.height ?? 0;\n\n        // Get initial viewport height\n        if (viewportHeight.initial === 0) {\n            setViewportHeight({\n                current: currentViewportHeight,\n                initial: window.visualViewport?.height ?? 0,\n            });\n        } else {\n            // Get the difference between the current viewport height and the initial viewport height\n            // This is to check if mobile keyboard is open\n            const isLessThanInitial = Boolean(currentViewportHeight < viewportHeight.initial);\n            setIsMobileKeyboardOpen(isLessThanInitial);\n            setViewportHeight((prev) => ({\n                current: currentViewportHeight,\n                initial: prev.initial,\n            }));\n        }\n    }, [setIsMobileKeyboardOpen, viewportHeight.initial]);\n\n    useEffect(() => {\n        if (typeof window !== 'undefined' && typeof window.visualViewport !== 'undefined' && isMobile) {\n            updateViewport();\n\n            window.visualViewport?.addEventListener('resize', updateViewport);\n\n            return () => window.visualViewport?.removeEventListener('resize', updateViewport);\n        }\n\n        return undefined;\n    }, [isMobile, updateViewport]);\n\n    if (!modalTarget || !show) {\n        return (\n            <ModalContext.Provider value={{ handleClose, onModalCloseAnimationEnd, ...modalAtoms }}>\n                <HandleShowProp\n                    setShow={setShow}\n                    show={show}\n                    showProp={showProp}\n                />\n            </ModalContext.Provider>\n        );\n    }\n\n    const modal = createPortal(\n        <Backdrop\n            closeModalOnBackdropClick={closeModalOnBackdropClick}\n            show={show}\n        >\n            <dialog\n                aria-label=\"Modal\"\n                className={cn(\n                    // GENERAL CLOSED\n                    'hui-modal-container group relative flex',\n                    // OPEN\n                    'max-h-[calc(100vh-64px)] w-[588px] flex-col overflow-hidden rounded-md border-none bg-background-primary p-0',\n                    // MOBILE\n                    'xsMax:w-[375px]',\n                    // SMALL MOBILE\n                    'mobileSmall:!w-full',\n                    // POSITION\n                    { 'absolute top-lg': position === 'top' },\n                    // GENERAL ANIMATION\n                    'transition-opacity duration-100 ease-in',\n                    // OPEN ANIMATION\n                    {\n                        'animate-fadeIn': modalAnimation === 'opening' && hasContentPager,\n                        'animate-fadeInScaled': modalAnimation === 'opening' && !hasContentPager,\n                    },\n                    // CLOSE ANIMATION\n                    { 'animate-fadeOut': modalAnimation === 'closing' },\n                    // FULL SCREEN\n                    {\n                        'group/fullscreen mobile:top-0 mobile:flex mobile:h-full mobile:max-h-full mobile:w-screen mobile:min-w-[100vw] mobile:rounded-none':\n                            mobileFullScreen,\n                    },\n                    className\n                )}\n                data-hui-id=\"Modal\"\n                data-testid={dataTestId}\n                onAnimationEnd={() => {\n                    if (modalAnimation === 'closing') {\n                        onModalCloseAnimationEnd?.();\n                    }\n                }}\n                open={show}\n                ref={ref}\n            >\n                {preventScrollWhileOpen && <PreventModalScroll />}\n                {children}\n                <div\n                    className={cn('relative', {\n                        // Use CSS :has() selector to immediately apply min-height when footer exists\n                        // Apply 148px on desktop, 74px on mobile fullscreen\n                        'mobile:group-only/fullscreen:has-[#modal-footer.flex]:min-h-[74px] smMin:has-[#modal-footer.flex]:min-h-[148px]':\n                            hasContentPager,\n                        // Hide the actions portal when the mobile keyboard is open\n                        'mobile:group-only/fullscreen:hidden': isMobileKeyboardOpen && hasContentPager,\n                    })}\n                    id=\"modal-actions-portal\"\n                />\n            </dialog>\n        </Backdrop>,\n        modalTarget\n    );\n\n    return (\n        <ModalContext.Provider value={{ handleClose, onModalCloseAnimationEnd, ...modalAtoms }}>\n            <HandleShowProp\n                setShow={setShow}\n                show={show}\n                showProp={showProp}\n            />\n            {modal}\n        </ModalContext.Provider>\n    );\n};\n\nconst HandleShowProp = ({\n    setShow,\n    show,\n    showProp,\n}: {\n    setShow: (value: boolean) => void;\n    show: boolean;\n    showProp: boolean;\n}) => {\n    const previousShowProp = usePrevious(showProp);\n    const closeModal = useCloseModal('setShow set to false');\n\n    useEffect(() => {\n        if (previousShowProp === undefined) {\n            return;\n        }\n\n        const propChanged = showProp !== previousShowProp;\n        if (!propChanged) {\n            return;\n        }\n\n        const showMustChange = show !== showProp;\n        if (!showMustChange) {\n            return;\n        }\n        if (showProp) {\n            setShow(true);\n        } else {\n            closeModal();\n        }\n    }, [show, previousShowProp, showProp, closeModal, setShow]);\n\n    return null;\n};\n","import { ComponentProps, ReactNode } from 'react';\n\nimport {\n    BackButton,\n    CloseButton,\n    ModalActions,\n    ModalContent,\n    ModalHeader,\n    ModalSubTitle,\n    ModalTitle,\n} from './components';\nimport { ComposableModal } from './ComposableModal';\n\ntype TemplatedModalProps = {\n    /**\n     * This is the actions of the modal. Usually buttons.\n     * It is rendered at the bottom of the modal.\n     *\n     * `ModalActions` is not rendered if this is not passed.\n     */\n    actions?: ReactNode;\n    /**\n     *  This is the main content of the modal.\n     */\n    body?: ReactNode;\n    /**\n     * If you want to pass children, set `type=\"composable\"`.\n     */\n    children?: never;\n    /**\n     * If true, the close button will not be shown.\n     */\n    hideClose?: boolean;\n    /**\n     * This is a callback that is called when the back button is clicked.\n     *\n     * When passed, the back button will be shown.\n     */\n    onBackClicked?: () => void;\n    /**\n     * If passed, this will be shown as a subtitle in the modal.\n     */\n    subtitle?: ReactNode;\n    /**\n     * If passed, this will be shown as a title in the modal.\n     *\n     * `ModalHeader` is not rendered if this is not passed.\n     */\n    title?: ReactNode;\n    /**\n     * Marks the type of modal as templated / simple.\n     */\n    type?: 'templated';\n};\n\ntype ComposableModalProps = {\n    /**\n     * Content of the modal.\n     *\n     * Generally, the structure for a modal is:\n     * ```tsx\n     * <Modal>\n     *     <ModalHeader>\n     *         <BackButton />\n     *         <CloseButton />\n     *         <ModalTitle>Modal Title</ModalTitle>\n     *     </ModalHeader>\n     *     <ModalContent>\n     *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>\n     *         Content, whatever the main body of the modal is.\n     *     </ModalContent>\n     *     <ModalActions>Actions (usually buttons) go here</ModalActions>\n     * </Modal>\n     * ```\n     */\n    children: ReactNode;\n    /**\n     * Marks the type of modal as composable.\n     */\n    type: 'composable';\n};\n\ntype Props = {\n    className?: string;\n    /**\n     * If true, the modal will close when the backdrop is clicked.\n     */\n    closeModalOnBackdropClick?: ComponentProps<typeof ComposableModal>['closeModalOnBackdropClick'];\n    /**\n     * Optional data-testid for the dialog element\n     */\n    'data-testid'?: string;\n    /**\n     * This is a callback that is called when the modal is trying to close itself.\n     *\n     * It should look something like\n     * ```tsx\n     * handleClose={() => setShow(false)}\n     * ```\n     *\n     * It optionally recieves a data object that is passed to the `useCloseModal` function.\n     * For the close button, this is by default `\"closed\"`.\n     * For the backdrop, this is by default `\"backdrop\"`\n     */\n    handleClose: ComponentProps<typeof ComposableModal>['handleClose'];\n    /**\n     * If true, the modal will have a content pager.\n     * This is needed to prevent the modal from scaling upon opening.\n     */\n    hasContentPager?: boolean;\n    /**\n     * Needed for the progress steps to be shown with the correct animation.\n     */\n    hasProgressSteps?: boolean;\n    /**\n     * If true, the modal will be full screen on mobile.\n     */\n    mobileFullScreen?: boolean;\n    /**\n     * This is a callback that is called when the modal close animation ends.\n     */\n    onModalCloseAnimationEnd?: ComponentProps<typeof ComposableModal>['onModalCloseAnimationEnd'];\n    /**\n     * This is the position of the modal.\n     * It can be either `'center'` or `'top'`.\n     */\n    position?: ComponentProps<typeof ComposableModal>['position'];\n    /**\n     * Prevents scrolling of the page while the modal is open.\n     *\n     * @default true\n     */\n    preventScrollWhileOpen?: ComponentProps<typeof ComposableModal>['preventScrollWhileOpen'];\n    /**\n     * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.\n     */\n    show: ComponentProps<typeof ComposableModal>['show'];\n} & (TemplatedModalProps | ComposableModalProps);\n\n/**\n * Primary component for creating modals.\n * When rendered, it automatically opens the modal and backdrop.\n *\n * These preprovided components give you the styles of the modal.\n *\n * By default, you get a particular preset of the `Modal` component that is used for simple modals.\n * It has (optionally) a title, subtitle, body, and actions.\n *\n * If you need to get a little bit more custom, be sure to read the docs and add `type=\"composable\"` to the this component.\n *\n * Generally, the structure for a modal is:\n * ```tsx\n * <Modal>\n *     <ModalHeader>\n *         <BackButton />\n *         <CloseButton />\n *         <ModalTitle>Modal Title</ModalTitle>\n *     </ModalHeader>\n *     <ModalContent>\n *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>\n *         Content, whatever the main body of the modal is.\n *     </ModalContent>\n *     <ModalActions>Actions (usually buttons) go here</ModalActions>\n * </Modal>\n * ```\n */\nexport const Modal = ({\n    className,\n    closeModalOnBackdropClick,\n    'data-testid': dataTestId,\n    handleClose,\n    hasContentPager,\n    hasProgressSteps,\n    mobileFullScreen,\n    onModalCloseAnimationEnd,\n    position,\n    preventScrollWhileOpen,\n    show,\n    ...rest\n}: Props) => {\n    if (rest.type === 'composable') {\n        return (\n            <ComposableModal\n                className={className}\n                closeModalOnBackdropClick={closeModalOnBackdropClick}\n                data-testid={dataTestId}\n                handleClose={handleClose}\n                hasContentPager={hasContentPager}\n                hasProgressSteps={hasProgressSteps}\n                mobileFullScreen={mobileFullScreen}\n                onModalCloseAnimationEnd={onModalCloseAnimationEnd}\n                position={position}\n                preventScrollWhileOpen={preventScrollWhileOpen}\n                show={show}\n            >\n                {rest.children}\n            </ComposableModal>\n        );\n    }\n\n    const { actions, body, hideClose, onBackClicked, subtitle, title } = rest;\n\n    return (\n        <ComposableModal\n            className={className}\n            closeModalOnBackdropClick={closeModalOnBackdropClick}\n            data-testid={dataTestId}\n            handleClose={handleClose}\n            hasContentPager={hasContentPager}\n            hasProgressSteps={hasProgressSteps}\n            mobileFullScreen={mobileFullScreen}\n            onModalCloseAnimationEnd={onModalCloseAnimationEnd}\n            position={position}\n            preventScrollWhileOpen={preventScrollWhileOpen}\n            show={show}\n        >\n            {onBackClicked && <BackButton onClick={onBackClicked} />}\n            {!hideClose && <CloseButton />}\n            {Boolean(title) && (\n                <ModalHeader>\n                    <ModalTitle>{title}</ModalTitle>\n                </ModalHeader>\n            )}\n            <ModalContent>\n                {Boolean(subtitle) && <ModalSubTitle>{subtitle}</ModalSubTitle>}\n                {Boolean(body) && body}\n            </ModalContent>\n            {Boolean(actions) && <ModalActions>{actions}</ModalActions>}\n        </ComposableModal>\n    );\n};\n"],"mappings":"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"}

package/Modal-DM0aXJZ5.d.cts

@@ -0,0 +1,265 @@
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/Modal/ComposableModal.d.ts
+type Props$1 = {
+  /**
+   * Content of the modal.
+   *
+   * Generally, the structure for a modal is:
+   * ```tsx
+   * <Modal>
+   *     <ModalHeader>
+   *         <BackButton />
+   *         <CloseButton />
+   *         <ModalTitle>Modal Title</ModalTitle>
+   *     </ModalHeader>
+   *     <ModalContent>
+   *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+   *         Content, whatever the main body of the modal is.
+   *     </ModalContent>
+   *     <ModalActions>Actions (usually buttons) go here</ModalActions>
+   * </Modal>
+   * ```
+   */
+  children: ReactNode;
+  className?: string;
+  /**
+   * If true, the modal will close when the backdrop is clicked.
+   */
+  closeModalOnBackdropClick?: boolean;
+  /**
+   * Optional data-testid for the dialog element
+   */
+  'data-testid'?: string;
+  /**
+   * This is a callback that is called when the modal is trying to close itself.
+   *
+   * It should look something like
+   * ```tsx
+   * handleClose={() => setShow(false)}
+   * ```
+   *
+   * It optionally recieves a data object that is passed to the `useCloseModal` function.
+   * For the close button, this is by default `"closed"`.
+   * For the backdrop, this is by default `"backdrop"`
+   */
+  handleClose: (handleCloseData?: any) => void;
+  /**
+   * If true, the modal will have a content pager.
+   * This is needed to prevent the modal from scaling upon opening.
+   */
+  hasContentPager?: boolean;
+  /**
+   * Needed for the progress steps to be shown with the correct animation.
+   */
+  hasProgressSteps?: boolean;
+  /**
+   * If true, the modal will be full screen on mobile.
+   */
+  mobileFullScreen?: boolean;
+  /**
+   * This is a callback that is called when the modal close animation ends.
+   */
+  onModalCloseAnimationEnd?: () => void;
+  /**
+   * This is the position of the modal.
+   * It can be either `'center'` or `'top'`.
+   */
+  position?: 'center' | 'top';
+  /**
+   * Prevents scrolling of the page while the modal is open.
+   *
+   * @default true
+   */
+  preventScrollWhileOpen?: boolean;
+  /**
+   * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.
+   */
+  show: boolean;
+};
+/**
+ * The actual modal logic. This is the "composable" version of the modal.
+ */
+declare const ComposableModal: ({
+  children,
+  className,
+  closeModalOnBackdropClick,
+  "data-testid": dataTestId,
+  handleClose: handleCloseProp,
+  hasContentPager,
+  hasProgressSteps,
+  mobileFullScreen,
+  onModalCloseAnimationEnd,
+  position,
+  preventScrollWhileOpen,
+  show: showProp
+}: Props$1) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+//#region src/Modal/Modal.d.ts
+type TemplatedModalProps = {
+  /**
+   * This is the actions of the modal. Usually buttons.
+   * It is rendered at the bottom of the modal.
+   *
+   * `ModalActions` is not rendered if this is not passed.
+   */
+  actions?: ReactNode;
+  /**
+   *  This is the main content of the modal.
+   */
+  body?: ReactNode;
+  /**
+   * If you want to pass children, set `type="composable"`.
+   */
+  children?: never;
+  /**
+   * If true, the close button will not be shown.
+   */
+  hideClose?: boolean;
+  /**
+   * This is a callback that is called when the back button is clicked.
+   *
+   * When passed, the back button will be shown.
+   */
+  onBackClicked?: () => void;
+  /**
+   * If passed, this will be shown as a subtitle in the modal.
+   */
+  subtitle?: ReactNode;
+  /**
+   * If passed, this will be shown as a title in the modal.
+   *
+   * `ModalHeader` is not rendered if this is not passed.
+   */
+  title?: ReactNode;
+  /**
+   * Marks the type of modal as templated / simple.
+   */
+  type?: 'templated';
+};
+type ComposableModalProps = {
+  /**
+   * Content of the modal.
+   *
+   * Generally, the structure for a modal is:
+   * ```tsx
+   * <Modal>
+   *     <ModalHeader>
+   *         <BackButton />
+   *         <CloseButton />
+   *         <ModalTitle>Modal Title</ModalTitle>
+   *     </ModalHeader>
+   *     <ModalContent>
+   *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+   *         Content, whatever the main body of the modal is.
+   *     </ModalContent>
+   *     <ModalActions>Actions (usually buttons) go here</ModalActions>
+   * </Modal>
+   * ```
+   */
+  children: ReactNode;
+  /**
+   * Marks the type of modal as composable.
+   */
+  type: 'composable';
+};
+type Props = {
+  className?: string;
+  /**
+   * If true, the modal will close when the backdrop is clicked.
+   */
+  closeModalOnBackdropClick?: ComponentProps<typeof ComposableModal>['closeModalOnBackdropClick'];
+  /**
+   * Optional data-testid for the dialog element
+   */
+  'data-testid'?: string;
+  /**
+   * This is a callback that is called when the modal is trying to close itself.
+   *
+   * It should look something like
+   * ```tsx
+   * handleClose={() => setShow(false)}
+   * ```
+   *
+   * It optionally recieves a data object that is passed to the `useCloseModal` function.
+   * For the close button, this is by default `"closed"`.
+   * For the backdrop, this is by default `"backdrop"`
+   */
+  handleClose: ComponentProps<typeof ComposableModal>['handleClose'];
+  /**
+   * If true, the modal will have a content pager.
+   * This is needed to prevent the modal from scaling upon opening.
+   */
+  hasContentPager?: boolean;
+  /**
+   * Needed for the progress steps to be shown with the correct animation.
+   */
+  hasProgressSteps?: boolean;
+  /**
+   * If true, the modal will be full screen on mobile.
+   */
+  mobileFullScreen?: boolean;
+  /**
+   * This is a callback that is called when the modal close animation ends.
+   */
+  onModalCloseAnimationEnd?: ComponentProps<typeof ComposableModal>['onModalCloseAnimationEnd'];
+  /**
+   * This is the position of the modal.
+   * It can be either `'center'` or `'top'`.
+   */
+  position?: ComponentProps<typeof ComposableModal>['position'];
+  /**
+   * Prevents scrolling of the page while the modal is open.
+   *
+   * @default true
+   */
+  preventScrollWhileOpen?: ComponentProps<typeof ComposableModal>['preventScrollWhileOpen'];
+  /**
+   * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.
+   */
+  show: ComponentProps<typeof ComposableModal>['show'];
+} & (TemplatedModalProps | ComposableModalProps);
+/**
+ * Primary component for creating modals.
+ * When rendered, it automatically opens the modal and backdrop.
+ *
+ * These preprovided components give you the styles of the modal.
+ *
+ * By default, you get a particular preset of the `Modal` component that is used for simple modals.
+ * It has (optionally) a title, subtitle, body, and actions.
+ *
+ * If you need to get a little bit more custom, be sure to read the docs and add `type="composable"` to the this component.
+ *
+ * Generally, the structure for a modal is:
+ * ```tsx
+ * <Modal>
+ *     <ModalHeader>
+ *         <BackButton />
+ *         <CloseButton />
+ *         <ModalTitle>Modal Title</ModalTitle>
+ *     </ModalHeader>
+ *     <ModalContent>
+ *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+ *         Content, whatever the main body of the modal is.
+ *     </ModalContent>
+ *     <ModalActions>Actions (usually buttons) go here</ModalActions>
+ * </Modal>
+ * ```
+ */
+declare const Modal: ({
+  className,
+  closeModalOnBackdropClick,
+  "data-testid": dataTestId,
+  handleClose,
+  hasContentPager,
+  hasProgressSteps,
+  mobileFullScreen,
+  onModalCloseAnimationEnd,
+  position,
+  preventScrollWhileOpen,
+  show,
+  ...rest
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Modal as t };
+//# sourceMappingURL=Modal-DM0aXJZ5.d.cts.map

package/Modal-DM0aXJZ5.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-DM0aXJZ5.d.cts","names":[],"sources":["../src/Modal/ComposableModal.tsx","../src/Modal/Modal.tsx"],"mappings":";;;KAaK,OAAA;;AAVgF;;;;;;;;;;;;;;;;;;EA8BjF,QAAA,EAAU,SAAS;EACnB,SAAA;EA4DS;;;EAxDT,yBAAA;EAwD4B;;;EApD5B,aAAA;EAoD4B;;;;;;;;;;;;EAtC5B,WAAA,GAAc,eAAA;EAsCc;;;;EAjC5B,eAAA;EAiC4B;;;EA7B5B,gBAAA;EA6B4B;;;EAzB5B,gBAAA;EAyB4B;;;EArB5B,wBAAA;EAqB4B;;;;EAhB5B,QAAA;EA6BI;;AAyKP;;;EAhMG,sBAAA;ECvEC;;;ED2ED,IAAA;AAAA;;;;cAMS,eAAA;EAAmB,QAAA;EAAA,SAAA;EAAA,yBAAA;EAAA,eAAA,UAAA;EAAA,WAAA,EAAA,eAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,gBAAA;EAAA,wBAAA;EAAA,QAAA;EAAA,sBAAA;EAAA,IAAA,EAAA;AAAA,GAa7B,OAAA,iCAAK,GAAA,CAAA,OAAA;;;KC9FH,mBAAA;EDAA;;;;;;ECOD,OAAA,GAAU,SAAA;EDkBV;;;ECdA,IAAA,GAAO,SAAA;EDqCP;;;ECjCA,QAAA;EDkDA;;;EC9CA,SAAA;EDwDI;AAMR;;;;ECxDI,aAAA;EDwD4B;;;ECpD5B,QAAA,GAAW,SAAA;EDoDiB;;;;;EC9C5B,KAAA,GAAQ,SAAA;ED2DT;;;ECvDC,IAAA;AAAA;AAAA,KAGC,oBAAA;EDuC2B;;;;;;;;;;;;;;;;;;;ECnB5B,QAAA,EAAU,SAAS;EDgCpB;;;EC5BC,IAAA;AAAA;AAAA,KAGC,KAAA;EACD,SAAA;;AAxEgD;;EA4EhD,yBAAA,GAA4B,cAAA,QAAsB,eAAA;EAnExC;;;EAuEV,aAAA;EA3CiB;;;;;;;;;;;;EAwDjB,WAAA,EAAa,cAAA,QAAsB,eAAA;EApDnC;;AAAI;AAAA;EAyDJ,eAAA;;;;EAIA,gBAAA;EAlCA;;AAAI;EAsCJ,gBAAA;EAnCM;;;EAuCN,wBAAA,GAA2B,cAAA,QAAsB,eAAA;EAjBd;;;;EAsBnC,QAAA,GAAW,cAAA,QAAsB,eAAA;EAAtB;;;;;EAMX,sBAAA,GAAyB,cAAA,QAAsB,eAAA;EAKxB;;;EADvB,IAAA,EAAM,cAAA,QAAsB,eAAA;AAAA,KAC3B,mBAAA,GAAsB,oBAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAoB;AA6B/C;;cAAa,KAAA;EAAS,SAAA;EAAA,yBAAA;EAAA,eAAA,UAAA;EAAA,WAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,gBAAA;EAAA,wBAAA;EAAA,QAAA;EAAA,sBAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAanB,KAAA,iCAAK,GAAA,CAAA,OAAA"}