Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
${position};
${zIndex};
${top};
${right};
${bottom};
${left};
${textStyle};
${colorStyle};
${buttonStyle};
`;
const Box = props => ;
Box.propTypes = {
...space.propTypes,
...width.propTypes,
...fontSize.propTypes,
...color.propTypes,
...fontFamily.propTypes,
...textAlign.propTypes,
...lineHeight.propTypes,
...fontWeight.propTypes,
...fontStyle.propTypes,
...letterSpacing.propTypes,
...display.propTypes,
...maxWidth.propTypes,
...minWidth.propTypes,
...height.propTypes,
...maxHeight.propTypes,
...minHeight.propTypes,
...verticalAlign.propTypes,
...alignItems.propTypes,
theme.fontSizes.big = 96
const Root = styled.div`
font-family: system-ui, sans-serif;
line-height: 1.5;
`
const Box = styled.div`
${space}
${width}
${fontSize}
${color}
`
Box.propTypes = {
...space.propTypes,
...width.propTypes,
...fontSize.propTypes,
...color.propTypes,
}
const Text = styled.div`
${space}
${fontSize}
${fontWeight}
${lineHeight}
${color}
`
Text.propTypes = {
...space.propTypes,
...fontSize.propTypes,
...fontWeight.propTypes,
...lineHeight.propTypes,
${space}
${width}
${color}
${flex}
${flexDirection}
${alignItems}
${alignSelf}
${justifyContent}
${justifySelf}
${flexWrap}
display:flex;
`
Box.propTypes = {
...borderRadius.propTypes,
...space.propTypes,
...width.propTypes,
...color.propTypes,
...flex.propTypes,
...flexDirection.propTypes,
...alignItems.propTypes,
...alignSelf.propTypes,
...justifyContent.propTypes,
...justifySelf.propTypes,
...flexWrap.propTypes
}
}
const Root = styled('div')`
font-family: system-ui, sans-serif;
line-height: 1.5;
`
const Box = styled('div')`
${space}
${width}
${fontSize}
${color}
`
Box.propTypes = {
...space.propTypes,
...width.propTypes,
...fontSize.propTypes,
...color.propTypes,
}
const Text = styled('div')`
${space}
${fontSize}
${fontWeight}
${lineHeight}
${color}
`
Text.propTypes = {
...space.propTypes,
...fontSize.propTypes,
...fontWeight.propTypes,
...lineHeight.propTypes,
border-bottom-width: 1px;
${space} ${width} ${borderColor};
`
Divider.displayName = 'Divider'
Divider.defaultProps = {
borderColor: 'borderGray',
theme: theme,
ml: 0,
mr: 0
}
Divider.propTypes = {
...space.propTypes,
...width.propTypes,
...borderColor.propTypes
}
export default Divider
const Flex = mapProps(({ wrap, align, justify, ...props }) => ({
flexWrap: wrap ? 'wrap' : undefined,
alignItems: align,
justifyContent: justify,
...props
}))(styled(Box)`
display: flex;
${alignItems} ${justifyContent}
${flexDirection}
${flexWrap}
${applyVariations('Flex')}
`)
Flex.propTypes = {
...space.propTypes,
...width.propTypes,
color: deprecatedColorValue(),
bg: deprecatedPropType('color'),
...alignItems.propTypes,
...justifyContent.propTypes,
...flexWrap.propTypes,
...flexDirection.propTypes,
wrap: deprecatedPropType('flexWrap'),
align: deprecatedPropType('alignItems'),
justify: deprecatedPropType('justifyContent')
}
Flex.displayName = 'Flex'
export default Flex
as="span"
style={{ userSelect: 'none' }}
{...rest}
/>
);
};
Link.propTypes = {
to: PropTypes.string,
href: PropTypes.string,
underline: PropTypes.number,
color: PropTypes.string,
...space.propTypes,
...color.propTypes,
...display.propTypes,
...width.propTypes,
...height.propTypes,
...borders.propTypes,
};
Link.defaultProps = {
underline: 0,
color: 'inherit',
};
export default Link;
border-radius: ${props => props.theme.radius};
border-width: 0;
border-style: solid;
${width} ${size} ${space};
${applyVariations('Button', variations)}
&:disabled {
cursor: not-allowed;
color: ${getPaletteColor('text.light')};
background-color: ${getPaletteColor('background.base')};
}
`)
Button.propTypes = {
size: PropTypes.oneOf(['small', 'medium', 'large']),
...width.propTypes,
...space.propTypes,
fullWidth: deprecatedPropType('width'),
variation: PropTypes.oneOf(Object.keys(variations)),
color: deprecatedColorValue(),
disabled: PropTypes.bool
}
Button.defaultProps = {
color: 'primary',
variation: 'fill'
}
Button.displayName = 'Button'
export default Button
color,
deprecatedColorValue,
deprecatedPropType
} from './utils'
const Box = styled.div`
${space} ${width} ${textAlign}
${color}
${applyVariations('Box')}
`
Box.displayName = 'Box'
Box.propTypes = {
...space.propTypes,
...width.propTypes,
color: deprecatedColorValue(),
bg: deprecatedPropType('color'),
...textAlign.propTypes
}
export default Box
props.bg
? `background-color: ${getPaletteColor(props.bg, 'base')(props)};`
: ''}
${space} ${fontSize} ${fontWeight} ${width};
${nowrap}
${accessiblyHide}
${applyVariations('Label')}
`
Label.propTypes = {
...space.propTypes,
...fontSize.propTypes,
color: deprecatedColorValue(),
...fontWeight.propTypes,
...width.propTypes
}
Label.defaultProps = {
fontSize: '10px',
fontWeight: 'bold',
color: 'border.light'
}
Label.displayName = 'Label'
Label.isLabel = true
export default Label