@xaypay/tui 0.0.66 → 0.0.68

package/dist/index.es.js

@@ -32,13 +32,15 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:2.5rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
 var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$d);
 
 var css_248z$c = "";
 styleInject(css_248z$c);
 
+var pdfImage = "<svg width=\"40\" height=\"52\" viewBox=\"0 0 40 52\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M39.1304 13.1106V36.2849V36.2853C39.394 36.4388 39.6133 36.6599 39.7659 36.9263C39.9189 37.1931 39.9992 37.4956 40 37.8037V47.5932C39.9984 48.7614 39.54 49.8816 38.7252 50.7079C37.91 51.5337 36.8048 51.9984 35.6522 52H4.34783C3.19523 51.9984 2.09005 51.5338 1.27483 50.7079C0.460015 49.8816 0.0015528 48.7614 0 47.5932V34.7817C0.000775155 34.4736 0.0815204 34.1714 0.234087 33.9051C0.386643 33.6383 0.605983 33.4176 0.869565 33.2641V3.52545C0.869565 2.5906 1.23602 1.69387 1.8882 1.03245C2.54072 0.371431 3.42547 0 4.34783 0H26.1953L39.1304 13.1106ZM13.872 45.3893C14.6037 45.4385 15.3293 45.2261 15.9225 44.7893C16.4303 44.3463 16.7036 43.6872 16.6605 43.0096C16.671 42.6272 16.598 42.2471 16.4478 41.8965C16.3154 41.6026 16.1136 41.3464 15.8597 41.1509C15.5976 40.9542 15.2991 40.8137 14.9816 40.7385C14.6225 40.6512 14.2541 40.6083 13.8849 40.6115H11.0258V48.4741H12.6849V45.3893H13.872ZM22.6954 47.4563C23.0149 47.1041 23.2498 46.6815 23.3814 46.2224C23.5347 45.6809 23.6084 45.1195 23.5999 44.5564C23.6065 44.008 23.5362 43.4614 23.3918 42.933C23.2672 42.477 23.0475 42.0532 22.7474 41.6904C22.4465 41.3379 22.0669 41.064 21.6398 40.8917C21.1305 40.6934 20.5882 40.5982 20.0432 40.6116H17.506V48.4821H20.0642C21.0475 48.5494 22.0103 48.1743 22.6954 47.4563ZM26.1252 42.05H29.4956L29.4956 40.6115H24.4661V48.4804L26.1287 48.4808V45.1068L28.6505 45.0962L28.64 43.6577H26.1252V42.05ZM18.3352 36.0407H37.3911L37.3908 14.3567H28.4428C27.5205 14.3567 26.6358 13.9852 25.9836 13.3238C25.331 12.6628 24.9646 11.7661 24.9646 10.8312V1.76186H4.34743C3.88625 1.76186 3.4437 1.94758 3.11762 2.27808C2.79153 2.60859 2.6083 3.05715 2.6083 3.52458V33.0185H14.9392C15.4408 33.0185 15.9179 33.238 16.2482 33.6205L18.3352 36.0407ZM6.08594 13.7151C6.08594 13.2283 6.48054 12.8337 6.9673 12.8337H20.6043C21.0911 12.8337 21.4857 13.2283 21.4857 13.7151C21.4857 14.2019 21.0911 14.5965 20.6043 14.5965H6.9673C6.48054 14.5965 6.08594 14.2019 6.08594 13.7151ZM18.5137 25.3369C18.5137 24.8502 18.9083 24.4556 19.395 24.4556H33.0321C33.5188 24.4556 33.9134 24.8502 33.9134 25.3369C33.9134 25.8237 33.5188 26.2183 33.0321 26.2183H19.395C18.9083 26.2183 18.5137 25.8237 18.5137 25.3369ZM6.9673 16.7056C6.48054 16.7056 6.08594 17.1002 6.08594 17.5869C6.08594 18.0737 6.48054 18.4683 6.9673 18.4683H33.0307C33.5174 18.4683 33.912 18.0737 33.912 17.5869C33.912 17.1002 33.5174 16.7056 33.0307 16.7056H6.9673ZM6.08594 21.4618C6.08594 20.975 6.48054 20.5804 6.9673 20.5804H33.0307C33.5174 20.5804 33.912 20.975 33.912 21.4618C33.912 21.9486 33.5174 22.3432 33.0307 22.3432H6.9673C6.48054 22.3432 6.08594 21.9486 6.08594 21.4618ZM21.4704 42.6691C21.1241 42.239 20.5919 42.0085 20.0457 42.0521H19.166V47.0441H20.0251C20.352 47.0567 20.6773 46.9886 20.9727 46.8469C21.213 46.7226 21.4156 46.5345 21.5589 46.3032C21.7076 46.0577 21.8089 45.7862 21.8582 45.5029C21.9164 45.1846 21.9455 44.8615 21.9451 44.5377C21.951 44.1698 21.9106 43.8023 21.8252 43.4446C21.758 43.1653 21.6373 42.9016 21.4704 42.6691ZM13.7445 42.0508C14.085 42.0213 14.4258 42.1008 14.7193 42.2782C14.8136 42.3518 14.8858 42.4501 14.9282 42.5627C14.9825 42.7134 15.0077 42.8731 15.0019 43.0333C15.0093 43.1969 14.9728 43.3594 14.8967 43.5039C14.8311 43.6211 14.7352 43.7175 14.6195 43.7832C14.4961 43.8525 14.361 43.8981 14.2212 43.9182C14.0636 43.9426 13.9041 43.9548 13.7445 43.9544H12.6855V42.0508H13.7445Z\" fill=\"#00236A\"/>\n</svg>";
+
 const File = ({
   name,
   label,
@@ -52,8 +54,7 @@ const File = ({
   fileExtensions,
   ...props
 }) => {
-  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
-  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
+  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImage : null);
   const [error, setError] = useState('');
   const [fileName, setFileName] = useState('no selected file');
   const handleCheckFile = e => {
@@ -66,7 +67,7 @@ const File = ({
             onChange({
               file
             });
-            setImage(pdfImageName);
+            setImage(pdfImage);
           } else {
             setError('');
             onChange({
@@ -636,19 +637,32 @@ const Input = ({
     `;
   const handleChange = event => {
     const currentValue = event.target.value;
-    if (onChange) {
-      currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
-    }
     setInnerValue(currentValue);
     if (type === 'tel') {
-      !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      if (currentValue.length > 8) {
+        setInnerValue(currentValue.substr(0, 8));
+      }
+      if (!phoneNumberRegex.test(currentValue) && telErrorMessage) {
+        setInnerErrorMessage(telErrorMessage);
+      } else {
+        setInnerErrorMessage('');
+      }
     }
-    if (maxLength) {
-      currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+      setInnerValue(currentValue.substr(0, maxLength));
     }
-    if (regexp) {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
+    if (onChange) {
+      onChange(currentValue);
+      if (type === 'tel' && currentValue.length > 8) {
+        onChange(currentValue.substr(0, 8));
+      }
+      if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+        onChange(currentValue.substr(0, maxLength));
+      }
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -657,34 +671,31 @@ const Input = ({
     setIsHover(false);
   };
   useEffect(() => {
-    if (value && value !== '') {
+    if (value !== undefined && value !== null) {
       setInnerValue(value);
       if (type === 'tel') {
-        !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+        if (value.length > 8) {
+          setInnerValue(value.substr(0, 8));
+        }
+        if (!phoneNumberRegex.test(value) && telErrorMessage) {
+          setInnerErrorMessage(telErrorMessage);
+        } else {
+          setInnerErrorMessage('');
+        }
       }
-      if (maxLength) {
-        value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+      if (maxLength && value.length > maxLength && type !== 'tel') {
+        setInnerValue(value.substr(0, maxLength));
       }
-      if (regexp) {
+      if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
         !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       }
     }
-  }, [value]);
-  useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
+    } else {
+      setInnerErrorMessage('');
     }
-  }, [errorMessage]);
-  useEffect(() => {
-    if (type === 'tel' && !telErrorMessage) {
-      alert('Please add telErrorMessage on input component');
-    }
-  }, [type]);
-  useEffect(() => {
-    if (regexp && !regexpErrorMessage) {
-      alert('Please add regexpErrorMessage prop on input component');
-    }
-  }, [regexp]);
+  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -1949,7 +1960,7 @@ styleInject(css_248z$1);
 
 // import styles from "./pagination.module.scss";
 
-const Dots = "...";
+const Dots$1 = "...";
 const range = (start, end) => {
   const length = end - start + 1;
   return Array.from({
@@ -1979,22 +1990,58 @@ const PaginationRange = ({
     if (!shouldShowLeftDots && shouldShowRightDots) {
       let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
       let leftRange = range(1, leftItemCount);
-      return [...leftRange, Dots, totalPageCount];
+      return [...leftRange, Dots$1, totalPageCount];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
       let rightItemCount = 0;
       currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
       let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-      return [firstPageIndex, Dots, ...rightRange];
+      return [firstPageIndex, Dots$1, ...rightRange];
     }
     if (shouldShowLeftDots && shouldShowRightDots) {
       let middleRange = range(leftSiblingIndex, rightSiblingIndex);
-      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+      return [firstPageIndex, Dots$1, ...middleRange, Dots$1, lastPageIndex];
     }
   }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
   return paginationRange;
 };
 
+const Dots = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 11 3",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "M0.230125 1.13624C0.230125 0.741577 0.326125 0.464244 0.518125 0.304244C0.710125 0.144244 0.939458 0.064244 1.20613 0.064244C1.48346 0.064244 1.71813 0.144244 1.91013 0.304244C2.11279 0.464244 2.21413 0.741577 2.21413 1.13624C2.21413 1.52024 2.11279 1.79758 1.91013 1.96824C1.71813 2.13891 1.48346 2.22424 1.20613 2.22424C0.939458 2.22424 0.710125 2.13891 0.518125 1.96824C0.326125 1.79758 0.230125 1.52024 0.230125 1.13624ZM4.51138 1.13624C4.51138 0.741577 4.60738 0.464244 4.79938 0.304244C4.99138 0.144244 5.22071 0.064244 5.48738 0.064244C5.76471 0.064244 5.99938 0.144244 6.19138 0.304244C6.39404 0.464244 6.49538 0.741577 6.49538 1.13624C6.49538 1.52024 6.39404 1.79758 6.19138 1.96824C5.99938 2.13891 5.76471 2.22424 5.48738 2.22424C5.22071 2.22424 4.99138 2.13891 4.79938 1.96824C4.60738 1.79758 4.51138 1.52024 4.51138 1.13624ZM8.79263 1.13624C8.79263 0.741577 8.88863 0.464244 9.08063 0.304244C9.27263 0.144244 9.50196 0.064244 9.76863 0.064244C10.046 0.064244 10.2806 0.144244 10.4726 0.304244C10.6753 0.464244 10.7766 0.741577 10.7766 1.13624C10.7766 1.52024 10.6753 1.79758 10.4726 1.96824C10.2806 2.13891 10.046 2.22424 9.76863 2.22424C9.50196 2.22424 9.27263 2.13891 9.08063 1.96824C8.88863 1.79758 8.79263 1.52024 8.79263 1.13624Z",
+  fill: "#3C393E"
+}));
+
+const SvgNextArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 6 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "M0.851445 11.9985C0.652853 11.9988 0.460393 11.9292 0.307477 11.8017C0.221413 11.7299 0.150271 11.6418 0.0981246 11.5423C0.0459785 11.4428 0.0138536 11.3339 0.0035897 11.2219C-0.00667418 11.1098 0.00512483 10.9969 0.0383107 10.8895C0.0714965 10.7821 0.125416 10.6823 0.196984 10.5958L4.00476 6.01173L0.332976 1.41906C0.262375 1.33158 0.209651 1.23092 0.177836 1.12286C0.146021 1.01481 0.135741 0.901501 0.147589 0.789439C0.159437 0.677378 0.193177 0.568777 0.246871 0.469879C0.300566 0.370982 0.373156 0.283737 0.460468 0.213159C0.548409 0.135301 0.651394 0.0765731 0.76296 0.0406621C0.874526 0.00475112 0.992266 -0.00756759 1.10879 0.00447845C1.22531 0.0165245 1.3381 0.0526755 1.44008 0.110663C1.54206 0.16865 1.63102 0.247221 1.70139 0.341446L5.80665 5.47292C5.93166 5.62596 6 5.81791 6 6.01601C6 6.2141 5.93166 6.40606 5.80665 6.55909L1.5569 11.6906C1.47164 11.7941 1.36333 11.8759 1.24075 11.9294C1.11818 11.9829 0.984807 12.0065 0.851445 11.9985Z",
+  fill: "#3C393E"
+}));
+
 const Pagination = ({
   onChange,
   totalCount,
@@ -2049,13 +2096,14 @@ const Pagination = ({
   return /*#__PURE__*/React__default.createElement("ul", {
     className: classProps
   }, /*#__PURE__*/React__default.createElement("button", {
+    style: {
+      transform: 'rotate(180deg)'
+    },
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
-  }, /*#__PURE__*/React__default.createElement("i", {
-    className: "icon-arrow-back"
-  })), paginationRange.map((pageNumber, id) => {
-    if (pageNumber === Dots) {
+  }, /*#__PURE__*/React__default.createElement(SvgNextArrow, null)), paginationRange.map((pageNumber, id) => {
+    if (pageNumber === Dots$1) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default.createElement("li", {
         key: id,
@@ -2064,21 +2112,16 @@ const Pagination = ({
         disabled: currentPageIndex === 0 ? true : false
       }, id < currentPageIndex ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React__default.createElement("i", {
-        className: "icon-text"
-      })), /*#__PURE__*/React__default.createElement("span", {
-        className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React__default.createElement("i", {
-        className: "icon-arrow-jump-back"
-      }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      }, /*#__PURE__*/React__default.createElement(Dots, null)), /*#__PURE__*/React__default.createElement("span", {
+        className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`,
+        style: {
+          transform: 'rotate(180deg)'
+        }
+      }, /*#__PURE__*/React__default.createElement(SvgNextArrow, null))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React__default.createElement("i", {
-        className: "icon-text"
-      })), /*#__PURE__*/React__default.createElement("span", {
+      }, /*#__PURE__*/React__default.createElement(Dots, null)), /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React__default.createElement("i", {
-        className: "icon-arrow-jump-next"
-      }))));
+      }, /*#__PURE__*/React__default.createElement(SvgNextArrow, null))));
     }
     return /*#__PURE__*/React__default.createElement("li", {
       onClick: () => onPageChange(pageNumber),
@@ -2089,9 +2132,7 @@ const Pagination = ({
     onClick: onNext,
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React__default.createElement("i", {
-    className: "icon-arrow"
-  })));
+  }, /*#__PURE__*/React__default.createElement(SvgNextArrow, null)));
 };
 Pagination.propTypes = {
   offset: PropTypes.number,

package/dist/index.js

@@ -62,13 +62,15 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:2.5rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
 var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$d);
 
 var css_248z$c = "";
 styleInject(css_248z$c);
 
