import { space, color, layout, flexbox, border, position, variant, grid, shadow } from 'styled-system';
import { styled } from 'styled-components';
import { cssClass } from '../../utils/css-class.js';
const variants = variant({
  variants: {
    grey: {
      flexGrow: 1,
      bg: 'bg',
      py: 'xl',
      px: ['0', 'xl'],
      className: cssClass(['Box', 'Box_Grey'])
    },
    container: {
      flexGrow: 1,
      bg: 'container',
      py: 'xl',
      px: ['0', 'xl'],
      className: cssClass(['Box', 'Box_Grey'])
    },
    white: {
      px: ['default', 'xxl'],
      py: 'xxl',
      bg: 'white',
      className: cssClass(['Box', 'Box_White'])
    },
    card: {
      p: 'xxl',
      bg: 'white',
      className: cssClass(['Box', 'Box_Card']),
      boxShadow: 'card'
    },
    transparent: {
      px: ['default', 'xxl'],
      py: 'xxl',
      bg: 'transparent',
      className: cssClass(['Box', 'Box_Transparent'])
    }
  }
});
/**
 * @load ./box.doc.md
 * @hideconstructor
 * @component
 * @subcategory Atoms
 * @section design-system
 * @see BoxProps
 * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-box--simple-white-gray-wrapper StoryBook}
 */
const Box = styled.section.withConfig({
  displayName: "box__Box",
  componentId: "sc-17sbq3p-0"
})(["box-sizing:border-box;min-width:0;", " font-family:", ";line-height:", ";font-size:", ";font-weight:normal;", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";"], ({
  flex
}) => flex && typeof flex === 'boolean' ? 'display: flex;' : '', ({
  theme
}) => theme.font, ({
  theme
}) => theme.lineHeights.default, ({
  theme
}) => theme.fontSizes.default, ({
  animate
}) => animate ? 'transition: all 500ms;' : '', space, color, layout, flexbox, grid, border, shadow, position, variants);
Box.defaultProps = {
  className: cssClass('Box')
};
export { Box };
export default Box;