Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
NTA_LIGHT,
} from '@govuk-react/constants';
const StyledInput = styled('input')(
{
boxSizing: 'border-box',
fontFamily: NTA_LIGHT,
WebkitFontSmoothing: 'antialiased',
MozOsxFontSmoothing: 'grayscale',
fontWeight: 400,
textTransform: 'none',
fontSize: FONT_SIZE.SIZE_16,
lineHeight: LINE_HEIGHT.SIZE_16,
[MEDIA_QUERIES.LARGESCREEN]: {
fontSize: FONT_SIZE.SIZE_19,
lineHeight: LINE_HEIGHT.SIZE_19,
width: '50%',
},
width: '100%',
padding: '5px 4px 4px',
border: `2px solid ${BLACK}`,
':focus': {
outline: `3px solid ${YELLOW}`,
outlineOffset: 0,
},
},
({ error, errorColor }) => ({
border: error ? `4px solid ${errorColor || ERROR_COLOUR}` : undefined,
}),
);
const Input = props => ;
}),
);
const StyledInput = styled('input')(
{
boxSizing: 'border-box',
fontFamily: NTA_LIGHT,
WebkitFontSmoothing: 'antialiased',
MozOsxFontSmoothing: 'grayscale',
fontWeight: 400,
textTransform: 'none',
fontSize: FONT_SIZE.SIZE_16,
lineHeight: LINE_HEIGHT.SIZE_16,
[MEDIA_QUERIES.LARGESCREEN]: {
fontSize: FONT_SIZE.SIZE_19,
lineHeight: LINE_HEIGHT.SIZE_19,
},
width: '100%',
padding: '5px 4px 4px',
border: `2px solid ${BLACK}`,
':focus': {
outline: `3px solid ${YELLOW}`,
outlineOffset: 0,
},
},
({ errorText }) => ({
border: errorText ? `4px solid ${ERROR_COLOUR}` : `2px solid ${BLACK}`,
}),
);
const StyledLabel = styled(Label)({
marginRight: '20px',
WebkitFontSmoothing: 'antialiased',
MozOsxFontSmoothing: 'grayscale',
fontWeight: 700,
marginBottom: SPACING.SCALE_1,
textDecoration: 'underline',
textDecorationSkipInk: 'none',
textTransform: 'none',
cursor: 'pointer',
fontSize: FONT_SIZE.SIZE_16,
lineHeight: LINE_HEIGHT.SIZE_16,
':visited': {
color: `${ERROR_COLOUR}`,
},
[MEDIA_QUERIES.LARGESCREEN]: {
fontSize: FONT_SIZE.SIZE_19,
lineHeight: LINE_HEIGHT.SIZE_19,
},
color: `${ERROR_COLOUR}`,
paddingTop: '4px',
paddingBottom: '2px',
});
const StyledErrorSummary = styled('div')(
{
color: TEXT_COLOUR,
padding: RESPONSIVE_4.mobile,
border: `${BORDER_WIDTH_MOBILE} solid ${ERROR_COLOUR}`,
'&:focus': {
outline: `${FOCUS_WIDTH} solid ${FOCUS_COLOUR}`,
outlineOffset: '0',
},
[MEDIA_QUERIES.LARGESCREEN]: {
import Label from '@govuk-react/label';
import LabelText from '@govuk-react/label-text';
import ErrorText from '@govuk-react/error-text';
import HintText from '@govuk-react/hint-text';
const TextAreaField = styled('textarea')(
{
boxSizing: 'border-box',
fontFamily: NTA_LIGHT,
fontWeight: 400,
textTransform: 'none',
fontSize: FONT_SIZE.SIZE_16,
lineHeight: LINE_HEIGHT.SIZE_16,
[MEDIA_QUERIES.LARGESCREEN]: {
fontSize: FONT_SIZE.SIZE_19,
lineHeight: LINE_HEIGHT.SIZE_19,
width: '75%',
},
width: '100%',
padding: '5px 4px 4px',
border: `2px solid ${BLACK}`,
':focus': {
outline: `3px solid ${YELLOW}`,
outlineOffset: 0,
},
},
({ error }) => ({
border: error ? `4px solid ${ERROR_COLOUR}` : undefined,
})
);
/**