import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { useTestIds } from '../../hooks';
import { withTestIds } from '../../utils';
import { getAlertTestIds } from './Badges.test-ids';
export const StyledAlert = styled.div(props => {
    const alerts = props.theme.components.badges.alert;
    const { background } = alerts[props.variant];
    const { 'border-color': borderColor } = alerts.base;
    return css `
    background: ${background};
    border: 0.0625rem solid ${borderColor};
    border-radius: 100%;
    display: inline-block;
    height: 0.625rem;
    width: 0.625rem;
  `;
});
StyledAlert.defaultProps = defaultThemeProp;
export default withTestIds(forwardRef(function Alert({ testId, variant, ...restProps }, ref) {
    const testIds = useTestIds(testId, getAlertTestIds);
    return _jsx(StyledAlert, { "data-testid": testIds.root, ...restProps, variant: variant, ref: ref });
}), getAlertTestIds);
//# sourceMappingURL=Alert.js.map