jsx import { CSSObject , jsx } from '@emotion/core' ; import React from 'react' ; import { COLOR } from '../Identity' ; import { GUTTER } from '../Layout/sizes' ; export interface LineProps < T = HTMLHRElement > extends React . HTMLProps < T > { color ? : string ; } export const lineStyle = ( { color = COLOR . GRAY_LIGHTEN_72 } ) => ( { border : 'none' , borderBottom : `1px solid ${ color }` , marginBottom : `${ GUTTER }px` , marginTop : `${ GUTTER }px` , } ) ; export const Line = ( props ) => < hr css = { lineStyle ( props ) } { ... props } />;