@xaypay/tui 0.0.71 → 0.0.73

package/dist/index.es.js

@@ -461,7 +461,7 @@ const Typography = ({
       textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
       textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
       backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
-      color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
+      color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
     },
     ...props,
     className: classProps,
@@ -574,6 +574,9 @@ const InputTypes = {
   TEXT: "text",
   PASSWORD: "password"
 };
+const P = styled.p`
+    animation: ${props => props.errorAnimation ? props.animation : 'none'};
+`;
 const Input = ({
   type,
   size,
@@ -585,12 +588,12 @@ const Input = ({
   regexp,
   height,
   radius,
+  change,
   padding,
   tooltip,
   leftIcon,
   required,
   disabled,
-  onChange,
   transform,
   iconWidth,
   rightIcon,
@@ -647,12 +650,12 @@ const Input = ({
   const animation = _ => css`
         ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
     `;
-  const P = styled.p`
-        animation: ${errorAnimation ? animation : 'none'};
-    `;
   const handleChange = event => {
     const currentValue = event.target.value;
     setInnerValue(currentValue);
+    if (change) {
+      change(currentValue);
+    }
     if (type === 'tel') {
       if (!phoneNumberRegex.test(currentValue)) {
         telErrorMessage && setInnerErrorMessage(telErrorMessage);
@@ -661,27 +664,27 @@ const Input = ({
         setInnerErrorMessage('');
         if (currentValue.length > 8) {
           setInnerValue(currentValue.substr(0, 8));
-          if (onChange) {
-            onChange(currentValue.substr(0, 8));
+          if (change) {
+            change(currentValue.substr(0, 8));
           }
         } else {
           setInnerValue(currentValue);
-          if (onChange) {
-            onChange(currentValue);
+          if (change) {
+            change(currentValue);
           }
         }
       }
     }
     if (maxLength && currentValue.length > maxLength && type !== 'tel') {
       setInnerValue(currentValue.substr(0, maxLength));
-      if (onChange) {
-        onChange(currentValue.substr(0, maxLength));
+      if (change) {
+        change(currentValue.substr(0, maxLength));
       }
     }
     if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-      if (onChange) {
-        onChange(currentValue);
+      if (change) {
+        change(currentValue);
       }
     }
   };
@@ -700,7 +703,7 @@ const Input = ({
     if (value !== undefined && value !== null) {
       setInnerValue(value);
       if (type === 'tel') {
-        if (!phoneNumberRegex.test(currentValue)) {
+        if (!phoneNumberRegex.test(value)) {
           telErrorMessage && setInnerErrorMessage(telErrorMessage);
           setInnerValue('');
         } else {
@@ -811,7 +814,10 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
+    errorAnimation: errorAnimation,
+    animation: animation,
     style: {
+      margin: '0px',
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
       fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
@@ -826,11 +832,11 @@ const Input = ({
 };
 Input.propTypes = {
   name: PropTypes.string,
+  change: PropTypes.func,
   color: PropTypes.string,
   value: PropTypes.string,
   width: PropTypes.string,
   label: PropTypes.string,
-  onChange: PropTypes.func,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
   height: PropTypes.string,
@@ -1255,7 +1261,13 @@ const Select = ({
     }
   }, [opened]);
   useEffect(() => {
-    selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
+    if (selected) {
+      if (selected.length > 0) {
+        setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
+      } else {
+        setNewSelected([]);
+      }
+    }
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
@@ -1272,7 +1284,7 @@ const Select = ({
       });
       setExistOptions(modifiedOptions);
     }
-  }, [options, multiple, selected]);
+  }, [options, multiple, selected, selected.length]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -2159,53 +2171,47 @@ function v4(options, buf, offset) {
   return stringify(rnds);
 }
 
-const SvgUpload = ({
+const SvgListItemPdf = ({
   title,
   titleId,
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "51",
-  height: "35",
-  viewBox: "0 0 51 35",
+  width: "32",
+  height: "42",
+  viewBox: "0 0 32 42",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
 }, props), title ? /*#__PURE__*/React.createElement("title", {
   id: titleId
 }, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M41.54 11.842h-.017c-.23-3.225-2.902-5.772-6.167-5.772-1.08 0-2.095.28-2.979.77C30.267 2.774 26.041 0 21.167 0 14.318 0 8.742 5.483 8.534 12.326 3.758 12.708 0 16.726 0 21.63c0 5.155 4.153 9.334 9.277 9.334h22.625a10.987 10.987 0 0 1-.888-4.334c0-6.059 4.899-10.987 10.918-10.987 3.773 0 7.106 1.938 9.068 4.875-.444-4.864-4.508-8.675-9.46-8.675ZM15.654 6.975c-.072.06-.144.12-.211.185-.266.259-.512.53-.705.849-.741 1.218-.882 2.523-.72 3.927.156 1.35-1.942 1.334-2.095 0-.289-2.493.504-5.307 2.664-6.775 1.12-.763 2.164 1.052 1.067 1.814Zm-.022.015c-.047.035-.111.093 0 0Z",
-  fill: "#D1D1D1"
-}), /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M41.822 17.245c-4.864 0-8.822 3.982-8.822 8.878C33 31.018 36.958 35 41.822 35c4.864 0 8.822-3.982 8.822-8.877 0-4.896-3.959-8.878-8.822-8.878Zm-.536 13.005v-6.689l-3.067 3.22a.69.69 0 0 1-1.01 0 .777.777 0 0 1 0-1.06l4.286-4.5A.71.71 0 0 1 42 21a.684.684 0 0 1 .505.22l4.286 4.5a.777.777 0 0 1 0 1.06.69.69 0 0 1-1.01 0l-3.067-3.22v6.69c0 .414-.32.75-.714.75-.395 0-.714-.336-.714-.75Z",
-  fill: "#0DA574"
+  d: "M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024ZM10.43 36.013H9.103v2.385H8V32h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.754 1.754 0 0 1-.796.68c-.345.16-.766.238-1.26.238Zm-1.327-3.134v2.259h1.327c.29 0 .525-.047.703-.14a.877.877 0 0 0 .391-.388c.085-.167.128-.357.128-.57 0-.203-.043-.392-.128-.568a.971.971 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163H9.103Zm6.504 5.52h-1.859V32H15.646c.425 0 .813.072 1.165.215.352.141.655.345.91.611.258.267.455.586.593.958.138.372.206.788.206 1.248v.339c0 .46-.068.876-.206 1.248a2.714 2.714 0 0 1-.593.958 2.662 2.662 0 0 1-.923.61c-.355.141-.752.211-1.191.211Zm0-.875h-.756v-4.645h.795c.285 0 .535.047.752.14.22.094.404.232.554.414a1.8 1.8 0 0 1 .342.672c.08.267.12.573.12.918v.348c0 .445-.07.829-.208 1.151-.134.322-.336.57-.606.743-.267.172-.598.259-.993.259Zm5.124-2.725v-1.92h2.975V32h-4.078v6.398h1.103v-2.724h2.61v-.875h-2.61Z",
+  fill: "#051942"
 }));
 
-const SvgRemoveFile = ({
+const SvgListItemJpg = ({
   title,
   titleId,
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "26",
-  height: "26",
-  viewBox: "0 0 26 26",
+  width: "32",
+  height: "42",
+  viewBox: "0 0 32 42",
   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("rect", {
-  width: 26,
-  height: 26,
-  rx: 6,
-  fill: "#FBFBFB"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M13 4c.822 0 1.611.296 2.206.826s.95 1.255.99 2.024l.005.15h4c.204 0 .4.073.548.205.148.13.238.31.25.501a.72.72 0 0 1-.185.525.817.817 0 0 1-.52.264l-.093.005h-.68l-.943 10.915a2.75 2.75 0 0 1-.957 1.84 3.114 3.114 0 0 1-2.034.745h-5.173c-.754 0-1.48-.266-2.034-.745a2.75 2.75 0 0 1-.957-1.84L6.478 8.5H5.8a.831.831 0 0 1-.531-.19.736.736 0 0 1-.263-.472L5 7.75c0-.184.072-.361.202-.498a.818.818 0 0 1 .504-.247L5.8 7h4c0-.796.337-1.559.938-2.121A3.312 3.312 0 0 1 13 4Zm-1.8 6.938a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.006.076v6l.006.076c.02.135.09.258.2.348.11.09.25.138.394.138.145 0 .285-.049.395-.138.109-.09.18-.213.2-.348l.005-.076v-6l-.005-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139Zm3.6 0a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.005.076v6l.005.076c.02.135.091.258.2.348.11.09.25.138.394.138.145 0 .286-.049.395-.138.11-.09.18-.213.2-.348l.006-.076v-6l-.006-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139ZM13 5.5a1.66 1.66 0 0 0-1.088.4c-.296.257-.477.61-.508.987L11.4 7h3.2l-.003-.112a1.465 1.465 0 0 0-.508-.988A1.66 1.66 0 0 0 13 5.5Z",
-  fill: "#00236A"
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024Zm2.071 27.737v-2.443h-2.43v.822h1.331v1.27a1.19 1.19 0 0 1-.224.175c-.094.059-.221.11-.382.154a2.579 2.579 0 0 1-.62.062c-.258 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.72.154.188.1.332.238.431.413.103.176.172.375.207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.343-.176-.776-.264-1.3-.264-.41 0-.778.069-1.104.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.527.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.197 1.3.132.378.318.7.559.963.243.264.531.464.865.602.334.135.702.202 1.103.202.472 0 .866-.051 1.182-.154.317-.102.57-.224.76-.364a2.13 2.13 0 0 0 .427-.396Zm-13.03-1.094v-4.478h1.099v4.478c0 .425-.091.786-.273 1.085-.181.3-.429.528-.742.686-.314.158-.67.237-1.068.237-.407 0-.77-.069-1.086-.206a1.622 1.622 0 0 1-.738-.633C8.09 37.45 8 37.09 8 36.654h1.107c0 .252.04.455.12.61a.755.755 0 0 0 .342.335c.15.067.324.1.523.1a.99.99 0 0 0 .505-.127.909.909 0 0 0 .352-.382c.085-.17.127-.378.127-.624Zm4.799-.466h-1.327v2.386h-1.103v-6.398h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.753 1.753 0 0 1-.796.68c-.345.159-.766.238-1.261.238Zm-1.327-3.133v2.259h1.327c.29 0 .524-.047.703-.141a.876.876 0 0 0 .391-.387c.085-.167.128-.357.128-.571 0-.202-.043-.391-.128-.567a.97.97 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163h-1.327Z",
+  fill: "#051942"
 }));
 
-const SvgListItemPdf = ({
+const SvgListItemPng = ({
   title,
   titleId,
   ...props
@@ -2221,18 +2227,18 @@ const SvgListItemPdf = ({
 }, title) : null, /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024ZM10.43 36.013H9.103v2.385H8V32h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.754 1.754 0 0 1-.796.68c-.345.16-.766.238-1.26.238Zm-1.327-3.134v2.259h1.327c.29 0 .525-.047.703-.14a.877.877 0 0 0 .391-.388c.085-.167.128-.357.128-.57 0-.203-.043-.392-.128-.568a.971.971 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163H9.103Zm6.504 5.52h-1.859V32H15.646c.425 0 .813.072 1.165.215.352.141.655.345.91.611.258.267.455.586.593.958.138.372.206.788.206 1.248v.339c0 .46-.068.876-.206 1.248a2.714 2.714 0 0 1-.593.958 2.662 2.662 0 0 1-.923.61c-.355.141-.752.211-1.191.211Zm0-.875h-.756v-4.645h.795c.285 0 .535.047.752.14.22.094.404.232.554.414a1.8 1.8 0 0 1 .342.672c.08.267.12.573.12.918v.348c0 .445-.07.829-.208 1.151-.134.322-.336.57-.606.743-.267.172-.598.259-.993.259Zm5.124-2.725v-1.92h2.975V32h-4.078v6.398h1.103v-2.724h2.61v-.875h-2.61Z",
+  d: "m31.873 10.655-.011-.014c-.007-.01-.014-.018-.021-.025a.356.356 0 0 0-.052-.058L21.396.21 21.37.188l-.025-.021a.476.476 0 0 0-.029-.025l-.029-.026L21.178 0H2.91C2.138 0 1.398.305.852.848A2.891 2.891 0 0 0 0 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 2.909 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108a.21.21 0 0 1-.01-.012Zm-1.327 28.449a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H2.91a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.088 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.088Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.48a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.088a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.088 11.99a.724.724 0 1 1 0-1.448H16.52a.724.724 0 0 1 0 1.449H5.088Zm17.974-1.643A1.451 1.451 0 0 1 21.607 8.9V2.47l7.913 7.878h-6.458ZM9.103 36.012h1.327c.495 0 .916-.079 1.261-.237.349-.158.614-.385.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.74-.272-1.046a1.85 1.85 0 0 0-.796-.72c-.345-.176-.766-.264-1.26-.264H8v6.398h1.103v-2.386Zm0-.874v-2.26h1.327c.29 0 .525.055.703.163.179.109.31.253.391.431.085.176.128.365.128.567 0 .214-.043.404-.128.571a.877.877 0 0 1-.39.387c-.18.094-.414.14-.704.14H9.103ZM13.7 32h1.09l3.292 5.106a63.566 63.566 0 0 1-.044-1.379V32h.956v6.398h-1.1l-3.303-4.9.002.044c.012.134.02.279.027.435l.018.468c.006.163.009.327.009.49v3.463H13.7V32Zm11.393 5.66v-2.443h-2.43v.822h1.332v1.27a1.19 1.19 0 0 1-.225.175c-.093.059-.22.11-.382.154a2.578 2.578 0 0 1-.62.062c-.257 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.721.154.188.1.331.238.43.413a1.7 1.7 0 0 1 .207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.342-.176-.776-.264-1.3-.264-.41 0-.778.069-1.103.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.528.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.198 1.3.132.378.318.7.558.963.243.264.532.464.866.602.334.135.701.202 1.103.202.471 0 .865-.051 1.182-.154.316-.102.57-.224.76-.364.193-.144.335-.276.426-.396Z",
   fill: "#051942"
 }));
 
-const SvgListItemJpg = ({
+const SvgListItemJpeg = ({
   title,
   titleId,
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "32",
+  width: "33",
   height: "42",
-  viewBox: "0 0 32 42",
+  viewBox: "0 0 33 42",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
@@ -2241,7 +2247,7 @@ const SvgListItemJpg = ({
 }, title) : null, /*#__PURE__*/React.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
-  d: "M31.862 10.64c.007.01.015.02.022.027l.116.108v28.328c0 .768-.306 1.505-.852 2.049a2.917 2.917 0 0 1-2.057.848H2.909a2.917 2.917 0 0 1-2.057-.848A2.891 2.891 0 0 1 0 39.103V2.897C0 2.128.306 1.392.852.848A2.917 2.917 0 0 1 2.909 0h18.27l.108.116.03.025.028.026.025.02.026.023L31.79 10.558c.02.018.037.037.052.058l.02.025Zm-1.743 29.486a1.45 1.45 0 0 0 .427-1.022v-8.77H13.95a.716.716 0 0 1-.546-.246l-1.963-2.238H1.455v11.254c.001.383.155.751.427 1.022.273.272.642.425 1.027.426h26.182a1.463 1.463 0 0 0 1.027-.426ZM4.364 17.633c0 .4.324.724.724.724h21.825a.724.724 0 1 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm23.273 3.186c0-.4-.325-.724-.724-.724H15.48a.724.724 0 0 0 0 1.448h11.432c.4 0 .724-.324.724-.724Zm-.724-5.641a.724.724 0 1 0 0-1.449H5.088a.724.724 0 1 0 0 1.449h21.825Zm-22.55-3.91c0 .4.325.723.725.723H16.52a.724.724 0 0 0 0-1.448H5.088c-.4 0-.724.324-.724.724Zm17.672-1.345c.272.27.642.423 1.027.425h6.458l-7.913-7.879V8.9c.002.384.155.752.428 1.024Zm2.071 27.737v-2.443h-2.43v.822h1.331v1.27a1.19 1.19 0 0 1-.224.175c-.094.059-.221.11-.382.154a2.579 2.579 0 0 1-.62.062c-.258 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.72.154.188.1.332.238.431.413.103.176.172.375.207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.343-.176-.776-.264-1.3-.264-.41 0-.778.069-1.104.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.527.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.197 1.3.132.378.318.7.559.963.243.264.531.464.865.602.334.135.702.202 1.103.202.472 0 .866-.051 1.182-.154.317-.102.57-.224.76-.364a2.13 2.13 0 0 0 .427-.396Zm-13.03-1.094v-4.478h1.099v4.478c0 .425-.091.786-.273 1.085-.181.3-.429.528-.742.686-.314.158-.67.237-1.068.237-.407 0-.77-.069-1.086-.206a1.622 1.622 0 0 1-.738-.633C8.09 37.45 8 37.09 8 36.654h1.107c0 .252.04.455.12.61a.755.755 0 0 0 .342.335c.15.067.324.1.523.1a.99.99 0 0 0 .505-.127.909.909 0 0 0 .352-.382c.085-.17.127-.378.127-.624Zm4.799-.466h-1.327v2.386h-1.103v-6.398h2.43c.495 0 .916.088 1.261.264.349.172.614.413.796.72.181.305.272.654.272 1.046 0 .413-.09.768-.272 1.064a1.753 1.753 0 0 1-.796.68c-.345.159-.766.238-1.261.238Zm-1.327-3.133v2.259h1.327c.29 0 .524-.047.703-.141a.876.876 0 0 0 .391-.387c.085-.167.128-.357.128-.571 0-.202-.043-.391-.128-.567a.97.97 0 0 0-.39-.43c-.18-.109-.414-.163-.704-.163h-1.327Z",
+  d: "m32.384 10.667-.022-.026-.021-.025a.356.356 0 0 0-.052-.058L21.896.21 21.87.188l-.025-.021-.029-.026a.477.477 0 0 1-.029-.025L21.678 0H3.41c-.771 0-1.511.305-2.057.848A2.891 2.891 0 0 0 .5 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 3.409 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108Zm-1.338 28.437a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H3.41a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.588 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.588Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.98a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.588a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.588 11.99a.724.724 0 1 1 0-1.448H17.02a.724.724 0 0 1 0 1.449H5.588Zm17.974-1.643A1.451 1.451 0 0 1 22.107 8.9V2.47l7.913 7.878h-6.458ZM8.576 32.088v4.478c0 .246-.042.454-.127.624a.91.91 0 0 1-.352.382.99.99 0 0 1-.505.128c-.2 0-.374-.034-.523-.101a.755.755 0 0 1-.343-.334c-.079-.156-.119-.36-.119-.611H5.5c0 .436.09.797.268 1.08.179.285.425.496.738.634.317.137.679.206 1.086.206.398 0 .754-.079 1.068-.237.313-.158.56-.387.742-.686.182-.299.273-.66.273-1.085v-4.478H8.576Zm3.472 4.012h1.327c.495 0 .915-.079 1.261-.237.349-.158.614-.386.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.741-.272-1.046a1.849 1.849 0 0 0-.796-.72c-.345-.176-.766-.264-1.261-.264h-2.43v6.398h1.103V36.1Zm0-.874v-2.26h1.327c.29 0 .524.055.703.163a.97.97 0 0 1 .391.431c.085.176.128.365.128.567 0 .214-.043.404-.128.571a.876.876 0 0 1-.39.387c-.18.094-.414.14-.704.14h-1.327Zm14.545.087v2.444c-.09.12-.233.252-.426.395-.19.141-.444.263-.76.365-.317.103-.71.154-1.182.154-.402 0-.77-.068-1.103-.202a2.415 2.415 0 0 1-.866-.602 2.755 2.755 0 0 1-.558-.963 3.964 3.964 0 0 1-.198-1.3v-.444c0-.484.06-.914.18-1.292.123-.381.299-.703.527-.967.229-.264.504-.463.827-.598a2.805 2.805 0 0 1 1.103-.206c.524 0 .958.088 1.3.263.346.173.613.413.8.721.188.308.307.66.356 1.055h-1.08a1.7 1.7 0 0 0-.207-.598 1.046 1.046 0 0 0-.431-.413c-.185-.102-.425-.154-.72-.154-.256 0-.48.049-.673.145a1.271 1.271 0 0 0-.483.426 2.093 2.093 0 0 0-.286.686c-.065.27-.097.577-.097.923v.452c0 .352.037.664.11.937.076.272.185.502.325.69.144.187.318.33.523.426.205.093.437.14.695.14.252 0 .458-.02.62-.061.16-.044.288-.095.381-.154.097-.062.172-.12.225-.176v-1.27h-1.332v-.822h2.43ZM16.7 32.085h3.791v.884h-2.78v1.754h2.618v.875H17.71v2.033h2.781v.884h-3.79v-6.43Z",
   fill: "#051942"
 }));
 
@@ -2263,6 +2269,206 @@ const SvgListItemDelete = ({
   fill: "#051942"
 }));
 
+const FileItem = /*#__PURE__*/React__default.memo(({
+  size,
+  name,
+  uuid,
+  check,
+  radius,
+  status,
+  removeFile,
+  fileFormat,
+  progressColor,
+  listItemHeight,
+  listItemPadding,
+  progressFontSize,
+  listItemErrorSize,
+  listItemErrorColor,
+  progressTrackColor,
+  progressFailedColor,
+  progressSuccessColor,
+  progressLoadingColor,
+  listItemBackgroundColor,
+  listItemBackgroundErrorColor
+}) => {
+  const [i, setI] = useState(_ => _);
+  const [t, setT] = useState(_ => _);
+  const [progress, setProgress] = useState(7);
+  const handleRemoveItem = id => {
+    removeFile(id);
+  };
+  useEffect(() => {
+    let time = Math.floor(Math.random() * (1100 - 900 + 1)) + 900;
+    let fileSizeInMB = Math.round(size / (1024 * 1024));
+    if (fileSizeInMB > 5) {
+      const times = [Math.floor(Math.random() * (1700 - 1300 + 1)) + 1300, Math.floor(Math.random() * (3200 - 2800 + 1)) + 2800, Math.floor(Math.random() * (4700 - 4300 + 1)) + 4300, Math.floor(Math.random() * (6200 - 5800 + 1)) + 5800, Math.floor(Math.random() * (7700 - 7300 + 1)) + 7300];
+      const index = Math.min(Math.floor((size - 1) / 15), times.length - 1);
+      time = times[index];
+    }
+    setI(setInterval(() => {
+      setProgress(prev => {
+        return prev += 7;
+      });
+    }, time));
+    return () => {
+      setI(_ => _);
+      clearTimeout(t);
+      clearInterval(i);
+    };
+  }, []);
+  useEffect(() => {
+    if (progress > 84) {
+      clearInterval(i);
+    }
+  }, [progress]);
+  useEffect(() => {
+    if (status === 'success') {
+      setProgress(100);
+      clearInterval(i);
+    }
+    if (status === 'failed') {
+      setProgress(0);
+      clearInterval(i);
+    }
+  }, [status]);
+  useEffect(() => {
+    if (check !== '') {
+      setT(setTimeout(() => {
+        removeFile(uuid);
+      }, 3500));
+    }
+  }, [check]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      marginTop: '6px',
+      alignItems: 'center',
+      borderRadius: radius,
+      height: listItemHeight,
+      boxSizing: 'border-box',
+      padding: listItemPadding,
+      flexDirection: check !== '' ? 'column' : 'row',
+      justifyContent: check !== '' ? 'space-around' : 'space-between',
+      backgroundColor: check !== '' ? listItemBackgroundErrorColor : listItemBackgroundColor
+    }
+  }, check !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      margin: '0px',
+      color: listItemErrorColor,
+      fontSize: listItemErrorSize
+    }
+  }, name), /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      margin: '0px',
+      color: listItemErrorColor,
+      fontSize: listItemErrorSize
+    }
+  }, check)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '32px'
+    }
+  }, fileFormat === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : ''), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      height: '40px',
+      margin: '0px 14px',
+      alignItems: 'flex-end',
+      width: 'calc(100% - 82px)'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      paddingTop: '5px',
+      color: progressColor,
+      boxSizing: 'border-box',
+      alignItems: 'flex-start',
+      fontSize: progressFontSize,
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      margin: '0px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      maxWidth: 'calc(100% - 56px)'
+    }
+  }, name), /*#__PURE__*/React__default.createElement("span", null, progress, " %")), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'absolute',
+      left: '0px',
+      bottom: '5px',
+      width: '100%',
+      height: '4px',
+      borderRadius: '10px',
+      backgroundColor: progressTrackColor
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      height: '100%',
+      borderRadius: '10px',
+      width: status === 'failed' ? '100%' : progress + '%',
+      backgroundColor: status === 'success' ? progressSuccessColor : status === 'failed' ? progressFailedColor : progressLoadingColor
+    }
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '22px',
+      cursor: 'pointer'
+    },
+    onClick: () => handleRemoveItem(uuid)
+  }, /*#__PURE__*/React__default.createElement(SvgListItemDelete, null))));
+});
+
+const SvgUpload = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "51",
+  height: "35",
+  viewBox: "0 0 51 35",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "M41.54 11.842h-.017c-.23-3.225-2.902-5.772-6.167-5.772-1.08 0-2.095.28-2.979.77C30.267 2.774 26.041 0 21.167 0 14.318 0 8.742 5.483 8.534 12.326 3.758 12.708 0 16.726 0 21.63c0 5.155 4.153 9.334 9.277 9.334h22.625a10.987 10.987 0 0 1-.888-4.334c0-6.059 4.899-10.987 10.918-10.987 3.773 0 7.106 1.938 9.068 4.875-.444-4.864-4.508-8.675-9.46-8.675ZM15.654 6.975c-.072.06-.144.12-.211.185-.266.259-.512.53-.705.849-.741 1.218-.882 2.523-.72 3.927.156 1.35-1.942 1.334-2.095 0-.289-2.493.504-5.307 2.664-6.775 1.12-.763 2.164 1.052 1.067 1.814Zm-.022.015c-.047.035-.111.093 0 0Z",
+  fill: "#D1D1D1"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M41.822 17.245c-4.864 0-8.822 3.982-8.822 8.878C33 31.018 36.958 35 41.822 35c4.864 0 8.822-3.982 8.822-8.877 0-4.896-3.959-8.878-8.822-8.878Zm-.536 13.005v-6.689l-3.067 3.22a.69.69 0 0 1-1.01 0 .777.777 0 0 1 0-1.06l4.286-4.5A.71.71 0 0 1 42 21a.684.684 0 0 1 .505.22l4.286 4.5a.777.777 0 0 1 0 1.06.69.69 0 0 1-1.01 0l-3.067-3.22v6.69c0 .414-.32.75-.714.75-.395 0-.714-.336-.714-.75Z",
+  fill: "#0DA574"
+}));
+
+const SvgRemoveFile = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "26",
+  height: "26",
+  viewBox: "0 0 26 26",
+  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("rect", {
+  width: 26,
+  height: 26,
+  rx: 6,
+  fill: "#FBFBFB"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M13 4c.822 0 1.611.296 2.206.826s.95 1.255.99 2.024l.005.15h4c.204 0 .4.073.548.205.148.13.238.31.25.501a.72.72 0 0 1-.185.525.817.817 0 0 1-.52.264l-.093.005h-.68l-.943 10.915a2.75 2.75 0 0 1-.957 1.84 3.114 3.114 0 0 1-2.034.745h-5.173c-.754 0-1.48-.266-2.034-.745a2.75 2.75 0 0 1-.957-1.84L6.478 8.5H5.8a.831.831 0 0 1-.531-.19.736.736 0 0 1-.263-.472L5 7.75c0-.184.072-.361.202-.498a.818.818 0 0 1 .504-.247L5.8 7h4c0-.796.337-1.559.938-2.121A3.312 3.312 0 0 1 13 4Zm-1.8 6.938a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.006.076v6l.006.076c.02.135.09.258.2.348.11.09.25.138.394.138.145 0 .285-.049.395-.138.109-.09.18-.213.2-.348l.005-.076v-6l-.005-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139Zm3.6 0a.623.623 0 0 0-.394.138.553.553 0 0 0-.2.348l-.005.076v6l.005.076c.02.135.091.258.2.348.11.09.25.138.394.138.145 0 .286-.049.395-.138.11-.09.18-.213.2-.348l.006-.076v-6l-.006-.076a.553.553 0 0 0-.2-.348.624.624 0 0 0-.395-.139ZM13 5.5a1.66 1.66 0 0 0-1.088.4c-.296.257-.477.61-.508.987L11.4 7h3.2l-.003-.112a1.465 1.465 0 0 0-.508-.988A1.66 1.66 0 0 0 13 5.5Z",
+  fill: "#00236A"
+}));
+
 const SvgDeleteComponent = ({
   title,
   titleId,
@@ -2289,6 +2495,7 @@ const SvgDeleteComponent = ({
 }));
 
 const NewFile = ({
+  or,
   size,
   name,
   color,
@@ -2299,36 +2506,55 @@ const NewFile = ({
   radius,
   change,
   border,
+  upload,
   maxSize,
   disabled,
   multiple,
   required,
   errorSize,
   labelSize,
+  removeFile,
   labelColor,
   errorColor,
   filesArray,
+  putFileHere,
   borderColor,
   uploadColor,
   defaultData,
+  formatError,
   errorMessage,
+  fileSizeText,
+  maxSizeError,
+  progressColor,
+  noChoosenFile,
   fileExtensions,
+  listItemHeight,
   backgroundColor,
   deleteComponent,
+  listItemPadding,
+  progressFontSize,
   borderHoverColor,
+  listItemErrorSize,
   progressTrackColor,
+  fileAreaImageWidth,
+  listItemErrorColor,
   labelRequiredColor,
+  progressFailedColor,
+  fileAreaImageHeight,
+  progressSuccessColor,
+  progressLoadingColor,
   hiddenBackgroundColor,
   extentionsRowMarginTop,
-  listItemBackgroundColor
+  listItemBackgroundColor,
+  listItemBackgroundErrorColor
 }) => {
   const ref = useRef(null);
   const inpRef = useRef(null);
+  const memoizedItems = useMemo(() => filesArray, [filesArray]);
   const [error, setError] = useState('');
-  const [image, setImage] = useState('');
-  const [progress, setProgress] = useState(5);
   const [isHover, setIsHover] = useState(false);
-  const [multipleFiles, setMultipleFiles] = useState([]);
+  const [singleFile, setSingleFile] = useState(null);
+  const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
   const configStyles = compereConfigs();
   const handleRemoveComponent = () => {
     const node = ReactDOM.findDOMNode(ref.current);
@@ -2336,45 +2562,68 @@ const NewFile = ({
     parent.removeChild(node);
   };
   const handleRemoveFile = () => {
-    if (!multiple) {
-      setImage('');
-      onChange(null);
-    }
+    setImage(null);
+    removeFile(singleFile);
   };
   const handleChange = e => {
     const file = e.target.files;
-    if (file[0]) {
-      if (file[0].size <= maxSize * Math.pow(2, 20)) {
-        if (fileExtensions.includes(file[0].type.split('/')[1])) {
-          setError('');
-          if (multiple) {
-            change({
-              uuid: v4(),
-              file: file[0]
-            });
+    if (multiple) {
+      setError('');
+      setImage(null);
+      for (let ix = 0; ix < file.length; ix++) {
+        if (file[ix]) {
+          if (file[ix].size <= maxSize * Math.pow(2, 20)) {
+            if (fileExtensions.includes(file[ix].type.split('/')[1])) {
+              change({
+                id: '',
+                check: '',
+                status: '',
+                file: file[ix],
+                uuid: v4()
+              });
+            } else {
+              change({
+                file: file[ix],
+                uuid: v4(),
+                check: formatError
+              });
+            }
           } else {
             change({
-              file
+              file: file[ix],
+              uuid: v4(),
+              check: maxSizeError
             });
+          }
+        }
+      }
+      if (file.length === 0 && memoizedItems.length === 0) {
+        setError(noChoosenFile);
+      }
+    } else {
+      if (file[0]) {
+        if (file[0].size <= maxSize * Math.pow(2, 20)) {
+          if (fileExtensions.includes(file[0].type.split('/')[1])) {
+            setError('');
+            change(file);
+            setSingleFile(file);
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
             } else {
               setImage(URL.createObjectURL(file[0]));
             }
+          } else {
+            setImage(null);
+            setError(formatError);
           }
         } else {
-          setImage('');
-          setError('ֆայլի սխալ ֆորմատ');
+          setImage(null);
+          setError(maxSizeError);
         }
-      } else {
-        setImage('');
-        setError('առավելագույն ծավալ');
       }
-    } else {
-      // TODO:
-      if (!multiple || multiple && filesArray && filesArray.length === 0) {
-        setImage('');
-        setError('Ֆայլը ընտրված չէ');
+      if (file.length === 0) {
+        setImage(null);
+        setError(noChoosenFile);
       }
     }
   };
@@ -2383,6 +2632,21 @@ const NewFile = ({
       inpRef.current.click();
     }
   };
+  const handleDrop = e => {
+    if (!disabled) {
+      e.preventDefault();
+      handleChange({
+        target: {
+          files: e.dataTransfer.files
+        }
+      });
+    }
+  };
+  const handleDragOver = e => {
+    if (!disabled) {
+      e.preventDefault();
+    }
+  };
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -2394,17 +2658,18 @@ const NewFile = ({
   };
   useEffect(() => {
     if (!multiple && defaultData) {
-      if (defaultData.type && defaultData.type !== 'application/pdf') {
-        setImage(defaultData.url);
-      } else {
-        setImage('pdf');
+      if (!defaultData.type) {
+        alert('Please add type in defaultData prop');
+      }
+      if (!defaultData.url) {
+        alert('Please add url in defaultData prop');
       }
     }
     if (multiple && !filesArray) {
       alert('In multiple mode, you should add filesArray prop for drawing files');
     }
-    if (filesArray) {
-      setMultipleFiles(filesArray);
+    if (multiple) {
+      setSingleFile(null);
     }
   }, [multiple, filesArray && filesArray.length, defaultData]);
   useEffect(() => {
@@ -2418,8 +2683,10 @@ const NewFile = ({
     if (!change) {
       alert('Please add change prop on File component');
     }
-  }, [change]);
-  console.log(multipleFiles, 'multipleFiles');
+    if (!removeFile) {
+      alert('Please add removeFile prop on File component');
+    }
+  }, [change, removeFile]);
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -2461,7 +2728,9 @@ const NewFile = ({
       backgroundColor: backgroundColor ? backgroundColor : configStyles.File.backgroundColor,
       borderColor: error ? errorColor ? errorColor : configStyles.File.errorColor : disabled ? borderColor ? borderColor : configStyles.File.borderColor : isHover ? borderHoverColor ? borderHoverColor : configStyles.File.borderHoverColor : borderColor ? borderColor : configStyles.File.borderColor
     },
+    onDrop: handleDrop,
     onClick: handleClick,
+    onDragOver: handleDragOver,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   }, /*#__PURE__*/React__default.createElement("input", {
@@ -2470,6 +2739,7 @@ const NewFile = ({
     type: "file",
     ref: inpRef,
     disabled: disabled,
+    multiple: multiple,
     onChange: handleChange
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -2484,21 +2754,26 @@ const NewFile = ({
       fontSize: size ? size : configStyles.File.size,
       fontWeight: weight ? weight : configStyles.File.weight
     }
-  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default.createElement(PDF, null) : /*#__PURE__*/React__default.createElement("img", {
+  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     style: {
-      maxHeight: '100%'
+      display: 'block',
+      maxWidth: '100%',
+      maxHeight: '95%',
+      objectFit: 'contain',
+      width: fileAreaImageWidth ? fileAreaImageWidth : configStyles.File.fileAreaImageWidth,
+      height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.File.fileAreaImageHeight
     },
     alt: "file preview"
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SvgUpload, null)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px'
     }
-  }, "\u054F\u0565\u0572\u0561\u0564\u0580\u0565\u056C \u0586\u0561\u0575\u056C\u0568 \u0561\u0575\u057D\u057F\u0565\u0572", /*#__PURE__*/React__default.createElement("br", null), "\u056F\u0561\u0574 ", /*#__PURE__*/React__default.createElement("span", {
+  }, putFileHere ? putFileHere : configStyles.File.putFileHere, /*#__PURE__*/React__default.createElement("br", null), or ? or : configStyles.File.or, " ", /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: uploadColor ? uploadColor : configStyles.File.uploadColor
     }
-  }, "\u0532\u0565\u057C\u0576\u0565\u056C"))), /*#__PURE__*/React__default.createElement("div", {
+  }, upload ? upload : configStyles.File.upload))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginTop: extentionsRowMarginTop ? extentionsRowMarginTop : configStyles.File.extentionsRowMarginTop
     }
@@ -2506,7 +2781,7 @@ const NewFile = ({
     style: {
       margin: '0px'
     }
-  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default.createElement("div", {
+  }, fileSizeText ? fileSizeText : configStyles.File.fileSizeText, " ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -2536,62 +2811,34 @@ const NewFile = ({
       color: errorColor ? errorColor : configStyles.File.errorColor,
       fontSize: errorSize ? errorSize : configStyles.File.errorSize
     }
-  }, error) : '', multiple && multipleFiles && multipleFiles.length > 0 && multipleFiles.map((item, index) => {
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: `${item.file.name}_${index}`,
-      style: {
-        display: 'flex',
-        width: '100%',
-        height: '70px',
-        marginTop: '6px',
-        alignItems: 'center',
-        padding: '14px 20px',
-        boxSizing: 'border-box',
-        justifyContent: 'space-between',
-        borderRadius: radius ? radius : configStyles.File.radius,
-        backgroundColor: listItemBackgroundColor ? listItemBackgroundColor : configStyles.File.listItemBackgroundColor
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        width: '32px'
-      }
-    }, item.file.type.split('/')[1].toLowerCase() === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : item.file.type.split('/')[1].toLowerCase() === 'jpeg' ? /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : ''), /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        position: 'relative',
-        display: 'flex',
-        height: '40px',
-        margin: '0px 14px',
-        alignItems: 'flex-end',
-        width: 'calc(100% - 82px)'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
-      className: "new"
-    }, item.file.name)), /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        position: 'absolute',
-        left: '0px',
-        bottom: '5px',
-        width: '100%',
-        height: '4px',
-        borderRadius: '10px',
-        backgroundColor: progressTrackColor ? progressTrackColor : configStyles.File.progressTrackColor
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        width: progress + '%',
-        height: '100%',
-        borderRadius: '10px',
-        backgroundColor: 'green'
-      }
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        width: '22px',
-        cursor: 'pointer'
-      }
-    }, /*#__PURE__*/React__default.createElement(SvgListItemDelete, null)));
+  }, error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
+    return /*#__PURE__*/React__default.createElement(FileItem, {
+      key: item.uuid,
+      uuid: item.uuid,
+      check: item.check,
+      status: item.status,
+      size: item.file.size,
+      name: item.file.name,
+      removeFile: removeFile,
+      radius: radius ? radius : configStyles.File.radius,
+      fileFormat: item.file.type.split('/')[1].toLowerCase(),
+      progressColor: progressColor ? progressColor : configStyles.File.progressColor,
+      listItemHeight: listItemHeight ? listItemHeight : configStyles.File.listItemHeight,
+      listItemPadding: listItemPadding ? listItemPadding : configStyles.File.listItemPadding,
+      progressFontSize: progressFontSize ? progressFontSize : configStyles.File.progressFontSize,
+      listItemErrorSize: listItemErrorSize ? listItemErrorSize : configStyles.File.listItemErrorSize,
+      listItemErrorColor: listItemErrorColor ? listItemErrorColor : configStyles.File.listItemErrorColor,
+      progressTrackColor: progressTrackColor ? progressTrackColor : configStyles.File.progressTrackColor,
+      progressFailedColor: progressFailedColor ? progressFailedColor : configStyles.File.progressFailedColor,
+      progressSuccessColor: progressSuccessColor ? progressSuccessColor : configStyles.File.progressSuccessColor,
+      progressLoadingColor: progressLoadingColor ? progressLoadingColor : configStyles.File.progressLoadingColor,
+      listItemBackgroundColor: listItemBackgroundColor ? listItemBackgroundColor : configStyles.File.listItemBackgroundColor,
+      listItemBackgroundErrorColor: listItemBackgroundErrorColor ? listItemBackgroundErrorColor : configStyles.File.listItemBackgroundErrorColor
+    });
   }));
 };
 NewFile.propTypes = {
+  or: PropTypes.string,
   size: PropTypes.string,
   label: PropTypes.string,
   width: PropTypes.string,
@@ -2601,30 +2848,49 @@ NewFile.propTypes = {
   radius: PropTypes.string,
   border: PropTypes.string,
   required: PropTypes.bool,
+  upload: PropTypes.string,
   weight: PropTypes.number,
   maxSize: PropTypes.number,
   errorSize: PropTypes.string,
   labelSize: PropTypes.string,
   labelColor: PropTypes.string,
   errorColor: PropTypes.string,
+  formatError: PropTypes.string,
+  putFileHere: PropTypes.string,
   borderColor: PropTypes.string,
   uploadColor: PropTypes.string,
   defaultData: PropTypes.object,
+  maxSizeError: PropTypes.string,
   errorMessage: PropTypes.string,
+  fileSizeText: PropTypes.string,
+  noChoosenFile: PropTypes.string,
+  progressColor: PropTypes.string,
   deleteComponent: PropTypes.bool,
+  listItemHeight: PropTypes.string,
   backgroundColor: PropTypes.string,
   change: PropTypes.func.isRequired,
+  listItemPadding: PropTypes.string,
+  progressFontSize: PropTypes.string,
   borderHoverColor: PropTypes.string,
+  listItemErrorSize: PropTypes.string,
   labelRequiredColor: PropTypes.string,
   progressTrackColor: PropTypes.string,
+  fileAreaImageWidth: PropTypes.string,
+  listItemErrorColor: PropTypes.string,
+  removeFile: PropTypes.func.isRequired,
+  fileAreaImageHeight: PropTypes.string,
+  progressFailedColor: PropTypes.string,
+  progressSuccessColor: PropTypes.string,
+  progressLoadingColor: PropTypes.string,
   hiddenBackgroundColor: PropTypes.string,
   extentionsRowMarginTop: PropTypes.string,
   listItemBackgroundColor: PropTypes.string,
+  listItemBackgroundErrorColor: PropTypes.string,
   filesArray: PropTypes.arrayOf(PropTypes.object),
   fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };
 NewFile.defaultProps = {
-  maxSize: 5,
+  maxSize: 50,
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
@@ -2650,17 +2916,21 @@ const Textarea = ({
   boxSizing,
   maxLength,
   labelSize,
+  errorSize,
   labelColor,
+  errorColor,
   borderColor,
   labelWeight,
   placeholder,
   labelDisplay,
+  errorMesaage,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
   showCharacterCount,
   labelRequiredColor
 }) => {
+  const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerValue, setInnerValue] = useState('');
@@ -2683,10 +2953,16 @@ const Textarea = ({
     if (maxLength) {
       if (value.length > maxLength) {
         onChange(value.substr(0, maxLength));
+        setError('Նիշերի քանակը գերազանցում է');
+      } else {
+        setError('');
       }
     } else {
       if (value.length > configStyles.TEXTAREA.maxLength) {
+        setError('Նիշերի քանակը գերազանցում է');
         onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+      } else {
+        setError('');
       }
     }
   };
@@ -2699,6 +2975,13 @@ const Textarea = ({
     }
     setInnerValue(value);
   }, [value, onChange]);
+  useEffect(() => {
+    if (errorMesaage) {
+      setError(errorMesaage);
+    } else {
+      setError('');
+    }
+  }, [errorMesaage]);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: width ? width : configStyles.TEXTAREA.width
@@ -2741,7 +3024,7 @@ const Textarea = ({
       maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
       boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
       backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-      borderColor: isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor : isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor : borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
+      borderColor: error ? errorColor ? errorColor : configStyles.TEXTAREA.errorColor : isFocus ? borderFocusColor ? borderFocusColor : configStyles.TEXTAREA.borderFocusColor : isHover ? borderHoverColor ? borderHoverColor : configStyles.TEXTAREA.borderHoverColor : borderColor ? borderColor : configStyles.TEXTAREA.borderColor,
       resize: resize ? resize : configStyles.TEXTAREA.resize
     },
     value: innerValue,
@@ -2751,7 +3034,14 @@ const Textarea = ({
     placeholder: placeholder,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }));
+  }), error ? /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      marginTop: '6px',
+      display: 'inline-block',
+      fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
+      color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor
+    }
+  }, error) : '');
 };
 Textarea.propTypes = {
   size: PropTypes.string,
@@ -2784,7 +3074,7 @@ Textarea.propTypes = {
   labelRequiredColor: PropTypes.string
 };
 
-var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}";
+var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
 var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
 styleInject(css_248z$1);
 
