@xaypay/tui 0.0.70 → 0.0.72

package/dist/index.js

@@ -167,8 +167,7 @@ const File = ({
   }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"](`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    onChange: e => console.log(e),
-    className: `${styles$c['file-form']} file-form-rem ${errorMessage ? styles$c['error'] : ''}`,
+    className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default["default"].createElement("input", {
     hidden: true,
@@ -197,11 +196,11 @@ const File = ({
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-delete"
-  })), errorMessage || error ? /*#__PURE__*/React__default["default"].createElement("span", {
+  })), error || errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: 'red'
     }
-  }, errorMessage || error) : null));
+  }, error || errorMessage) : null));
 };
 File.propTypes = {
   label: PropTypes__default["default"].string,
@@ -605,6 +604,9 @@ const InputTypes = {
   TEXT: "text",
   PASSWORD: "password"
 };
+const P = styled__default["default"].p`
+    animation: ${props => props.errorAnimation ? props.animation : 'none'};
+`;
 const Input = ({
   type,
   size,
@@ -616,12 +618,12 @@ const Input = ({
   regexp,
   height,
   radius,
+  change,
   padding,
   tooltip,
   leftIcon,
   required,
   disabled,
-  onChange,
   transform,
   iconWidth,
   rightIcon,
@@ -657,7 +659,7 @@ const Input = ({
   errorAnimationDuration,
   ...props
 }) => {
-  const phoneNumberRegex = /^\d{8}$/;
+  const phoneNumberRegex = /^\d+$/;
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [innerValue, setInnerValue] = React.useState('');
@@ -678,35 +680,41 @@ const Input = ({
   const animation = _ => styled.css`
         ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
     `;
-  const P = styled__default["default"].p`
-        animation: ${errorAnimation ? animation : 'none'};
-    `;
   const handleChange = event => {
     const currentValue = event.target.value;
     setInnerValue(currentValue);
+    if (change) {
+      change(currentValue);
+    }
     if (type === 'tel') {
-      if (currentValue.length > 8) {
-        setInnerValue(currentValue.substr(0, 8));
-      }
-      if (!phoneNumberRegex.test(currentValue) && telErrorMessage) {
-        setInnerErrorMessage(telErrorMessage);
+      if (!phoneNumberRegex.test(currentValue)) {
+        telErrorMessage && setInnerErrorMessage(telErrorMessage);
+        setInnerValue('');
       } else {
         setInnerErrorMessage('');
+        if (currentValue.length > 8) {
+          setInnerValue(currentValue.substr(0, 8));
+          if (change) {
+            change(currentValue.substr(0, 8));
+          }
+        } else {
+          setInnerValue(currentValue);
+          if (change) {
+            change(currentValue);
+          }
+        }
       }
     }
     if (maxLength && currentValue.length > maxLength && type !== 'tel') {
       setInnerValue(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 (type === 'tel' && currentValue.length > 8) {
-        onChange(currentValue.substr(0, 8));
-      }
-      if (maxLength && currentValue.length > maxLength && type !== 'tel') {
-        onChange(currentValue.substr(0, maxLength));
+      if (change) {
+        change(currentValue);
       }
     }
   };
@@ -717,16 +725,24 @@ const Input = ({
     setIsHover(false);
   };
   React.useEffect(() => {
+    if (errorMessage) {
+      setInnerErrorMessage(errorMessage);
+    } else {
+      setInnerErrorMessage('');
+    }
     if (value !== undefined && value !== null) {
       setInnerValue(value);
       if (type === 'tel') {
-        if (value.length > 8) {
-          setInnerValue(value.substr(0, 8));
-        }
-        if (!phoneNumberRegex.test(value) && telErrorMessage) {
-          setInnerErrorMessage(telErrorMessage);
+        if (!phoneNumberRegex.test(value)) {
+          telErrorMessage && setInnerErrorMessage(telErrorMessage);
+          setInnerValue('');
         } else {
           setInnerErrorMessage('');
+          if (value.length > 8) {
+            setInnerValue(value.substr(0, 8));
+          } else {
+            setInnerValue(value);
+          }
         }
       }
       if (maxLength && value.length > maxLength && type !== 'tel') {
@@ -736,11 +752,6 @@ const Input = ({
         !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       }
     }
-    if (errorMessage) {
-      setInnerErrorMessage(errorMessage);
-    } else {
-      setInnerErrorMessage('');
-    }
   }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8["input-wrap"]}`
@@ -833,7 +844,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["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,
@@ -848,11 +862,11 @@ const Input = ({
 };
 Input.propTypes = {
   name: PropTypes__default["default"].string,
+  change: PropTypes__default["default"].func,
   color: PropTypes__default["default"].string,
   value: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   height: PropTypes__default["default"].string,
@@ -1054,8 +1068,8 @@ const SvgCheckboxUnchecked = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "16",
+  height: "16",
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1074,8 +1088,8 @@ const SvgCheckboxChecked = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "16",
+  height: "16",
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1107,8 +1121,8 @@ const SvgArrow = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "15",
+  height: "9",
   viewBox: "0 0 15 9",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1125,8 +1139,8 @@ const SvgCloseIcon = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "14",
+  height: "14",
   viewBox: "0 0 14 14",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1459,8 +1473,8 @@ const SvgToasterInfo = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "24",
+  height: "24",
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1477,8 +1491,8 @@ const SvgToasterError = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "24",
+  height: "24",
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1495,8 +1509,8 @@ const SvgToasterClose = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "18",
+  height: "18",
   viewBox: "0 0 18 18",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1513,8 +1527,8 @@ const SvgToasterWarning = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "24",
+  height: "24",
   viewBox: "0 0 24 21",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1531,8 +1545,8 @@ const SvgToasterSuccess = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "24",
+  height: "24",
   viewBox: "0 0 24 24",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -1631,12 +1645,12 @@ const Toast = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
+      margin: '0px',
       fontWeight: 600,
       color: '#3C393E',
       fontSize: '16px',
       lineHeight: '22px',
-      fontStyle: 'normal',
-      fontFamily: ''
+      fontStyle: 'normal'
     }
   }, title ? title.length > 25 ? title.substr(0, 25) + '...' : title : ''), /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
@@ -1800,7 +1814,23 @@ const Toaster = () => {
   });
 };
 
-var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\n</svg>";
+const SvgTooltip = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M8 0a8 8 0 1 0 .001 16.001A8 8 0 0 0 8 0Zm.571 11.857A.143.143 0 0 1 8.43 12H7.57a.143.143 0 0 1-.142-.143V7c0-.079.064-.143.142-.143h.858c.078 0 .142.064.142.143v4.857ZM8 5.714A.857.857 0 0 1 8 4a.857.857 0 0 1 0 1.714Z",
+  fill: "#D1D1D1"
+}));
 
 var css_248z$5 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
 var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
@@ -1876,9 +1906,7 @@ const Tooltip = ({
       cursor: 'pointer'
     },
     onClick: handleShow
-  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactInfoIcon
-  })));
+  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React__default["default"].createElement(SvgTooltip, null)));
 };
 Tooltip.propTypes = {
   type: PropTypes__default["default"].string,
@@ -1936,7 +1964,7 @@ const SvgCaptchaArrowDown = ({
   fill: "#00236A"
 }));
 
-var css_248z$4 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/icons/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/icons/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/icons/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var css_248z$4 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
 var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
 styleInject(css_248z$4);
 
@@ -1962,12 +1990,13 @@ const Captcha = ({
     if (!getRange) {
       alert('Please add getRange property on Captcha component');
     }
-    if (range > 100) {
+    if (range >= 100) {
       setRangeNumber(100);
-    } else if (range < 0) {
+    } else if (range <= 0) {
       setRangeNumber(0);
     } else {
-      setRangeNumber(range);
+      const roundedRange = Math.ceil(range / 5) * 5;
+      setRangeNumber(Math.min(roundedRange, 100));
     }
   }, [range, getRange]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -2015,6 +2044,7 @@ const Captcha = ({
     }
   }), /*#__PURE__*/React__default["default"].createElement("input", {
     min: 0,
+    step: 5,
     max: 100,
     type: "range",
     value: rangeProgress,
@@ -2027,7 +2057,7 @@ const Captcha = ({
     },
     className: `
                             ${styles$3['range']}
-                            ${rangeProgress >= rangeNumber ? styles$3['range-success'] : rangeProgress < rangeNumber && rangeProgress > 0 ? styles$3['range-error'] : styles$3['range-default']}
+                            ${+rangeProgress === rangeNumber ? styles$3['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$3['range-error'] : styles$3['range-default']}
                         `,
     onInput: handleRange
   }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2038,7 +2068,7 @@ const Captcha = ({
       width: rangeProgress + '%',
       height: '4px',
       borderRadius: '2px',
-      backgroundColor: rangeProgress >= rangeNumber ? '#0DA574' : rangeProgress < rangeNumber && rangeProgress > 0 ? '#EE0000' : 'transparent',
+      backgroundColor: +rangeProgress === rangeNumber ? '#0DA574' : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? '#EE0000' : 'transparent',
       borderRadius: '2px',
       zIndex: -1
     }
@@ -2047,7 +2077,8 @@ const Captcha = ({
       position: 'absolute',
       bottom: '0px',
       height: '15px',
-      left: `calc(${rangeNumber}% - 6px)`
+      left: `calc(${rangeNumber}% - 6px)`,
+      transform: 'translate(-50% -50%)'
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgCaptchaArrowUp, null))));
 };
@@ -2090,6 +2121,797 @@ Stepper.propTypes = {
   activeSteps: PropTypes__default["default"].number
 };
 
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+
+function validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function stringify(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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
+  var uuid = (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(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return stringify(rnds);
+}
+
+const SvgListItemPdf = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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",
+  fill: "#051942"
+}));
+
+const SvgListItemJpg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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 SvgListItemPng = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  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 SvgListItemJpeg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "33",
+  height: "42",
+  viewBox: "0 0 33 42",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "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"
+}));
+
+const SvgListItemDelete = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "22",
+  height: "22",
+  viewBox: "0 0 22 22",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M7.071 3.144V.786A.786.786 0 0 1 7.857 0h6.286a.786.786 0 0 1 .786.786v2.358h6.285a.786.786 0 0 1 0 1.572H.786a.786.786 0 1 1 0-1.572H7.07Zm1.572 0h4.714V1.573H8.643v1.571ZM3.143 22a.786.786 0 0 1-.786-.786V4.716h17.286v16.498a.786.786 0 0 1-.786.786H3.143Zm5.5-4.714a.786.786 0 0 0 .786-.786V8.644a.786.786 0 0 0-1.572 0V16.5a.785.785 0 0 0 .786.786Zm4.714 0a.785.785 0 0 0 .786-.786V8.644a.785.785 0 0 0-1.572 0V16.5a.785.785 0 0 0 .786.786Z",
+  fill: "#051942"
+}));
+
+const FileItem = /*#__PURE__*/React__default["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] = React.useState(_ => _);
+  const [t, setT] = React.useState(_ => _);
+  const [progress, setProgress] = React.useState(7);
+  const handleRemoveItem = id => {
+    removeFile(id);
+  };
+  React.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);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (progress > 84) {
+      clearInterval(i);
+    }
+  }, [progress]);
+  React.useEffect(() => {
+    if (status === 'success') {
+      setProgress(100);
+      clearInterval(i);
+    }
+    if (status === 'failed') {
+      setProgress(0);
+      clearInterval(i);
+    }
+  }, [status]);
+  React.useEffect(() => {
+    if (check !== '') {
+      setT(setTimeout(() => {
+        removeFile(uuid);
+      }, 3500));
+    }
+  }, [check]);
+  return /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      margin: '0px',
+      color: listItemErrorColor,
+      fontSize: listItemErrorSize
+    }
+  }, name), /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      margin: '0px',
+      color: listItemErrorColor,
+      fontSize: listItemErrorSize
+    }
+  }, check)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '32px'
+    }
+  }, fileFormat === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      height: '40px',
+      margin: '0px 14px',
+      alignItems: 'flex-end',
+      width: 'calc(100% - 82px)'
+    }
+  }, /*#__PURE__*/React__default["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["default"].createElement("p", {
+    style: {
+      margin: '0px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      maxWidth: 'calc(100% - 56px)'
+    }
+  }, name), /*#__PURE__*/React__default["default"].createElement("span", null, progress, " %")), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      left: '0px',
+      bottom: '5px',
+      width: '100%',
+      height: '4px',
+      borderRadius: '10px',
+      backgroundColor: progressTrackColor
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      height: '100%',
+      borderRadius: '10px',
+      width: status === 'failed' ? '100%' : progress + '%',
+      backgroundColor: status === 'success' ? progressSuccessColor : status === 'failed' ? progressFailedColor : progressLoadingColor
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '22px',
+      cursor: 'pointer'
+    },
+    onClick: () => handleRemoveItem(uuid)
+  }, /*#__PURE__*/React__default["default"].createElement(SvgListItemDelete, null))));
+});
+
+const SvgUpload = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("rect", {
+  width: 26,
+  height: 26,
+  rx: 6,
+  fill: "#FBFBFB"
+}), /*#__PURE__*/React__namespace.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,
+  ...props
+}) => /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("rect", {
+  x: 0.5,
+  y: 0.5,
+  width: 25,
+  height: 25,
+  rx: 5.5,
+  stroke: "#D1D1D1"
+}), /*#__PURE__*/React__namespace.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: "#E00"
+}));
+
+const NewFile = ({
+  or,
+  size,
+  name,
+  color,
+  label,
+  width,
+  weight,
+  height,
+  radius,
+  change,
+  border,
+  upload,
+  maxSize,
+  disabled,
+  multiple,
+  required,
+  errorSize,
+  labelSize,
+  removeFile,
+  labelColor,
+  errorColor,
+  filesArray,
+  putFileHere,
+  borderColor,
+  uploadColor,
+  defaultData,
+  errorMessage,
+  fileSizeText,
+  progressColor,
+  fileExtensions,
+  listItemHeight,
+  backgroundColor,
+  deleteComponent,
+  listItemPadding,
+  progressFontSize,
+  borderHoverColor,
+  listItemErrorSize,
+  progressTrackColor,
+  fileAreaImageWidth,
+  listItemErrorColor,
+  labelRequiredColor,
+  progressFailedColor,
+  fileAreaImageHeight,
+  progressSuccessColor,
+  progressLoadingColor,
+  hiddenBackgroundColor,
+  extentionsRowMarginTop,
+  listItemBackgroundColor,
+  listItemBackgroundErrorColor
+}) => {
+  const ref = React.useRef(null);
+  const inpRef = React.useRef(null);
+  const memoizedItems = React.useMemo(() => filesArray, [filesArray]);
+  const [error, setError] = React.useState('');
+  const [isHover, setIsHover] = React.useState(false);
+  const [singleFile, setSingleFile] = React.useState(null);
+  const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
+  const configStyles = compereConfigs();
+  const handleRemoveComponent = () => {
+    const node = ReactDOM__default["default"].findDOMNode(ref.current);
+    const parent = node.parentNode;
+    parent.removeChild(node);
+  };
+  const handleRemoveFile = () => {
+    setImage(null);
+    removeFile(singleFile);
+  };
+  const handleChange = e => {
+    const file = e.target.files;
+    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: 'ֆայլի սխալ ֆորմատ'
+              });
+            }
+          } else {
+            change({
+              file: file[ix],
+              uuid: v4(),
+              check: 'առավելագույն ծավալ'
+            });
+          }
+        }
+      }
+      if (file.length === 0 && memoizedItems.length === 0) {
+        setError('Ֆայլը ընտրված չէ');
+      }
+    } 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('ֆայլի սխալ ֆորմատ');
+          }
+        } else {
+          setImage(null);
+          setError('առավելագույն ծավալ');
+        }
+      }
+      if (file.length === 0) {
+        setImage(null);
+        setError('Ֆայլը ընտրված չէ');
+      }
+    }
+  };
+  const handleClick = () => {
+    if (!image) {
+      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);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  const handleStopPropagation = e => {
+    e.stopPropagation();
+  };
+  React.useEffect(() => {
+    if (!multiple && defaultData) {
+      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 (multiple) {
+      setSingleFile(null);
+    }
+  }, [multiple, filesArray && filesArray.length, defaultData]);
+  React.useEffect(() => {
+    if (errorMessage) {
+      setError(errorMessage);
+    } else {
+      setError('');
+    }
+  }, [errorMessage]);
+  React.useEffect(() => {
+    if (!change) {
+      alert('Please add change prop on File component');
+    }
+    if (!removeFile) {
+      alert('Please add removeFile prop on File component');
+    }
+  }, [change, removeFile]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: ref,
+    style: {
+      width: width ? width : configStyles.File.width
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      marginBottom: '6px',
+      alignItems: 'center',
+      justifyContent: label ? 'space-between' : 'flex-end'
+    }
+  }, label && /*#__PURE__*/React__default["default"].createElement("label", {
+    style: {
+      color: labelColor ? labelColor : configStyles.File.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.File.labelSize
+    }
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", {
+    style: {
+      color: labelRequiredColor ? labelRequiredColor : configStyles.File.labelRequiredColor
+    }
+  }, "*")), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: handleRemoveComponent
+  }, /*#__PURE__*/React__default["default"].createElement(SvgDeleteComponent, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative',
+      boxSizing: 'border-box',
+      justifyContent: 'center',
+      cursor: !disabled ? 'pointer' : 'not-allowed',
+      height: height ? height : configStyles.File.height,
+      border: border ? border : configStyles.File.border,
+      borderRadius: radius ? radius : configStyles.File.radius,
+      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["default"].createElement("input", {
+    hidden: true,
+    name: name,
+    type: "file",
+    ref: inpRef,
+    disabled: disabled,
+    multiple: multiple,
+    onChange: handleChange
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      textAlign: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      color: color ? color : configStyles.File.color,
+      fontSize: size ? size : configStyles.File.size,
+      fontWeight: weight ? weight : configStyles.File.weight
+    }
+  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : /*#__PURE__*/React__default["default"].createElement("img", {
+    src: image,
+    style: {
+      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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      margin: '0px'
+    }
+  }, putFileHere ? putFileHere : configStyles.File.putFileHere, /*#__PURE__*/React__default["default"].createElement("br", null), or ? or : configStyles.File.or, " ", /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: uploadColor ? uploadColor : configStyles.File.uploadColor
+    }
+  }, upload ? upload : configStyles.File.upload))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginTop: extentionsRowMarginTop ? extentionsRowMarginTop : configStyles.File.extentionsRowMarginTop
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      margin: '0px'
+    }
+  }, fileSizeText ? fileSizeText : configStyles.File.fileSizeText, " ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      zIndex: '1',
+      width: '100%',
+      height: '100%',
+      padding: '10px',
+      cursor: 'default',
+      boxSizing: 'border-box',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-end',
+      borderRadius: radius ? radius : configStyles.File.radius,
+      display: !multiple && !disabled && image && !error && isHover ? 'flex' : 'none',
+      backgroundColor: hiddenBackgroundColor ? hiddenBackgroundColor : configStyles.File.hiddenBackgroundColor
+    },
+    onClick: handleStopPropagation
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: handleRemoveFile
+  }, /*#__PURE__*/React__default["default"].createElement(SvgRemoveFile, null)))), error ? /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      marginTop: '6px',
+      display: 'inline-block',
+      color: errorColor ? errorColor : configStyles.File.errorColor,
+      fontSize: errorSize ? errorSize : configStyles.File.errorSize
+    }
+  }, error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
+    return /*#__PURE__*/React__default["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__default["default"].string,
+  size: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  width: PropTypes__default["default"].string,
+  color: PropTypes__default["default"].string,
+  height: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  radius: PropTypes__default["default"].string,
+  border: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
+  upload: PropTypes__default["default"].string,
+  weight: PropTypes__default["default"].number,
+  maxSize: PropTypes__default["default"].number,
+  errorSize: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
+  putFileHere: PropTypes__default["default"].string,
+  borderColor: PropTypes__default["default"].string,
+  uploadColor: PropTypes__default["default"].string,
+  defaultData: PropTypes__default["default"].object,
+  errorMessage: PropTypes__default["default"].string,
+  fileSizeText: PropTypes__default["default"].string,
+  progressColor: PropTypes__default["default"].string,
+  deleteComponent: PropTypes__default["default"].bool,
+  listItemHeight: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  change: PropTypes__default["default"].func.isRequired,
+  listItemPadding: PropTypes__default["default"].string,
+  progressFontSize: PropTypes__default["default"].string,
+  borderHoverColor: PropTypes__default["default"].string,
+  listItemErrorSize: PropTypes__default["default"].string,
+  labelRequiredColor: PropTypes__default["default"].string,
+  progressTrackColor: PropTypes__default["default"].string,
+  fileAreaImageWidth: PropTypes__default["default"].string,
+  listItemErrorColor: PropTypes__default["default"].string,
+  removeFile: PropTypes__default["default"].func.isRequired,
+  fileAreaImageHeight: PropTypes__default["default"].string,
+  progressFailedColor: PropTypes__default["default"].string,
+  progressSuccessColor: PropTypes__default["default"].string,
+  progressLoadingColor: PropTypes__default["default"].string,
+  hiddenBackgroundColor: PropTypes__default["default"].string,
+  extentionsRowMarginTop: PropTypes__default["default"].string,
+  listItemBackgroundColor: PropTypes__default["default"].string,
+  listItemBackgroundErrorColor: PropTypes__default["default"].string,
+  filesArray: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+  fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
+};
+NewFile.defaultProps = {
+  maxSize: 50,
+  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
+};
+
 var css_248z$2 = "textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
 styleInject(css_248z$2);
 
@@ -2112,18 +2934,24 @@ const Textarea = ({
   boxSizing,
   maxLength,
   labelSize,
+  errorSize,
   labelColor,
+  errorColor,
   borderColor,
   labelWeight,
   placeholder,
   labelDisplay,
+  errorMesaage,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
+  showCharacterCount,
   labelRequiredColor
 }) => {
+  const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
+  const [innerValue, setInnerValue] = React.useState('');
   const configStyles = compereConfigs();
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -2137,6 +2965,25 @@ const Textarea = ({
   const handleBlur = () => {
     setIsFocus(false);
   };
+  const handleChange = e => {
+    const value = e.target.value;
+    onChange(value);
+    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('');
+      }
+    }
+  };
   React.useEffect(() => {
     if (value === undefined) {
       alert('Please add value prop on Textarea component');
@@ -2144,8 +2991,26 @@ const Textarea = ({
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+    setInnerValue(value);
   }, [value, onChange]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
+  React.useEffect(() => {
+    if (errorMesaage) {
+      setError(errorMesaage);
+    } else {
+      setError('');
+    }
+  }, [errorMesaage]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: width ? width : configStyles.TEXTAREA.width
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: label ? 'space-between' : 'flex-end'
+    }
+  }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
       fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
@@ -2156,12 +3021,17 @@ const Textarea = ({
     style: {
       color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor
     }
-  }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("textarea", {
+  }, "*")) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
+      color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
+    }
+  }, maxLength - value.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
+    style: {
+      width: '100%',
       outline: 'none',
       overflow: 'auto',
       fontSize: size ? size : configStyles.TEXTAREA.size,
-      width: width ? width : configStyles.TEXTAREA.width,
       height: height ? height : configStyles.TEXTAREA.height,
       border: border ? border : configStyles.TEXTAREA.border,
       padding: padding ? padding : configStyles.TEXTAREA.padding,
@@ -2172,17 +3042,24 @@ 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,
     onBlur: handleBlur,
-    onChange: onChange,
     onFocus: handleFocus,
+    onChange: handleChange,
     placeholder: placeholder,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    value: maxLength ? value.length > maxLength ? value.substr(0, maxLength) : value : configStyles.TEXTAREA.maxLength ? value.length > configStyles.TEXTAREA.maxLength ? value.substr(0, configStyles.TEXTAREA.maxLength) : value : value
-  }));
+    onMouseLeave: handleMouseLeave
+  }), error ? /*#__PURE__*/React__default["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__default["default"].string,
@@ -2207,6 +3084,7 @@ Textarea.propTypes = {
   placeholder: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
+  showCharacterCount: PropTypes__default["default"].bool,
   value: PropTypes__default["default"].string.isRequired,
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
@@ -2220,7 +3098,7 @@ styleInject(css_248z$1);
 
 // import styles from "./pagination.module.scss";
 
-const Dots$1 = "...";
+const Dots = "...";
 const range = (start, end) => {
   const length = end - start + 1;
   return Array.from({
@@ -2250,29 +3128,29 @@ const PaginationRange = ({
     if (!shouldShowLeftDots && shouldShowRightDots) {
       let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
       let leftRange = range(1, leftItemCount);
-      return [...leftRange, Dots$1, totalPageCount];
+      return [...leftRange, Dots, totalPageCount];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
       let rightItemCount = 0;
       currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
       let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-      return [firstPageIndex, Dots$1, ...rightRange];
+      return [firstPageIndex, Dots, ...rightRange];
     }
     if (shouldShowLeftDots && shouldShowRightDots) {
       let middleRange = range(leftSiblingIndex, rightSiblingIndex);
-      return [firstPageIndex, Dots$1, ...middleRange, Dots$1, lastPageIndex];
+      return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
     }
   }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
   return paginationRange;
 };
 
-const Dots = ({
+const SvgDots = ({
   title,
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "11",
+  height: "3",
   viewBox: "0 0 11 3",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -2280,17 +3158,17 @@ const Dots = ({
 }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M0.230125 1.13624C0.230125 0.741577 0.326125 0.464244 0.518125 0.304244C0.710125 0.144244 0.939458 0.064244 1.20613 0.064244C1.48346 0.064244 1.71813 0.144244 1.91013 0.304244C2.11279 0.464244 2.21413 0.741577 2.21413 1.13624C2.21413 1.52024 2.11279 1.79758 1.91013 1.96824C1.71813 2.13891 1.48346 2.22424 1.20613 2.22424C0.939458 2.22424 0.710125 2.13891 0.518125 1.96824C0.326125 1.79758 0.230125 1.52024 0.230125 1.13624ZM4.51138 1.13624C4.51138 0.741577 4.60738 0.464244 4.79938 0.304244C4.99138 0.144244 5.22071 0.064244 5.48738 0.064244C5.76471 0.064244 5.99938 0.144244 6.19138 0.304244C6.39404 0.464244 6.49538 0.741577 6.49538 1.13624C6.49538 1.52024 6.39404 1.79758 6.19138 1.96824C5.99938 2.13891 5.76471 2.22424 5.48738 2.22424C5.22071 2.22424 4.99138 2.13891 4.79938 1.96824C4.60738 1.79758 4.51138 1.52024 4.51138 1.13624ZM8.79263 1.13624C8.79263 0.741577 8.88863 0.464244 9.08063 0.304244C9.27263 0.144244 9.50196 0.064244 9.76863 0.064244C10.046 0.064244 10.2806 0.144244 10.4726 0.304244C10.6753 0.464244 10.7766 0.741577 10.7766 1.13624C10.7766 1.52024 10.6753 1.79758 10.4726 1.96824C10.2806 2.13891 10.046 2.22424 9.76863 2.22424C9.50196 2.22424 9.27263 2.13891 9.08063 1.96824C8.88863 1.79758 8.79263 1.52024 8.79263 1.13624Z",
+  d: "M.23 1.136C.23.742.326.464.518.304c.192-.16.421-.24.688-.24.277 0 .512.08.704.24.203.16.304.438.304.832 0 .384-.101.662-.304.832-.192.17-.427.256-.704.256a1 1 0 0 1-.688-.256C.326 1.798.23 1.52.23 1.136Zm4.281 0c0-.394.096-.672.288-.832.192-.16.422-.24.688-.24.278 0 .512.08.704.24.203.16.304.438.304.832 0 .384-.101.662-.304.832-.192.17-.426.256-.704.256a1 1 0 0 1-.688-.256c-.192-.17-.288-.448-.288-.832Zm4.282 0c0-.394.096-.672.288-.832.192-.16.421-.24.688-.24.277 0 .512.08.704.24.202.16.304.438.304.832 0 .384-.102.662-.304.832-.192.17-.427.256-.704.256a1 1 0 0 1-.688-.256c-.192-.17-.288-.448-.288-.832Z",
   fill: "#3C393E"
 }));
 
-const SvgNextArrow = ({
+const SvgNextarrow = ({
   title,
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "1em",
-  height: "1em",
+  width: "6",
+  height: "12",
   viewBox: "0 0 6 12",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
@@ -2298,7 +3176,7 @@ const SvgNextArrow = ({
 }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M0.851445 11.9985C0.652853 11.9988 0.460393 11.9292 0.307477 11.8017C0.221413 11.7299 0.150271 11.6418 0.0981246 11.5423C0.0459785 11.4428 0.0138536 11.3339 0.0035897 11.2219C-0.00667418 11.1098 0.00512483 10.9969 0.0383107 10.8895C0.0714965 10.7821 0.125416 10.6823 0.196984 10.5958L4.00476 6.01173L0.332976 1.41906C0.262375 1.33158 0.209651 1.23092 0.177836 1.12286C0.146021 1.01481 0.135741 0.901501 0.147589 0.789439C0.159437 0.677378 0.193177 0.568777 0.246871 0.469879C0.300566 0.370982 0.373156 0.283737 0.460468 0.213159C0.548409 0.135301 0.651394 0.0765731 0.76296 0.0406621C0.874526 0.00475112 0.992266 -0.00756759 1.10879 0.00447845C1.22531 0.0165245 1.3381 0.0526755 1.44008 0.110663C1.54206 0.16865 1.63102 0.247221 1.70139 0.341446L5.80665 5.47292C5.93166 5.62596 6 5.81791 6 6.01601C6 6.2141 5.93166 6.40606 5.80665 6.55909L1.5569 11.6906C1.47164 11.7941 1.36333 11.8759 1.24075 11.9294C1.11818 11.9829 0.984807 12.0065 0.851445 11.9985Z",
+  d: "M.851 11.998a.847.847 0 0 1-.847-.776.86.86 0 0 1 .193-.626l3.808-4.584L.333 1.419A.857.857 0 0 1 .46.213a.849.849 0 0 1 1.241.128l4.106 5.132a.859.859 0 0 1 0 1.086l-4.25 5.132a.85.85 0 0 1-.706.307Z",
   fill: "#3C393E"
 }));
 
@@ -2362,8 +3240,8 @@ const Pagination = ({
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null)), paginationRange.map((pageNumber, id) => {
-    if (pageNumber === Dots$1) {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
+    if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default["default"].createElement("li", {
         key: id,
@@ -2372,16 +3250,16 @@ const Pagination = ({
         disabled: currentPageIndex === 0 ? true : false
       }, id < currentPageIndex ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React__default["default"].createElement(Dots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(SvgDots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`,
         style: {
           transform: 'rotate(180deg)'
         }
-      }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React__default["default"].createElement(Dots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
+      }, /*#__PURE__*/React__default["default"].createElement(SvgDots, null)), /*#__PURE__*/React__default["default"].createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null))));
+      }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))));
     }
     return /*#__PURE__*/React__default["default"].createElement("li", {
       onClick: () => onPageChange(pageNumber),
@@ -2392,7 +3270,7 @@ const Pagination = ({
     onClick: onNext,
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNextArrow, null)));
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)));
 };
 Pagination.propTypes = {
   offset: PropTypes__default["default"].number,
@@ -2544,6 +3422,7 @@ Autocomplate.defaultProps = {
 
 const NewAutocomplete = ({
   label,
+  change,
   options,
   getItem,
   required,
@@ -2617,6 +3496,7 @@ const NewAutocomplete = ({
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
   const [innerValue, setInnerValue] = React.useState('');
+  const [innerOptions, setInnerOptions] = React.useState([]);
   const configStyles = compereConfigs();
   const showOption = styled.keyframes`
         100% {
@@ -2650,13 +3530,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["default"].createElement(React__default["default"].Fragment, null, show && options && options.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  const optionList = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, show && innerOptions ? innerOptions.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
       width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
@@ -2679,9 +3564,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["default"].createElement("p", {
-      key: `${item}_${index}`,
+      key: item.id,
       onMouseEnter: handleRowMouseEnter,
       onMouseLeave: handleRowMouseLeave,
       onClick: () => handleClick(item),
@@ -2701,40 +3586,37 @@ const NewAutocomplete = ({
         marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
-    }, item.value);
-  }) : /*#__PURE__*/React__default["default"].createElement("p", {
+    }, item.name);
+  }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default["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
     }
-  }, "\u0546\u0574\u0561\u0576 \u057F\u057E\u0575\u0561\u056C \u0561\u057C\u056F\u0561 \u0579\u0567") : /*#__PURE__*/React__default["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
-    }
-  }, innerValue.length < searchCount && `Լրացնել առնվազն ${searchCount} նիշ`))));
+  }, innerValue.length >= searchCount ? 'Նման տվյալ առկա չէ' : `Լրացնել առնվազն ${searchCount} նիշ`) : '' : '');
   React.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]);
+  React.useEffect(() => {
+    if (!change) {
+      alert('Please add change prop on New Autocomplete component');
+    }
+  }, [change]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -2742,6 +3624,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
     }
@@ -2753,7 +3636,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["default"].createElement("input", _extends({
     type: "text",
@@ -2762,11 +3646,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,
@@ -2777,7 +3662,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,
@@ -2785,8 +3669,11 @@ const NewAutocomplete = ({
     }
   }, props)), errorMessage ? /*#__PURE__*/React__default["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));
 };
@@ -2809,6 +3696,7 @@ NewAutocomplete.propTypes = {
   contentPosition: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
   contentTopColor: PropTypes__default["default"].string,
+  change: PropTypes__default["default"].func.isRequired,
   contentDirection: PropTypes__default["default"].string,
   contentTopWeight: PropTypes__default["default"].number,
   contentTopRadius: PropTypes__default["default"].string,
@@ -2874,6 +3762,7 @@ exports.Input = Input;
 exports.InputTypes = InputTypes;
 exports.Modal = Modal;
 exports.NewAutocomplete = NewAutocomplete;
+exports.NewFile = NewFile;
 exports.Pagination = Pagination;
 exports.Radio = Radio;
 exports.Select = Select;