@heycar-uikit/core/form-control/modern/FormControl.js

The React UI library from HeyCar

import React from 'react';
import cn from 'classnames';

var styles = {"component":"form-control__component_135gg","inner":"form-control__inner_135gg","hasLeftIcon":"form-control__hasLeftIcon_135gg","label":"form-control__label_135gg","filled":"form-control__filled_135gg","hint":"form-control__hint_135gg","disabled":"form-control__disabled_135gg","fieldset":"form-control__fieldset_135gg","hasError":"form-control__hasError_135gg","focused":"form-control__focused_135gg","legend":"form-control__legend_135gg","inputWrapper":"form-control__inputWrapper_135gg","input":"form-control__input_135gg","labelInner":"form-control__labelInner_135gg","fullWidth":"form-control__fullWidth_135gg","addons":"form-control__addons_135gg","leftIcon":"form-control__leftIcon_135gg","rightIcon":"form-control__rightIcon_135gg","rightAddons":"form-control__rightAddons_135gg","sub":"form-control__sub_135gg","error":"form-control__error_135gg"};
 require('./styles/default.css');

const FormControl = React.forwardRef(({ fullWidth = false, className, disabled, focused, filled, error, hint, label, leftIcon, rightAddons, rightIcon, bottomAddons, children, dataTestId, ...restProps }, ref) => {
    const wrapperClassNames = cn(styles.component, className, {
        [styles.fullWidth]: fullWidth,
        [styles.hasLeftIcon]: leftIcon,
        [styles.disabled]: disabled,
        [styles.hasError]: error,
    });
    const innerClassNames = cn(styles.inner, {
        [styles.filled]: filled,
        [styles.focused]: focused,
    });
    const rightAddonsClassNames = cn(styles.addons, {
        [styles.rightAddons]: rightAddons,
        [styles.rightIcon]: rightIcon,
    });
    const errorMessage = typeof error === 'boolean' ? '' : error;
    return (React.createElement("div", { className: wrapperClassNames, "data-test-id": dataTestId },
        React.createElement("div", { ...restProps, className: innerClassNames, ref: ref },
            leftIcon && (React.createElement("div", { className: cn(styles.addons, styles.leftIcon) }, leftIcon)),
            React.createElement("div", { className: styles.inputWrapper },
                label && (React.createElement(React.Fragment, null,
                    React.createElement("label", { className: styles.label },
                        React.createElement("span", { className: styles.labelInner }, label)))),
                React.createElement("div", { className: styles.input }, children)),
            React.createElement("fieldset", { "aria-hidden": "true", className: styles.fieldset },
                React.createElement("legend", { className: styles.legend }, label && React.createElement("span", null, label))),
            (rightAddons || rightIcon) && (React.createElement("div", { className: rightAddonsClassNames }, rightAddons || rightIcon))),
        bottomAddons,
        errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.error), role: "alert" }, errorMessage)),
        hint && !errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.hint) }, hint))));
});
FormControl.displayName = 'FormControl';

export { FormControl as default };