import styled from 'styled-components' ; type SpaceSize = 'xs' | 's' | 'm' | 'l' | 'xl' ; export type VerticalSpaceProperty = 'margin-top' | 'margin-bottom' | 'padding-top' | 'padding-bottom' | 'top' | 'bottom' ; export type HorizontalSpaceProperty = 'margin-left' | 'margin-right' | 'padding-left' | 'padding-right' | 'left' | 'right' ; type SpacingUnitsIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 ; export type SpaceOverrides = { small ? : SpacingUnitsIndex ; medium ? : SpacingUnitsIndex ; large ? : SpacingUnitsIndex ; } ; type VerticalSpaceProps = { size : SpaceSize ; properties : VerticalSpaceProperty [ ] ; negative ? : boolean ; overrides ? : SpaceOverrides ; } ; type HorizontalSpaceProps = { size : SpaceSize ; properties : HorizontalSpaceProperty [ ] ; negative ? : boolean ; overrides ? : SpaceOverrides ; } ; export type SpaceComponentProps = { v ? : VerticalSpaceProps ; h ? : HorizontalSpaceProps ; } ; const Space = styled . div < SpaceComponentProps > `
  ${ props => props . v && props . theme . makeSpacePropertyValues ( props . v . size , props . v . properties , props . v . negative , props . v . overrides ) }
  ${ props => props . h && props . theme . makeSpacePropertyValues ( props . h . size , props . h . properties , props . h . negative , props . h . overrides ) }
` ; export default Space ;