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