jsx import { CSSObject , jsx } from '@emotion/core' ; import type { Property } from 'csstype' ; import React from 'react' ; import { filterProps } from '../util' ; export interface FlexBoxProps < T = HTMLDivElement > extends React . PropsWithRef < React . HTMLProps < T > > { align ? : string ; column ? : boolean ; flexWrap ? : Property . FlexWrap ; justify ? : string ; } export const flexBoxStyle = ( { align = 'flex-start' , column = false , justify = 'flex-start' , flexWrap = 'nowrap' , } ) => ( { alignItems : align , display : 'flex' , flexDirection : column ? 'column' : 'row' , flexWrap : flexWrap , justifyContent : justify , } ) ; export const filterFlexBoxProps = ( props ) => filterProps ( props , [ 'align' , 'column' , 'justify' , 'flexWrap' ] ) ; export const FlexBox = React . forwardRef < HTMLDivElement , FlexBoxProps > ( ( props , ref ) => ( < div ref = { ref } css = { flexBoxStyle ( props ) } { ... filterFlexBoxProps ( props ) } / > ) ) ;