import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useStyleConfig, vui } from '../core';
import Icon from '../icon';
import P from '../p';
import { cs } from '../utils';
import { inputColors } from './consts';
import { useInputContext } from './context';
/** Displaying help text below the input. */
export const HelpText = vui((props, ref) => {
    const { className, children, isError, ...rest } = props;
    const inputProps = useInputContext();
    const mergedProps = { ...inputProps, ...props };
    const styles = useStyleConfig('Input', mergedProps);
    const color = isError ? inputColors.error : inputColors.helpText;
    return (_jsxs(P, { alignItems: "flex-start", className: cs('vui-inputHelpText', className), color: color, display: "flex", fontSize: isError ? 'md' : 'sm', pt: 0.5, ref: ref, ...styles.helpText, ...rest, children: [isError && _jsx(Icon, { mr: 1, mt: "3px", name: "falExclamationTriangle", pathFill: inputColors.error, size: "sm" }), children] }));
});
HelpText.displayName = 'HelpText';
export default HelpText;
//# sourceMappingURL=helpText.js.map