@xaypay/tui 0.0.49 → 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 = ({
@@ -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,7 +835,7 @@ 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}.select-module_error-message__-ac6X{border:2px solid #e00}.select-module_eMessage__Mm-F7{color:#e00}";
+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);
 
@@ -940,7 +961,7 @@ 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);
 
@@ -1014,10 +1035,7 @@ const File = ({
     className: classnames(`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
   }, /*#__PURE__*/React.createElement("div", {
     onChange: e => console.log(e),
-    className: `${styles$2['file-form']} file-form-rem`,
-    style: error || errorMesage ? {
-      borderColor: 'red'
-    } : {},
+    className: `${styles$2['file-form']} file-form-rem ${errorMesage ? styles$2['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React.createElement("input", {
     hidden: true,

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 = ({
@@ -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,7 +846,7 @@ 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}.select-module_error-message__-ac6X{border:2px solid #e00}.select-module_eMessage__Mm-F7{color:#e00}";
+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);
 
@@ -951,7 +972,7 @@ 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);
 
@@ -1025,10 +1046,7 @@ const File = ({
     className: classnames__default["default"](`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     onChange: e => console.log(e),
-    className: `${styles$2['file-form']} file-form-rem`,
-    style: error || errorMesage ? {
-      borderColor: 'red'
-    } : {},
+    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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.49",
+  "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

@@ -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/index.js

@@ -70,8 +70,7 @@ export const File = ({
         <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`}
-            style={error || errorMesage ? { borderColor: 'red' } : {}}
+            className={`${styles['file-form']} file-form-rem ${errorMesage ? styles['error'] : '' }`}
             onClick={() => document.querySelector(`.${name}`).click()}
           >
             <input

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/select.module.css

@@ -112,7 +112,7 @@
 }
 
 .error-message {
-    border: 2px solid rgb(238, 0, 0);
+    border: 2px solid rgb(238, 0, 0) !important;
 }
 
 .eMessage {