import { clsx } from 'clsx';
import StatusIcon from '../statusIcon/StatusIcon.mjs';
import Body from '../body/Body.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Sentiment } from '../common/propsValues/sentiment.mjs';
import { Size } from '../common/propsValues/size.mjs';

const iconTypes = new Set([Sentiment.NEGATIVE, Sentiment.ERROR, Sentiment.POSITIVE, Sentiment.SUCCESS, Sentiment.WARNING]);
/**
 * Avoid using `<InlineAlert>` component directly
 * it's for edge cases when `<Field />` isn't suitable for some reasons.
 *
 * Example:
 * ```
 * <Field sentiment={..} message={..}>..</Field>
 * ```
 */
function InlineAlert({
  id,
  type = 'neutral',
  iconLabel,
  className,
  children
}) {
  return /*#__PURE__*/jsxs(Body, {
    role: "alert",
    id: id,
    className: clsx('alert alert-detach', `alert-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? 'danger' : type}`, 'd-flex', className),
    children: [iconTypes.has(type) && /*#__PURE__*/jsx(StatusIcon, {
      sentiment: type,
      size: Size.SMALL,
      iconLabel: iconLabel
    }), /*#__PURE__*/jsx("div", {
      children: children
    })]
  });
}

export { InlineAlert as default };
//# sourceMappingURL=InlineAlert.mjs.map