+var pdfImage = "<svg width=\"40\" height=\"52\" viewBox=\"0 0 40 52\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M39.1304 13.1106V36.2849V36.2853C39.394 36.4388 39.6133 36.6599 39.7659 36.9263C39.9189 37.1931 39.9992 37.4956 40 37.8037V47.5932C39.9984 48.7614 39.54 49.8816 38.7252 50.7079C37.91 51.5337 36.8048 51.9984 35.6522 52H4.34783C3.19523 51.9984 2.09005 51.5338 1.27483 50.7079C0.460015 49.8816 0.0015528 48.7614 0 47.5932V34.7817C0.000775155 34.4736 0.0815204 34.1714 0.234087 33.9051C0.386643 33.6383 0.605983 33.4176 0.869565 33.2641V3.52545C0.869565 2.5906 1.23602 1.69387 1.8882 1.03245C2.54072 0.371431 3.42547 0 4.34783 0H26.1953L39.1304 13.1106ZM13.872 45.3893C14.6037 45.4385 15.3293 45.2261 15.9225 44.7893C16.4303 44.3463 16.7036 43.6872 16.6605 43.0096C16.671 42.6272 16.598 42.2471 16.4478 41.8965C16.3154 41.6026 16.1136 41.3464 15.8597 41.1509C15.5976 40.9542 15.2991 40.8137 14.9816 40.7385C14.6225 40.6512 14.2541 40.6083 13.8849 40.6115H11.0258V48.4741H12.6849V45.3893H13.872ZM22.6954 47.4563C23.0149 47.1041 23.2498 46.6815 23.3814 46.2224C23.5347 45.6809 23.6084 45.1195 23.5999 44.5564C23.6065 44.008 23.5362 43.4614 23.3918 42.933C23.2672 42.477 23.0475 42.0532 22.7474 41.6904C22.4465 41.3379 22.0669 41.064 21.6398 40.8917C21.1305 40.6934 20.5882 40.5982 20.0432 40.6116H17.506V48.4821H20.0642C21.0475 48.5494 22.0103 48.1743 22.6954 47.4563ZM26.1252 42.05H29.4956L29.4956 40.6115H24.4661V48.4804L26.1287 48.4808V45.1068L28.6505 45.0962L28.64 43.6577H26.1252V42.05ZM18.3352 36.0407H37.3911L37.3908 14.3567H28.4428C27.5205 14.3567 26.6358 13.9852 25.9836 13.3238C25.331 12.6628 24.9646 11.7661 24.9646 10.8312V1.76186H4.34743C3.88625 1.76186 3.4437 1.94758 3.11762 2.27808C2.79153 2.60859 2.6083 3.05715 2.6083 3.52458V33.0185H14.9392C15.4408 33.0185 15.9179 33.238 16.2482 33.6205L18.3352 36.0407ZM6.08594 13.7151C6.08594 13.2283 6.48054 12.8337 6.9673 12.8337H20.6043C21.0911 12.8337 21.4857 13.2283 21.4857 13.7151C21.4857 14.2019 21.0911 14.5965 20.6043 14.5965H6.9673C6.48054 14.5965 6.08594 14.2019 6.08594 13.7151ZM18.5137 25.3369C18.5137 24.8502 18.9083 24.4556 19.395 24.4556H33.0321C33.5188 24.4556 33.9134 24.8502 33.9134 25.3369C33.9134 25.8237 33.5188 26.2183 33.0321 26.2183H19.395C18.9083 26.2183 18.5137 25.8237 18.5137 25.3369ZM6.9673 16.7056C6.48054 16.7056 6.08594 17.1002 6.08594 17.5869C6.08594 18.0737 6.48054 18.4683 6.9673 18.4683H33.0307C33.5174 18.4683 33.912 18.0737 33.912 17.5869C33.912 17.1002 33.5174 16.7056 33.0307 16.7056H6.9673ZM6.08594 21.4618C6.08594 20.975 6.48054 20.5804 6.9673 20.5804H33.0307C33.5174 20.5804 33.912 20.975 33.912 21.4618C33.912 21.9486 33.5174 22.3432 33.0307 22.3432H6.9673C6.48054 22.3432 6.08594 21.9486 6.08594 21.4618ZM21.4704 42.6691C21.1241 42.239 20.5919 42.0085 20.0457 42.0521H19.166V47.0441H20.0251C20.352 47.0567 20.6773 46.9886 20.9727 46.8469C21.213 46.7226 21.4156 46.5345 21.5589 46.3032C21.7076 46.0577 21.8089 45.7862 21.8582 45.5029C21.9164 45.1846 21.9455 44.8615 21.9451 44.5377C21.951 44.1698 21.9106 43.8023 21.8252 43.4446C21.758 43.1653 21.6373 42.9016 21.4704 42.6691ZM13.7445 42.0508C14.085 42.0213 14.4258 42.1008 14.7193 42.2782C14.8136 42.3518 14.8858 42.4501 14.9282 42.5627C14.9825 42.7134 15.0077 42.8731 15.0019 43.0333C15.0093 43.1969 14.9728 43.3594 14.8967 43.5039C14.8311 43.6211 14.7352 43.7175 14.6195 43.7832C14.4961 43.8525 14.361 43.8981 14.2212 43.9182C14.0636 43.9426 13.9041 43.9548 13.7445 43.9544H12.6855V42.0508H13.7445Z\" fill=\"#00236A\"/>\n</svg>";
+
 const File = ({
   name,
   label,
@@ -82,8 +84,7 @@ const File = ({
   fileExtensions,
   ...props
 }) => {
-  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ';
-  const [image, setImage] = React.useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
+  const [image, setImage] = React.useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImage : null);
   const [error, setError] = React.useState('');
   const [fileName, setFileName] = React.useState('no selected file');
   const handleCheckFile = e => {
@@ -96,7 +97,7 @@ const File = ({
             onChange({
               file
             });
-            setImage(pdfImageName);
+            setImage(pdfImage);
           } else {
             setError('');
             onChange({
@@ -666,19 +667,32 @@ const Input = ({
     `;
   const handleChange = event => {
     const currentValue = event.target.value;
-    if (onChange) {
-      currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
-    }
     setInnerValue(currentValue);
     if (type === 'tel') {
-      !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      if (currentValue.length > 8) {
+        setInnerValue(currentValue.substr(0, 8));
+      }
+      if (!phoneNumberRegex.test(currentValue) && telErrorMessage) {
+        setInnerErrorMessage(telErrorMessage);
+      } else {
+        setInnerErrorMessage('');
+      }
     }
-    if (maxLength) {
-      currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+      setInnerValue(currentValue.substr(0, maxLength));
     }
-    if (regexp) {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
+    if (onChange) {
+      onChange(currentValue);
+      if (type === 'tel' && currentValue.length > 8) {
+        onChange(currentValue.substr(0, 8));
+      }
+      if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+        onChange(currentValue.substr(0, maxLength));
+      }
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -687,34 +701,31 @@ const Input = ({
     setIsHover(false);
   };
   React.useEffect(() => {
-    if (value && value !== '') {
+    if (value !== undefined && value !== null) {
       setInnerValue(value);
       if (type === 'tel') {
-        !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+        if (value.length > 8) {
+          setInnerValue(value.substr(0, 8));
+        }
+        if (!phoneNumberRegex.test(value) && telErrorMessage) {
+          setInnerErrorMessage(telErrorMessage);
+        } else {
+          setInnerErrorMessage('');
+        }
       }
-      if (maxLength) {
-        value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+      if (maxLength && value.length > maxLength && type !== 'tel') {
+        setInnerValue(value.substr(0, maxLength));
       }
-      if (regexp) {
+      if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
         !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       }
     }
-  }, [value]);
-  React.useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
+    } else {
+      setInnerErrorMessage('');
     }
-  }, [errorMessage]);
-  React.useEffect(() => {
-    if (type === 'tel' && !telErrorMessage) {
-      alert('Please add telErrorMessage on input component');
-    }
-  }, [type]);
-  React.useEffect(() => {
-    if (regexp && !regexpErrorMessage) {
-      alert('Please add regexpErrorMessage prop on input component');
-    }
-  }, [regexp]);
+  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -1979,7 +1990,7 @@ styleInject(css_248z$1);
 
 // import styles from "./pagination.module.scss";
 
-const Dots = "...";
+const Dots$1 = "...";
 const range = (start, end) => {
   const length = end - start + 1;
   return Array.from({
@@ -2009,22 +2020,58 @@ const PaginationRange = ({
     if (!shouldShowLeftDots && shouldShowRightDots) {
       let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
       let leftRange = range(1, leftItemCount);
-      return [...leftRange, Dots, totalPageCount];
+      return [...leftRange, Dots$1, totalPageCount];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
       let rightItemCount = 0;
       currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
       let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-      return [firstPageIndex, Dots, ...rightRange];
+      return [firstPageIndex, Dots$1, ...rightRange];
     }
     if (shouldShowLeftDots && shouldShowRightDots) {
       let middleRange = range(leftSiblingIndex, rightSiblingIndex);
-      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+      return [firstPageIndex, Dots$1, ...middleRange, Dots$1, lastPageIndex];
     }
   }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
   return paginationRange;
 };
 
+const Dots = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 11 3",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M0.230125 1.13624C0.230125 0.741577 0.326125 0.464244 0.518125 0.304244C0.710125 0.144244 0.939458 0.064244 1.20613 0.064244C1.48346 0.064244 1.71813 0.144244 1.91013 0.304244C2.11279 0.464244 2.21413 0.741577 2.21413 1.13624C2.21413 1.52024 2.11279 1.79758 1.91013 1.96824C1.71813 2.13891 1.48346 2.22424 1.20613 2.22424C0.939458 2.22424 0.710125 2.13891 0.518125 1.96824C0.326125 1.79758 0.230125 1.52024 0.230125 1.13624ZM4.51138 1.13624C4.51138 0.741577 4.60738 0.464244 4.79938 0.304244C4.99138 0.144244 5.22071 0.064244 5.48738 0.064244C5.76471 0.064244 5.99938 0.144244 6.19138 0.304244C6.39404 0.464244 6.49538 0.741577 6.49538 1.13624C6.49538 1.52024 6.39404 1.79758 6.19138 1.96824C5.99938 2.13891 5.76471 2.22424 5.48738 2.22424C5.22071 2.22424 4.99138 2.13891 4.79938 1.96824C4.60738 1.79758 4.51138 1.52024 4.51138 1.13624ZM8.79263 1.13624C8.79263 0.741577 8.88863 0.464244 9.08063 0.304244C9.27263 0.144244 9.50196 0.064244 9.76863 0.064244C10.046 0.064244 10.2806 0.144244 10.4726 0.304244C10.6753 0.464244 10.7766 0.741577 10.7766 1.13624C10.7766 1.52024 10.6753 1.79758 10.4726 1.96824C10.2806 2.13891 10.046 2.22424 9.76863 2.22424C9.50196 2.22424 9.27263 2.13891 9.08063 1.96824C8.88863 1.79758 8.79263 1.52024 8.79263 1.13624Z",
+  fill: "#3C393E"
+}));
+
+const SvgNextArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 6 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M0.851445 11.9985C0.652853 11.9988 0.460393 11.9292 0.307477 11.8017C0.221413 11.7299 0.150271 11.6418 0.0981246 11.5423C0.0459785 11.4428 0.0138536 11.3339 0.0035897 11.2219C-0.00667418 11.1098 0.00512483 10.9969 0.0383107 10.8895C0.0714965 10.7821 0.125416 10.6823 0.196984 10.5958L4.00476 6.01173L0.332976 1.41906C0.262375 1.33158 0.209651 1.23092 0.177836 1.12286C0.146021 1.01481 0.135741 0.901501 0.147589 0.789439C0.159437 0.677378 0.193177 0.568777 0.246871 0.469879C0.300566 0.370982 0.373156 0.283737 0.460468 0.213159C0.548409 0.135301 0.651394 0.0765731 0.76296 0.0406621C0.874526 0.00475112 0.992266 -0.00756759 1.10879 0.00447845C1.22531 0.0165245 1.3381 0.0526755 1.44008 0.110663C1.54206 0.16865 1.63102 0.247221 1.70139 0.341446L5.80665 5.47292C5.93166 5.62596 6 5.81791 6 6.01601C6 6.2141 5.93166 6.40606 5.80665 6.55909L1.5569 11.6906C1.47164 11.7941 1.36333 11.8759 1.24075 11.9294C1.11818 11.9829 0.984807 12.0065 0.851445 11.9985Z",
+  fill: "#3C393E"
+}));
+
 const Pagination = ({
   onChange,
   totalCount,
@@ -2079,13 +2126,14 @@ const Pagination = ({
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classProps
   }, /*#__PURE__*/React__default["default"].createElement("button", {
+    style: {
+      transform: 'rotate(180deg)'
+    },
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
-  }, /*#__PURE__*/React__default["default"].createElement("i", {
-    className: "icon-arrow-back"
-  })), paginationRange.map((pageNumber, id) => {
-    if (pageNumber === Dots) {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null)), paginationRange.map((pageNumber, id) => {
+    if (pageNumber === Dots$1) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default["default"].createElement("li", {
         key: id,
@@ -2094,21 +2142,16 @@ const Pagination = ({
         disabled: currentPageIndex === 0 ? true : false
       }, id < currentPageIndex ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "icon-text"
-      })), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "icon-arrow-jump-back"
-      }))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(Dots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`,
+        style: {
+          transform: 'rotate(180deg)'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "icon-text"
-      })), /*#__PURE__*/React__default["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(Dots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "icon-arrow-jump-next"
-      }))));
+      }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null))));
     }
     return /*#__PURE__*/React__default["default"].createElement("li", {
       onClick: () => onPageChange(pageNumber),
@@ -2119,9 +2162,7 @@ const Pagination = ({
     onClick: onNext,
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React__default["default"].createElement("i", {
-    className: "icon-arrow"
-  })));
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null)));
 };
 Pagination.propTypes = {
   offset: PropTypes__default["default"].number,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/assets/icons/dots.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="3" viewBox="0 0 11 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.230125 1.13624C0.230125 0.741577 0.326125 0.464244 0.518125 0.304244C0.710125 0.144244 0.939458 0.064244 1.20613 0.064244C1.48346 0.064244 1.71813 0.144244 1.91013 0.304244C2.11279 0.464244 2.21413 0.741577 2.21413 1.13624C2.21413 1.52024 2.11279 1.79758 1.91013 1.96824C1.71813 2.13891 1.48346 2.22424 1.20613 2.22424C0.939458 2.22424 0.710125 2.13891 0.518125 1.96824C0.326125 1.79758 0.230125 1.52024 0.230125 1.13624ZM4.51138 1.13624C4.51138 0.741577 4.60738 0.464244 4.79938 0.304244C4.99138 0.144244 5.22071 0.064244 5.48738 0.064244C5.76471 0.064244 5.99938 0.144244 6.19138 0.304244C6.39404 0.464244 6.49538 0.741577 6.49538 1.13624C6.49538 1.52024 6.39404 1.79758 6.19138 1.96824C5.99938 2.13891 5.76471 2.22424 5.48738 2.22424C5.22071 2.22424 4.99138 2.13891 4.79938 1.96824C4.60738 1.79758 4.51138 1.52024 4.51138 1.13624ZM8.79263 1.13624C8.79263 0.741577 8.88863 0.464244 9.08063 0.304244C9.27263 0.144244 9.50196 0.064244 9.76863 0.064244C10.046 0.064244 10.2806 0.144244 10.4726 0.304244C10.6753 0.464244 10.7766 0.741577 10.7766 1.13624C10.7766 1.52024 10.6753 1.79758 10.4726 1.96824C10.2806 2.13891 10.046 2.22424 9.76863 2.22424C9.50196 2.22424 9.27263 2.13891 9.08063 1.96824C8.88863 1.79758 8.79263 1.52024 8.79263 1.13624Z" fill="#3C393E"/>
+</svg>

package/src/assets/icons/nextarrow.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.851445 11.9985C0.652853 11.9988 0.460393 11.9292 0.307477 11.8017C0.221413 11.7299 0.150271 11.6418 0.0981246 11.5423C0.0459785 11.4428 0.0138536 11.3339 0.0035897 11.2219C-0.00667418 11.1098 0.00512483 10.9969 0.0383107 10.8895C0.0714965 10.7821 0.125416 10.6823 0.196984 10.5958L4.00476 6.01173L0.332976 1.41906C0.262375 1.33158 0.209651 1.23092 0.177836 1.12286C0.146021 1.01481 0.135741 0.901501 0.147589 0.789439C0.159437 0.677378 0.193177 0.568777 0.246871 0.469879C0.300566 0.370982 0.373156 0.283737 0.460468 0.213159C0.548409 0.135301 0.651394 0.0765731 0.76296 0.0406621C0.874526 0.00475112 0.992266 -0.00756759 1.10879 0.00447845C1.22531 0.0165245 1.3381 0.0526755 1.44008 0.110663C1.54206 0.16865 1.63102 0.247221 1.70139 0.341446L5.80665 5.47292C5.93166 5.62596 6 5.81791 6 6.01601C6 6.2141 5.93166 6.40606 5.80665 6.55909L1.5569 11.6906C1.47164 11.7941 1.36333 11.8759 1.24075 11.9294C1.11818 11.9829 0.984807 12.0065 0.851445 11.9985Z" fill="#3C393E"/>
+</svg>

package/src/assets/pdf.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="52" viewBox="0 0 40 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.1304 13.1106V36.2849V36.2853C39.394 36.4388 39.6133 36.6599 39.7659 36.9263C39.9189 37.1931 39.9992 37.4956 40 37.8037V47.5932C39.9984 48.7614 39.54 49.8816 38.7252 50.7079C37.91 51.5337 36.8048 51.9984 35.6522 52H4.34783C3.19523 51.9984 2.09005 51.5338 1.27483 50.7079C0.460015 49.8816 0.0015528 48.7614 0 47.5932V34.7817C0.000775155 34.4736 0.0815204 34.1714 0.234087 33.9051C0.386643 33.6383 0.605983 33.4176 0.869565 33.2641V3.52545C0.869565 2.5906 1.23602 1.69387 1.8882 1.03245C2.54072 0.371431 3.42547 0 4.34783 0H26.1953L39.1304 13.1106ZM13.872 45.3893C14.6037 45.4385 15.3293 45.2261 15.9225 44.7893C16.4303 44.3463 16.7036 43.6872 16.6605 43.0096C16.671 42.6272 16.598 42.2471 16.4478 41.8965C16.3154 41.6026 16.1136 41.3464 15.8597 41.1509C15.5976 40.9542 15.2991 40.8137 14.9816 40.7385C14.6225 40.6512 14.2541 40.6083 13.8849 40.6115H11.0258V48.4741H12.6849V45.3893H13.872ZM22.6954 47.4563C23.0149 47.1041 23.2498 46.6815 23.3814 46.2224C23.5347 45.6809 23.6084 45.1195 23.5999 44.5564C23.6065 44.008 23.5362 43.4614 23.3918 42.933C23.2672 42.477 23.0475 42.0532 22.7474 41.6904C22.4465 41.3379 22.0669 41.064 21.6398 40.8917C21.1305 40.6934 20.5882 40.5982 20.0432 40.6116H17.506V48.4821H20.0642C21.0475 48.5494 22.0103 48.1743 22.6954 47.4563ZM26.1252 42.05H29.4956L29.4956 40.6115H24.4661V48.4804L26.1287 48.4808V45.1068L28.6505 45.0962L28.64 43.6577H26.1252V42.05ZM18.3352 36.0407H37.3911L37.3908 14.3567H28.4428C27.5205 14.3567 26.6358 13.9852 25.9836 13.3238C25.331 12.6628 24.9646 11.7661 24.9646 10.8312V1.76186H4.34743C3.88625 1.76186 3.4437 1.94758 3.11762 2.27808C2.79153 2.60859 2.6083 3.05715 2.6083 3.52458V33.0185H14.9392C15.4408 33.0185 15.9179 33.238 16.2482 33.6205L18.3352 36.0407ZM6.08594 13.7151C6.08594 13.2283 6.48054 12.8337 6.9673 12.8337H20.6043C21.0911 12.8337 21.4857 13.2283 21.4857 13.7151C21.4857 14.2019 21.0911 14.5965 20.6043 14.5965H6.9673C6.48054 14.5965 6.08594 14.2019 6.08594 13.7151ZM18.5137 25.3369C18.5137 24.8502 18.9083 24.4556 19.395 24.4556H33.0321C33.5188 24.4556 33.9134 24.8502 33.9134 25.3369C33.9134 25.8237 33.5188 26.2183 33.0321 26.2183H19.395C18.9083 26.2183 18.5137 25.8237 18.5137 25.3369ZM6.9673 16.7056C6.48054 16.7056 6.08594 17.1002 6.08594 17.5869C6.08594 18.0737 6.48054 18.4683 6.9673 18.4683H33.0307C33.5174 18.4683 33.912 18.0737 33.912 17.5869C33.912 17.1002 33.5174 16.7056 33.0307 16.7056H6.9673ZM6.08594 21.4618C6.08594 20.975 6.48054 20.5804 6.9673 20.5804H33.0307C33.5174 20.5804 33.912 20.975 33.912 21.4618C33.912 21.9486 33.5174 22.3432 33.0307 22.3432H6.9673C6.48054 22.3432 6.08594 21.9486 6.08594 21.4618ZM21.4704 42.6691C21.1241 42.239 20.5919 42.0085 20.0457 42.0521H19.166V47.0441H20.0251C20.352 47.0567 20.6773 46.9886 20.9727 46.8469C21.213 46.7226 21.4156 46.5345 21.5589 46.3032C21.7076 46.0577 21.8089 45.7862 21.8582 45.5029C21.9164 45.1846 21.9455 44.8615 21.9451 44.5377C21.951 44.1698 21.9106 43.8023 21.8252 43.4446C21.758 43.1653 21.6373 42.9016 21.4704 42.6691ZM13.7445 42.0508C14.085 42.0213 14.4258 42.1008 14.7193 42.2782C14.8136 42.3518 14.8858 42.4501 14.9282 42.5627C14.9825 42.7134 15.0077 42.8731 15.0019 43.0333C15.0093 43.1969 14.9728 43.3594 14.8967 43.5039C14.8311 43.6211 14.7352 43.7175 14.6195 43.7832C14.4961 43.8525 14.361 43.8981 14.2212 43.9182C14.0636 43.9426 13.9041 43.9548 13.7445 43.9544H12.6855V42.0508H13.7445Z" fill="#00236A"/>
+</svg>

package/src/components/file/file.module.css

@@ -98,7 +98,7 @@
 }
 .upload-file-content > img {
     display: block;
-    width: 27.8rem;
+    width: 2.5rem;
     height: auto;
     max-height: 95%;
     object-fit: contain;

package/src/components/file/index.js

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./file.module.css";
-import Icon from '../icon/Icon'
+import Icon from '../icon/Icon';
+import pdfImage from './../../assets/pdf.svg';
 
 export const File = ({
   name,
@@ -17,8 +18,7 @@ export const File = ({
   fileExtensions,
   ...props
 }) => {
-  const pdfImageName = 'https://play-lh.googleusercontent.com/kIwlXqs28otssKK_9AKwdkB6gouex_U2WmtLshTACnwIJuvOqVvJEzewpzuYBXwXQQ'
-  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImageName : null);
+  const [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : pdfImage : null);
   const [error, setError] = useState('');
   const [fileName, setFileName] = useState('no selected file');
 
@@ -31,7 +31,7 @@ export const File = ({
           if (file[0].type === 'application/pdf') {
             setError('');
             onChange({file});
-            setImage(pdfImageName);
+            setImage(pdfImage);
           } else {
             setError('');
             onChange({file});

package/src/components/icon/Dots.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const Dots = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 11 3"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+        d="M0.230125 1.13624C0.230125 0.741577 0.326125 0.464244 0.518125 0.304244C0.710125 0.144244 0.939458 0.064244 1.20613 0.064244C1.48346 0.064244 1.71813 0.144244 1.91013 0.304244C2.11279 0.464244 2.21413 0.741577 2.21413 1.13624C2.21413 1.52024 2.11279 1.79758 1.91013 1.96824C1.71813 2.13891 1.48346 2.22424 1.20613 2.22424C0.939458 2.22424 0.710125 2.13891 0.518125 1.96824C0.326125 1.79758 0.230125 1.52024 0.230125 1.13624ZM4.51138 1.13624C4.51138 0.741577 4.60738 0.464244 4.79938 0.304244C4.99138 0.144244 5.22071 0.064244 5.48738 0.064244C5.76471 0.064244 5.99938 0.144244 6.19138 0.304244C6.39404 0.464244 6.49538 0.741577 6.49538 1.13624C6.49538 1.52024 6.39404 1.79758 6.19138 1.96824C5.99938 2.13891 5.76471 2.22424 5.48738 2.22424C5.22071 2.22424 4.99138 2.13891 4.79938 1.96824C4.60738 1.79758 4.51138 1.52024 4.51138 1.13624ZM8.79263 1.13624C8.79263 0.741577 8.88863 0.464244 9.08063 0.304244C9.27263 0.144244 9.50196 0.064244 9.76863 0.064244C10.046 0.064244 10.2806 0.144244 10.4726 0.304244C10.6753 0.464244 10.7766 0.741577 10.7766 1.13624C10.7766 1.52024 10.6753 1.79758 10.4726 1.96824C10.2806 2.13891 10.046 2.22424 9.76863 2.22424C9.50196 2.22424 9.27263 2.13891 9.08063 1.96824C8.88863 1.79758 8.79263 1.52024 8.79263 1.13624Z"
+        fill="#3C393E"
+    />
+  </svg>
+);
+export default Dots;

package/src/components/icon/NextArrow.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgNextArrow = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 6 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+        d="M0.851445 11.9985C0.652853 11.9988 0.460393 11.9292 0.307477 11.8017C0.221413 11.7299 0.150271 11.6418 0.0981246 11.5423C0.0459785 11.4428 0.0138536 11.3339 0.0035897 11.2219C-0.00667418 11.1098 0.00512483 10.9969 0.0383107 10.8895C0.0714965 10.7821 0.125416 10.6823 0.196984 10.5958L4.00476 6.01173L0.332976 1.41906C0.262375 1.33158 0.209651 1.23092 0.177836 1.12286C0.146021 1.01481 0.135741 0.901501 0.147589 0.789439C0.159437 0.677378 0.193177 0.568777 0.246871 0.469879C0.300566 0.370982 0.373156 0.283737 0.460468 0.213159C0.548409 0.135301 0.651394 0.0765731 0.76296 0.0406621C0.874526 0.00475112 0.992266 -0.00756759 1.10879 0.00447845C1.22531 0.0165245 1.3381 0.0526755 1.44008 0.110663C1.54206 0.16865 1.63102 0.247221 1.70139 0.341446L5.80665 5.47292C5.93166 5.62596 6 5.81791 6 6.01601C6 6.2141 5.93166 6.40606 5.80665 6.55909L1.5569 11.6906C1.47164 11.7941 1.36333 11.8759 1.24075 11.9294C1.11818 11.9829 0.984807 12.0065 0.851445 11.9985Z"
+        fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgNextArrow;

package/src/components/input/index.js

@@ -97,21 +97,37 @@ export const Input = ({
 
     const handleChange = (event) => {
         const currentValue = event.target.value;
-        if (onChange) {
-            currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
-        }
         
         setInnerValue(currentValue);
         if (type === 'tel') {
-            !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+            if (currentValue.length > 8) {
+                setInnerValue(currentValue.substr(0, 8));
+            }
+
+            if (!phoneNumberRegex.test(currentValue) && telErrorMessage) {
+                setInnerErrorMessage(telErrorMessage);
+            } else {
+                setInnerErrorMessage('');
+            }
         } 
 
-        if (maxLength) {
-            currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+        if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+            setInnerValue(currentValue.substr(0, maxLength));
         }
 
-        if (regexp) {
-            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
+        }
+
+        if (onChange) {
+            onChange(currentValue);
+            if (type === 'tel' && currentValue.length > 8) {
+                onChange(currentValue.substr(0, 8));
+            }
+
+            if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+                onChange(currentValue.substr(0, maxLength));
+            }
         }
     };
 
@@ -124,39 +140,35 @@ export const Input = ({
     };
 
     useEffect(() => {
-        if (value && value !== '') {
+        if (value !== undefined && value !== null) {
             setInnerValue(value);
             if (type === 'tel') {
-                !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
-            } 
+                if (value.length > 8) {
+                    setInnerValue(value.substr(0, 8));
+                }
+
+                if (!phoneNumberRegex.test(value) && telErrorMessage) {
+                    setInnerErrorMessage(telErrorMessage);
+                } else {
+                    setInnerErrorMessage('');
+                }
+            }
 
-            if (maxLength) {
-                value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+            if (maxLength && value.length > maxLength && type !== 'tel') {
+                setInnerValue(value.substr(0, maxLength));
             }
 
-            if (regexp) {
-                !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+                !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
             }
         }
-    }, [value]);
 
-    useEffect(() => {
         if (errorMessage) {
             setInnerErrorMessage(errorMessage);
+        } else {
+            setInnerErrorMessage('');
         }
-    }, [errorMessage]);
-
-    useEffect(() => {
-        if (type === 'tel' && !telErrorMessage) {
-            alert('Please add telErrorMessage on input component');
-        }
-    }, [type]);
-
-    useEffect(() => {
-        if (regexp && !regexpErrorMessage) {
-            alert('Please add regexpErrorMessage prop on input component');
-        }
-    }, [regexp]);
+    }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
     
     return (
         <div className={`${styles["input-wrap"]}`}>

package/src/components/pagination/index.js

@@ -5,6 +5,9 @@ import styles from "./pagination.module.css";
 import { PaginationRange, Dots } from "./paginationRange";
 import Icon from "../icon/Icon";
 
+import DotsIcon from './../../components/icon/Dots';
+import SvgNextArrow from './../../components/icon/NextArrow';
+
 export const Pagination = ({
     onChange,
     totalCount,
@@ -68,12 +71,14 @@ export const Pagination = ({
     return (
         <ul className={classProps}>
             <button
+                style={{
+                    transform: 'rotate(180deg)'
+                }}
                 className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 onClick={onPrevious}
                 disabled={currentPage === 1 ? true : false}
             >
-                {/* <Icon className="icon-arrow-back"/> */}
-                <i className="icon-arrow-back"></i>
+                <SvgNextArrow />
             </button>
 
             {paginationRange.map((pageNumber, id) => {
@@ -100,15 +105,17 @@ export const Pagination = ({
                                             `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
                                         }
                                     >
-                                        <i className="icon-text" />
+                                        <DotsIcon />
                                     </span>
                                     <span
                                         className={
                                             `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
                                         }
+                                        style={{
+                                            transform: 'rotate(180deg)'
+                                        }}
                                     >
-                                        {/* <Icon className="icon-arrow-jump-next"/> */}
-                                        <i className="icon-arrow-jump-back"></i>
+                                        <SvgNextArrow />
                                     </span>
                                 </>
                             ) : (
@@ -118,15 +125,14 @@ export const Pagination = ({
                                             `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
                                         }
                                     >
-                                        <i className="icon-text" />
+                                        <DotsIcon />
                                     </span>
                                     <span
                                         className={
                                             `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
                                         }
                                     >
-                                        {/* <Icon className="icon-arrow-jump-next"/> */}
-                                        <i className="icon-arrow-jump-next"></i>
+                                        <SvgNextArrow />
                                     </span>
                                 </>
                             )}
@@ -156,8 +162,7 @@ export const Pagination = ({
                 className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 disabled={currentPageNumber === lastPage ? true : false}
             >
-                {/* <Icon className='icon-arrow'/> */}
-                <i className="icon-arrow"></i>
+                <SvgNextArrow />
             </button>
         </ul>
     );

package/src/components/textarea/index.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { compereConfigs } from "./../../utils";
+
+import './textarea.module.css';
+
+export const Textarea = ({
+    size,
+    label,
+    width,
+    value,
+    height,
+    resize,
+    border,
+    radius,
+    padding,
+    required,
+    onChange,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    boxSizing,
+    maxLength,
+    labelSize,
+    labelColor,
+    borderColor,
+    labelWeight,
+    placeholder,
+    labelDisplay,
+    backgroundColor,
+    borderFocusColor,
+    borderHoverColor,
+    labelRequiredColor
+}) => {
+    const [isHover, setIsHover] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
+
+    const configStyles = compereConfigs();
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
+
+    const handleFocus = () => {
+        setIsFocus(true);
+    };
+
+    const handleBlur = () => {
+        setIsFocus(false);
+    };
+
+    useEffect(() => {
+        if (value === undefined) {
+            alert('Please add value prop on Textarea component');
+        }
+
+        if (!onChange) {
+            alert('Please add onChange function on Textarea component');
+        }
+    }, [value, onChange]);
+
+    return (
+        <>
+            {
+                label
+                ? <label
+                    style={{
+                        color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                        fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                        display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
+                        fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
+                    }}
+                  >
+                    {label}
+                    {
+                        required &&
+                        <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
+                    }
+                  </label>
+                : ''
+            }
+            <textarea
+                style={{
+                    outline: 'none',
+                    overflow: 'auto',
+                    fontSize: size ? size : configStyles.TEXTAREA.size,
+                    width: width ? width : configStyles.TEXTAREA.width,
+                    height: height ? height : configStyles.TEXTAREA.height,
+                    border: border ? border : configStyles.TEXTAREA.border,
+                    padding: padding ? padding : configStyles.TEXTAREA.padding,
+                    borderRadius: radius ? radius : configStyles.TEXTAREA.radius,
+                    minWidth: minWidth ? minWidth : configStyles.TEXTAREA.minWidth,
+                    maxWidth: maxWidth ? maxWidth : configStyles.TEXTAREA.maxWidth,
+                    minHeight: minHeight ? minHeight : configStyles.TEXTAREA.minHeight,
+                    maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
+                    boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
+                    backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
+                    borderColor: isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor :
+                                 isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor :
+                                 borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
+                    resize: resize ? resize : configStyles.TEXTAREA.resize,
+                }}
+                onBlur={handleBlur}
+                onChange={onChange}
+                onFocus={handleFocus}
+                placeholder={placeholder}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                value={
+                    maxLength ? value.length > maxLength ? value.substr(0, maxLength) : value :
+                    configStyles.TEXTAREA.maxLength ? value.length > configStyles.TEXTAREA.maxLength ? value.substr(0, configStyles.TEXTAREA.maxLength) : value :
+                    value
+                }
+            ></textarea>
+        </>
+    );
+};
+
+Textarea.propTypes = {
+    size: PropTypes.string,
+    label: PropTypes.string,
+    width: PropTypes.string,
+    height: PropTypes.string,
+    resize: PropTypes.string,
+    border: PropTypes.string,
+    radius: PropTypes.string,
+    required: PropTypes.bool,
+    padding: PropTypes.string,
+    minWidth: PropTypes.string,
+    maxWidth: PropTypes.string,
+    boxSizing: PropTypes.string,
+    minHeight: PropTypes.string,
+    maxHeight: PropTypes.string,
+    maxLength: PropTypes.number,
+    labelSize: PropTypes.string,
+    labelColor: PropTypes.string,
+    labelWeight: PropTypes.string,
+    borderColor: PropTypes.string,
+    placeholder: PropTypes.string,
+    labelDisplay: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    borderFocusColor: PropTypes.string,
+    borderHoverColor: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    labelRequiredColor: PropTypes.string
+}

package/src/components/textarea/textarea.module.css

@@ -0,0 +1,21 @@
+textarea::-webkit-scrollbar {
+    width: 6px;
+}
+  
+textarea::-webkit-scrollbar-track {
+    background: #EEEEEE;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+}
+
+textarea::-webkit-scrollbar-thumb {
+    background: #D1D1D1;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -o-border-radius: 3px;
+}

package/src/components/textarea/textarea.stories.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Textarea } from '.';
+
+export default {
+    Comment: Textarea,
+    title: 'Components/Textarea'
+}
+
+const Template = (args) => {
+    const [val, setVal] = useState('');
+
+    const handleChangeValue = (e) => {
+        setVal(e.target.value);
+    }
+
+    return (
+        <Textarea value={val} onChange={handleChangeValue} {...args} />
+    );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Label for textarea',
+    required: true,
+    size: '16px',
+    radius: '6px',
+    width: '400px',
+    noResize: false,
+    height: '134px',
+    maxLength: 1500,
+    color: '#3C393E',
+    minWidth: '200px',
+    maxWidth: '500px',
+    labelSize: '16px',
+    resize: 'vertical',
+    minHeight: '100px',
+    maxHeight: '300px',
+    border: '2px solid',
+    padding: '12px 15px',
+    labelColor: '#3C393E',
+    labelWeight: 'normal',
+    labelDisplay: 'block',
+    borderColor: '#D1D1D1',
+    boxSizing: 'border-box',
+    backgroundColor: 'white',
+    borderHoverColor: '#3C393E',
+    borderFocusColor: '#00236A',
+    labelRequiredColor: '#ee0000',
+}

package/src/stories/configuration.stories.mdx

@@ -403,3 +403,33 @@ import StackAlt from './assets/stackalt.svg';
   });
 }
 ```
+
+### Textarea
+
+```
+{
+  size: '16px',                                         // for font size
+  radius: '6px',                                        // for border radius
+  width: '400px',                                       // for width
+  resize: 'none',                                       // for resize
+  height: '134px',                                      // for height
+  maxLength: 1500,                                      // for characters maximum count
+  color: '#3C393E',                                     // for color
+  minWidth: '200px',                                    // for minimum width
+  maxWidth: '500px',                                    // for maximum width
+  labelSize: '16px',                                    // for label font size
+  minHeight: '100px',                                   // for minimum height
+  maxHeight: '300px',                                   // for maximum height
+  border: '2px solid',                                  // for border
+  padding: '12px 15px',                                 // for padding
+  labelColor: '#3C393E',                                // for label color
+  labelWeight: 'normal',                                // for label font weight
+  labelDisplay: 'block',                                // for label display
+  borderColor: '#D1D1D1',                               // for border color
+  boxSizing: 'border-box',                              // for box sizing
+  backgroundColor: 'white',                             // for background color
+  borderHoverColor: '#3C393E',                          // for border color when hover action is happaning
+  borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
+  labelRequiredColor: '#ee0000',                        // for label required mark color
+}
+```

package/src/stories/usage.stories.mdx

@@ -12,7 +12,8 @@ import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
 import inputTooltipImage from './static/input-tooltip-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
-import toastImage from './static/toaster-usage.png'
+import toastImage from './static/toaster-usage.png';
+import textareaImage from './static/textarea-usage.png';
 
 <Meta title="Intro/Usage" />
 
@@ -145,3 +146,7 @@ import toastImage from './static/toaster-usage.png'
 
 #### createToast function usage
 <img src={toastImage} alt="toaster image" />
+
+### Textarea
+
+<img src={textareaImage} alt="textarea image" />

package/tui.config.js

@@ -225,5 +225,30 @@ module.exports = {
         optionItemBoxSizing: 'border-box',                 // for option box sizing
         optionItemBackgroudColor: '#ffffff',               // for option background color
         optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
+    },
+    // default properties for <Textarea /> component
+    TEXTAREA: {
+        size: '16px',
+        radius: '6px',
+        width: '400px',
+        height: '134px',
+        color: '#3C393E',
+        minWidth: '200px',
+        maxWidth: '500px',
+        labelSize: '16px',
+        resize: 'vertical',
+        minHeight: '100px',
+        maxHeight: '300px',
+        border: '2px solid',
+        padding: '12px 15px',
+        labelColor: '#3C393E',
+        labelWeight: 'normal',
+        labelDisplay: 'block',
+        borderColor: '#D1D1D1',
+        boxSizing: 'border-box',
+        backgroundColor: 'white',
+        borderHoverColor: '#3C393E',
+        borderFocusColor: '#00236A',
+        labelRequiredColor: '#ee0000',
     }
 };