import { _ as __rest } from './tslib.es6-es.js';
import React__default, { useId } from 'react';
import { T as Text } from './Text-es.js';
import { I as Icon } from './Icon-es.js';

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

const HelperText = React__default.forwardRef(function HelperText(_a, ref) {
    var { message, status = "neutral", id } = _a, rest = __rest(_a, ["message", "status", "id"]);
    const generatedId = useId();
    const isCritical = status === "critical";
    return (React__default.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__default.createElement("span", { className: styles.leadingIcon },
            React__default.createElement(Icon, { name: "alert", size: "small", color: "critical" }))),
        React__default.createElement(Text, { size: "small", variation: isCritical ? "error" : "subdued" }, message)));
});

export { HelperText as H };
