import * as React from 'react' ; export interface BoxProps { name default flex ? : boolean ; name default group control flexDirection ? : FlexDirection ; name default group control justifyContent ? : JustifyContent ; name default group control alignItems ? : AlignItems ; name flexWrap ? : boolean ; name flexBasis ? : number ; name flexGrow ? : number ; name default flexShrink ? : number ; name default width ? : number | string ; name default height ? : number | string ; name control backgroundColor ? : string ; children ? : React . ReactNode ; } export enum FlexDirection { name row = 'row' , name column = 'column' } export enum JustifyContent { name icon 'flex-start' = 'flex-start' , name icon 'center' = 'center' , name icon 'flex-end' = 'flex-end' , name icon 'space-between' = 'space-between' , name icon 'space-around' = 'space-around' } export enum AlignItems { name icon 'flex-start' = 'flex-start' , name icon 'center' = 'center' , name icon 'flex-end' = 'flex-end' , name icon 'stretch' = 'stretch' , name icon 'baseline' = 'baseline' } name description icon patternType export const Box = props => { return ( < div style = { { flexBasis : props . flexBasis , flexDirection : props . flexDirection , flexWrap : props . flexWrap ? 'wrap' : 'nowrap' , flexGrow : props . flexGrow , flexShrink : props . flexShrink , alignItems : props . alignItems , display : props . flex ? 'flex' : 'block' , justifyContent : props . justifyContent , width : props . width , height : props . height , backgroundColor : props . backgroundColor } } > { props . children } < /div>); } ;