import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import Label from '../label/index.js';
import Textarea from '../textarea/index.js';
import Stack from '../stack/index.js';
import InlineValidation from '../inline-validation/index.js';
import { useField } from '../use-form/index.js';
import '@reach/visually-hidden';
import 'classnames';
import '../defineProperty-CEd-kZQW.js';
import '../ck-icon/index.js';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../text/index.js';
import '../slicedToArray-BB-AwwkK.js';
import '../index-qSfOyGhk.js';
import '../typeof-CgC7Bq6K.js';
import '../auto-id.esm-Cly76abB.js';
import '../utils.esm-CKyxlHOy.js';
import '../warning-s9zGJbnw.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../use-progress/index.js';
import '../use-trailing-debounce/index.js';

var _excluded = ["id", "name", "label", "value", "autoFocus", "onChange", "rows"];
function TextareaField(_ref) {
  var id = _ref.id,
      name = _ref.name,
      label = _ref.label,
      value = _ref.value,
      autoFocus = _ref.autoFocus,
      onChange = _ref.onChange,
      _ref$rows = _ref.rows,
      rows = _ref$rows === void 0 ? 4 : _ref$rows,
      props = _objectWithoutProperties(_ref, _excluded);

  var field = useField({
    id: id,
    name: name,
    value: value,
    onChange: onChange
  });
  return /*#__PURE__*/React__default.createElement(Stack, {
    spacing: 2
  }, /*#__PURE__*/React__default.createElement(Label, {
    htmlFor: field.id
  }, label), /*#__PURE__*/React__default.createElement(Textarea, _extends({
    id: field.id,
    autoFocus: autoFocus,
    name: name,
    value: field.value,
    onBlur: field.onBlur,
    onChange: field.onChange,
    rows: rows
  }, props)), /*#__PURE__*/React__default.createElement(InlineValidation, {
    name: name
  }));
}
TextareaField.propTypes = {
  id: PropTypes.number,
  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.string,
  autoFocus: PropTypes.bool,
  onChange: PropTypes.func,
  rows: PropTypes.number
};

export { TextareaField as default };
