import { jsx as _jsx } from "react/jsx-runtime";
import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
import { cs, filterUndefined } from '../utils';
export const BoxBase = styled.divBox `
  display: flex;
  min-width: 0;
  transition-duration: normal;
`;
/** Organizes content layout into columns or rows with easy centering. */
export const Box = vui((props, ref) => {
    const { align, center, centerH, centerV, className, column, direction, elevation, hoverShadow: hoverBoxShadow, justify, radius: borderRadius, shadow, wrap, ...rest } = omitThemingProps(props);
    const styles = useStyleConfig('Box', props);
    const alignItems = center || (column ? centerH : centerV) ? 'center' : undefined;
    const flexDirection = column ? 'column' : undefined;
    const justifyContent = center || (column ? centerV : centerH) ? 'center' : undefined;
    const aliasedProps = filterUndefined({
        alignItems: align ?? alignItems,
        borderRadius,
        boxShadow: elevation ?? shadow,
        flexDirection: direction ?? flexDirection,
        flexWrap: wrap ? 'wrap' : undefined,
        justifyContent: justify ?? justifyContent,
    });
    return _jsx(BoxBase, { className: cs('vui-box', className), ref: ref, ...styles, ...aliasedProps, ...rest });
});
Box.displayName = 'Box';
export default Box;
//# sourceMappingURL=box.js.map