jsx import { CSSObject , jsx } from '@emotion/core' ; import type { Theme } from '../Layout' ; import { QueryKeys , media } from '../mediaQueries' ; import { TextProps , filterTextProps , textStyle } from './Text' ; export type ParagraphProps < T = HTMLParagraphElement > = TextProps < T > ; export const paragraphStyle = ( theme , { block = true , ... props } ) => ( { ... textStyle ( theme , { block , ... props } ) , marginBottom : '16px' , marginTop : 0 , } ) ; export const Paragraph = ( props ) => ( < p css = { theme => paragraphStyle ( theme , props ) } { ... filterTextProps ( props ) } />); export type LeadProps < T = HTMLParagraphElement > = TextProps < T > ; export const leadStyle = ( theme , { block = true , center = true , fontSize = '24px' , ... props } ) => ( { ... textStyle ( theme , { block , center , fontSize , ... props } ) , marginBottom : '56px' , marginTop : 0 , [ media [ QueryKeys . MOBILE ] ] : { fontSize : '20px' , } , } ) ; export const Lead = ( props ) => < p css = { theme => leadStyle ( theme , props ) } { ... filterTextProps ( props ) } />;