jsx import React from 'react' ; import { CSSObject , jsx } from '@emotion/core' ; import { QueryKeys , media } from '../mediaQueries' ; import { filterProps } from '../util' ; import { GUTTER } from './sizes' ; export interface ColumnsProps < T = HTMLDivElement > extends React . HTMLProps < T > { query ? : QueryKeys ; } export const filterColumnsProps = ( props ) => { return filterProps ( props , [ 'query' ] ) ; } ; const columnsStyle = ( { query = QueryKeys . MOBILE } ) => ( { display : 'flex' , marginLeft : `-${ GUTTER }px` , [ media [ query ] ] : { flexDirection : 'column' } , } ) ; export const Columns = ( props ) => < div css = { columnsStyle ( props ) } { ... filterColumnsProps ( props ) } />; export type ColumnProps < T = HTMLDivElement > = React . HTMLProps < T > ; const columnStyle = props => ( { display : 'block' , flexBasis : '0' , flexGrow : 1 , flexShrink : 1 , marginLeft : `${ GUTTER }px` , } ) ; export const Column = ( props ) => < div css = { columnStyle ( props ) } { ... props } />;