@empathyco/x-tailwindcss/dist/esm/x-tailwind-plugin/dynamic-components/layout/layout-container.js

Empathy X Tailwind plugin

import { map, rename } from '@empathyco/x-utils';

/**
 * Returns the `layout-container` dynamic features of component `layout`.
 *
 * @param helpers - The {@link TailwindHelpers} to generate CSS.
 * @returns The {@link CssStyleOptions} for the component.
 */
function dynamicLayoutContainer(helpers) {
    const { theme } = helpers;
    return {
        ...map({
            ...rename({
                mx: (value) => ({
                    '& > .x-layout-item': {
                        '--x-margin-left': value,
                        '--x-margin-right': value,
                    },
                }),
                ml: (value) => ({
                    '& > .x-layout-item': {
                        '--x-margin-left': value,
                    },
                }),
                mr: (value) => ({
                    '& > .x-layout-item': {
                        '--x-margin-right': value,
                    },
                }),
            }, { prefix: 'x-layout-container-' }),
        }, (name, styles) => {
            return {
                styles,
                values: {
                    ...theme('x.spacing'),
                },
            };
        }),
    };
}

export { dynamicLayoutContainer };