@nex-ui/react/dist/cjs/theme/recipes/modal.cjs

🎉 A beautiful, modern, and reliable React component library.

'use strict';

var system = require('@nex-ui/system');

const modalRootRecipe = system.defineRecipe({
    base: {
        position: 'fixed',
        inset: 0,
        zIndex: 'modal'
    }
});
const modalContentRecipe = system.defineRecipe({
    base: {
        width: 'full',
        borderRadius: 'lg',
        position: 'relative',
        my: '15',
        mx: '6',
        display: 'flex',
        flexDirection: 'column',
        boxShadow: 'lg',
        outline: 'none',
        bg: {
            _DEFAULT: 'white',
            _dark: '#18181b'
        }
    }
});
const modalHeaderRecipe = system.defineRecipe({
    base: {
        w: 'full',
        m: 0,
        boxSizing: 'border-box'
    }
});
const modalBodyRecipe = system.defineRecipe({
    base: {
        w: 'full',
        boxSizing: 'border-box',
        height: '100%',
        wordBreak: 'break-word'
    }
});
const modalFooterRecipe = system.defineRecipe({
    base: {
        w: 'full',
        boxSizing: 'border-box',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        gap: '5'
    }
});
const modalBackdropRecipe = system.defineRecipe({
    base: {
        position: 'fixed',
        inset: 0,
        bg: 'black/50'
    }
});
const modalPanelRecipe = system.defineRecipe({
    base: {
        position: 'fixed',
        inset: 0,
        display: 'flex',
        justifyContent: 'center'
    }
});

exports.modalBackdropRecipe = modalBackdropRecipe;
exports.modalBodyRecipe = modalBodyRecipe;
exports.modalContentRecipe = modalContentRecipe;
exports.modalFooterRecipe = modalFooterRecipe;
exports.modalHeaderRecipe = modalHeaderRecipe;
exports.modalPanelRecipe = modalPanelRecipe;
exports.modalRootRecipe = modalRootRecipe;