import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { forwardRef, useContext } from 'react';
import { Label } from './Label';
import { FormContext } from './context';
export var FormControl = forwardRef(function (_a, ref) {
    var className = _a.className, style = _a.style, label = _a.label, children = _a.children, required = _a.required, invalid = _a.invalid, withoutLabel = _a.withoutLabel;
    var controlStyle = useContext(FormContext).controlStyle;
    return (_jsxs("div", __assign({ ref: ref, className: cx('zent-form-control', {
            'has-error': invalid,
        }, className), style: __assign(__assign({}, controlStyle), style), "data-zv": 'v10.0.11' }, { children: [withoutLabel ? null : _jsx(Label, __assign({ required: required }, { children: label }), void 0), _jsx("div", __assign({ className: "zent-form-control-content", "data-zv": 'v10.0.11' }, { children: children }), void 0)] }), void 0));
});
FormControl.displayName = 'ZentFormControl';
