Styled-system + Typescript

system.tsx

import React, { HTMLAttributes } from 'react'; // version 16.4.2
import styled from 'styled-components'; // version 4.0.3
import * as SS from 'styled-system'; // version 3.2.0
import * as CSS from 'csstype';

export interface BaseProps extends HTMLAttributes<HTMLDivElement> {}

export interface BoxProps extends BaseProps,
  SS.BgColorProps,
  SS.SpaceProps,
  SS.FontSizeProps,
  SS.BorderProps,
  SS.BorderColorProps,
  SS.BorderRadiusProps,
  SS.DisplayProps,
  SS.WidthProps,
  SS.MaxWidthProps,
  SS.MinWidthProps,
  SS.HeightProps,
  SS.MaxHeightProps,
  SS.MinHeightProps,
  SS.AlignItemsProps,
  SS.AlignContentProps,
  SS.JustifyContentProps,
  SS.FlexWrapProps,
  SS.FlexDirectionProps,
  SS.FlexProps,
  SS.FlexBasisProps,
  SS.JustifySelfProps,
  SS.AlignSelfProps,
  SS.OrderProps,
  SS.PositionProps,
  SS.ZIndexProps,
  SS.TopProps,
  SS.LeftProps,
  SS.RightProps,
  SS.BottomProps {
    // We have to add this manually to avoid conflicts with HTMLAttributes in types/styled-components - IntrinsicElements
    color?: CSS.ColorProperty;
  }

export const Box = styled.div<BoxProps>`
  box-sizing: border-box;
  ${SS.space};
  ${SS.color};
  ${SS.fontSize};
  ${SS.borders};
  ${SS.borderColor};
  ${SS.borderRadius};
  ${SS.display};
  ${SS.width};
  ${SS.maxWidth};
  ${SS.minWidth};
  ${SS.height};
  ${SS.maxHeight};
  ${SS.minHeight};
  ${SS.alignItems};
  ${SS.alignContent};
  ${SS.justifyContent};
  ${SS.flexWrap};
  ${SS.flexDirection};
  ${SS.flex};
  ${SS.flexBasis};
  ${SS.justifySelf};
  ${SS.alignSelf};
  ${SS.order};
  ${SS.position};
  ${SS.zIndex};
  ${SS.top};
  ${SS.right};
  ${SS.bottom};
  ${SS.left};
`;
  
const Select = (props: BoxProps) => {
  const { children, ...rest } = props;
  return (
    <Box {...rest}>
      <SelectBase fontSize={1}>
        {props.children}
      </SelectBase>
      <Icon fontSize={3}>
        {String.fromCharCode(9662)}
      </Icon>
    </Box>
  );
};