src/components/DatePicker/styled/index.js
import styled from 'styled-components';
import Input from '../../Input/pickerInput';
import {
BORDER_RADIUS_SQUARE,
BORDER_RADIUS_SEMI_SQUARE,
BORDER_RADIUS_SEMI_ROUNDED,
} from '../../../styles/borderRadius';
export const StyledContainer = styled.div`
width: 100%;
`;
export const StyledInput = styled(Input)`
text-transform: capitalize;
${props =>
props.borderRadius === 'square' &&
`
border-radius: ${BORDER_RADIUS_SQUARE};
`};
${props =>
props.borderRadius === 'semi-square' &&
`
border-radius: ${BORDER_RADIUS_SEMI_SQUARE};
`};
${props =>
props.borderRadius === 'semi-rounded' &&
`
border-radius: ${BORDER_RADIUS_SEMI_ROUNDED};
`};
`;