"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.InlineError = InlineError;
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
var _AlertCircleIcon = require("../Icons/AlertCircleIcon");
var _i18n = require("../i18n");
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _jsxRuntime = require("preact/compat/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * 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/).
 */
function InlineError(_ref) {
  let {
    children,
    className,
    id,
    inversed,
    ...otherProps
  } = _ref;
  const classes = (0, _classnames.default)('ds-c-inline-error', {
    'ds-c-inline-error--inverse': inversed
  }, className);
  const viewbox = '36 -12 186 186';
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
    ...otherProps,
    className: classes,
    id: (0, _useId.default)('inline-error--', id),
    "aria-live": "assertive",
    "aria-atomic": "true",
    children: children && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AlertCircleIcon.AlertCircleIcon, {
        viewBox: viewbox
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: "ds-u-visibility--screen-reader",
        children: `${(0, _i18n.t)('inlineError.prefix')}: `
      }), children]
    })
  });
}
var _default = exports.default = InlineError;