@xaypay/tui 0.0.48 → 0.0.50

package/dist/index.es.js

@@ -185,8 +185,8 @@ Typography.defaultProps = {
   onClick: () => {}
 };
 
-var css_248z$b = ".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}";
-var styles$a = {"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"};
+var css_248z$b = ".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$a = {"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$b);
 
 const Autocomplate = ({
@@ -270,7 +270,7 @@ const Autocomplate = ({
         className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
       }, /*#__PURE__*/React.createElement("div", {
         className: `${styles$a['no-option']} autocomplate-no-option`
-      }, inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` : 'տվյալներ չկան'))));
+      }, inputValue.length <= searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
     }
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
@@ -284,7 +284,7 @@ const Autocomplate = ({
   }, /*#__PURE__*/React.createElement("input", _extends({
     id: inputId,
     type: "text",
-    className: `${styles$a['autocomplate-content-top']} autocomplate-content-top-rem`,
+    className: `${styles$a['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles$a.errorBorder : ''}`,
     disabled: disabled,
     onChange: handleChange,
     onClick: () => {
@@ -430,16 +430,23 @@ const Input = ({
   regexpError,
   errorMesage,
   required,
+  showEye,
   disabled,
   type,
+  tooltip,
   onChange,
   value,
   ...props
 }) => {
   const [inputValue, setInputValue] = useState(value);
+  const [eyeStatus, setEyeStatus] = useState("");
+  const [tooltipStatus, setTooltipStatus] = useState(false);
   const handleChange = event => {
     setInputValue(event.target.value);
-    onChange ? onChange(event.target.value) : '';
+    onChange ? onChange(event.target.value) : "";
+  };
+  document.onmouseup = () => {
+    setEyeStatus("");
   };
   useEffect(() => {
     setInputValue(value);
@@ -451,17 +458,17 @@ const Input = ({
     const regex = new RegExp(regexp);
     eMessage = regex.test(inputValue) ? "" : regexpError;
   }
-  const classProps = classnames(styles$8.input, styles$8[size], eMessage != '' ? styles$8['error-message'] : "", className, 'input-inner-rem');
+  const classProps = classnames(styles$8.input, styles$8[size], eMessage != "" ? styles$8["error-message"] : "", className, "input-inner-rem");
   return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8['input-wrap']} input-wrap-rem`
+    className: `${styles$8["input-wrap"]} input-wrap-rem`
   }, label ? /*#__PURE__*/React.createElement("label", {
-    className: `${styles$8['input-title']} input-title-rem`
+    className: `${styles$8["input-title"]} input-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React.createElement("input", _extends({}, props, {
-    type: type,
+    type: eyeStatus || type,
     className: classProps,
     style: color && {
       color
@@ -469,7 +476,19 @@ const Input = ({
     disabled: disabled ? disabled : "",
     onChange: handleChange,
     value: inputValue
-  })), eMessage ? /*#__PURE__*/React.createElement("span", {
+  })), type === "password" && showEye ? /*#__PURE__*/React.createElement("p", {
+    onMouseDown: () => {
+      setEyeStatus("text");
+    },
+    onMouseUp: () => {
+      setEyeStatus("");
+    }
+  }, "\uD83D\uDC41") : null, tooltip ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "p",
+    onClick: () => {
+      setTooltipStatus(!tooltipStatus);
+    }
+  }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React.createElement("p", null, tooltip) : null, eMessage ? /*#__PURE__*/React.createElement("span", {
     className: styles$8.inputErrorMessages
   }, eMessage) : "");
 };
@@ -485,7 +504,9 @@ Input.propTypes = {
   regexpError: PropTypes.string,
   label: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
-  value: PropTypes.string
+  value: PropTypes.string,
+  showEye: PropTypes.bool,
+  tooltip: PropTypes.string
 };
 Input.defaultProps = {
   label: "",
@@ -814,8 +835,8 @@ Stepper.propTypes = {
   activeSteps: PropTypes.number
 };
 
-var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .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}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
-var styles$3 = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
+var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .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}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}.select-module_error-message__-ac6X{border:2px solid #e00!important}.select-module_eMessage__Mm-F7{color:#e00}";
+var styles$3 = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","error-message":"select-module_error-message__-ac6X","eMessage":"select-module_eMessage__Mm-F7"};
 styleInject(css_248z$3);
 
 const SelectTheme = {
@@ -884,7 +905,7 @@ const Select = ({
     className: styles$3['select-content'],
     id: styles$3.selector
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$3['select-content-top']} select-content-top-rem`,
+    className: `${styles$3['select-content-top']} select-content-top-rem ${eMessage ? styles$3['error-message'] : ''}`,
     onClick: () => {
       setOpened(!opened);
     }
@@ -940,51 +961,70 @@ Select.defaultProps = {
   required: false
 };
 
-var css_248z$2 = ".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}.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{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.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$2 = ".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{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.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$2 = {"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$2);
 
 const File = ({
-  className,
+  name,
   label,
+  maxSize,
   required,
   disabled,
   onChange,
+  className,
   defaultData,
   errorMesage,
-  name,
+  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 [error, setError] = useState('');
   const [fileName, setFileName] = useState('no selected file');
-  function fileType(file) {
-    if (file[0].size <= 5000000) {
-      if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
-        setFileName(file[0].name);
-        setImage(URL.createObjectURL(file[0]));
-        onChange({
-          file
-        });
-        setError('');
-      } else if (file[0].type === 'application/pdf') {
-        setImage(pdfImageName);
-        onChange({
-          file
-        });
-        setError('');
+  const handleCheckFile = e => {
+    const file = e.target.files;
+    if (file[0]) {
+      if (file[0].size <= maxSize * Math.pow(2, 20)) {
+        if (fileExtensions.includes(file[0].type.split('/')[1])) {
+          if (file[0].type === 'application/pdf') {
+            setError('');
+            onChange({
+              file
+            });
+            setImage(pdfImageName);
+          } else {
+            setError('');
+            onChange({
+              file
+            });
+            setFileName(file[0].name);
+            setImage(URL.createObjectURL(file[0]));
+          }
+        } else {
+          setImage(null);
+          setError('ֆայլի սխալ ֆորմատ');
+          setFileName('no selected file');
+        }
       } else {
         setImage(null);
+        setError('առավելագույն ծավալ');
         setFileName('no selected file');
-        setError('ֆայլի սխալ ֆորմատ');
       }
     } else {
       setImage(null);
+      setError('Ֆայլը ընտրված չէ');
       setFileName('no selected file');
-      setError('առավելագույն ծավալ');
     }
-  }
+  };
+  const handleRemoveFile = () => {
+    setImage(null);
+    onChange({
+      target: null
+    });
+    setFileName('no selected file');
+    document.querySelector(`.${name}`).value = "";
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
     className: `${styles$2['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
@@ -994,30 +1034,15 @@ const File = ({
   }, "*")), /*#__PURE__*/React.createElement("div", {
     className: classnames(`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$2['file-form']} file-form-rem`,
-    onChange: e => {
-      console.log(e);
-    },
-    style: error || errorMesage ? {
-      borderColor: 'red'
-    } : {},
-    onClick: () => {
-      document.querySelector(`.${name}`).click();
-    }
+    onChange: e => console.log(e),
+    className: `${styles$2['file-form']} file-form-rem ${errorMesage ? styles$2['error'] : ''}`,
+    onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React.createElement("input", {
+    hidden: true,
     type: "file",
     className: name,
-    hidden: true,
     disabled: disabled,
-    onChange: ({
-      target: {
-        files
-      }
-    }) => {
-      if (files[0]) {
-        fileType(files);
-      }
-    }
+    onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React.createElement("div", {
     className: `${styles$2['upload-file-content']} upload-file-content-rem`
   }, /*#__PURE__*/React.createElement("img", {
@@ -1034,16 +1059,9 @@ const File = ({
     className: `${styles$2['upload-info-txt']} upload-info-txt-rem`
   }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("span", {
     className: `${styles$2['upload-info-size']} upload-info-size-rem`
-  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 5\u0544\u0532 ( jpg, jpeg, png, pdf)"))), /*#__PURE__*/React.createElement("div", {
+  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React.createElement("div", {
     className: `${styles$2['delete-upload-icon']} delete-upload-icon-rem`,
-    onClick: e => {
-      setFileName('no selected file');
-      setImage(null);
-      document.querySelector(`.${name}`).value = "";
-      onChange({
-        target: null
-      });
-    }
+    onClick: handleRemoveFile
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon-delete"
   })), errorMesage || error ? /*#__PURE__*/React.createElement("span", {
@@ -1053,16 +1071,20 @@ const File = ({
   }, errorMesage || error) : null));
 };
 File.propTypes = {
-  className: PropTypes.string,
   label: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
+  maxSize: PropTypes.number,
+  className: PropTypes.string,
   errorMesage: PropTypes.string,
-  defaultData: PropTypes.object
+  defaultData: PropTypes.object,
+  fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };
 File.defaultProps = {
-  required: false
+  maxSize: 5,
+  required: false,
+  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
 var css_248z$1 = ".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)}}";

package/dist/index.js

@@ -196,8 +196,8 @@ Typography.defaultProps = {
   onClick: () => {}
 };
 
-var css_248z$b = ".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}";
-var styles$a = {"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"};
+var css_248z$b = ".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$a = {"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$b);
 
 const Autocomplate = ({
@@ -281,7 +281,7 @@ const Autocomplate = ({
         className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: `${styles$a['no-option']} autocomplate-no-option`
-      }, inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` : 'տվյալներ չկան'))));
+      }, inputValue.length <= searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
     }
   }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -295,7 +295,7 @@ const Autocomplate = ({
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     id: inputId,
     type: "text",
-    className: `${styles$a['autocomplate-content-top']} autocomplate-content-top-rem`,
+    className: `${styles$a['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles$a.errorBorder : ''}`,
     disabled: disabled,
     onChange: handleChange,
     onClick: () => {
@@ -441,16 +441,23 @@ const Input = ({
   regexpError,
   errorMesage,
   required,
+  showEye,
   disabled,
   type,
+  tooltip,
   onChange,
   value,
   ...props
 }) => {
   const [inputValue, setInputValue] = React.useState(value);
+  const [eyeStatus, setEyeStatus] = React.useState("");
+  const [tooltipStatus, setTooltipStatus] = React.useState(false);
   const handleChange = event => {
     setInputValue(event.target.value);
-    onChange ? onChange(event.target.value) : '';
+    onChange ? onChange(event.target.value) : "";
+  };
+  document.onmouseup = () => {
+    setEyeStatus("");
   };
   React.useEffect(() => {
     setInputValue(value);
@@ -462,17 +469,17 @@ const Input = ({
     const regex = new RegExp(regexp);
     eMessage = regex.test(inputValue) ? "" : regexpError;
   }
-  const classProps = classnames__default["default"](styles$8.input, styles$8[size], eMessage != '' ? styles$8['error-message'] : "", className, 'input-inner-rem');
+  const classProps = classnames__default["default"](styles$8.input, styles$8[size], eMessage != "" ? styles$8["error-message"] : "", className, "input-inner-rem");
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8['input-wrap']} input-wrap-rem`
+    className: `${styles$8["input-wrap"]} input-wrap-rem`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: `${styles$8['input-title']} input-title-rem`
+    className: `${styles$8["input-title"]} input-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
-    type: type,
+    type: eyeStatus || type,
     className: classProps,
     style: color && {
       color
@@ -480,7 +487,19 @@ const Input = ({
     disabled: disabled ? disabled : "",
     onChange: handleChange,
     value: inputValue
-  })), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
+  })), type === "password" && showEye ? /*#__PURE__*/React__default["default"].createElement("p", {
+    onMouseDown: () => {
+      setEyeStatus("text");
+    },
+    onMouseUp: () => {
+      setEyeStatus("");
+    }
+  }, "\uD83D\uDC41") : null, tooltip ? /*#__PURE__*/React__default["default"].createElement(Typography, {
+    variant: "p",
+    onClick: () => {
+      setTooltipStatus(!tooltipStatus);
+    }
+  }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React__default["default"].createElement("p", null, tooltip) : null, eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$8.inputErrorMessages
   }, eMessage) : "");
 };
@@ -496,7 +515,9 @@ Input.propTypes = {
   regexpError: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string.isRequired,
   disabled: PropTypes__default["default"].bool,
-  value: PropTypes__default["default"].string
+  value: PropTypes__default["default"].string,
+  showEye: PropTypes__default["default"].bool,
+  tooltip: PropTypes__default["default"].string
 };
 Input.defaultProps = {
   label: "",
@@ -825,8 +846,8 @@ Stepper.propTypes = {
   activeSteps: PropTypes__default["default"].number
 };
 
-var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .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}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}";
-var styles$3 = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
+var css_248z$3 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{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}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .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}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}.select-module_error-message__-ac6X{border:2px solid #e00!important}.select-module_eMessage__Mm-F7{color:#e00}";
+var styles$3 = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","error-message":"select-module_error-message__-ac6X","eMessage":"select-module_eMessage__Mm-F7"};
 styleInject(css_248z$3);
 
 const SelectTheme = {
@@ -895,7 +916,7 @@ const Select = ({
     className: styles$3['select-content'],
     id: styles$3.selector
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$3['select-content-top']} select-content-top-rem`,
+    className: `${styles$3['select-content-top']} select-content-top-rem ${eMessage ? styles$3['error-message'] : ''}`,
     onClick: () => {
       setOpened(!opened);
     }
@@ -951,51 +972,70 @@ Select.defaultProps = {
   required: false
 };
 
-var css_248z$2 = ".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}.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{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.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$2 = ".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{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.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$2 = {"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$2);
 
 const File = ({
-  className,
+  name,
   label,
+  maxSize,
   required,
   disabled,
   onChange,
+  className,
   defaultData,
   errorMesage,
-  name,
+  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 [error, setError] = React.useState('');
   const [fileName, setFileName] = React.useState('no selected file');
-  function fileType(file) {
-    if (file[0].size <= 5000000) {
-      if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
-        setFileName(file[0].name);
-        setImage(URL.createObjectURL(file[0]));
-        onChange({
-          file
-        });
-        setError('');
-      } else if (file[0].type === 'application/pdf') {
-        setImage(pdfImageName);
-        onChange({
-          file
-        });
-        setError('');
+  const handleCheckFile = e => {
+    const file = e.target.files;
+    if (file[0]) {
+      if (file[0].size <= maxSize * Math.pow(2, 20)) {
+        if (fileExtensions.includes(file[0].type.split('/')[1])) {
+          if (file[0].type === 'application/pdf') {
+            setError('');
+            onChange({
+              file
+            });
+            setImage(pdfImageName);
+          } else {
+            setError('');
+            onChange({
+              file
+            });
+            setFileName(file[0].name);
+            setImage(URL.createObjectURL(file[0]));
+          }
+        } else {
+          setImage(null);
+          setError('ֆայլի սխալ ֆորմատ');
+          setFileName('no selected file');
+        }
       } else {
         setImage(null);
+        setError('առավելագույն ծավալ');
         setFileName('no selected file');
-        setError('ֆայլի սխալ ֆորմատ');
       }
     } else {
       setImage(null);
+      setError('Ֆայլը ընտրված չէ');
       setFileName('no selected file');
-      setError('առավելագույն ծավալ');
     }
-  }
+  };
+  const handleRemoveFile = () => {
+    setImage(null);
+    onChange({
+      target: null
+    });
+    setFileName('no selected file');
+    document.querySelector(`.${name}`).value = "";
+  };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
     className: `${styles$2['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
@@ -1005,30 +1045,15 @@ const File = ({
   }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"](`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$2['file-form']} file-form-rem`,
-    onChange: e => {
-      console.log(e);
-    },
-    style: error || errorMesage ? {
-      borderColor: 'red'
-    } : {},
-    onClick: () => {
-      document.querySelector(`.${name}`).click();
-    }
+    onChange: e => console.log(e),
+    className: `${styles$2['file-form']} file-form-rem ${errorMesage ? styles$2['error'] : ''}`,
+    onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default["default"].createElement("input", {
+    hidden: true,
     type: "file",
     className: name,
-    hidden: true,
     disabled: disabled,
-    onChange: ({
-      target: {
-        files
-      }
-    }) => {
-      if (files[0]) {
-        fileType(files);
-      }
-    }
+    onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$2['upload-file-content']} upload-file-content-rem`
   }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -1045,16 +1070,9 @@ const File = ({
     className: `${styles$2['upload-info-txt']} upload-info-txt-rem`
   }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${styles$2['upload-info-size']} upload-info-size-rem`
-  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 5\u0544\u0532 ( jpg, jpeg, png, pdf)"))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$2['delete-upload-icon']} delete-upload-icon-rem`,
-    onClick: e => {
-      setFileName('no selected file');
-      setImage(null);
-      document.querySelector(`.${name}`).value = "";
-      onChange({
-        target: null
-      });
-    }
+    onClick: handleRemoveFile
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-delete"
   })), errorMesage || error ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -1064,16 +1082,20 @@ const File = ({
   }, errorMesage || error) : null));
 };
 File.propTypes = {
-  className: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   onChange: PropTypes__default["default"].func,
+  maxSize: PropTypes__default["default"].number,
+  className: PropTypes__default["default"].string,
   errorMesage: PropTypes__default["default"].string,
-  defaultData: PropTypes__default["default"].object
+  defaultData: PropTypes__default["default"].object,
+  fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
 };
 File.defaultProps = {
-  required: false
+  maxSize: 5,
+  required: false,
+  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
 var css_248z$1 = ".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)}}";

package/package.json

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

package/src/components/autocomplate/autocomplate.module.css

@@ -84,4 +84,12 @@
     line-height: 22px;
     margin-bottom: 6px;
     text-transform: none;
+}
+
+.errorBorder {
+    border: 2px solid rgb(238, 0, 0) !important;
+}
+
+.errorMessage {
+    color: rgba(238, 0, 0, 1) !important;
 }

package/src/components/autocomplate/index.js

@@ -81,7 +81,7 @@ export const Autocomplate = ({
         <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
           <div className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}>
             <div className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}>
-              <div className={`${styles['no-option']} autocomplate-no-option`}>{inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` :  'տվյալներ չկան'}</div>
+              <div className={`${styles['no-option']} autocomplate-no-option`}>{inputValue.length <= searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'}</div>
             </div>
           </div>
         </div>
@@ -96,7 +96,7 @@ export const Autocomplate = ({
         <input
           id={inputId}
           type="text"
-          className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem`}
+          className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles.errorBorder : ''}`}
           disabled={disabled}
           onChange={handleChange}
           onClick={() => { setShowOptions(!showOptions) }}

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

@@ -61,7 +61,7 @@
     border-color: #D1D1D1;
 }
 .file-form.error {
-    border-color: #EE0000;
+    border-color: #EE0000 !important;
 }
 .file-form.accept {
     border-color: #00236A;

package/src/components/file/file.stories.js

@@ -11,14 +11,10 @@ const Template = (args) => <File {...args} />;
 export const Default = Template.bind({});
 Default.args = {
   label: 'ssa',
-  onChange: (aa) => {
-    console.log('barev', aa);
-
-  },
+  onChange: _ => _,
   defaultData: {
     url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',
     type: "image/png",
   },
   name: 'sss'
-
 };

package/src/components/file/index.js

@@ -5,113 +5,125 @@ import styles from "./file.module.css";
 import Icon from '../icon/Icon'
 
 export const File = ({
-  className,
+  name,
   label,
+  maxSize,
   required,
   disabled,
   onChange,
+  className,
   defaultData,
   errorMesage,
-  name,
+  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 : pdfImageName : null);
   const [error, setError] = useState('');
   const [fileName, setFileName] = useState('no selected file');
-  function fileType(file) {
-    if (file[0].size <= 5000000) {
-      if (file[0].type === 'image/jpeg' || file[0].type === 'image/png') {
-        setFileName(file[0].name)
-        setImage(URL.createObjectURL(file[0]))
-        onChange({file})
-        setError('')
 
-      }
-      else if (file[0].type === 'application/pdf') {
-        setImage(pdfImageName)
-        onChange({file})
-        setError('')
+  const handleCheckFile = (e) => {
+    const file = e.target.files;
 
-      }
-      else {
+    if (file[0]) {
+      if (file[0].size <= maxSize * Math.pow(2, 20)) {
+        if (fileExtensions.includes(file[0].type.split('/')[1])) {
+          if (file[0].type === 'application/pdf') {
+            setError('');
+            onChange({file});
+            setImage(pdfImageName);
+          } else {
+            setError('');
+            onChange({file});
+            setFileName(file[0].name);
+            setImage(URL.createObjectURL(file[0]));
+          }
+        } else {
+          setImage(null)
+          setError('ֆայլի սխալ ֆորմատ');
+          setFileName('no selected file');
+        }
+      } else {
         setImage(null)
+        setError('առավելագույն ծավալ');
         setFileName('no selected file');
-        setError('ֆայլի սխալ ֆորմատ')
       }
-    }
-    else {
+    } else {
       setImage(null)
+      setError('Ֆայլը ընտրված չէ');
       setFileName('no selected file');
-      setError('առավելագույն ծավալ')
     }
-  }
+  };
+
+  const handleRemoveFile = () => {
+    setImage(null);
+    onChange({ target: null });
+    setFileName('no selected file');
+    document.querySelector(`.${name}`).value = "";
+  };
 
   return (
       <>
-      <p className={`${styles['file-form-title']} ile-form-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</p>
-      <div className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`,image ? styles['active'] : '')}>
-        <div
-          className={`${styles['file-form']} file-form-rem`}
-            onChange={(e) => { console.log(e) }}
-            style={error || errorMesage ? { borderColor: 'red' } : {}}
-            onClick={() => {
-                document.querySelector(`.${name}`).click()
-            }}
-        >
-          <input type='file' className={name}  hidden disabled={disabled}
-                 onChange={({ target: { files } }) => {  
-                     if (files[0]) {
-                         fileType(files)
-                     }
-                 }}
-          />
+        <p className={`${styles['file-form-title']} ile-form-title-rem`}>
+          {label} {required && <sup style={{color: "#ee0000"}}>*</sup>}
+        </p>
+        <div className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`,image ? styles['active'] : '')}>
+          <div
+            onChange={(e) => console.log(e)}
+            className={`${styles['file-form']} file-form-rem ${errorMesage ? styles['error'] : '' }`}
+            onClick={() => document.querySelector(`.${name}`).click()}
+          >
+            <input
+              hidden
+              type='file'
+              className={name}
+              disabled={disabled}
+              onChange={(e) => handleCheckFile(e)}
+            />
             {
-                image ?
-                    <div className={`${styles['upload-file-content']} upload-file-content-rem`}>
-                      <img
-                          src={image}
-                          alt={fileName}
-                      />
-                    </div> :
-                    <div className={`${styles['file-form-inner-upload']} ile-form-inner-upload-rem`}>
-                      <img src="../../assets/upload.svg" alt=""/>
-                      <span className={`${styles['upload-info']} upload-info-rem`}><span className={`${styles['upload-info-txt']} upload-info-txt-rem`}>Բեռնել</span></span>
-                      <span className={`${styles['upload-info-size']} upload-info-size-rem`}>Առավելագույնը 5ՄԲ ( jpg, jpeg, png, pdf)</span>
-                    </div>
+              image ?
+                <div className={`${styles['upload-file-content']} upload-file-content-rem`}>
+                  <img src={image} alt={fileName} />
+                </div> :
+                <div className={`${styles['file-form-inner-upload']} ile-form-inner-upload-rem`}>
+                  <img src="../../assets/upload.svg" alt="" />
+                  <span className={`${styles['upload-info']} upload-info-rem`}>
+                    <span className={`${styles['upload-info-txt']} upload-info-txt-rem`}>Բեռնել</span>
+                  </span>
+                  <span className={`${styles['upload-info-size']} upload-info-size-rem`}>
+                    Առավելագույնը {maxSize}ՄԲ ( { fileExtensions.toString().split(',').join(', ') } )
+                  </span>
+                </div>
             }
-        </div>
-        <div className={`${styles['delete-upload-icon']} delete-upload-icon-rem`}
-             onClick={(e) => {
-                 setFileName('no selected file');
-                 setImage(null);
-                 document.querySelector(`.${name}`).value = "";
-                 onChange({ target: null });
-             }}>
-          <i className="icon-delete"/>
-        </div>
+          </div>
+          <div
+            className={`${styles['delete-upload-icon']} delete-upload-icon-rem`}
+            onClick={handleRemoveFile}
+          >
+            <i className="icon-delete"/>
+          </div>
           {
-              errorMesage || error  ? <span style={{ color: 'red' }}>{errorMesage || error}</span> : null
+            errorMesage || error ? <span style={{ color: 'red' }}>{errorMesage || error}</span> : null
           }
       </div>
-      </>
+    </>
   );
 };
 
 File.propTypes = {
-  className: PropTypes.string,
   label: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
+  maxSize: PropTypes.number,
+  className: PropTypes.string,
   errorMesage: PropTypes.string,
-  defaultData: PropTypes.object
+  defaultData: PropTypes.object,
+  fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };
 
-
-
 File.defaultProps = {
+  maxSize: 5,
   required: false,
-};
+  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
+};

package/src/components/input/index.js

@@ -2,98 +2,134 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./input.module.css";
+import {Typography} from "../typography"
 
 export const InputTypes = {
-  TEXT: "text",
-  PASSWORD: "password",
-  EMAIL: "email",
-  NUMBER: "number",
-  TEL: "tel",
+    TEXT: "text",
+    PASSWORD: "password",
+    EMAIL: "email",
+    NUMBER: "number",
+    TEL: "tel",
 };
 
 export const InputSizes = {
-  SMALL: "size-small",
-  MEDIUM: "size-medium",
-  LARGE: "size-large",
+    SMALL: "size-small",
+    MEDIUM: "size-medium",
+    LARGE: "size-large",
 };
 
 export const Input = ({
-  size,
-  color,
-  className,
-  label,
-  regexp,
-  regexpError,
-  errorMesage,
-  required,
-  disabled,
-  type,
-  onChange,
-  value,
-  ...props
+    size,
+    color,
+    className,
+    label,
+    regexp,
+    regexpError,
+    errorMesage,
+    required,
+    showEye,
+    disabled,
+    type,
+    tooltip,
+    onChange,
+    value,
+    ...props
 }) => {
-  const [inputValue, setInputValue] = useState(value);
-  const handleChange = (event) => {
-    setInputValue(event.target.value);
-    onChange ? onChange(event.target.value) : '';
-  };
+    const [inputValue, setInputValue] = useState(value);
+    const [eyeStatus, setEyeStatus] = useState("");
+    const [tooltipStatus, setTooltipStatus] = useState(false);
+    const handleChange = (event) => {
+        setInputValue(event.target.value);
+        onChange ? onChange(event.target.value) : "";
+    };
+    document.onmouseup = () => {
+        setEyeStatus("");
+    };
+    useEffect(() => {
+        setInputValue(value);
+    }, [value]);
 
-  useEffect(()=>{
-    setInputValue(value)
-  },[value])
+    let eMessage = "";
+    if (errorMesage) {
+        eMessage = errorMesage;
+    } else if (regexp) {
+        const regex = new RegExp(regexp);
+        eMessage = regex.test(inputValue) ? "" : regexpError;
+    }
 
-  let eMessage = "";
-  if (errorMesage) {
-    eMessage = errorMesage;
-  } else if (regexp) {
-    const regex = new RegExp(regexp);
-    eMessage = regex.test(inputValue) ? "" : regexpError;
-  }
-
-  const classProps = classnames(styles.input, styles[size], eMessage != '' ? styles['error-message'] :"" , className,'input-inner-rem');
-  return (
-    <div className={`${styles['input-wrap']} input-wrap-rem`}>
-      {label ? <label className={`${styles['input-title']} input-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-      <input
-        {...props}
-        type={type}
-        className={classProps}
-        style={color && { color }}
-        disabled={disabled ? disabled : ""}
-        onChange={handleChange}
-        value={inputValue}
-      />
-      {eMessage ? (
-        <span className={styles.inputErrorMessages}>{eMessage}</span>
-      ) : (
-        ""
-      )}
-    </div>
-  );
+    const classProps = classnames(
+        styles.input,
+        styles[size],
+        eMessage != "" ? styles["error-message"] : "",
+        className,
+        "input-inner-rem"
+    );
+    return (
+        <div className={`${styles["input-wrap"]} input-wrap-rem`}>
+            {label ? (
+                <label className={`${styles["input-title"]} input-title-rem`}>
+                    {label} {required && <sup style={{ color: "#ee0000" }}>*</sup>}
+                </label>
+            ) : (
+                ""
+            )}
+            
+            <input
+                {...props}
+                type={eyeStatus || type}
+                className={classProps}
+                style={color && { color }}
+                disabled={disabled ? disabled : ""}
+                onChange={handleChange}
+                value={inputValue}
+            />
+            {type === "password" && showEye ? (
+                <p
+                    onMouseDown={() => {
+                        setEyeStatus("text");
+                    }}
+                    onMouseUp={() => {
+                        setEyeStatus("");
+                    }}
+                >
+                    👁
+                </p>
+            ) : null}
+            {tooltip ? <Typography variant="p"
+              onClick={()=> {
+                setTooltipStatus(!tooltipStatus)
+              }}
+            >ⓘ</Typography>: null}
+            {tooltipStatus ? <p>{tooltip}</p> : null}
+            {eMessage ? <span className={styles.inputErrorMessages}>{eMessage}</span> : ""}
+        </div>
+    );
 };
 
 Input.propTypes = {
-  type: PropTypes.oneOf(Object.values(InputTypes)),
-  size: PropTypes.oneOf(Object.values(InputSizes)),
-  color: PropTypes.string,
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  errorMesage: PropTypes.string,
-  regexp: PropTypes.string,
-  regexpError: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  value: PropTypes.string
+    type: PropTypes.oneOf(Object.values(InputTypes)),
+    size: PropTypes.oneOf(Object.values(InputSizes)),
+    color: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    required: PropTypes.bool,
+    errorMesage: PropTypes.string,
+    regexp: PropTypes.string,
+    regexpError: PropTypes.string,
+    label: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    value: PropTypes.string,
+    showEye: PropTypes.bool,
+    tooltip: PropTypes.string,
 };
 
 Input.defaultProps = {
-  label: "",
-  color: null,
-  size: InputSizes.MEDIUM,
-  onChange: undefined,
-  required: false,
-  errorMesage: "",
-  type: "text",
-  value: ""
+    label: "",
+    color: null,
+    size: InputSizes.MEDIUM,
+    onChange: undefined,
+    required: false,
+    errorMesage: "",
+    type: "text",
+    value: ""
 };

package/src/components/select/index.js

@@ -78,7 +78,7 @@ export const Select = ({
             <div className={`${styles['select-wrap']} select-wrap-rem`} ref={ref}>
                 <div className={styles['select-content']} id={styles.selector}>
                     <div
-                        className={`${styles['select-content-top']} select-content-top-rem`}
+                        className={`${styles['select-content-top']} select-content-top-rem ${eMessage ? styles['error-message'] : ''}`}
                         onClick={() => {
                             setOpened(!opened)
                         }}

package/src/components/select/select.module.css

@@ -109,4 +109,12 @@
 .select-content-bottom-row:hover {
     background: unset;
     color: #00236A;;
-}
+}
+
+.error-message {
+    border: 2px solid rgb(238, 0, 0) !important;
+}
+
+.eMessage {
+    color: rgba(238, 0, 0, 1);
+}