gilbarbara/styled-minimal

import PropTypes from 'prop-types';
import styled from 'styled-components';

import {
  alignContent,
  alignItems,
  alignSelf,
  backgroundImage,
  borders,
  borderRadius,
  bottom,
  color,
  display,
  flex,
  flexBasis,
  flexDirection,
  flexWrap,
  fontFamily,
  fontSize,
  fontStyle,
  fontWeight,
  gridGap,
  gridRowGap,
  gridColumnGap,
  gridColumn,
  gridRow,
  gridArea,
  gridAutoFlow,
  gridAutoRows,
  gridAutoColumns,
  gridTemplateRows,
  gridTemplateColumns,
  gridTemplateAreas,
  height,
  justifyContent,
  left,
  lineHeight,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  order,
  position,
  ratio,
  right,
  space,
  textAlign,
  top,
  width,
  zIndex,
} from 'styled-system';

import { textTransform } from './utils/system';

const Box = styled.div(
  {
    boxSizing: 'border-box',
  },
  alignContent,
  alignItems,
  alignSelf,
  backgroundImage,
  borders,
  borderRadius,
  bottom,
  color,
  display,
  flex,
  flexBasis,
  flexDirection,
  flexWrap,
  fontFamily,
  fontSize,
  fontStyle,
  fontWeight,
  gridGap,
  gridRowGap,
  gridColumnGap,
  gridColumn,
  gridRow,
  gridArea,
  gridAutoFlow,
  gridAutoRows,
  gridAutoColumns,
  gridTemplateRows,
  gridTemplateColumns,
  gridTemplateAreas,
  height,
  justifyContent,
  left,
  lineHeight,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  order,
  position,
  ratio,
  right,
  space,
  textAlign,
  textTransform,
  top,
  width,
  zIndex,
);
Box.displayName = 'Box';

export const basePropTypes = {
  ...alignContent.propTypes,
  ...alignItems.propTypes,
  ...alignSelf.propTypes,
  ...backgroundImage.propTypes,
  ...borders.propTypes,
  ...borderRadius.propTypes,
  ...bottom.propTypes,
  ...color.propTypes,
  ...display.propTypes,
  ...flex.propTypes,
  ...flexBasis.propTypes,
  ...flexDirection.propTypes,
  ...flexWrap.propTypes,
  ...fontFamily.propTypes,
  ...fontSize.propTypes,
  ...fontStyle.propTypes,
  ...fontWeight.propTypes,
  ...height.propTypes,
  ...justifyContent.propTypes,
  ...left.propTypes,
  ...lineHeight.propTypes,
  ...maxHeight.propTypes,
  ...maxWidth.propTypes,
  ...minHeight.propTypes,
  ...minWidth.propTypes,
  ...order.propTypes,
  ...position.propTypes,
  ...right.propTypes,
  ...ratio.propTypes,
  ...space.propTypes,
  ...textAlign.propTypes,
  textTransform: PropTypes.string,
  ...top.propTypes,
  ...width.propTypes,
  ...zIndex.propTypes,
};

export const gridPropTypes = {
  ...gridGap.propTypes,
  ...gridRowGap.propTypes,
  ...gridColumnGap.propTypes,
  ...gridColumn.propTypes,
  ...gridRow.propTypes,
  ...gridArea.propTypes,
  ...gridAutoFlow.propTypes,
  ...gridAutoRows.propTypes,
  ...gridAutoColumns.propTypes,
  ...gridTemplateRows.propTypes,
  ...gridTemplateColumns.propTypes,
  ...gridTemplateAreas.propTypes,
};

Box.propTypes = {
  as: PropTypes.string,
  children: PropTypes.node,
  ...basePropTypes,
  ...gridPropTypes,
};

export default Box;