import classNames from 'classnames';
import { AlertCircleIcon } from '../Icons/AlertCircleIcon';
import { t } from '../i18n';
import useId from '../utilities/useId';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Inline errors are error messages that are paired directly with form fields.
 * They are built in to all form fields in the design system, but they can also
 * be used on their own to create custom fields.
 *
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/inline-error/).
 */
export function InlineError(_ref) {
  let {
    children,
    className,
    id,
    inversed,
    ...otherProps
  } = _ref;
  const classes = classNames('ds-c-inline-error', {
    'ds-c-inline-error--inverse': inversed
  }, className);
  const viewbox = '36 -12 186 186';
  return /*#__PURE__*/_jsx("p", {
    ...otherProps,
    className: classes,
    id: useId('inline-error--', id),
    "aria-live": "assertive",
    "aria-atomic": "true",
    children: children && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(AlertCircleIcon, {
        viewBox: viewbox
      }), /*#__PURE__*/_jsx("span", {
        className: "ds-u-visibility--screen-reader",
        children: `${t('inlineError.prefix')}: `
      }), children]
    })
  });
}
export default InlineError;