jsx import { CSSObject , jsx } from '@emotion/core' ; import { ErrorIcon } from '../Icon' ; import { COLOR } from '../Identity' ; import { FlexBox , FlexBoxProps , flexBoxStyle , filterFlexBoxProps , Theme } from '../Layout' ; import { Text , linkStyle } from '../Text' ; import { filterProps } from '../util' ; type ErrorMessageProps < T = HTMLDivElement > = FlexBoxProps < T > ; export const errorMessageStyle = ( theme , { justify = 'center' , align = 'center' , ... props } ) => ( { ... flexBoxStyle ( { align , justify , ... props } ) , a : { ... linkStyle ( theme , { bold : false , fontSize : '11px' , textTransform : 'none' , ... props } ) , } , marginBottom : '12px' , } ) ; export const filterErrorMessageProps = ( props ) => { return filterProps ( filterFlexBoxProps ( props ) as ErrorMessageProps , [ ] ) ; } ; export const ErrorMessage = ( { children , ... props } ) => ( < FlexBox css = { theme => errorMessageStyle ( theme , props ) } { ... props } > < ErrorIcon style = { { marginRight : '8px' } } /> < Text color = { COLOR . RED } fontSize = { '11px' } > { children } < /Text> < /FlexBox>);