@xaypay/tui 0.1.2 → 0.1.4

package/dist/index.es.js

@@ -38,7 +38,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -958,7 +958,7 @@ const File = ({
       setSingleFile(null);
     }
     if (multiple && !removeFile) {
-      alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+      alert('Please add removeFile prop on File component, it is a require in multiple mode');
     }
     if (maxCHoosenLength) {
       if (typeof maxCHoosenLength !== 'number') {
@@ -974,7 +974,7 @@ const File = ({
   }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
   useEffect(() => {
     if (deleteComponent && !removeComponent) {
-      alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
+      alert('Please add removeComponent prop on File component it is require when deleteComponent prop is true');
     }
   }, [deleteComponent]);
   useEffect(() => {
@@ -2952,6 +2952,287 @@ Modal.defaultProps = {
   type: 'content'
 };
 
+const handleCheckTypeTel = (val, prevVal) => {
+  const phoneNumberRegex = /^\d{0,8}$/;
+  if (!phoneNumberRegex.test(val)) {
+    val = prevVal;
+  }
+  return val;
+};
+const handleCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+  if (maxLength && maxLength > 0) {
+    if (val.length > maxLength) {
+      val = val.substr(0, maxLength);
+    }
+  } else {
+    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
+    if (val.length > 16 && !val.includes('.')) {
+      val = val.substr(0, 16);
+    }
+    if (val < Number.MIN_SAFE_INTEGER || val > Number.MAX_SAFE_INTEGER || innerMinNumSize && val < innerMinNumSize || maxNumSize && val > maxNumSize) {
+      val = prevVal;
+    }
+    const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+    const int = floatNumParts[0];
+    const float = floatNumParts[1];
+    if (floatToFix > 0) {
+      if (float && float.length > 0) {
+        let floatResult = '';
+        [...float].map((item, index) => {
+          if (index + 1 <= floatToFix) {
+            floatResult += item;
+          }
+        });
+        floatResult !== '' ? val = `${int}.${floatResult}` : val = `${int}`;
+      }
+    } else {
+      if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+        val = `${int}`;
+      }
+    }
+    if (!regNum.test(val)) {
+      const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+        return b + c.replace(/\./g, '');
+      });
+      val = newStr;
+    }
+  }
+  if (withoutDot && !/^\d+$/.test(val)) {
+    const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+      return b + c.replace(/\./g, '');
+    });
+    val = newStr;
+  }
+  return val;
+};
+
+const TelInput = ({
+  type,
+  value,
+  radius,
+  isHover,
+  disabled,
+  inpStyles,
+  errorColor,
+  inputChange,
+  phoneDisplay,
+  inpAttributes,
+  phoneAlignItems,
+  innerErrorMessage,
+  telBorderRightWidth,
+  telBorderRightColor,
+  telBorderRightStyle,
+  phoneJustifyContent,
+  telBorderRightColorHover
+}) => {
+  const [innerValue, setInnerValue] = useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    currentValue = handleCheckTypeTel(currentValue, prevValue);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = handleCheckTypeTel(value, newValue);
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      ...inpStyles,
+      width: 'auto',
+      display: phoneDisplay,
+      alignItems: phoneAlignItems,
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius,
+      justifyContent: phoneJustifyContent,
+      pointerEvents: disabled ? 'none' : 'auto',
+      borderRight: `${telBorderRightWidth} ${telBorderRightStyle}`,
+      borderColor: innerErrorMessage ? errorColor : isHover ? telBorderRightColorHover : telBorderRightColor
+    }
+  }, "+374"), /*#__PURE__*/React__default.createElement("input", {
+    type: type,
+    value: innerValue,
+    disabled: disabled,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  }));
+};
+
+const TextInput = ({
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpStyles,
+  inpAttributes
+}) => {
+  const [innerValue, setInnerValue] = useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const PassInput = ({
+  show,
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpAttributes,
+  inpStyles
+}) => {
+  const [innerShow, setInnerShow] = useState('');
+  const [innerValue, setInnerValue] = useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  useEffect(() => {
+    setInnerShow(show);
+  }, [show]);
+  return /*#__PURE__*/React__default.createElement("input", {
+    type: innerShow ? 'text' : 'password',
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const NumberInput = ({
+  dots,
+  value,
+  float,
+  radius,
+  maxLength,
+  inpStyles,
+  minNumSize,
+  maxNumSize,
+  inputChange,
+  inpAttributes
+}) => {
+  const [innerValue, setInnerValue] = useState('');
+  const [innerMinNumSize, setInnerMinNumSize] = useState(0);
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    const max = maxLength ? maxLength : null;
+    currentValue = handleCheckTypeNumber(currentValue, prevValue, max, float, maxNumSize, dots, innerMinNumSize);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    if (minNumSize && minNumSize < 0) {
+      setInnerMinNumSize(0);
+      alert("minNumSize prop can't be less then 0");
+    } else if (minNumSize && minNumSize >= 0) {
+      setInnerMinNumSize(minNumSize);
+    }
+    if ((maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
+      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
+    }
+    if (maxNumSize < minNumSize) {
+      alert("maxNumSize prop can't be less then minNumSize");
+    }
+  }, [maxLength, minNumSize, maxNumSize]);
+  useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      const max = maxLength ? maxLength : null;
+      newValue = handleCheckTypeNumber(value, newValue, max, float, maxNumSize, dots, innerMinNumSize);
+    }
+    setInnerValue(() => newValue);
+  }, [dots, value, float, maxNumSize, minNumSize]);
+  return /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: innerValue,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    },
+    min: minNumSize,
+    max: maxNumSize,
+    onInput: handleChange
+  });
+};
+
 var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$7 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$9);
