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.7.1/node_modules/class-variance-authority/dist/index.js';
import { forwardRef } from 'react';
import styles from './flex.module.css.js';

const flex = cva(styles.flex, {
    variants: {
        direction: {
            row: styles['direction-row'],
            column: styles['direction-column'],
            rowReverse: styles['direction-rowReverse'],
            columnReverse: styles['direction-columnReverse']
        },
        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']
        },
        wrap: {
            noWrap: styles['wrap-noWrap'],
            wrap: styles['wrap-wrap'],
            wrapReverse: styles['wrap-wrapReverse']
        },
        gap: {
            1: styles['gap-1'],
            2: styles['gap-2'],
            3: styles['gap-3'],
            4: styles['gap-4'],
            5: styles['gap-5'],
            6: styles['gap-6'],
            7: styles['gap-7'],
            8: styles['gap-8'],
            9: styles['gap-9'],
            'extra-small': styles['gap-xs'],
            small: styles['gap-sm'],
            medium: styles['gap-md'],
            large: styles['gap-lg'],
            'extra-large': styles['gap-xl']
        },
        width: {
            full: styles['width-full']
        }
    },
    defaultVariants: {
        direction: 'row',
        align: 'stretch',
        justify: 'start',
        wrap: 'noWrap'
    }
});
const Flex = forwardRef(({ children, direction, align, justify, wrap, gap, className, width, ...props }, ref) => {
    return (jsxRuntimeExports.jsx("div", { className: flex({
            direction,
            align,
            justify,
            wrap,
            gap,
            className,
            width
        }), ...props, ref: ref, children: children }));
});

export { Flex };
//# sourceMappingURL=flex.js.map
