@xaypay/tui 0.0.69 → 0.0.70

package/dist/index.es.js

@@ -5,6 +5,39 @@ import classnames from 'classnames';
 import styled, { keyframes, css } from 'styled-components';
 import ReactDOM from 'react-dom';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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 SvgPdf = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "40",
+  height: "52",
+  viewBox: "0 0 40 52",
+  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: "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"
+}));
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -32,15 +65,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$e = ".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 css_248z$e = ".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 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$e);
 
-var css_248z$d = "";
-styleInject(css_248z$d);
-
-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,
@@ -54,9 +82,9 @@ const File = ({
   fileExtensions,
   ...props
 }) => {
-  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 [image, setImage] = useState(defaultData ? defaultData.type != 'application/pdf' ? defaultData.url : 'pdf' : null);
   const handleCheckFile = e => {
     const file = e.target.files;
     if (file[0]) {
@@ -67,7 +95,7 @@ const File = ({
             onChange({
               file
             });
-            setImage(pdfImage);
+            setImage('pdf');
           } else {
             setError('');
             onChange({
@@ -120,7 +148,7 @@ const File = ({
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$c['upload-file-content']} upload-file-content-rem`
-  }, /*#__PURE__*/React__default.createElement("img", {
+  }, image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__default.createElement("div", {
@@ -162,28 +190,13 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
-var css_248z$c = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
+var css_248z$d = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
 var styles$b = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
-styleInject(css_248z$c);
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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);
-}
+styleInject(css_248z$d);
 
-var css_248z$b = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
+var css_248z$c = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
 var styles$a = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
-styleInject(css_248z$b);
+styleInject(css_248z$c);
 
 const Checkbox = ({
   disabled,
@@ -357,8 +370,11 @@ Table.defaultProps = {
   hearderData: []
 };
 
-var css_248z$a = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
+var css_248z$b = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
 var styles$9 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$b);
+
+var css_248z$a = "";
 styleInject(css_248z$a);
 
 const _ = require('lodash');
@@ -1854,71 +1870,161 @@ Tooltip.defaultProps = {
   type: 'top'
 };
 
-var css_248z$4 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{height:74px;max-width:400px;position:relative;width:100%}.captcha-module_slider__KLYny{-webkit-appearance:none;background:#eee;border-radius:2px;bottom:0;height:4px;left:0;margin:auto 0;outline:none;position:absolute;top:0;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:30px;position:relative;width:30px;z-index:3}.captcha-module_selector__JFhb4{left:0;z-index:2}.captcha-module_selectBtn__GP1iH,.captcha-module_selector__JFhb4{bottom:0;height:30px;margin:auto 0;position:absolute;top:0;width:30px}.captcha-module_selectBtn__GP1iH{background:#00236a;border:2px solid #fff;border-radius:50%;box-shadow:1px 0 6px rgba(60,57,62,.15);cursor:pointer}.captcha-module_progressBar__mhdtM{background:red;bottom:0;height:4px;left:0;margin:auto 0;position:absolute;top:0;width:auto}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
-var styles$3 = {"main":"captcha-module_main__Ys3EH","slider":"captcha-module_slider__KLYny","selector":"captcha-module_selector__JFhb4","selectBtn":"captcha-module_selectBtn__GP1iH","progressBar":"captcha-module_progressBar__mhdtM","range":"captcha-module_range__k24I2"};
+const SvgCaptchaArrowUp = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "12",
+  height: "15",
+  viewBox: "0 0 12 15",
+  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: "M6 14.9988C6.22729 14.9988 6.44527 14.9066 6.60598 14.7425C6.7667 14.5785 6.85699 14.3559 6.85699 14.1239L6.85699 3.98726L10.5352 7.74409C10.6149 7.82543 10.7095 7.88996 10.8136 7.93398C10.9177 7.97801 11.0292 8.00067 11.1419 8.00067C11.2546 8.00067 11.3662 7.97801 11.4703 7.93398C11.5744 7.88996 11.669 7.82543 11.7487 7.74409C11.8284 7.66274 11.8916 7.56617 11.9347 7.45989C11.9778 7.35361 12 7.2397 12 7.12466C12 7.00962 11.9778 6.89571 11.9347 6.78943C11.8916 6.68314 11.8284 6.58657 11.7487 6.50523L6.60675 1.25581C6.52714 1.17434 6.43257 1.1097 6.32845 1.06559C6.22434 1.02148 6.11272 0.998779 6 0.998779C5.88728 0.998779 5.77566 1.02148 5.67154 1.06559C5.56743 1.1097 5.47286 1.17434 5.39325 1.25581L0.251323 6.50523C0.0904038 6.66951 0 6.89233 0 7.12466C0 7.35699 0.0904038 7.57981 0.251323 7.74409C0.412243 7.90837 0.630497 8.00067 0.858071 8.00067C1.08565 8.00067 1.3039 7.90837 1.46482 7.74409L5.14301 3.98726L5.14301 14.1239C5.14301 14.3559 5.2333 14.5785 5.39402 14.7425C5.55473 14.9066 5.77271 14.9988 6 14.9988Z",
+  fill: "#00236A"
+}));
+
+const SvgCaptchaArrowDown = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "12",
+  height: "15",
+  viewBox: "0 0 12 15",
+  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: "M6 0.00146537C5.77271 0.00146539 5.55473 0.0936418 5.39402 0.257718C5.2333 0.421795 5.14301 0.64433 5.14301 0.876368L5.14301 11.013L1.46482 7.25615C1.38514 7.17481 1.29055 7.11028 1.18644 7.06626C1.08233 7.02224 0.970753 6.99958 0.85807 6.99958C0.745386 6.99958 0.633807 7.02224 0.529701 7.06626C0.425595 7.11028 0.331002 7.17481 0.251322 7.25616C0.171643 7.3375 0.108438 7.43407 0.0653156 7.54035C0.0221934 7.64663 -5.45598e-07 7.76055 -5.35541e-07 7.87559C-5.25484e-07 7.99063 0.0221934 8.10454 0.0653157 8.21082C0.108438 8.3171 0.171643 8.41367 0.251322 8.49502L5.39325 13.7444C5.47286 13.8259 5.56743 13.8905 5.67155 13.9347C5.77566 13.9788 5.88728 14.0015 6 14.0015C6.11272 14.0015 6.22434 13.9788 6.32846 13.9347C6.43257 13.8905 6.52714 13.8259 6.60675 13.7444L11.7487 8.49502C11.9096 8.33073 12 8.10792 12 7.87559C12 7.64325 11.9096 7.42044 11.7487 7.25615C11.5878 7.09187 11.3695 6.99958 11.1419 6.99958C10.9144 6.99958 10.6961 7.09187 10.5352 7.25615L6.85699 11.013L6.85699 0.876368C6.85699 0.64433 6.7667 0.421794 6.60598 0.257718C6.44526 0.0936418 6.22729 0.00146535 6 0.00146537Z",
+  fill: "#00236A"
+}));
+
+var css_248z$4 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/icons/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/icons/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/icons/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
 styleInject(css_248z$4);
 
 const Captcha = ({
-  onclick,
-  rangeCount
+  size,
+  color,
+  range,
+  label,
+  getRange
 }) => {
-  const [data, setData] = useState("");
-  const [right, setRight] = useState(false);
-  let range = rangeCount <= 100 ? rangeCount : 0;
-  let rangeElement = document.getElementsByClassName(styles$3.range);
+  const [rangeNumber, setRangeNumber] = useState(0);
+  const [rangeProgress, setRangeProgress] = useState(0);
+  const configStyles = compereConfigs();
+  const handleRange = e => {
+    const value = e.target.value;
+    getRange(value);
+    setRangeProgress(value);
+  };
   useEffect(() => {
-    for (let element of rangeElement) {
-      element.style.marginLeft = `${range + 60}%`;
-      element.style.color = data;
-    }
-  }, [range, data]);
-  function sliderInput(event) {
-    setData(rangeCount == event.target.value ? 'green' : 'indianred');
-    let selector = document.getElementsByClassName(styles$3.selector);
-    let selectBtn = document.getElementsByClassName(styles$3.selectBtn);
-    let progressBar = document.getElementsByClassName(styles$3.progressBar);
-    selector[0].style.left = event.target.value + '%';
-    progressBar[0].style.width = event.target.value + '%';
-    if (rangeCount == event.target.value) {
-      selectBtn[0].style.background = "pink";
+    if (range === undefined || range === null) {
+      alert('Please add range property on Captcha component');
+    }
+    if (!getRange) {
+      alert('Please add getRange property on Captcha component');
+    }
+    if (range > 100) {
+      setRangeNumber(100);
+    } else if (range < 0) {
+      setRangeNumber(0);
     } else {
-      selectBtn[0].style.background = "red";
+      setRangeNumber(range);
+    }
+  }, [range, getRange]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      fontSize: size ? size : configStyles.Captcha.size,
+      color: color ? color : configStyles.Captcha.color
+    }
+  }, label), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '76px',
+      maxWidth: '400px',
+      position: 'relative'
     }
-  }
-  function sliderChange(e) {
-    setRight(rangeCount == e.target.value ? true : false);
-  }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.main
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.range
-  }, /*#__PURE__*/React__default.createElement("i", {
-    className: "icon-vector-down"
-  })), /*#__PURE__*/React__default.createElement("input", {
+    style: {
+      position: 'absolute',
+      top: '0px',
+      height: '15px',
+      left: `calc(${rangeNumber}% - 6px)`
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgCaptchaArrowDown, null)), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'absolute',
+      display: 'flex',
+      top: '23px',
+      left: '0px',
+      width: '100%',
+      height: '30px',
+      alignItems: 'center',
+      zIndex: 1
+    },
+    className: styles$3['start-point']
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '13px',
+      right: '0px',
+      width: '100%',
+      height: '4px',
+      borderRadius: '2px',
+      backgroundColor: '#EEEEEE',
+      borderRadius: '10px',
+      zIndex: -2
+    }
+  }), /*#__PURE__*/React__default.createElement("input", {
+    min: 0,
+    max: 100,
     type: "range",
-    className: styles$3.slider,
-    onClick: right ? onclick : null,
-    onInput: sliderInput,
-    onMouseUp: sliderChange
+    value: rangeProgress,
+    style: {
+      height: '4px',
+      width: '100%',
+      borderRadius: '2px',
+      cursor: 'pointer',
+      backgroundColor: 'transparent'
+    },
+    className: `
+                            ${styles$3['range']}
+                            ${rangeProgress >= rangeNumber ? styles$3['range-success'] : rangeProgress < rangeNumber && rangeProgress > 0 ? styles$3['range-error'] : styles$3['range-default']}
+                        `,
+    onInput: handleRange
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.selector
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.selectBtn
+    style: {
+      position: 'absolute',
+      top: '13px',
+      left: '0px',
+      width: rangeProgress + '%',
+      height: '4px',
+      borderRadius: '2px',
+      backgroundColor: rangeProgress >= rangeNumber ? '#0DA574' : rangeProgress < rangeNumber && rangeProgress > 0 ? '#EE0000' : 'transparent',
+      borderRadius: '2px',
+      zIndex: -1
+    }
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.progressBar
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.range
-  }, /*#__PURE__*/React__default.createElement("i", {
-    className: "icon-vector-up"
-  }))));
+    style: {
+      position: 'absolute',
+      bottom: '0px',
+      height: '15px',
+      left: `calc(${rangeNumber}% - 6px)`
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgCaptchaArrowUp, null))));
 };
 Captcha.propTypes = {
-  onclick: PropTypes.func,
-  className: PropTypes.string,
-  rangeCount: PropTypes.number
-};
-Captcha.defaultProps = {
-  onclick: undefined
+  label: PropTypes.string,
+  range: PropTypes.number.isRequired,
+  getRange: PropTypes.func.isRequired
 };
 
 var css_248z$3 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
@@ -1954,10 +2060,134 @@ Stepper.propTypes = {
   activeSteps: PropTypes.number
 };
 
-var css_248z$2 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}";
-var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
+var css_248z$2 = "textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{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}";
 styleInject(css_248z$2);
 
+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 /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("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 && /*#__PURE__*/React__default.createElement("sup", {
+    style: {
+      color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor
+    }
+  }, "*")) : '', /*#__PURE__*/React__default.createElement("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.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
+};
+
+var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}";
+var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
+styleInject(css_248z$1);
+
 // import styles from "./pagination.module.scss";
 
 const Dots$1 = "...";
@@ -2146,9 +2376,9 @@ Pagination.defaultProps = {
   siblingCount: 2
 };
 
-var css_248z$1 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
+var css_248z = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
 var styles = {"autocomplate-content":"autocomplate-module_autocomplate-content__UbIUT","autocomplate-content-top":"autocomplate-module_autocomplate-content-top__FVgCp","active":"autocomplate-module_active__40fdV","autocomplate-content-bottom":"autocomplate-module_autocomplate-content-bottom__yk0zP","select-show":"autocomplate-module_select-show__7Uap4","autocomplate-content-bottom-inner":"autocomplate-module_autocomplate-content-bottom-inner__rF5IF","autocomplate-content-bottom-row":"autocomplate-module_autocomplate-content-bottom-row__dRsZa","no-option":"autocomplate-module_no-option__xv0-E","option-active":"autocomplate-module_option-active__WuH4I","autocomplate-title":"autocomplate-module_autocomplate-title__3Qxqz","errorBorder":"autocomplate-module_errorBorder__LV-nb","errorMessage":"autocomplate-module_errorMessage__Gchpc"};
-styleInject(css_248z$1);
+styleInject(css_248z);
 
 const Autocomplate = ({
   label,
@@ -2282,128 +2512,327 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-var css_248z = "textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{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}";
-styleInject(css_248z);
-
-const Textarea = ({
-  size,
+const NewAutocomplete = ({
   label,
-  width,
-  value,
-  height,
-  resize,
-  border,
-  radius,
-  padding,
+  options,
+  getItem,
   required,
-  onChange,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  boxSizing,
-  maxLength,
+  disabled,
+  errorSize,
   labelSize,
+  errorColor,
   labelColor,
-  borderColor,
   labelWeight,
-  placeholder,
+  searchCount,
+  placeHolder,
+  errorMessage,
+  autoComplete,
   labelDisplay,
-  backgroundColor,
-  borderFocusColor,
-  borderHoverColor,
-  labelRequiredColor
+  contentDisplay,
+  contentTopSize,
+  contentPosition,
+  contentTopColor,
+  labelLineHeight,
+  contentDirection,
+  contentTopWeight,
+  contentTopRadius,
+  contentTopHeight,
+  contentTopBorder,
+  labelMarginBottom,
+  contentTopDisplay,
+  contentTopPadding,
+  contentBottomLeft,
+  showOptionDuration,
+  labelRequiredColor,
+  contentTopMaxWidth,
+  labelTextTransform,
+  contentBottomWidth,
+  contentBottomZindex,
+  contentBottomRadius,
+  contentTopDirection,
+  contentTopBoxSizing,
+  contentTopLineHeight,
+  contentTopBorderColor,
+  contentBottomMaxWidth,
+  contentBottomOverflow,
+  contentBottomPosition,
+  contentBottomRowColor,
+  contentBottomMinHeight,
+  contentBottomBoxShadow,
+  contentBottomRowHeight,
+  contentBottomRowCursor,
+  contentBottomRowDisplay,
+  contentBottomRowPadding,
+  contentBottomRowFontSize,
+  contentBottomRowBoxSizing,
+  contentBottomInnerDisplay,
+  contentBottomRowFontWeight,
+  contentBottomRowLineHeight,
+  contentBottomRowAlignItems,
+  contentBottomRowTransition,
+  contentBottomRowHoverColor,
+  contentTopBorderHoverColor,
+  contentTopBorderActiveColor,
+  contentBottomInnerOverflowY,
+  contentBottomInnerOverflowX,
+  contentBottomInnerMaxHeight,
+  contentBottomInnerDirection,
+  contentBottomBackgroundColor,
+  contentBottomRowMarginBottom,
+  contentBottomRowBackgroundColor,
+  contentBottomRowHoverBackgroundColor,
+  ...props
 }) => {
+  const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
+  const [innerValue, setInnerValue] = useState('');
   const configStyles = compereConfigs();
+  const showOption = keyframes`
+        100% {
+            max-height: 400px;
+        }
+    `;
+  const animation = _ => css`
+        ${showOption} ${showOptionDuration ? showOptionDuration : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
+    `;
   const handleMouseEnter = () => {
     setIsHover(true);
   };
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  const handleRowMouseEnter = e => {
+    e.target.style.color = contentBottomRowHoverColor ? contentBottomRowHoverColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverColor;
+    e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverBackgroundColor;
+  };
+  const handleRowMouseLeave = e => {
+    e.target.style.color = contentBottomRowColor ? contentBottomRowColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor;
+    e.target.style.backgroundColor = contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor;
+  };
   const handleFocus = () => {
     setIsFocus(true);
   };
   const handleBlur = () => {
     setIsFocus(false);
   };
+  const handleChange = e => {
+    const value = e.target.value;
+    value.length > 0 ? setShow(true) : setShow(false);
+    setInnerValue(value);
+  };
+  const handleClick = selectedValue => {
+    setShow(false);
+    getItem(selectedValue);
+    setInnerValue(selectedValue.value);
+  };
+  const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && options && options.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
+      width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
+      zIndex: contentBottomZindex ? contentBottomZindex : configStyles.NEWAUTOCOMPLETE.contentBottomZindex,
+      borderRadius: contentBottomRadius ? contentBottomRadius : configStyles.NEWAUTOCOMPLETE.contentBottomRadius,
+      maxWidth: contentBottomMaxWidth ? contentBottomMaxWidth : configStyles.NEWAUTOCOMPLETE.contentBottomMaxWidth,
+      overflow: contentBottomOverflow ? contentBottomOverflow : configStyles.NEWAUTOCOMPLETE.contentBottomOverflow,
+      position: contentBottomPosition ? contentBottomPosition : configStyles.NEWAUTOCOMPLETE.contentBottomPosition,
+      minHeight: contentBottomMinHeight ? contentBottomMinHeight : configStyles.NEWAUTOCOMPLETE.contentBottomMinHeight,
+      boxShadow: contentBottomBoxShadow ? contentBottomBoxShadow : configStyles.NEWAUTOCOMPLETE.contentBottomBoxShadow,
+      backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
+      top: contentTopHeight ? contentTopHeight.includes('rem') ? parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem' : parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px' : configStyles.NEWAUTOCOMPLETE.contentTopHeight.includes('rem') ? parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 2)) + 6 + 'px',
+      animation
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: contentBottomInnerDisplay ? contentBottomInnerDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDisplay,
+      overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowY,
+      overflowX: contentBottomInnerOverflowX ? contentBottomInnerOverflowX : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowX,
+      maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : configStyles.NEWAUTOCOMPLETE.contentBottomInnerMaxHeight,
+      flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDirection
+    }
+  }, innerValue.length >= searchCount ? options.filter(item => item.value.includes(innerValue)).length > 0 ? options.filter(item => item.value.includes(innerValue)).map((item, index) => {
+    return /*#__PURE__*/React__default.createElement("p", {
+      key: `${item}_${index}`,
+      onMouseEnter: handleRowMouseEnter,
+      onMouseLeave: handleRowMouseLeave,
+      onClick: () => handleClick(item),
+      style: {
+        flexShrink: 0,
+        color: contentBottomRowColor ? contentBottomRowColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor,
+        height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+        cursor: contentBottomRowCursor ? contentBottomRowCursor : configStyles.NEWAUTOCOMPLETE.contentBottomRowCursor,
+        display: contentBottomRowDisplay ? contentBottomRowDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomRowDisplay,
+        padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
+        fontSize: contentBottomRowFontSize ? contentBottomRowFontSize : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontSize,
+        boxSizing: contentBottomRowBoxSizing ? contentBottomRowBoxSizing : configStyles.NEWAUTOCOMPLETE.contentBottomRowBoxSizing,
+        fontWeight: contentBottomRowFontWeight ? contentBottomRowFontWeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontWeight,
+        lineHeight: contentBottomRowLineHeight ? contentBottomRowLineHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowLineHeight,
+        alignItems: contentBottomRowAlignItems ? contentBottomRowAlignItems : configStyles.NEWAUTOCOMPLETE.contentBottomRowAlignItems,
+        transition: contentBottomRowTransition ? contentBottomRowTransition : configStyles.NEWAUTOCOMPLETE.contentBottomRowTransition,
+        marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
+        backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
+      }
+    }, item.value);
+  }) : /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+      fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+      height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+      padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
+      lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
+    }
+  }, "\u0546\u0574\u0561\u0576 \u057F\u057E\u0575\u0561\u056C \u0561\u057C\u056F\u0561 \u0579\u0567") : /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+      fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+      height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+      padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
+      lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
+    }
+  }, innerValue.length < searchCount && `Լրացնել առնվազն ${searchCount} նիշ`))));
   useEffect(() => {
-    if (value === undefined) {
-      alert('Please add value prop on Textarea component');
+    if (!options) {
+      alert('Please add array of options');
     }
-    if (!onChange) {
-      alert('Please add onChange function on Textarea component');
+    if (options.length === 0) {
+      alert('Please fill options array');
     }
-  }, [value, onChange]);
+    options && options.length > 0 && options.map(item => {
+      if (!item.hasOwnProperty('value')) {
+        alert('Please add value property in items of options array');
+      }
+    });
+    if (!getItem) {
+      alert('Please add getItem function for get choosen item from autocomplete');
+    }
+  }, [options, getItem]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("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
+      color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.NEWAUTOCOMPLETE.labelSize,
+      display: labelDisplay ? labelDisplay : configStyles.NEWAUTOCOMPLETE.labelDisplay,
+      fontWeight: labelWeight ? labelWeight : configStyles.NEWAUTOCOMPLETE.labelWeight,
+      lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
+      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
+      textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
-      color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor
+      color: labelRequiredColor ? labelRequiredColor : configStyles.NEWAUTOCOMPLETE.labelRequiredColor
     }
-  }, "*")) : '', /*#__PURE__*/React__default.createElement("textarea", {
+  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
     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
-    },
+      display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
+      position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
+      flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection
+    }
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
+    type: "text",
+    value: innerValue,
+    disabled: disabled,
     onBlur: handleBlur,
-    onChange: onChange,
     onFocus: handleFocus,
-    placeholder: placeholder,
+    onInput: handleChange,
+    placeholder: placeHolder ? placeHolder : '',
+    autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
     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
-  }));
+    style: {
+      transition: 'all 240ms',
+      cursor: disabled ? 'not-allowed' : 'auto',
+      color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
+      fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
+      height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
+      border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
+      padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
+      display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
+      fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
+      borderRadius: contentTopRadius ? contentTopRadius : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
+      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
+      boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
+      lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
+      flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
+      borderColor: errorMessage ? errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor : isFocus ? contentTopBorderActiveColor ? contentTopBorderActiveColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderActiveColor : isHover ? contentTopBorderHoverColor ? contentTopBorderHoverColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderHoverColor : contentTopBorderColor ? contentTopBorderColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderColor
+    }
+  }, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+      fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize
+    }
+  }, errorMessage) : '', optionList));
 };
-Textarea.propTypes = {
-  size: PropTypes.string,
+NewAutocomplete.propTypes = {
   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,
+  disabled: PropTypes.bool,
+  errorSize: PropTypes.string,
   labelSize: PropTypes.string,
+  errorColor: PropTypes.string,
   labelColor: PropTypes.string,
-  labelWeight: PropTypes.string,
-  borderColor: PropTypes.string,
-  placeholder: PropTypes.string,
+  searchCount: PropTypes.number,
+  placeHolder: PropTypes.string,
+  labelWeight: PropTypes.number,
+  errorMessage: 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
+  autoComplete: PropTypes.string,
+  contentDisplay: PropTypes.string,
+  contentTopSize: PropTypes.string,
+  contentPosition: PropTypes.string,
+  labelLineHeight: PropTypes.string,
+  contentTopColor: PropTypes.string,
+  contentDirection: PropTypes.string,
+  contentTopWeight: PropTypes.number,
+  contentTopRadius: PropTypes.string,
+  contentTopHeight: PropTypes.string,
+  contentTopBorder: PropTypes.string,
+  getItem: PropTypes.func.isRequired,
+  contentTopDisplay: PropTypes.string,
+  contentTopPadding: PropTypes.string,
+  contentBottomLeft: PropTypes.string,
+  options: PropTypes.array.isRequired,
+  labelMarginBottom: PropTypes.string,
+  labelRequiredColor: PropTypes.string,
+  labelTextTransform: PropTypes.string,
+  showOptionDuration: PropTypes.string,
+  contentTopMaxWidth: PropTypes.string,
+  contentBottomWidth: PropTypes.string,
+  contentTopDirection: PropTypes.string,
+  contentTopBoxSizing: PropTypes.string,
+  contentBottomZindex: PropTypes.number,
+  contentBottomRadius: PropTypes.string,
+  contentTopLineHeight: PropTypes.string,
+  contentTopBorderColor: PropTypes.string,
+  contentBottomRowColor: PropTypes.string,
+  contentBottomMaxWidth: PropTypes.string,
+  contentBottomOverflow: PropTypes.string,
+  contentBottomPosition: PropTypes.string,
+  contentBottomMinHeight: PropTypes.string,
+  contentBottomBoxShadow: PropTypes.string,
+  contentBottomRowHeight: PropTypes.string,
+  contentBottomRowCursor: PropTypes.string,
+  contentBottomRowDisplay: PropTypes.string,
+  contentBottomRowPadding: PropTypes.string,
+  contentBottomRowFontSize: PropTypes.string,
+  contentBottomRowBoxSizing: PropTypes.string,
+  contentBottomInnerDisplay: PropTypes.string,
+  contentBottomRowFontWeight: PropTypes.number,
+  contentBottomRowLineHeight: PropTypes.string,
+  contentBottomRowAlignItems: PropTypes.string,
+  contentBottomRowTransition: PropTypes.string,
+  contentBottomRowHoverColor: PropTypes.string,
+  contentTopBorderHoverColor: PropTypes.string,
+  contentTopBorderActiveColor: PropTypes.string,
+  contentBottomInnerOverflowY: PropTypes.string,
+  contentBottomInnerOverflowX: PropTypes.string,
+  contentBottomInnerMaxHeight: PropTypes.string,
+  contentBottomInnerDirection: PropTypes.string,
+  contentBottomRowMarginBottom: PropTypes.string,
+  contentBottomBackgroundColor: PropTypes.string,
+  contentBottomRowBackgroundColor: PropTypes.string,
+  contentBottomRowHoverBackgroundColor: PropTypes.string
+};
+NewAutocomplete.defaultProps = {
+  searchCount: 3,
+  disabled: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SingleCheckbox, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, Pagination, Radio, Select, SingleCheckbox, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };