trepur_components 0.3.0 → 0.3.3

package/dist/components/Testimonial/index.js

@@ -9,6 +9,10 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Image = _interopRequireDefault(require("../Image"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,9 +24,8 @@ const Testimonial = _ref => {
     id,
     classes,
     imageClasses,
-    image,
-    altText,
     text,
+    imageProps,
     companyName,
     position,
     date,
@@ -31,32 +34,33 @@ const Testimonial = _ref => {
     authorsName,
     authorsPosition,
     bgColor,
-    textColor
+    textColor,
+    authorTextColor
   } = _ref;
-  const classList = classes + ' text-center';
-  const imageClassList = imageClasses + ' mx-auto rounded-full w-32 h-32'; //---------- Styling ---------------
-
-  const styles = {
-    'backgroundColor': bgColor,
-    'color': textColor
-  }; //-----------------------------------
-
+  const classList = (0, _classnames.default)({
+    [classes]: classes,
+    [bgColor]: bgColor,
+    'bg-white': !bgColor,
+    [textColor]: textColor,
+    'text-black': !textColor
+  }, 'text-center');
+  const imageClassList = (0, _classnames.default)({
+    [imageClasses]: imageClasses
+  }, 'mx-auto rounded-full w-32 h-32');
+  imageProps.classes = (imageProps === null || imageProps === void 0 ? void 0 : imageProps.classes) + ' ' + imageClassList;
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
-    style: styles,
     className: classList
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    className: imageClassList,
-    src: image,
-    alt: altText
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    imageProps: imageProps
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", {
     className: "text-md md:text-lg"
   }, companyName, " "), /*#__PURE__*/_react.default.createElement("p", {
     className: "text-md md:text-lg"
   }, position), /*#__PURE__*/_react.default.createElement("p", null, positionStartDate, " - ", positionEndDate), /*#__PURE__*/_react.default.createElement("p", null, text), /*#__PURE__*/_react.default.createElement("p", {
-    className: "text-grey"
-  }, authorsName, " - ", authorsPosition, ":  ", date)));
+    className: authorTextColor
+  }, authorsName, " - ", authorsPosition, ": ", date)));
 };
 
 var _default = Testimonial;

package/dist/components/TextAndTitle/index.js

@@ -5,7 +5,7 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.textAndTitleProps = exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
@@ -19,10 +19,12 @@ var _Input = _interopRequireDefault(require("../Input"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-require("../index.css");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,71 +39,81 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+const textAndTitleProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  titleClasses: _propTypes.default.string,
+  editTitleClasses: _propTypes.default.string,
+  editTextClasses: _propTypes.default.string,
+  editInputClasses: _propTypes.default.string,
+  textClasses: _propTypes.default.string,
+  textLineOne: _propTypes.default.string,
+  textLineTwo: _propTypes.default.string,
+  textLineThree: _propTypes.default.string,
+  title: _propTypes.default.string,
+  titleBold: _propTypes.default.bool,
+  titleBgColor: _propTypes.default.string,
+  textBgColor: _propTypes.default.string,
+  textColor: _propTypes.default.string,
+  titleColor: _propTypes.default.string,
+  textCenter: _propTypes.default.bool,
+  titleCenter: _propTypes.default.bool,
+  withLiveUpdates: _propTypes.default.bool,
+  onSave: _propTypes.default.func,
+  saveButtonProps: _propTypes.default.object,
+  cancelButtonProps: _propTypes.default.object
+};
+exports.textAndTitleProps = textAndTitleProps;
+
 const TextAndTitle = _ref => {
+  var _textAndTitleProps$sa, _textAndTitleProps$sa2, _textAndTitleProps$sa3, _textAndTitleProps$sa4, _textAndTitleProps$sa5, _textAndTitleProps$sa6, _textAndTitleProps$ca, _textAndTitleProps$ca2, _textAndTitleProps$ca3, _textAndTitleProps$ca4, _textAndTitleProps$ca5, _textAndTitleProps$ca6;
+
   let {
-    id,
-    classes,
-    titleClasses,
-    editTitleClasses,
-    editTextClasses,
-    editInputClasses,
-    textClasses,
-    textLineOne,
-    textLineTwo,
-    textLineThree,
-    title,
-    titleBold,
-    bgColor,
-    textColor,
-    titleColor,
-    textCenter,
-    titleCenter,
-    withLiveUpdates,
-    onSave,
-    saveButtonProps,
-    cancelButtonProps
+    textAndTitleProps
   } = _ref;
   const defaultComponentData = {
     title: {
-      text: title
+      text: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.title
     },
     textLineOne: {
-      text: textLineOne
+      text: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textLineOne
     },
     textLineTwo: {
-      text: textLineTwo
+      text: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textLineTwo
     },
     textLineThree: {
-      text: textLineThree
+      text: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textLineThree
     }
   };
   const [isInEditingMode, setIsInEditingMode] = (0, _react.useState)(false);
   const [isHovering, setIsHovering] = (0, _react.useState)(false);
   const [componentData, setComponentData] = (0, _react.useState)(defaultComponentData);
+  if (textAndTitleProps == undefined) return;
   const hoverClasses = 'border-dashed border';
   const classList = (0, _classnames.default)({
-    [hoverClasses]: withLiveUpdates && !isInEditingMode && isHovering,
-    [classes]: classes
+    [hoverClasses]: (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.withLiveUpdates) && !isInEditingMode && isHovering,
+    [textAndTitleProps.classes]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.classes
   });
-  let titleClassList = 'text-md sm:text-lg ';
-  titleClassList += titleBold ? 'font-bold ' : '';
-  titleClassList += titleCenter ? 'text-center ' : '';
-  titleClassList += titleClasses ? titleClasses : '';
-  let textClassList = 'pt-4';
-  textClassList += textCenter ? 'text-center ' : '';
-  textClassList += textClasses ? textClasses : ''; //---------- Styling ---------------
-
-  const textStyles = {
-    'backgroundColor': bgColor,
-    'color': textColor
-  };
-  const titleStyles = {
-    'backgroundColor': bgColor,
-    'color': titleColor
-  }; //-----------------------------------
+  const titleClassList = (0, _classnames.default)({
+    'font-bold': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.titleBold,
+    'text-center': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.titleCenter,
+    [textAndTitleProps.titleClasses]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.titleClasses,
+    [textAndTitleProps.titleBgColor]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.titleBgColor,
+    'bg-white': !(textAndTitleProps !== null && textAndTitleProps !== void 0 && textAndTitleProps.titleBgColor),
+    [textAndTitleProps.titleColor]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.titleColor,
+    'text-black': !(textAndTitleProps !== null && textAndTitleProps !== void 0 && textAndTitleProps.titleColor)
+  }, 'text-md sm:text-lg');
+  const textClassList = (0, _classnames.default)({
+    'text-center': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textCenter,
+    [textAndTitleProps.textClasses]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textClasses,
+    [textAndTitleProps.textBgColor]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textBgColor,
+    'bg-white': !(textAndTitleProps !== null && textAndTitleProps !== void 0 && textAndTitleProps.textBgColor),
+    [textAndTitleProps.textColor]: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.textColor,
+    'text-black': !(textAndTitleProps !== null && textAndTitleProps !== void 0 && textAndTitleProps.textColor)
+  }, 'pt-4');
 
   const toggleEditState = () => {
-    withLiveUpdates && setIsInEditingMode(!isInEditingMode);
+    (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.withLiveUpdates) && setIsInEditingMode(!isInEditingMode);
   };
 
   const handleButtonSave = () => {
@@ -123,7 +135,7 @@ const TextAndTitle = _ref => {
       value: componentData.textLineThree.text
     });
     toggleEditState();
-    onSave(arr, id);
+    textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.onSave(arr, textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.id);
     setIsHovering(false);
   };
 
@@ -134,7 +146,6 @@ const TextAndTitle = _ref => {
 
   const handleChange = e => {
     let id = e.target.id;
-    console.log('id', id);
     id = id.split('-')[id.split('-').length - 1];
     setComponentData(_objectSpread(_objectSpread({}, componentData), {}, {
       [id]: {
@@ -144,80 +155,91 @@ const TextAndTitle = _ref => {
   };
 
   const toggleHoverState = () => {
-    withLiveUpdates && setIsHovering(!isHovering);
+    (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.withLiveUpdates) && setIsHovering(!isHovering);
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.id) && {
+    id: textAndTitleProps.id
   }, {
     className: classList,
     onMouseOver: () => toggleHoverState(),
     onMouseOut: () => toggleHoverState()
-  }), withLiveUpdates && isInEditingMode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "title",
-    classes: editTitleClasses,
-    inputClasses: editInputClasses,
-    autoFocus: true,
-    value: componentData.title.text,
-    onChange: e => handleChange(e),
-    type: "text"
+  }), textAndTitleProps !== null && textAndTitleProps !== void 0 && textAndTitleProps.withLiveUpdates && isInEditingMode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    inputProps: {
+      id: 'title',
+      classes: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editTitleClasses,
+      inputClasses: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editInputClasses,
+      autoFocus: true,
+      value: componentData.title.text,
+      onChange: e => handleChange(e),
+      type: "text"
+    }
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "textLineOne",
-    classes: editTextClasses,
-    inputClasses: editInputClasses,
-    value: componentData.textLineOne.text,
-    onChange: e => handleChange(e),
-    type: "text"
+    inputProps: {
+      id: 'textLineOne',
+      classes: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editTextClasses,
+      inputClasses: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editInputClasses,
+      value: componentData.textLineOne.text,
+      onChange: e => handleChange(e),
+      type: "text"
+    }
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "textLineTwo",
-    classes: editTextClasses,
-    inputClasses: editInputClasses,
-    value: componentData.textLineTwo.text,
-    onChange: e => handleChange(e),
-    type: "text"
+    inputProps: {
+      id: 'textLineTwo',
+      classes: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editTextClasses,
+      inputClasses: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editInputClasses,
+      value: componentData.textLineTwo.text,
+      onChange: e => handleChange(e),
+      type: "text"
+    }
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "textLineThree",
-    classes: editTextClasses,
-    inputClasses: editInputClasses,
-    value: componentData.textLineThree.text,
-    onChange: e => handleChange(e),
-    type: "text"
+    inputProps: {
+      id: 'textLineThree',
+      classes: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editTextClasses,
+      inputClasses: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.editInputClasses,
+      value: componentData.textLineThree.text,
+      onChange: e => handleChange(e),
+      type: "text"
+    }
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonClasses: "mt-4",
-    buttonText: "Save",
-    buttonOnClick: handleButtonSave,
-    buttonBgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.bgColor,
-    buttonBorderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.borderColor,
-    buttonTextColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.textColor,
-    buttonHoverTextColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverTextColor,
-    buttonHoverBorderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBorderColor,
-    buttonHoverBgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBgColor
+    buttonProps: {
+      classes: textAndTitleProps.saveButtonProps.classes,
+      text: textAndTitleProps.saveButtonProps.text,
+      onClick: handleButtonSave,
+      bgColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$sa = textAndTitleProps.saveButtonProps) === null || _textAndTitleProps$sa === void 0 ? void 0 : _textAndTitleProps$sa.bgColor,
+      borderColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$sa2 = textAndTitleProps.saveButtonProps) === null || _textAndTitleProps$sa2 === void 0 ? void 0 : _textAndTitleProps$sa2.borderColor,
+      textColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$sa3 = textAndTitleProps.saveButtonProps) === null || _textAndTitleProps$sa3 === void 0 ? void 0 : _textAndTitleProps$sa3.textColor,
+      hoverTextColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$sa4 = textAndTitleProps.saveButtonProps) === null || _textAndTitleProps$sa4 === void 0 ? void 0 : _textAndTitleProps$sa4.hoverTextColor,
+      hoverBorderColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$sa5 = textAndTitleProps.saveButtonProps) === null || _textAndTitleProps$sa5 === void 0 ? void 0 : _textAndTitleProps$sa5.hoverBorderColor,
+      hoverBgColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$sa6 = textAndTitleProps.saveButtonProps) === null || _textAndTitleProps$sa6 === void 0 ? void 0 : _textAndTitleProps$sa6.hoverBgColor
+    }
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonClasses: "mt-4 ml-4",
-    buttonText: "Cancel",
-    buttonOnClick: handleButtonCancel,
-    buttonBgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.bgColor,
-    buttonBorderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.borderColor,
-    buttonTextColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.textColor,
-    buttonHoverTextColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverTextColor,
-    buttonHoverBorderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBorderColor,
-    buttonHoverBgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBgColor
+    buttonProps: {
+      classes: textAndTitleProps.cancelButtonProps.classes,
+      text: textAndTitleProps.cancelButtonProps.text,
+      onClick: handleButtonCancel,
+      bgColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$ca = textAndTitleProps.cancelButtonProps) === null || _textAndTitleProps$ca === void 0 ? void 0 : _textAndTitleProps$ca.bgColor,
+      borderColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$ca2 = textAndTitleProps.cancelButtonProps) === null || _textAndTitleProps$ca2 === void 0 ? void 0 : _textAndTitleProps$ca2.borderColor,
+      textColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$ca3 = textAndTitleProps.cancelButtonProps) === null || _textAndTitleProps$ca3 === void 0 ? void 0 : _textAndTitleProps$ca3.textColor,
+      hoverTextColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$ca4 = textAndTitleProps.cancelButtonProps) === null || _textAndTitleProps$ca4 === void 0 ? void 0 : _textAndTitleProps$ca4.hoverTextColor,
+      hoverBorderColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$ca5 = textAndTitleProps.cancelButtonProps) === null || _textAndTitleProps$ca5 === void 0 ? void 0 : _textAndTitleProps$ca5.hoverBorderColor,
+      hoverBgColor: textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : (_textAndTitleProps$ca6 = textAndTitleProps.cancelButtonProps) === null || _textAndTitleProps$ca6 === void 0 ? void 0 : _textAndTitleProps$ca6.hoverBgColor
+    }
   })) : /*#__PURE__*/_react.default.createElement("div", {
     onClick: toggleEditState
   }, /*#__PURE__*/_react.default.createElement("h1", {
-    style: titleStyles,
     className: titleClassList
   }, componentData.title.text), /*#__PURE__*/_react.default.createElement("p", {
-    style: textStyles,
     className: textClassList
   }, componentData.textLineOne.text), /*#__PURE__*/_react.default.createElement("p", {
-    style: textStyles,
     className: textClassList
   }, componentData.textLineTwo.text), /*#__PURE__*/_react.default.createElement("p", {
-    style: textStyles,
     className: textClassList
   }, componentData.textLineThree.text)));
 };
 
+TextAndTitle.propTypes = {
+  textAndTitleProps: _propTypes.default.shape(_objectSpread({}, textAndTitleProps))
+};
 var _default = TextAndTitle;
 exports.default = _default;

package/dist/components/TextArea/index.js

@@ -3,73 +3,94 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.textAreaProps = exports.default = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+const textAreaProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  labelClasses: _propTypes.default.string,
+  textAreaClasses: _propTypes.default.string,
+  label: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  bold: _propTypes.default.bool,
+  name: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  rows: _propTypes.default.number,
+  cols: _propTypes.default.number,
+  autoFocus: _propTypes.default.bool,
+  formId: _propTypes.default.string,
+  maxLength: _propTypes.default.string,
+  readOnly: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onChange: _propTypes.default.func
+};
+exports.textAreaProps = textAreaProps;
+
 const TextArea = _ref => {
   let {
-    id,
-    classes,
-    labelClasses,
-    textAreaClasses,
-    label,
-    placeholder,
-    bold,
-    onChange,
-    name,
-    disabled,
-    rows,
-    cols,
-    autoFocus,
-    formId,
-    maxLength,
-    readOnly,
-    required,
-    onBlur,
-    onFocus
+    textAreaProps
   } = _ref;
-  let classList = 'flex flex-col ';
-  classList += classes ? classes : '';
-  let labelClassList = 'w-auto ';
-  labelClassList += bold ? 'font-bold ' : '';
-  labelClassList += labelClasses ? labelClasses : '';
-  let textAreaClassList = 'border px-2 ';
-  textAreaClassList += textAreaClasses ? textAreaClasses : '';
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  const classList = (0, _classnames.default)({
+    [textAreaProps.classes]: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.classes
+  }, 'flex flex-col');
+  const labelClassList = (0, _classnames.default)({
+    'font-bold': textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.bold,
+    [textAreaProps.labelClasses]: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.labelClasses
+  }, 'w-auto');
+  const textAreaClassList = (0, _classnames.default)({
+    [textAreaProps.textAreaClasses]: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.textAreaClasses
+  }, 'border px-2');
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.id) && {
+    id: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.id
   }, {
     className: classList
-  }), label && /*#__PURE__*/_react.default.createElement("label", {
-    id: "label-".concat(id),
+  }), (textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.label) && /*#__PURE__*/_react.default.createElement("label", {
+    id: "label-".concat(textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.id),
     className: labelClassList,
-    htmlFor: "text-area-".concat(id)
-  }, label), /*#__PURE__*/_react.default.createElement("textarea", {
-    id: "text-area-".concat(id),
+    htmlFor: "text-area-".concat(textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.id)
+  }, textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.label), /*#__PURE__*/_react.default.createElement("textarea", {
+    id: "text-area-".concat(textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.id),
     className: textAreaClassList,
-    autoFocus: autoFocus,
-    form: formId,
-    maxLength: maxLength,
-    readOnly: readOnly,
-    required: required,
-    disabled: disabled,
-    rows: rows,
-    cols: cols,
-    name: name,
-    placeholder: placeholder,
-    onChange: onChange,
-    onFocus: onFocus,
-    onBlur: onBlur
+    autoFocus: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.autoFocus,
+    form: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.formId,
+    maxLength: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.maxLength,
+    readOnly: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.readOnly,
+    required: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.required,
+    disabled: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.disabled,
+    rows: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.rows,
+    cols: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.cols,
+    name: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.name,
+    placeholder: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.placeholder,
+    onChange: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.onChange,
+    onFocus: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.onFocus,
+    onBlur: textAreaProps === null || textAreaProps === void 0 ? void 0 : textAreaProps.onBlur
   }));
 };
 
+TextArea.propTypes = {
+  textAreaProps: _propTypes.default.shape(_objectSpread({}, textAreaProps))
+};
 var _default = TextArea;
 exports.default = _default;