@@ -2873,6 +3163,7 @@ const SvgNextarrow = ({
 }));
 
 const Pagination = ({
+  goTo,
   onChange,
   totalCount,
   siblingCount,
@@ -2880,6 +3171,8 @@ const Pagination = ({
   offset,
   className
 }) => {
+  const [inpVal, setInpVal] = useState('');
+  const [error, setError] = useState(false);
   const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
@@ -2922,6 +3215,40 @@ const Pagination = ({
   const onPreviousFive = e => {
     currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
   };
+  const handleChangeInput = e => {
+    setError(false);
+    if (e.target.value.trim() !== '') {
+      const val = parseInt(e.target.value);
+      if (Number.isInteger(val)) {
+        setInpVal(val);
+      } else {
+        setInpVal('');
+      }
+    } else {
+      setInpVal('');
+    }
+  };
+  const handleKeyDown = e => {
+    const forbiddenKeys = ["e", ".", "+", "-"];
+    if (forbiddenKeys.includes(e.key)) {
+      e.preventDefault();
+    }
+    if (e.keyCode === 13) {
+      if (inpVal === '') {
+        setError(true);
+      } else {
+        if (inpVal <= 1) {
+          setInpVal(1);
+          onPageChange(1);
+        } else if (inpVal >= totalCount / offset) {
+          setInpVal(Math.ceil(totalCount / offset));
+          onPageChange(Math.ceil(totalCount / offset));
+        } else {
+          onPageChange(inpVal);
+        }
+      }
+    }
+  };
   let lastPage = paginationRange[paginationRange.length - 1];
   return /*#__PURE__*/React__default.createElement("ul", {
     className: classProps
@@ -2929,9 +3256,9 @@ const Pagination = ({
     style: {
       transform: 'rotate(180deg)'
     },
-    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
-    disabled: currentPage === 1 ? true : false
+    disabled: currentPage === 1 ? true : false,
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`
   }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
@@ -2960,11 +3287,35 @@ const Pagination = ({
     }, pageNumber);
   }), /*#__PURE__*/React__default.createElement("button", {
     onClick: onNext,
-    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
-    disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)));
+    disabled: currentPageNumber === lastPage ? true : false,
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`
+  }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), goTo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
+    onKeyDown: handleKeyDown,
+    onInput: handleChangeInput,
+    type: "number",
+    style: {
+      width: '53px',
+      height: '30px',
+      outline: 'none',
+      color: '#3C393E',
+      fontSize: '13px',
+      margin: '0px 6px',
+      fontWeight: '500',
+      textAlign: 'center',
+      border: '1px solid',
+      borderRadius: '6px',
+      borderColor: error ? 'red' : '#00236a'
+    },
+    value: inpVal
+  }), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: '#3C393E',
+      fontSize: '13px'
+    }
+  }, "\u0537\u057B")));
 };
 Pagination.propTypes = {
+  goTo: PropTypes.bool,
   offset: PropTypes.number,
   totalCount: PropTypes.number,
   className: PropTypes.string,
@@ -3114,6 +3465,7 @@ Autocomplate.defaultProps = {
 
 const NewAutocomplete = ({
   label,
+  change,
   options,
   getItem,
   required,
@@ -3187,6 +3539,7 @@ const NewAutocomplete = ({
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerValue, setInnerValue] = useState('');
+  const [innerOptions, setInnerOptions] = useState([]);
   const configStyles = compereConfigs();
   const showOption = keyframes`
         100% {
@@ -3220,13 +3573,18 @@ const NewAutocomplete = ({
     const value = e.target.value;
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerValue(value);
+    if (value.length >= searchCount) {
+      change(value);
+    } else {
+      change('');
+    }
   };
   const handleClick = selectedValue => {
     setShow(false);
     getItem(selectedValue);
-    setInnerValue(selectedValue.value);
+    setInnerValue(selectedValue.name);
   };
-  const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && options && options.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+  const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && innerOptions ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
       width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
@@ -3249,9 +3607,9 @@ const NewAutocomplete = ({
       maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : configStyles.NEWAUTOCOMPLETE.contentBottomInnerMaxHeight,
       flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDirection
     }
-  }, innerValue.length >= searchCount ? options.filter(item => item.value.includes(innerValue)).length > 0 ? options.filter(item => item.value.includes(innerValue)).map((item, index) => {
+  }, innerOptions.map(item => {
     return /*#__PURE__*/React__default.createElement("p", {
-      key: `${item}_${index}`,
+      key: item.id,
       onMouseEnter: handleRowMouseEnter,
       onMouseLeave: handleRowMouseLeave,
       onClick: () => handleClick(item),
@@ -3271,40 +3629,37 @@ const NewAutocomplete = ({
         marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
-    }, item.value);
-  }) : /*#__PURE__*/React__default.createElement("p", {
-    style: {
-      color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
-      height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-      padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
-      lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
-    }
-  }, "\u0546\u0574\u0561\u0576 \u057F\u057E\u0575\u0561\u056C \u0561\u057C\u056F\u0561 \u0579\u0567") : /*#__PURE__*/React__default.createElement("p", {
+    }, item.name);
+  }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default.createElement("p", {
     style: {
+      margin: '0px',
       color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
       fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
       height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
       padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
-      lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
+      lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+      backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor
     }
-  }, innerValue.length < searchCount && `Լրացնել առնվազն ${searchCount} նիշ`))));
+  }, innerValue.length >= searchCount ? 'Նման տվյալ առկա չէ' : `Լրացնել առնվազն ${searchCount} նիշ`) : '' : '');
   useEffect(() => {
-    if (!options) {
-      alert('Please add array of options');
-    }
-    if (options.length === 0) {
-      alert('Please fill options array');
+    if (options === undefined) {
+      alert('Please add options prop');
     }
     options && options.length > 0 && options.map(item => {
-      if (!item.hasOwnProperty('value')) {
-        alert('Please add value property in items of options array');
+      if (!item.hasOwnProperty('name')) {
+        alert('Please add name property in items of options array');
       }
     });
     if (!getItem) {
       alert('Please add getItem function for get choosen item from autocomplete');
     }
-  }, [options, getItem]);
+    options && setInnerOptions(options);
+  }, [options, options.length, getItem]);
+  useEffect(() => {
+    if (!change) {
+      alert('Please add change prop on New Autocomplete component');
+    }
+  }, [change]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -3312,6 +3667,7 @@ const NewAutocomplete = ({
       display: labelDisplay ? labelDisplay : configStyles.NEWAUTOCOMPLETE.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.NEWAUTOCOMPLETE.labelWeight,
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
+      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform
     }
@@ -3323,7 +3679,8 @@ const NewAutocomplete = ({
     style: {
       display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
       position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
-      flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection
+      flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection,
+      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
     }
   }, /*#__PURE__*/React__default.createElement("input", _extends({
     type: "text",
@@ -3332,11 +3689,12 @@ const NewAutocomplete = ({
     onBlur: handleBlur,
     onFocus: handleFocus,
     onInput: handleChange,
-    placeholder: placeHolder ? placeHolder : '',
-    autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
+    placeholder: placeHolder ? placeHolder : '',
+    autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
     style: {
+      maxWidth: '100%',
       transition: 'all 240ms',
       cursor: disabled ? 'not-allowed' : 'auto',
       color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
@@ -3347,7 +3705,6 @@ const NewAutocomplete = ({
       display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
       fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
       borderRadius: contentTopRadius ? contentTopRadius : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
-      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
       boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
       lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
       flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
@@ -3355,8 +3712,11 @@ const NewAutocomplete = ({
     }
   }, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
     style: {
+      margin: '0px',
+      display: 'inline-block',
       color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize
+      fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+      maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
     }
   }, errorMessage) : '', optionList));
 };
@@ -3379,6 +3739,7 @@ NewAutocomplete.propTypes = {
   contentPosition: PropTypes.string,
   labelLineHeight: PropTypes.string,
   contentTopColor: PropTypes.string,
+  change: PropTypes.func.isRequired,
   contentDirection: PropTypes.string,
   contentTopWeight: PropTypes.number,
   contentTopRadius: PropTypes.string,