import { j as jsxRuntimeExports } from '../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
import { cva } from '../node_modules/.pnpm/class-variance-authority@0.6.0_typescript@5.4.3/node_modules/class-variance-authority/dist/index.js';
import styles from './grid.module.css.js';

const grid = cva(styles.grid, {
    variants: {
        align: {
            start: styles["align-start"],
            center: styles["align-center"],
            end: styles["align-end"],
            stretch: styles["align-stretch"],
            baseline: styles["align-baseline"],
        },
        justify: {
            start: styles["justify-start"],
            center: styles["justify-center"],
            end: styles["justify-end"],
            between: styles["justify-between"],
        },
        flow: {
            row: styles["flow-row"],
            column: styles["flow-column"],
            dense: styles["flow-dense"],
            rowDense: styles["flow-rowDense"],
            columnDense: styles["flow-columnDense"],
        },
        columns: {
            1: styles["columns-1"],
            2: styles["columns-2"],
            3: styles["columns-3"],
            4: styles["columns-4"],
        },
        gap: {
            "extra-small": styles["gap-xs"],
            small: styles["gap-sm"],
            medium: styles["gap-md"],
            large: styles["gap-lg"],
            "extra-large": styles["gap-xl"],
        },
        gapX: {
            "extra-small": styles["gapX-xs"],
            small: styles["gapX-sm"],
            medium: styles["gapX-md"],
            large: styles["gapX-lg"],
            "extra-large": styles["gapX-xl"],
        },
        gapY: {
            "extra-small": styles["gapY-xs"],
            small: styles["gapY-sm"],
            medium: styles["gapY-md"],
            large: styles["gapY-lg"],
            "extra-large": styles["gapY-xl"],
        },
    },
});
function Grid({ children, align, justify, flow, columns, gap, gapX, gapY, className, ...props }) {
    return (jsxRuntimeExports.jsx("div", { className: grid({
            align,
            justify,
            flow,
            columns,
            gap,
            gapX,
            gapY,
            className,
        }), ...props, children: children }));
}

export { Grid };
//# sourceMappingURL=grid.js.map
