@wix/design-system/dist/esm/Box/Box.js

@wix/design-system

import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { st, classes, vars } from './Box.st.css.js';
import { stVars as colorsStVars } from '../Foundation/stylable/colors.st.css.js';
import { filterObject } from '../utils/filterObject';
import { formatSpacingValue, getSpacingValues, } from './utils/formatSpacingValues';
import { getSizeValues } from './utils/formatSizeValues';
import { DIRECTION } from './Box.constants';
const getColorStyles = (props) => {
    const styles = {};
    for (const propName in props) {
        const propValue = props[propName];
        if (propValue) {
            styles[propName] = colorsStVars[propValue] || propValue;
        }
    }
    return styles;
};
const Box = forwardRef(({ inline = false, direction = DIRECTION.horizontal, children, className, align, verticalAlign, dataHook, gap, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, minWidth, maxWidth, width, minHeight, maxHeight, height, color, backgroundColor, border, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, style, 'data-hook': dataHookByKebabCase, ...nativeStyles }, ref) => {
    const rootClassNames = st(classes.root, {
        inline,
        direction,
        alignItems: align,
        justifyContent: verticalAlign,
    }, className);
    const rootStyles = {
        ...style,
        ...getSpacingValues({
            padding,
            paddingTop,
            paddingRight,
            paddingBottom,
            paddingLeft,
            margin,
            marginTop,
            marginRight,
            marginBottom,
            marginLeft,
        }),
        ...getSizeValues({
            minWidth,
            maxWidth,
            width,
            minHeight,
            maxHeight,
            height,
        }),
        border,
        ...getColorStyles({
            color,
            backgroundColor,
            borderColor,
            borderTopColor,
            borderRightColor,
            borderBottomColor,
            borderLeftColor,
        }),
        [vars['gap']]: formatSpacingValue(gap) || 0,
        ...nativeStyles,
    };
    const rootStylesFiltered = filterObject(rootStyles, (_key, value) => typeof value !== 'undefined');
    return (React.createElement("div", { "data-hook": dataHook, className: rootClassNames, style: rootStylesFiltered, ref: ref }, children));
});
Box.displayName = 'Box';
Box.propTypes = {
    children: PropTypes.any,
    className: PropTypes.any,
    inline: PropTypes.any,
    direction: PropTypes.any,
    align: PropTypes.any,
    verticalAlign: PropTypes.any,
    gap: PropTypes.any,
    padding: PropTypes.any,
    paddingTop: PropTypes.any,
    paddingRight: PropTypes.any,
    paddingBottom: PropTypes.any,
    paddingLeft: PropTypes.any,
    margin: PropTypes.any,
    marginTop: PropTypes.any,
    marginRight: PropTypes.any,
    marginBottom: PropTypes.any,
    marginLeft: PropTypes.any,
    minWidth: PropTypes.any,
    maxWidth: PropTypes.any,
    width: PropTypes.any,
    minHeight: PropTypes.any,
    maxHeight: PropTypes.any,
    height: PropTypes.any,
    color: PropTypes.any,
    backgroundColor: PropTypes.any,
    border: PropTypes.any,
    borderColor: PropTypes.any,
    borderTopColor: PropTypes.any,
    borderRightColor: PropTypes.any,
    borderBottomColor: PropTypes.any,
    borderLeftColor: PropTypes.any,
    dataHook: PropTypes.any,
    style: PropTypes.any,
};
export default Box;
//# sourceMappingURL=Box.js.map