@xaypay/tui 0.0.64 → 0.0.66

package/dist/index.es.js

@@ -32,7 +32,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{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$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
 var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$d);
 
@@ -566,6 +566,7 @@ const Input = ({
   label,
   value,
   width,
+  regexp,
   height,
   radius,
   padding,
@@ -602,13 +603,18 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
+  telErrorMessage,
   labelMarginBottom,
+  regexpErrorMessage,
   phoneJustifyContent,
   errorAnimationDuration,
   ...props
 }) => {
+  const phoneNumberRegex = /^\d{8}$/;
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
+  const [innerValue, setInnerValue] = useState('');
+  const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
   const classProps = classnames(className ? className : configStyles.INPUT.className);
@@ -629,15 +635,20 @@ const Input = ({
         animation: ${errorAnimation ? animation : 'none'};
     `;
   const handleChange = event => {
-    // TODO: need to discuss
-    // onChange
-    //     ? type === 'tel'
-    //             ? phoneNumberRegex.test(event.target.value)
-    //                     ? onChange(event.target.value)
-    //                     : _ => _
-    //         : onChange(event.target.value)
-    //     : _ => _;
-    onChange ? onChange(event.target.value) : _ => _;
+    const currentValue = event.target.value;
+    if (onChange) {
+      currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
+    }
+    setInnerValue(currentValue);
+    if (type === 'tel') {
+      !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+    }
+    if (maxLength) {
+      currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+    }
+    if (regexp) {
+      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -645,6 +656,35 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  useEffect(() => {
+    if (value && value !== '') {
+      setInnerValue(value);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+      }
+      if (regexp) {
+        !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    if (errorMessage) {
+      setInnerErrorMessage(errorMessage);
+    }
+  }, [errorMessage]);
+  useEffect(() => {
+    if (type === 'tel' && !telErrorMessage) {
+      alert('Please add telErrorMessage on input component');
+    }
+  }, [type]);
+  useEffect(() => {
+    if (regexp && !regexpErrorMessage) {
+      alert('Please add regexpErrorMessage prop on input component');
+    }
+  }, [regexp]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -659,14 +699,14 @@ const Input = ({
     }
   }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: errorColor ? errorColor : "#ee0000"
     }
   }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -695,14 +735,12 @@ const Input = ({
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
       display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
       alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
-    // TODO: need to discuss
-    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
-    value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
+    value: innerValue,
     className: classProps,
     onChange: handleChange,
     type: show ? 'text' : type,
@@ -721,7 +759,7 @@ const Input = ({
       borderRadius: radius ? radius : configStyles.INPUT.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
@@ -737,7 +775,7 @@ const Input = ({
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React__default.createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -749,7 +787,7 @@ const Input = ({
       transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform
     },
     className: errorClassName ? errorClassName : configStyles.INPUT.errorClassName
-  }, errorMessage) : '');
+  }, innerErrorMessage) : '');
 };
 Input.propTypes = {
   name: PropTypes.string,
@@ -788,11 +826,14 @@ Input.propTypes = {
   errorPosition: PropTypes.string,
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
+  telErrorMessage: PropTypes.string,
   backgroundColor: PropTypes.string,
   phoneAlignItems: PropTypes.string,
   errorLineHeight: PropTypes.string,
   labelLineHeight: PropTypes.string,
   labelMarginBottom: PropTypes.string,
+  regexpErrorMessage: PropTypes.string,
+  regexp: PropTypes.instanceOf(RegExp),
   phoneJustifyContent: PropTypes.string,
   errorAnimationDuration: PropTypes.string,
   leftIcon: PropTypes.arrayOf(PropTypes.element),
@@ -951,24 +992,56 @@ Button.propTypes = {
   disabledBackgroundColor: PropTypes.string
 };
 
-var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
+const SvgCheckboxUnchecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z",
+  fill: "#D1D1D1"
+}));
 
-var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\r\n</svg>";
+const SvgCheckboxChecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z",
+  fill: "#00236A"
+}));
 
-const SelectCheckbox = ({
+const SingleCheckbox = ({
   checked
 }) => {
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginRight: '9px'
     }
-  }, checked ? /*#__PURE__*/React__default.createElement("img", {
-    src: ReactCheckboxChecked
-  }) : /*#__PURE__*/React__default.createElement("img", {
-    src: ReactCheckbox
-  }));
+  }, checked ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, null) : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, null));
 };
-SelectCheckbox.propTypes = {
+SingleCheckbox.propTypes = {
   checked: PropTypes.bool
 };
 
@@ -1234,7 +1307,7 @@ const Select = ({
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'
+      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$6['select-content-bottom']}`
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -1260,7 +1333,7 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SelectCheckbox, {
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SingleCheckbox, {
       checked: option.checked
     }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
@@ -1670,7 +1743,7 @@ const Toaster = () => {
   });
 };
 
-var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
+var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\n</svg>";
 
 var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
 var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
@@ -2168,4 +2241,4 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SingleCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, toast };

package/dist/index.js

@@ -62,7 +62,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{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$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
 var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$d);
 
@@ -596,6 +596,7 @@ const Input = ({
   label,
   value,
   width,
+  regexp,
   height,
   radius,
   padding,
@@ -632,13 +633,18 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
+  telErrorMessage,
   labelMarginBottom,
+  regexpErrorMessage,
   phoneJustifyContent,
   errorAnimationDuration,
   ...props
 }) => {
+  const phoneNumberRegex = /^\d{8}$/;
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
+  const [innerValue, setInnerValue] = React.useState('');
+  const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
   const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className);
@@ -659,15 +665,20 @@ const Input = ({
         animation: ${errorAnimation ? animation : 'none'};
     `;
   const handleChange = event => {
-    // TODO: need to discuss
-    // onChange
-    //     ? type === 'tel'
-    //             ? phoneNumberRegex.test(event.target.value)
-    //                     ? onChange(event.target.value)
-    //                     : _ => _
-    //         : onChange(event.target.value)
-    //     : _ => _;
-    onChange ? onChange(event.target.value) : _ => _;
+    const currentValue = event.target.value;
+    if (onChange) {
+      currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
+    }
+    setInnerValue(currentValue);
+    if (type === 'tel') {
+      !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+    }
+    if (maxLength) {
+      currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+    }
+    if (regexp) {
+      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -675,6 +686,35 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  React.useEffect(() => {
+    if (value && value !== '') {
+      setInnerValue(value);
+      if (type === 'tel') {
+        !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+      }
+      if (maxLength) {
+        value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+      }
+      if (regexp) {
+        !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+      }
+    }
+  }, [value]);
+  React.useEffect(() => {
+    if (errorMessage) {
+      setInnerErrorMessage(errorMessage);
+    }
+  }, [errorMessage]);
+  React.useEffect(() => {
+    if (type === 'tel' && !telErrorMessage) {
+      alert('Please add telErrorMessage on input component');
+    }
+  }, [type]);
+  React.useEffect(() => {
+    if (regexp && !regexpErrorMessage) {
+      alert('Please add regexpErrorMessage prop on input component');
+    }
+  }, [regexp]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -689,14 +729,14 @@ const Input = ({
     }
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: errorColor ? errorColor : "#ee0000"
     }
   }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -725,14 +765,12 @@ const Input = ({
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
       display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
       alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
-    // TODO: need to discuss
-    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
-    value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
+    value: innerValue,
     className: classProps,
     onChange: handleChange,
     type: show ? 'text' : type,
@@ -751,7 +789,7 @@ const Input = ({
       borderRadius: radius ? radius : configStyles.INPUT.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
+      color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
@@ -767,7 +805,7 @@ const Input = ({
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -779,7 +817,7 @@ const Input = ({
       transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform
     },
     className: errorClassName ? errorClassName : configStyles.INPUT.errorClassName
-  }, errorMessage) : '');
+  }, innerErrorMessage) : '');
 };
 Input.propTypes = {
   name: PropTypes__default["default"].string,
@@ -818,11 +856,14 @@ Input.propTypes = {
   errorPosition: PropTypes__default["default"].string,
   boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
+  telErrorMessage: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
+  regexpErrorMessage: PropTypes__default["default"].string,
+  regexp: PropTypes__default["default"].instanceOf(RegExp),
   phoneJustifyContent: PropTypes__default["default"].string,
   errorAnimationDuration: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
@@ -981,24 +1022,56 @@ Button.propTypes = {
   disabledBackgroundColor: PropTypes__default["default"].string
 };
 
-var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
+const SvgCheckboxUnchecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z",
+  fill: "#D1D1D1"
+}));
 
-var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\r\n</svg>";
+const SvgCheckboxChecked = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z",
+  fill: "#00236A"
+}));
 
-const SelectCheckbox = ({
+const SingleCheckbox = ({
   checked
 }) => {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginRight: '9px'
     }
-  }, checked ? /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactCheckboxChecked
-  }) : /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactCheckbox
-  }));
+  }, checked ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, null) : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, null));
 };
-SelectCheckbox.propTypes = {
+SingleCheckbox.propTypes = {
   checked: PropTypes__default["default"].bool
 };
 
@@ -1264,7 +1337,7 @@ const Select = ({
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'
+      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$6['select-content-bottom']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1290,7 +1363,7 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SelectCheckbox, {
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
       checked: option.checked
     }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
@@ -1700,7 +1773,7 @@ const Toaster = () => {
   });
 };
 
-var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\r\n</svg>";
+var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\n</svg>";
 
 var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
 var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
@@ -2209,7 +2282,7 @@ exports.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Radio = Radio;
 exports.Select = Select;
-exports.SelectCheckbox = SelectCheckbox;
+exports.SingleCheckbox = SingleCheckbox;
 exports.Stepper = Stepper;
 exports.Table = Table;
 exports.Toaster = Toaster;

package/package.json

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

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

@@ -97,16 +97,11 @@
     overflow: hidden;
 }
 .upload-file-content > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
     display: block;
-    width: auto;
-    height: 190px;
-    max-height: 190px;
+    width: 27.8rem;
+    height: auto;
+    max-height: 95%;
+    object-fit: contain;
 }
 .file-form-title {
     margin-bottom: 10px;

package/src/components/input/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import { compereConfigs } from "./../../utils";
@@ -20,6 +20,7 @@ export const Input = ({
     label,
     value,
     width,
+    regexp,
     height,
     radius,
     padding,
@@ -56,14 +57,18 @@ export const Input = ({
     errorLineHeight,
     labelLineHeight,
     backgroundColor,
+    telErrorMessage,
     labelMarginBottom,
+    regexpErrorMessage,
     phoneJustifyContent,
     errorAnimationDuration,
     ...props
 }) => {
-    const phoneNumberRegex = /^\d{0,8}$/;
+    const phoneNumberRegex = /^\d{8}$/;
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
+    const [innerValue, setInnerValue] = useState('');
+    const [innerErrorMessage, setInnerErrorMessage] = useState('');
     
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
@@ -91,15 +96,23 @@ export const Input = ({
     `;
 
     const handleChange = (event) => {
-        // TODO: need to discuss
-        // onChange
-        //     ? type === 'tel'
-        //             ? phoneNumberRegex.test(event.target.value)
-        //                     ? onChange(event.target.value)
-        //                     : _ => _
-        //         : onChange(event.target.value)
-        //     : _ => _;
-        onChange ? onChange(event.target.value) : _ => _
+        const currentValue = event.target.value;
+        if (onChange) {
+            currentValue.length > maxLength ? onChange(currentValue.substr(0, maxLength)) : onChange(currentValue);
+        }
+        
+        setInnerValue(currentValue);
+        if (type === 'tel') {
+            !phoneNumberRegex.test(parseInt(currentValue)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+        } 
+
+        if (maxLength) {
+            currentValue.length > maxLength ? setInnerValue(currentValue.substr(0, maxLength)) : setInnerValue(currentValue);
+        }
+
+        if (regexp) {
+            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+        }
     };
 
     const handleMouseEnter = () => {
@@ -109,6 +122,41 @@ export const Input = ({
     const handleMouseLeave = () => {
         setIsHover(false);
     };
+
+    useEffect(() => {
+        if (value && value !== '') {
+            setInnerValue(value);
+            if (type === 'tel') {
+                !phoneNumberRegex.test(parseInt(value)) ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage('');
+            } 
+
+            if (maxLength) {
+                value.length > maxLength ? setInnerValue(value.substr(0, maxLength)) : setInnerValue(value);
+            }
+
+            if (regexp) {
+                !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            }
+        }
+    }, [value]);
+
+    useEffect(() => {
+        if (errorMessage) {
+            setInnerErrorMessage(errorMessage);
+        }
+    }, [errorMessage]);
+
+    useEffect(() => {
+        if (type === 'tel' && !telErrorMessage) {
+            alert('Please add telErrorMessage on input component');
+        }
+    }, [type]);
+
+    useEffect(() => {
+        if (regexp && !regexpErrorMessage) {
+            alert('Please add regexpErrorMessage prop on input component');
+        }
+    }, [regexp]);
     
     return (
         <div className={`${styles["input-wrap"]}`}>
@@ -124,7 +172,7 @@ export const Input = ({
                         marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
                     }}
                 >
-                    {label} {required && <sup style={{ color: "#ee0000" }}>*</sup>}
+                    {label} {required && <sup style={{ color: errorColor ? errorColor : "#ee0000" }}>*</sup>}
                 </label>
                 : ''
             }
@@ -133,7 +181,7 @@ export const Input = ({
                 style={{
                     width: width ? width : configStyles.INPUT.width,
                     borderRadius: radius ? radius : configStyles.INPUT.radius,
-                    boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+                    boxShadow: innerErrorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
                 }}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
@@ -171,7 +219,7 @@ export const Input = ({
                                 borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
                                 display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
                                 alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
-                                color: errorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                                color: innerErrorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                                 justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
                                 backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
                             }}
@@ -182,9 +230,7 @@ export const Input = ({
                 }
                 <input
                     {...props}
-                    // TODO: need to discuss
-                    // value={type === 'tel' ? phoneNumberRegex.test(value) ? value : '' : maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
-                    value={maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value}
+                    value={innerValue}
                     className={classProps}
                     onChange={handleChange}
                     type={show ? 'text' : type}
@@ -203,7 +249,7 @@ export const Input = ({
                         borderRadius: radius ? radius : configStyles.INPUT.radius,
                         boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
                         backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,                       
-                        color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                        color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
                     }}
                 />
                 {
@@ -231,7 +277,7 @@ export const Input = ({
                 tooltip ? tooltip : ''
             }
             {
-                errorMessage ?
+                innerErrorMessage ?
                     <P
                         style={{
                             left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
@@ -245,7 +291,7 @@ export const Input = ({
                         }}
                         className={errorClassName ? errorClassName : configStyles.INPUT.errorClassName}
                     >
-                        {errorMessage}
+                        {innerErrorMessage}
                     </P> 
                     : ''
             }
@@ -290,11 +336,14 @@ Input.propTypes = {
     errorPosition: PropTypes.string,
     boxShadowHover: PropTypes.string,
     errorClassName: PropTypes.string,
+    telErrorMessage: PropTypes.string,
     backgroundColor: PropTypes.string,
     phoneAlignItems: PropTypes.string,
     errorLineHeight: PropTypes.string,
     labelLineHeight: PropTypes.string,
     labelMarginBottom: PropTypes.string,
+    regexpErrorMessage: PropTypes.string,
+    regexp: PropTypes.instanceOf(RegExp),
     phoneJustifyContent: PropTypes.string,
     errorAnimationDuration: PropTypes.string,
     leftIcon: PropTypes.arrayOf(PropTypes.element),

package/src/components/input/input.stories.js

@@ -6,7 +6,7 @@ export default {
   title: "Components/Input",
   argsType: {
     onChange: {
-      control: { type: 'object' }
+      control: { type: 'function' }
     }
   }
 };
@@ -19,7 +19,3 @@ Default.args = {
   onChange: (val) => {}
 };
 
-export const PASSWORD = Template.bind({});
-PASSWORD.args = {
-  type: InputTypes.PASSWORD,
-};

package/src/components/select/index.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
-import { SelectCheckbox } from './../selectCheckbox';
+import { SingleCheckbox } from '../singleCheckbox';
 
 import ReactArrowIcon from '../icon/Arrow';
 import ReactCloseIcon from '../icon/CloseIcon';
@@ -287,8 +287,8 @@ export const Select = ({
                                                 parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' :
                                                 parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px'
                                             : configStyles.SELECT.selectedMinHeight.includes('rem') ?
-                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' :
-                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'                         
+                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 3)) + 0.6 + 'rem' :
+                                                parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'                         
                                 }}
                                 className={`${styles['select-content-bottom']}`}
                             >
@@ -316,7 +316,7 @@ export const Select = ({
                                                             backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor,
                                                         }}
                                                     >
-                                                        {multiple && multipleCheckbox ? <SelectCheckbox checked={option.checked} /> : ''}
+                                                        {multiple && multipleCheckbox ? <SingleCheckbox checked={option.checked} /> : ''}
                                                         {option[keyNames.name]}
                                                     </div>
                                         })

package/src/components/singleCheckbox/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ReactCheckbox from '../icon/CheckboxUnchecked';
+import ReactCheckboxChecked from '../icon/CheckboxChecked';
+
+export const SingleCheckbox = ({ checked }) => {
+
+  return <div
+    style={{
+      marginRight: '9px'
+    }}
+  >
+    { checked ? <ReactCheckboxChecked /> : <ReactCheckbox /> }
+  </div>;
+};
+
+SingleCheckbox.propTypes = {
+  checked: PropTypes.bool,
+}

package/src/components/singleCheckbox/singleCheckbox.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { SingleCheckbox } from ".";
+export default {
+  component: SingleCheckbox,
+  title: "Components/SingleCheckbox",
+};
+
+const Template = (args) => <SingleCheckbox {...args} />;
+
+export const Default = Template.bind({});

package/src/index.js

@@ -14,4 +14,4 @@ export * from './components/icon/Icon';
 export * from './components/typography';
 export * from './components/pagination';
 export * from './components/autocomplate';
-export * from './components/selectCheckbox';
+export * from './components/singleCheckbox';

package/src/components/selectCheckbox/index.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ReactCheckbox from './../../assets/icons/checkbox-unchecked.svg';
-import ReactCheckboxChecked from './../../assets/icons/checkbox-checked.svg';
-
-export const SelectCheckbox = ({ checked }) => {
-
-  return <div
-    style={{
-      marginRight: '9px'
-    }}
-  >
-    { checked ? <img src={ReactCheckboxChecked} /> : <img src={ReactCheckbox} /> }
-  </div>;
-};
-
-SelectCheckbox.propTypes = {
-  checked: PropTypes.bool,
-}

package/src/components/selectCheckbox/selectCheckbox.stories.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { SelectCheckbox } from ".";
-export default {
-  component: SelectCheckbox,
-  title: "Components/SelectCheckbox",
-};
-
-const Template = (args) => <SelectCheckbox {...args} />;
-
-export const Default = Template.bind({});