@@ -2963,7 +3244,7 @@ const InputTypes = {
   PASSWORD: 'password'
 };
 const P = styled.span`
-    animation: ${props => props.errorAnimation ? props.errorAnimation : 'none'};
+    animation: ${true};
 `;
 const Input = ({
   type,
@@ -2985,7 +3266,6 @@ const Input = ({
   leftIcon,
   required,
   disabled,
-  transform,
   iconWidth,
   rightIcon,
   className,
@@ -3015,7 +3295,6 @@ const Input = ({
   errorMarginTop,
   boxShadowHover,
   errorClassName,
-  errorAnimation,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
@@ -3028,17 +3307,30 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  errorAnimationDuration,
-  telBorderRightColorHover,
-  ...props
+  telBorderRightColorHover
 }) => {
-  const phoneNumberRegex = /^\d+$/;
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
-  const [innerValue, setInnerValue] = useState('');
-  const [innerMinNumSize, setInnerMinNumSize] = useState(0);
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
-  const random = Math.floor(Math.random() * 1000 + 1);
+  const inpStyles = {
+    width: width ?? merge.INPUT.width,
+    cursor: disabled ? 'not-allowed' : 'auto',
+    height: height ?? merge.INPUT.height,
+    padding: padding ?? merge.INPUT.padding,
+    fontSize: size ?? merge.INPUT.font.size,
+    fontStyle: style ?? merge.INPUT.font.style,
+    fontWeight: weight ?? merge.INPUT.font.weight,
+    fontFamily: family ?? merge.INPUT.font.family,
+    boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+    color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
+    backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
+  };
+  const uuid = v4();
+  const inpAttributes = {
+    placeholder: placeholder ?? '',
+    iName: name ? name : `tui_${uuid}_tui`,
+    autoComplete: autoComplete ?? merge.INPUT.autoComplete
+  };
   const classProps = classnames(className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = keyframes`
         100% {
@@ -3051,102 +3343,8 @@ const Input = ({
         }
     `;
   const animation = () => css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
+        ${errorShow} 240ms forwards
     `;
-  const handleCheckTypeTel = (val, prevVal) => {
-    if (type === 'tel') {
-      if (!phoneNumberRegex.test(val)) {
-        if (val !== '') {
-          val = prevVal;
-        }
-      } else {
-        if (val.length > 8) {
-          val = val.substr(0, 8);
-        }
-      }
-    }
-    return val;
-  };
-  const handleCheckTypeNumber = (val, prevVal) => {
-    if (type === 'number') {
-      if (maxLength && maxLength > 0) {
-        if (val.length > maxLength) {
-          val = val.substr(0, maxLength);
-        }
-      } else {
-        const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-        if (val.length > 16 && !val.includes('.')) {
-          val = val.substr(0, 16);
-        }
-        if (val > Number.MAX_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (val < Number.MIN_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (innerMinNumSize && val < innerMinNumSize) {
-          val = prevVal;
-        }
-        if (maxNumSize && val > maxNumSize) {
-          val = prevVal;
-        }
-        if (floatToFix > 0) {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          const float = floatNumParts[1];
-          if (float && float.length > 0) {
-            let floatResult = '';
-            [...float].map((item, index) => {
-              if (index + 1 <= floatToFix) {
-                floatResult += item;
-              }
-            });
-            if (floatResult !== '') {
-              val = `${int}.${floatResult}`;
-            } else {
-              val = `${int}`;
-            }
-          }
-        } else {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-            val = `${int}`;
-          }
-        }
-        if (!regNum.test(val)) {
-          const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-            return b + c.replace(/\./g, '');
-          });
-          val = newStr;
-        }
-      }
-      if (withoutDot && !/^\d+$/.test(val)) {
-        const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-          return b + c.replace(/\./g, '');
-        });
-        val = newStr;
-      }
-    }
-    return val;
-  };
-  const handleChange = event => {
-    let prevValue = innerValue;
-    let currentValue = event.target.value;
-    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-    currentValue = handleCheckTypeTel(currentValue, prevValue);
-    currentValue = handleCheckTypeNumber(currentValue, prevValue);
-    if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
-      currentValue = currentValue.substr(0, max);
-    }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-    }
-    setInnerValue(() => currentValue);
-    if (change && currentValue !== prevValue) {
-      change(currentValue);
-    }
-  };
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -3157,41 +3355,15 @@ const Input = ({
     setShow(!show);
   };
   useEffect(() => {
-    let newValue = value;
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
     } else {
       setInnerErrorMessage('');
     }
-    if (minNumSize && minNumSize < 0) {
-      setInnerMinNumSize(0);
-      alert("minNumSize prop can't be less then 0");
-    } else if (minNumSize && minNumSize >= 0) {
-      setInnerMinNumSize(minNumSize);
-    }
-    if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
-      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
-    }
-    if (type === 'number' && maxNumSize < minNumSize) {
-      alert("maxNumSize prop can't be less then minNumSize");
-    }
-    if (value !== undefined) {
-      if (value === null) {
-        newValue = '';
-      } else {
-        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-        newValue = handleCheckTypeTel(value, newValue);
-        newValue = handleCheckTypeNumber(value, newValue);
-        if (max && value.length > max && type !== 'tel' && type !== 'number') {
-          newValue = value.substr(0, max);
-        }
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-          !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-        }
-      }
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+      !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
-    setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
+  }, [type, regexp, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -3229,56 +3401,52 @@ const Input = ({
       borderBottomLeftRadius: radius ?? merge.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      // border: 'none',
-      pointerEvents: disabled ? 'none' : 'auto',
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      borderTopLeftRadius: radius ?? merge.INPUT.radius,
-      borderBottomLeftRadius: radius ?? merge.INPUT.radius,
-      display: phoneDisplay ?? merge.INPUT.tel.display,
-      borderRight: `
-                                ${telBorderRightWidth ?? merge.INPUT.tel.borderRight.width}
-                                ${telBorderRightStyle ?? merge.INPUT.tel.borderRight.style}`,
-      alignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
-      borderColor: innerErrorMessage ? errorColor ? errorColor : merge.INPUT.error.color : isHover ? telBorderRightColorHover ? telBorderRightColorHover : merge.INPUT.tel.borderRight.colors.hover : telBorderRightColor ? telBorderRightColor : merge.INPUT.tel.borderRight.color,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      justifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
-    value: innerValue,
-    onInput: handleChange,
-    disabled: disabled ? disabled : '',
-    name: name ? name : `tui_${random}_tui`,
-    placeholder: placeholder ? placeholder : '',
-    type: show || type === 'number' ? 'text' : type,
-    min: type === 'number' && minNumSize ? minNumSize : '',
-    max: type === 'number' && maxNumSize ? maxNumSize : '',
-    autoComplete: autoComplete ? autoComplete : merge.INPUT.autoComplete,
-    style: {
-      border: 'none',
-      outline: 'none',
-      cursor: disabled ? 'not-allowed' : 'auto',
-      width: width ?? merge.INPUT.width,
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      borderRadius: radius ?? merge.INPUT.radius,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement(TelInput, {
+    type: type,
+    value: value,
+    inputChange: change,
+    isHover: isHover,
+    disabled: disabled,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius,
+    phoneDisplay: phoneDisplay ?? merge.INPUT.tel.display,
+    phoneAlignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
+    phoneJustifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
+    telBorderRightWidth: telBorderRightWidth ?? merge.INPUT.tel.borderRight.width,
+    telBorderRightStyle: telBorderRightStyle ?? merge.INPUT.tel.borderRight.style,
+    telBorderRightColor: telBorderRightColor ?? merge.INPUT.tel.borderRight.color,
+    telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
+  }) : type === 'number' ? /*#__PURE__*/React__default.createElement(NumberInput, {
+    value: value,
+    inputChange: change,
+    dots: withoutDot,
+    float: floatToFix,
+    maxLength: maxLength,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    minNumSize: minNumSize ? minNumSize : '',
+    maxNumSize: maxNumSize ? maxNumSize : '',
+    radius: radius ?? merge.INPUT.radius
+  }) : type === 'password' ? /*#__PURE__*/React__default.createElement(PassInput, {
+    show: show,
+    type: type,
+    value: value,
+    isHover: isHover,
+    disabled: disabled,
+    inputChange: change,
+    maxLength: maxLength,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }) : /*#__PURE__*/React__default.createElement(TextInput, {
+    value: value,
+    inputChange: change,
+    inpStyles: inpStyles,
+    maxLength: maxLength,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
       display: 'flex',
@@ -3294,7 +3462,6 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
-    errorAnimation: errorAnimation ?? merge.INPUT.error.animation,
     animation: animation,
     style: {
       margin: '0px',
@@ -3309,7 +3476,7 @@ const Input = ({
       zIndex: errorZindex ?? merge.INPUT.error.zIndex,
       lineHeight: errorLineHeight ?? merge.INPUT.error.lineHeight,
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${merge.INPUT.error.marginTop})`,
-      transform: !errorAnimation && !merge.INPUT.error.animation ? 'scale3d(1,1,1)' : transform ? transform : merge.INPUT.error.transform
+      transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? merge.INPUT.error.className
   }, innerErrorMessage) : '');
@@ -3331,7 +3498,6 @@ Input.propTypes = {
   padding: PropTypes.string,
   tooltip: PropTypes.element,
   withoutDot: PropTypes.bool,
-  transform: PropTypes.string,
   className: PropTypes.string,
   iconWidth: PropTypes.string,
   boxSizing: PropTypes.string,
@@ -3356,7 +3522,6 @@ Input.propTypes = {
   errorMessage: PropTypes.string,
   phoneDisplay: PropTypes.string,
   autoComplete: PropTypes.string,
-  errorAnimation: PropTypes.bool,
   labelDisplay: PropTypes.string,
   errorPosition: PropTypes.string,
   errorMarginTop: PropTypes.string,
@@ -3375,7 +3540,6 @@ Input.propTypes = {
   telBorderRightColor: PropTypes.string,
   phoneJustifyContent: PropTypes.string,
   backgroundDisableColor: PropTypes.string,
-  errorAnimationDuration: PropTypes.string,
   telBorderRightColorHover: PropTypes.string,
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),

package/dist/index.js

@@ -68,7 +68,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -988,7 +988,7 @@ const File = ({
       setSingleFile(null);
     }
     if (multiple && !removeFile) {
-      alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+      alert('Please add removeFile prop on File component, it is a require in multiple mode');
     }
     if (maxCHoosenLength) {
       if (typeof maxCHoosenLength !== 'number') {
@@ -1004,7 +1004,7 @@ const File = ({
   }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
   React.useEffect(() => {
     if (deleteComponent && !removeComponent) {
-      alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
+      alert('Please add removeComponent prop on File component it is require when deleteComponent prop is true');
     }
   }, [deleteComponent]);
   React.useEffect(() => {
@@ -2982,6 +2982,287 @@ Modal.defaultProps = {
   type: 'content'
 };
 
+const handleCheckTypeTel = (val, prevVal) => {
+  const phoneNumberRegex = /^\d{0,8}$/;
+  if (!phoneNumberRegex.test(val)) {
+    val = prevVal;
+  }
+  return val;
+};
+const handleCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+  if (maxLength && maxLength > 0) {
+    if (val.length > maxLength) {
+      val = val.substr(0, maxLength);
+    }
+  } else {
+    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
+    if (val.length > 16 && !val.includes('.')) {
+      val = val.substr(0, 16);
+    }
+    if (val < Number.MIN_SAFE_INTEGER || val > Number.MAX_SAFE_INTEGER || innerMinNumSize && val < innerMinNumSize || maxNumSize && val > maxNumSize) {
+      val = prevVal;
+    }
+    const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+    const int = floatNumParts[0];
+    const float = floatNumParts[1];
+    if (floatToFix > 0) {
+      if (float && float.length > 0) {
+        let floatResult = '';
+        [...float].map((item, index) => {
+          if (index + 1 <= floatToFix) {
+            floatResult += item;
+          }
+        });
+        floatResult !== '' ? val = `${int}.${floatResult}` : val = `${int}`;
+      }
+    } else {
+      if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+        val = `${int}`;
+      }
+    }
+    if (!regNum.test(val)) {
+      const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+        return b + c.replace(/\./g, '');
+      });
+      val = newStr;
+    }
+  }
+  if (withoutDot && !/^\d+$/.test(val)) {
+    const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+      return b + c.replace(/\./g, '');
+    });
+    val = newStr;
+  }
+  return val;
+};
+
+const TelInput = ({
+  type,
+  value,
+  radius,
+  isHover,
+  disabled,
+  inpStyles,
+  errorColor,
+  inputChange,
+  phoneDisplay,
+  inpAttributes,
+  phoneAlignItems,
+  innerErrorMessage,
+  telBorderRightWidth,
+  telBorderRightColor,
+  telBorderRightStyle,
+  phoneJustifyContent,
+  telBorderRightColorHover
+}) => {
+  const [innerValue, setInnerValue] = React.useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    currentValue = handleCheckTypeTel(currentValue, prevValue);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = handleCheckTypeTel(value, newValue);
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      ...inpStyles,
+      width: 'auto',
+      display: phoneDisplay,
+      alignItems: phoneAlignItems,
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius,
+      justifyContent: phoneJustifyContent,
+      pointerEvents: disabled ? 'none' : 'auto',
+      borderRight: `${telBorderRightWidth} ${telBorderRightStyle}`,
+      borderColor: innerErrorMessage ? errorColor : isHover ? telBorderRightColorHover : telBorderRightColor
+    }
+  }, "+374"), /*#__PURE__*/React__default["default"].createElement("input", {
+    type: type,
+    value: innerValue,
+    disabled: disabled,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  }));
+};
+
+const TextInput = ({
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpStyles,
+  inpAttributes
+}) => {
+  const [innerValue, setInnerValue] = React.useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "text",
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const PassInput = ({
+  show,
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpAttributes,
+  inpStyles
+}) => {
+  const [innerShow, setInnerShow] = React.useState('');
+  const [innerValue, setInnerValue] = React.useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  React.useEffect(() => {
+    setInnerShow(show);
+  }, [show]);
+  return /*#__PURE__*/React__default["default"].createElement("input", {
+    type: innerShow ? 'text' : 'password',
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const NumberInput = ({
+  dots,
+  value,
+  float,
+  radius,
+  maxLength,
+  inpStyles,
+  minNumSize,
+  maxNumSize,
+  inputChange,
+  inpAttributes
+}) => {
+  const [innerValue, setInnerValue] = React.useState('');
+  const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    const max = maxLength ? maxLength : null;
+    currentValue = handleCheckTypeNumber(currentValue, prevValue, max, float, maxNumSize, dots, innerMinNumSize);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    if (minNumSize && minNumSize < 0) {
+      setInnerMinNumSize(0);
+      alert("minNumSize prop can't be less then 0");
+    } else if (minNumSize && minNumSize >= 0) {
+      setInnerMinNumSize(minNumSize);
+    }
+    if ((maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
+      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
+    }
+    if (maxNumSize < minNumSize) {
+      alert("maxNumSize prop can't be less then minNumSize");
+    }
+  }, [maxLength, minNumSize, maxNumSize]);
+  React.useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      const max = maxLength ? maxLength : null;
+      newValue = handleCheckTypeNumber(value, newValue, max, float, maxNumSize, dots, innerMinNumSize);
+    }
+    setInnerValue(() => newValue);
+  }, [dots, value, float, maxNumSize, minNumSize]);
+  return /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "text",
+    value: innerValue,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    },
+    min: minNumSize,
+    max: maxNumSize,
+    onInput: handleChange
+  });
+};
+
 var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$7 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$9);
