import styled from 'styled-components';
import { Box } from 'grid-styled';

export const breakpoints = {
  xs: '@media screen and (max-width: 40em)',
  sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
  md: '@media screen and (min-width: 52em) and (max-width: 64em)',
  lg: '@media screen and (min-width: 64em)',
};

export const hidden = key => props => props[key] ? {
  [breakpoints[key]]: {
    display: 'none'
  }
} : null;

export const xs = hidden('xs');
export const sm = hidden('sm');
export const md = hidden('md');
export const lg = hidden('lg');

const Hide = styled(Box)`
  ${xs}
  ${sm}
  ${md}
  ${lg}
`;

export default Hide;

@@ -67,16 +67,105 @@
 styled';
+%0Aimport %7B%0A  bottom,%0A  height,%0A  left,%0A  position,%0A  right,%0A  top,%0A%7D from 'styled-system';
 %0A%0Aexport
@@ -713,16 +713,85 @@
 %0A  $%7Blg%7D
+%0A%0A  $%7Bbottom%7D%0A  $%7Bheight%7D%0A  $%7Bleft%7D%0A  $%7Bposition%7D%0A  $%7Bright%7D%0A  $%7Btop%7D
 %0A%60;%0A%0Aexp

add positioning and height style props