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