'use strict';

var tslib_es6 = require('./tslib.es6-cjs.js');
var React = require('react');
var Text = require('./Text-cjs.js');
var Icon = require('./Icon-cjs.js');

var styles = {"helperText":"yL7--3ni8BM-","neutral":"T8y6sv17efg-","critical":"VOiBogstpjU-","leadingIcon":"bvlhcaSPuO8-","spinning":"tsQaIzvraoE-"};

const HelperText = React.forwardRef(function HelperText(_a, ref) {
    var { message, status = "neutral", id } = _a, rest = tslib_es6.__rest(_a, ["message", "status", "id"]);
    const generatedId = React.useId();
    const isCritical = status === "critical";
    return (React.createElement("div", Object.assign({}, rest, { ref: ref, id: id !== null && id !== void 0 ? id : generatedId, className: `${styles.helperText} ${isCritical ? styles.critical : styles.neutral}`, role: isCritical ? "alert" : undefined }),
        isCritical && (React.createElement("span", { className: styles.leadingIcon },
            React.createElement(Icon.Icon, { name: "alert", size: "small", color: "critical" }))),
        React.createElement(Text.Text, { size: "small", variation: isCritical ? "error" : "subdued" }, message)));
});

exports.HelperText = HelperText;
