@reservoir0x/relay-kit-ui/_esm/src/components/common/Modal.js

Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AnimatedContent, Overlay } from '../primitives/Dialog.js';
import { Root as DialogRoot, DialogTrigger, DialogPortal, DialogClose } from '@radix-ui/react-dialog';
import { Button } from '../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
import { AnimatePresence } from 'framer-motion';
export const Modal = ({ trigger, css, overlayZIndex = 9999, showCloseButton = true, children, ...props }) => {
    return (_jsxs(DialogRoot, { modal: true, ...props, children: [_jsx(DialogTrigger, { asChild: true, children: trigger }), _jsx(AnimatePresence, { children: props.open ? (_jsx(DialogPortal, { forceMount: true, children: _jsx(Overlay, { forceMount: true, css: {
                            position: 'fixed',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            backgroundColor: 'blackA10'
                        }, style: { zIndex: overlayZIndex }, children: _jsxs(AnimatedContent, { forceMount: true, css: {
                                '--borderColor': 'colors.subtle-border-color',
                                border: '1px solid var(--borderColor)',
                                padding: '4',
                                ...css
                            }, onPointerDownOutside: props.onPointerDownOutside, children: [showCloseButton ? (_jsx(DialogClose, { asChild: true, style: {
                                        position: 'absolute',
                                        right: 10,
                                        top: 12,
                                        zIndex: 10
                                    }, children: _jsx(Button, { color: "ghost", size: "none", css: { color: 'gray9', p: '2' }, onClick: (e) => {
                                            props.onCloseButtonClicked?.(e);
                                        }, children: _jsx(FontAwesomeIcon, { icon: faXmark, width: 16, height: 16 }) }) })) : null, children] }) }) })) : null })] }));
};
//# sourceMappingURL=Modal.js.map