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