import {
  border,
  color,
  compose,
  flexbox,
  layout,
  space,
  textAlign,
  grid,
  background,
  position,
} from 'styled-system';
import propTypes from '@styled-system/prop-types';
import styled from '@emotion/styled';
import shouldForwardProp from '@styled-system/should-forward-prop';

const Box = styled('div', {
  shouldForwardProp,
})(compose(space, layout, background, color, flexbox, grid, border, textAlign, position));

Box.propTypes = {
  ...propTypes.space,
  ...propTypes.layout,
  ...propTypes.background,
  ...propTypes.color,
  ...propTypes.flexbox,
  ...propTypes.grid,
  ...propTypes.border,
  ...propTypes.textAlign,
  ...propTypes.position,
};

export default Box;