jsx import { CSSObject , jsx } from '@emotion/core' ; import type { Theme } from '../Layout' ; import { LinkProps , linkStyle } from './Link' ; import { TextProps , filterTextProps , textStyle } from './Text' ; import { COLOR } from '../Identity' ; export interface LabelProps < T = HTMLSpanElement > extends TextProps < T > { markInvalid ? : boolean ; } const labelStyle = ( theme , { markInvalid , bold = false , color = theme . general . color , fontSize = '12px' , ... props } ) => ( { ... textStyle ( theme , { bold , color , fontSize , ... props } ) , '&:focus-within' : { color : COLOR . BLUE , } , color : markInvalid ? COLOR . RED : 'initial' , width : '100%' , } ) ; export const Label = ( props ) => ( < label css = { theme => labelStyle ( theme , props ) } { ... filterTextProps ( props ) } />); export type LabelLinkProps < T = HTMLAnchorElement > = LinkProps < T > ; const labelLinkStyle = ( theme , { fontSize = '12px' , ... props } ) => ( { ... linkStyle ( theme , { fontSize , ... props } ) , } ) ; export const LabelLink = ( props ) => ( < a css = { theme => labelLinkStyle ( theme , props ) } { ... filterTextProps ( props ) } />);