@patreon/studio
Version:
Patreon Studio Design System
19 lines • 826 B
JSX
import React from 'react';
import styled from 'styled-components';
import { tokens } from '../../tokens';
import { BodyText } from '../BodyText';
import { IconNo } from '../Icon';
const getErrorId = (inputId) => `${inputId}-error`;
export const InlineError = ({ children, 'data-tag': dataTag, inputId, size = 'sm' }) => (<ErrorContainer data-tag={dataTag} id={getErrorId(inputId)}>
<IconNo size={size === 'sm' ? '16px' : '12px'} color={tokens.global.critical.action.default}/>
<BodyText as="span" size={size === 'sm' ? 'md' : 'sm'} color={tokens.global.critical.action.default}>
{children}
</BodyText>
</ErrorContainer>);
InlineError.getErrorId = getErrorId;
const ErrorContainer = styled.div `
display: flex;
align-items: center;
gap: ${tokens.global.space.x8};
`;
//# sourceMappingURL=index.jsx.map