@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
29 lines • 1.05 kB
JavaScript
import styled from 'styled-components';
import { getStyles, getTypographyStyles } from '../../utils/getStyles/getStyles';
// mixin
import { focusVisibleAlt } from '../../styles/mixins/focusAlt.mixin';
export const ParentContainerStyled = styled.div `
${props => getStyles(props.styles?.parentContainer)}
`;
export const LabelContainerStyled = styled.div `
${props => getStyles(props.styles?.labelContainer)}
`;
export const PillStyled = styled.div `
${props => getStyles(props.styles?.container)}
&:focus-visible {
z-index: ${props => props.styles?.container_focus?.z_index};
}
${props => props.styles?.altVariant && focusVisibleAlt()}
`;
export const PillInputStyled = styled.input `
${props => getStyles(props.styles?.input)}
`;
export const PillLabelStyled = styled.label `
display: flex;
align-items: center;
${props => getTypographyStyles(props.styles?.label)}
`;
export const IconContainerStyled = styled.div `
${props => getStyles(props.styles?.decorativeIconContainer)}
`;
//# sourceMappingURL=pill.styled.js.map