@@ -2993,7 +3274,7 @@ const InputTypes = {
   PASSWORD: 'password'
 };
 const P = styled__default["default"].span`
-    animation: ${props => props.errorAnimation ? props.errorAnimation : 'none'};
+    animation: ${true};
 `;
 const Input = ({
   type,
@@ -3015,7 +3296,6 @@ const Input = ({
   leftIcon,
   required,
   disabled,
-  transform,
   iconWidth,
   rightIcon,
   className,
@@ -3045,7 +3325,6 @@ const Input = ({
   errorMarginTop,
   boxShadowHover,
   errorClassName,
-  errorAnimation,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
@@ -3058,17 +3337,30 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  errorAnimationDuration,
-  telBorderRightColorHover,
-  ...props
+  telBorderRightColorHover
 }) => {
-  const phoneNumberRegex = /^\d+$/;
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
-  const [innerValue, setInnerValue] = React.useState('');
-  const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
-  const random = Math.floor(Math.random() * 1000 + 1);
+  const inpStyles = {
+    width: width ?? merge.INPUT.width,
+    cursor: disabled ? 'not-allowed' : 'auto',
+    height: height ?? merge.INPUT.height,
+    padding: padding ?? merge.INPUT.padding,
+    fontSize: size ?? merge.INPUT.font.size,
+    fontStyle: style ?? merge.INPUT.font.style,
+    fontWeight: weight ?? merge.INPUT.font.weight,
+    fontFamily: family ?? merge.INPUT.font.family,
+    boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+    color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
+    backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
+  };
+  const uuid = v4();
+  const inpAttributes = {
+    placeholder: placeholder ?? '',
+    iName: name ? name : `tui_${uuid}_tui`,
+    autoComplete: autoComplete ?? merge.INPUT.autoComplete
+  };
   const classProps = classnames__default["default"](className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = styled.keyframes`
         100% {
@@ -3081,102 +3373,8 @@ const Input = ({
         }
     `;
   const animation = () => styled.css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
+        ${errorShow} 240ms forwards
     `;
-  const handleCheckTypeTel = (val, prevVal) => {
-    if (type === 'tel') {
-      if (!phoneNumberRegex.test(val)) {
-        if (val !== '') {
-          val = prevVal;
-        }
-      } else {
-        if (val.length > 8) {
-          val = val.substr(0, 8);
-        }
-      }
-    }
-    return val;
-  };
-  const handleCheckTypeNumber = (val, prevVal) => {
-    if (type === 'number') {
-      if (maxLength && maxLength > 0) {
-        if (val.length > maxLength) {
-          val = val.substr(0, maxLength);
-        }
-      } else {
-        const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-        if (val.length > 16 && !val.includes('.')) {
-          val = val.substr(0, 16);
-        }
-        if (val > Number.MAX_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (val < Number.MIN_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (innerMinNumSize && val < innerMinNumSize) {
-          val = prevVal;
-        }
-        if (maxNumSize && val > maxNumSize) {
-          val = prevVal;
-        }
-        if (floatToFix > 0) {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          const float = floatNumParts[1];
-          if (float && float.length > 0) {
-            let floatResult = '';
-            [...float].map((item, index) => {
-              if (index + 1 <= floatToFix) {
-                floatResult += item;
-              }
-            });
-            if (floatResult !== '') {
-              val = `${int}.${floatResult}`;
-            } else {
-              val = `${int}`;
-            }
-          }
-        } else {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-            val = `${int}`;
-          }
-        }
-        if (!regNum.test(val)) {
-          const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-            return b + c.replace(/\./g, '');
-          });
-          val = newStr;
-        }
-      }
-      if (withoutDot && !/^\d+$/.test(val)) {
-        const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-          return b + c.replace(/\./g, '');
-        });
-        val = newStr;
-      }
-    }
-    return val;
-  };
-  const handleChange = event => {
-    let prevValue = innerValue;
-    let currentValue = event.target.value;
-    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-    currentValue = handleCheckTypeTel(currentValue, prevValue);
-    currentValue = handleCheckTypeNumber(currentValue, prevValue);
-    if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
-      currentValue = currentValue.substr(0, max);
-    }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-    }
-    setInnerValue(() => currentValue);
-    if (change && currentValue !== prevValue) {
-      change(currentValue);
-    }
-  };
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -3187,41 +3385,15 @@ const Input = ({
     setShow(!show);
   };
   React.useEffect(() => {
-    let newValue = value;
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
     } else {
       setInnerErrorMessage('');
     }
-    if (minNumSize && minNumSize < 0) {
-      setInnerMinNumSize(0);
-      alert("minNumSize prop can't be less then 0");
-    } else if (minNumSize && minNumSize >= 0) {
-      setInnerMinNumSize(minNumSize);
-    }
-    if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
-      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
-    }
-    if (type === 'number' && maxNumSize < minNumSize) {
-      alert("maxNumSize prop can't be less then minNumSize");
-    }
-    if (value !== undefined) {
-      if (value === null) {
-        newValue = '';
-      } else {
-        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-        newValue = handleCheckTypeTel(value, newValue);
-        newValue = handleCheckTypeNumber(value, newValue);
-        if (max && value.length > max && type !== 'tel' && type !== 'number') {
-          newValue = value.substr(0, max);
-        }
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-          !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-        }
-      }
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+      !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
-    setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
+  }, [type, regexp, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -3259,56 +3431,52 @@ const Input = ({
       borderBottomLeftRadius: radius ?? merge.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      // border: 'none',
-      pointerEvents: disabled ? 'none' : 'auto',
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      borderTopLeftRadius: radius ?? merge.INPUT.radius,
-      borderBottomLeftRadius: radius ?? merge.INPUT.radius,
-      display: phoneDisplay ?? merge.INPUT.tel.display,
-      borderRight: `
-                                ${telBorderRightWidth ?? merge.INPUT.tel.borderRight.width}
-                                ${telBorderRightStyle ?? merge.INPUT.tel.borderRight.style}`,
-      alignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
-      borderColor: innerErrorMessage ? errorColor ? errorColor : merge.INPUT.error.color : isHover ? telBorderRightColorHover ? telBorderRightColorHover : merge.INPUT.tel.borderRight.colors.hover : telBorderRightColor ? telBorderRightColor : merge.INPUT.tel.borderRight.color,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      justifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
-    value: innerValue,
-    onInput: handleChange,
-    disabled: disabled ? disabled : '',
-    name: name ? name : `tui_${random}_tui`,
-    placeholder: placeholder ? placeholder : '',
-    type: show || type === 'number' ? 'text' : type,
-    min: type === 'number' && minNumSize ? minNumSize : '',
-    max: type === 'number' && maxNumSize ? maxNumSize : '',
-    autoComplete: autoComplete ? autoComplete : merge.INPUT.autoComplete,
-    style: {
-      border: 'none',
-      outline: 'none',
-      cursor: disabled ? 'not-allowed' : 'auto',
-      width: width ?? merge.INPUT.width,
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      borderRadius: radius ?? merge.INPUT.radius,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement(TelInput, {
+    type: type,
+    value: value,
+    inputChange: change,
+    isHover: isHover,
+    disabled: disabled,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius,
+    phoneDisplay: phoneDisplay ?? merge.INPUT.tel.display,
+    phoneAlignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
+    phoneJustifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
+    telBorderRightWidth: telBorderRightWidth ?? merge.INPUT.tel.borderRight.width,
+    telBorderRightStyle: telBorderRightStyle ?? merge.INPUT.tel.borderRight.style,
+    telBorderRightColor: telBorderRightColor ?? merge.INPUT.tel.borderRight.color,
+    telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
+  }) : type === 'number' ? /*#__PURE__*/React__default["default"].createElement(NumberInput, {
+    value: value,
+    inputChange: change,
+    dots: withoutDot,
+    float: floatToFix,
+    maxLength: maxLength,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    minNumSize: minNumSize ? minNumSize : '',
+    maxNumSize: maxNumSize ? maxNumSize : '',
+    radius: radius ?? merge.INPUT.radius
+  }) : type === 'password' ? /*#__PURE__*/React__default["default"].createElement(PassInput, {
+    show: show,
+    type: type,
+    value: value,
+    isHover: isHover,
+    disabled: disabled,
+    inputChange: change,
+    maxLength: maxLength,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
+    value: value,
+    inputChange: change,
+    inpStyles: inpStyles,
+    maxLength: maxLength,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
       display: 'flex',
@@ -3324,7 +3492,6 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
-    errorAnimation: errorAnimation ?? merge.INPUT.error.animation,
     animation: animation,
     style: {
       margin: '0px',
@@ -3339,7 +3506,7 @@ const Input = ({
       zIndex: errorZindex ?? merge.INPUT.error.zIndex,
       lineHeight: errorLineHeight ?? merge.INPUT.error.lineHeight,
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${merge.INPUT.error.marginTop})`,
-      transform: !errorAnimation && !merge.INPUT.error.animation ? 'scale3d(1,1,1)' : transform ? transform : merge.INPUT.error.transform
+      transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? merge.INPUT.error.className
   }, innerErrorMessage) : '');
@@ -3361,7 +3528,6 @@ Input.propTypes = {
   padding: PropTypes__default["default"].string,
   tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
-  transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
@@ -3386,7 +3552,6 @@ Input.propTypes = {
   errorMessage: PropTypes__default["default"].string,
   phoneDisplay: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
-  errorAnimation: PropTypes__default["default"].bool,
   labelDisplay: PropTypes__default["default"].string,
   errorPosition: PropTypes__default["default"].string,
   errorMarginTop: PropTypes__default["default"].string,
@@ -3405,7 +3570,6 @@ Input.propTypes = {
   telBorderRightColor: PropTypes__default["default"].string,
   phoneJustifyContent: PropTypes__default["default"].string,
   backgroundDisableColor: PropTypes__default["default"].string,
-  errorAnimationDuration: PropTypes__default["default"].string,
   telBorderRightColorHover: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),

package/package.json

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

package/tui.config.js

@@ -111,10 +111,7 @@ export default {
             zIndex: '1',
             className: '',
             marginTop: '10px',
-            animation: false,
-            transform: 'scale3d(0,0,0)',
             lineHeight: '19px',
-            animationDuration: '240ms',
 
             font: {...fontObject}
         },