@xaypay/tui 0.0.60 → 0.0.62

package/dist/index.es.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, createRef, useMemo } from 'react';
+import * as React from 'react';
+import React__default, { useState, useEffect, useRef, createRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styled, { keyframes, css } from 'styled-components';
@@ -97,46 +98,46 @@ const File = ({
     setFileName('no selected file');
     document.querySelector(`.${name}`).value = "";
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: `${styles$b['file-form-title']} ile-form-title-rem`
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")), /*#__PURE__*/React.createElement("div", {
+  }, "*")), /*#__PURE__*/React__default.createElement("div", {
     className: classnames(`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     onChange: e => console.log(e),
     className: `${styles$b['file-form']} file-form-rem ${errorMessage ? styles$b['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement("input", {
     hidden: true,
     type: "file",
     className: name,
     disabled: disabled,
     onChange: e => handleCheckFile(e)
-  }), image ? /*#__PURE__*/React.createElement("div", {
+  }), image ? /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$b['upload-file-content']} upload-file-content-rem`
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: fileName
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: `${styles$b['upload-info']} upload-info-rem`
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
-  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("span", {
+  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default.createElement("span", {
     className: `${styles$b['upload-info-size']} upload-info-size-rem`
-  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React.createElement("div", {
+  }, "\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", {
     className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-delete"
-  })), errorMessage || error ? /*#__PURE__*/React.createElement("span", {
+  })), errorMessage || error ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: 'red'
     }
@@ -226,11 +227,11 @@ const Checkbox = ({
     value: 'value',
     label: 'label'
   } : '';
-  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
-    return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, data.map(element => {
+    return /*#__PURE__*/React__default.createElement("label", {
       className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
       key: element.value
-    }, /*#__PURE__*/React.createElement("input", _extends({
+    }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "checkbox",
       className: classProps,
       disabled: disabled,
@@ -241,9 +242,9 @@ const Checkbox = ({
       onChange: handleChange,
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
-    }, props)), /*#__PURE__*/React.createElement("span", {
+    }, props)), /*#__PURE__*/React__default.createElement("span", {
       className: `${styles$9["checkmark"]} checkmark-rem`
-    }), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
+    }), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
       className: styles$9.labelCheckbox,
       for: element[keyNames.id]
     }, element[keyNames.label]) : "");
@@ -285,26 +286,26 @@ const Table = ({
   config.isCheckbox && config.isCheckbox.showCheckbox == undefined ? config.isCheckbox.showCheckbox = () => {
     return true;
   } : "";
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$a["table-wrap"]} table-wrap-rem`
   }, config.isHeader && hearderData.map((header, key) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-top"]} table-top-rem`,
       key: key
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-items"]} table-items-rem`
     }, header));
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$a["table-bottom"]} table-bottom-rem`
   }, tbodyData.map((item, key) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-bottom-inner"]} table-bottom-inner-rem`,
       key: key
     }, keyNames.map((keyName, keyNameKey) => {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React__default.createElement("div", {
         className: `${styles$a["table-items"]} table-items-rem`,
         key: keyNameKey
-      }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React.createElement(Checkbox, {
+      }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React__default.createElement(Checkbox, {
         onClick: e => {
           const id = e.target.id;
           const checkedValue = e.target.checked;
@@ -314,15 +315,15 @@ const Table = ({
           config.isCheckbox.onChange(ch);
         },
         jsonData: `[{"value":"", "name":"", "label":"", "id":${item.id}, "checked":${checked.indexOf(item.id) > -1 ? true : false}}]`
-      }), typeof keyName === "string" ? item[keyName] : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+      }), typeof keyName === "string" ? item[keyName] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("i", {
         className: keyName.icon
       }), item[keyName.name]));
-    }), actions && /*#__PURE__*/React.createElement("div", {
+    }), actions && /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-items"]} table-items-rem`
     }, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React__default.createElement("div", {
         key: key
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: action.icon,
         onClick: action.click ? action.click : () => {}
       }, action.icon));
@@ -428,7 +429,7 @@ const Typography = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const tagT = /*#__PURE__*/React.createElement(variant, {
+  const tagT = /*#__PURE__*/React__default.createElement(variant, {
     style: {
       border: border ? border : configStyles.TYPOGRAPHY.border,
       cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
@@ -488,51 +489,51 @@ const Modal = ({
 }) => {
   classnames(styles$8.modal, className);
   const [select, setSelect] = useState(selected);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-wrap"]} modal-wrap-rem`,
     onClick: () => setShow(false)
-  }, type == "content" ? /*#__PURE__*/React.createElement("div", {
+  }, type == "content" ? /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-top"]} modal-top-rem`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-title"]} modal-title-rem`
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: TypographyType.p,
     color: "#00236A"
-  }, headerText)), /*#__PURE__*/React.createElement("div", {
+  }, headerText)), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-close"
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-section"]} modal-section-rem`
-  }, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
+  }, children)) : type == "images" ? /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-close"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-section"]} modal-section-rem`
-  }, /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
+  }, /*#__PURE__*/React__default.createElement("div", null, select > 1 ? /*#__PURE__*/React__default.createElement("h1", {
     onClick: () => setSelect(select - 1)
   }, "-") : null, data.map(elem => {
     if (select == elem.id) {
-      return /*#__PURE__*/React.createElement("img", {
+      return /*#__PURE__*/React__default.createElement("img", {
         width: "600px",
         key: elem.id,
         src: elem.url
       });
     }
-  }), select < data.length ? /*#__PURE__*/React.createElement("h1", {
+  }), select < data.length ? /*#__PURE__*/React__default.createElement("h1", {
     onClick: () => {
       setSelect(select + 1);
     }
@@ -634,9 +635,9 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7["input-wrap"]}`
-  }, label ? /*#__PURE__*/React.createElement("label", {
+  }, label ? /*#__PURE__*/React__default.createElement("label", {
     className: `${styles$7["input-title"]}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
@@ -646,11 +647,11 @@ const Input = ({
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
     }
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")) : '', /*#__PURE__*/React.createElement("div", {
+  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
@@ -659,7 +660,7 @@ const Input = ({
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React.createElement("div", {
+  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default.createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
     onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
     onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
@@ -673,7 +674,7 @@ const Input = ({
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React.createElement("div", {
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       pointerEvents: disabled ? 'none' : 'auto',
       fontSize: size ? size : configStyles.INPUT.size,
@@ -688,7 +689,7 @@ const Input = ({
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, "+374") : '', /*#__PURE__*/React.createElement("input", _extends({}, props, {
+  }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
     value: value,
     className: classProps,
     onChange: handleChange,
@@ -710,7 +711,7 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
       color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
-  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
     onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
     onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
@@ -724,7 +725,7 @@ const Input = ({
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React.createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React__default.createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -807,11 +808,11 @@ const Radio = ({
 }) => {
   const classProps = classnames(styles$6.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, parseData.map((element, id) => {
-    return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, parseData.map((element, id) => {
+    return /*#__PURE__*/React__default.createElement("label", {
       className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
       key: element.value
-    }, /*#__PURE__*/React.createElement("input", _extends({
+    }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "radio",
       className: classProps,
       disabled: disabled,
@@ -819,9 +820,9 @@ const Radio = ({
       defaultChecked: id === 0 ? defaultChecked : "",
       value: value ? value : element.value,
       name: name ? name : element.name
-    }, props)), /*#__PURE__*/React.createElement("span", {
+    }, props)), /*#__PURE__*/React__default.createElement("span", {
       className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
-    }), element.label ? /*#__PURE__*/React.createElement("span", {
+    }), element.label ? /*#__PURE__*/React__default.createElement("span", {
       className: styles$6.labelRadio
     }, label ? label : element.label) : "");
   }));
@@ -884,7 +885,7 @@ const Button = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React__default.createElement("button", _extends({
     style: {
       fontSize: size ? size : configStyles.BUTTON.size,
       fontFamily: font ? font : configStyles.BUTTON.font,
@@ -944,13 +945,13 @@ var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\
 const SelectCheckbox = ({
   checked
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginRight: '9px'
     }
-  }, checked ? /*#__PURE__*/React.createElement("img", {
+  }, checked ? /*#__PURE__*/React__default.createElement("img", {
     src: ReactCheckboxChecked
-  }) : /*#__PURE__*/React.createElement("img", {
+  }) : /*#__PURE__*/React__default.createElement("img", {
     src: ReactCheckbox
   }));
 };
@@ -958,11 +959,43 @@ SelectCheckbox.propTypes = {
   checked: PropTypes.bool
 };
 
-var ReactArrowIcon = "<svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 15 9",
+  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: "M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z",
+  fill: "#3C393E"
+}));
 
-var ReactCloseIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgCloseIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 14 14",
+  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: "m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z",
+  fill: "#3C393E"
+}));
 
-var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
 var styles$5 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
 styleInject(css_248z$5);
 
@@ -1044,22 +1077,24 @@ const Select = ({
       ...option
     };
     delete checkedOption.checked;
-    onChange(checkedOption);
     if (!multiple) {
       setOpened(!opened);
       setNewSelected([option]);
+      onChange(checkedOption);
     } else {
       const indexOfObject = newSelected.findIndex(obj => {
-        return obj.value === option.value;
+        return obj[keyNames.name] === option[keyNames.name];
       });
       if (indexOfObject === -1) {
         option.checked = true;
         setNewSelected(prev => {
           return [...prev, option];
         });
+        onChange([...newSelected, option]);
       } else {
         option.checked = false;
         setNewSelected([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)]);
+        onChange([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)]);
       }
     }
   };
@@ -1077,6 +1112,14 @@ const Select = ({
     e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
     e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
   };
+  const isObjectEmpty = obj => {
+    for (var key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        return false;
+      }
+    }
+    return true;
+  };
   useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -1091,7 +1134,7 @@ const Select = ({
     }
   }, [opened]);
   useEffect(() => {
-    selected && selected.length > 0 && setNewSelected(selected);
+    selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
@@ -1099,7 +1142,7 @@ const Select = ({
         item.checked = false;
         if (selected && selected.length > 0) {
           selected.map(innerItem => {
-            if (innerItem.value === item.value) {
+            if (innerItem[keyNames.name] === item[keyNames.name]) {
               item.checked = true;
             }
           });
@@ -1109,9 +1152,9 @@ const Select = ({
       setExistOptions(modifiedOptions);
     }
   }, [options, multiple, selected]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
-  }, label ? /*#__PURE__*/React.createElement("label", {
+  }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.SELECT.labelColor,
       fontWeight: labelWeight ? labelWeight : configStyles.SELECT.labelWeight,
@@ -1121,15 +1164,15 @@ const Select = ({
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
     }
-  }, label, required && /*#__PURE__*/React.createElement("sup", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")) : "", /*#__PURE__*/React.createElement("div", {
+  }, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
     ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$5['select-content']
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
       minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
@@ -1147,7 +1190,7 @@ const Select = ({
     onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
     className: `${styles$5['select-content-top']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['select-content-top-text']}`,
     style: {
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
@@ -1160,26 +1203,20 @@ const Select = ({
         return newSelected[index][keyNames.name];
       }
     }
-  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React.createElement("div", {
+  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['select-content-top-icon']}`
-  }, multiple && newSelected.length > 1 && /*#__PURE__*/React.createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React.createElement("img", {
-    src: ReactCloseIcon,
-    alt: "icon"
-  })), /*#__PURE__*/React.createElement("div", {
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default.createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$5['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : /*#__PURE__*/React.createElement("img", {
-    src: ReactArrowIcon,
-    alt: "icon"
-  })))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
+  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
@@ -1187,10 +1224,10 @@ const Select = ({
       top: parseFloat(selectedMinHeight ? selectedMinHeight.substring(0, selectedMinHeight.length - 2) : configStyles.SELECT.selectedMinHeight.substring(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$5['select-content-bottom']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['select-content-bottom-inner']}`
   }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       key: i,
       disabled: true,
       defaultValue: option[keyNames.id],
@@ -1210,10 +1247,10 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, multiple && multipleCheckbox ? /*#__PURE__*/React.createElement(SelectCheckbox, {
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SelectCheckbox, {
       checked: option.checked
     }) : '', option[keyNames.name]);
-  }))) : null)), errorMessage ? /*#__PURE__*/React.createElement("span", {
+  }))) : null)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: errorColor ? errorColor : configStyles.SELECT.errorColor,
       fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize
@@ -1312,7 +1349,7 @@ const Tooltip = ({
     tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setCheckTooltipWidth(tooltipRef.current.clientWidth);
     tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setCheckTooltipHeight(tooltipRef.current.clientHeight);
   }, [text, tooltipRef, checkTooltipWidth, checkTooltipHeight]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['tooltip-block']}`,
     style: {
       width: width ? width : configStyles.TOOLTIP.width,
@@ -1320,7 +1357,7 @@ const Tooltip = ({
       borderRadius: radius ? radius : configStyles.TOOLTIP.radius,
       backgroundColor: backgroundColor ? backgroundColor : configStyles.TOOLTIP.backgroundColor
     }
-  }, showTooltip ? /*#__PURE__*/React.createElement("div", {
+  }, showTooltip ? /*#__PURE__*/React__default.createElement("div", {
     ref: tooltipRef,
     className: classProps,
     style: {
@@ -1330,27 +1367,27 @@ const Tooltip = ({
       top: type === 'top' ? `calc(-${checkTooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${checkTooltipHeight / 2}px)` : '0px',
       left: type === 'top' || type === 'bottom' ? `calc(50% - ${checkTooltipWidth / 2}px)` : type === 'left' ? `-${checkTooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['tooltip-rel']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['tooltip-decor']}`,
     style: {
       backgroundColor: tooltipBackgroundColor ? tooltipBackgroundColor : configStyles.TOOLTIP.tooltipBackgroundColor,
       left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
       top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React__default.createElement("p", {
     style: {
       color: color ? color : configStyles.TOOLTIP.color,
       fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
       fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
     }
-  }, text))) : '', /*#__PURE__*/React.createElement("div", {
+  }, text))) : '', /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleShow
-  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React.createElement("img", {
+  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React__default.createElement("img", {
     src: ReactInfoIcon
   })));
 };
@@ -1408,27 +1445,27 @@ const Captcha = ({
   function sliderChange(e) {
     setRight(rangeCount == e.target.value ? true : false);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.main
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.range
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-vector-down"
-  })), /*#__PURE__*/React.createElement("input", {
+  })), /*#__PURE__*/React__default.createElement("input", {
     type: "range",
     className: styles$3.slider,
     onClick: right ? onclick : null,
     onInput: sliderInput,
     onMouseUp: sliderChange
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.selector
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.selectBtn
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.progressBar
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.range
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-vector-up"
   }))));
 };
@@ -1452,15 +1489,15 @@ const Stepper = ({
   activeSteps
 }) => {
   classnames(className, 'stepper-inner-rem');
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$2['stepper-container']} stepper-container-rem`
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
-      steppers.push( /*#__PURE__*/React.createElement("div", {
+      steppers.push( /*#__PURE__*/React__default.createElement("div", {
         className: classnames(`${step <= activeSteps ? styles$2.activeRing : styles$2.bigRing}`),
         key: step
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: classnames(`${step <= activeSteps ? styles$2.smallActiveRing : styles$2.smallRing}`)
       }, step <= activeSteps ? step : "")));
     }
@@ -1577,50 +1614,50 @@ const Pagination = ({
     currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /*#__PURE__*/React.createElement("ul", {
+  return /*#__PURE__*/React__default.createElement("ul", {
     className: classProps
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement("button", {
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-arrow-back"
   })), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
-      return /*#__PURE__*/React.createElement("li", {
+      return /*#__PURE__*/React__default.createElement("li", {
         key: id,
         className: classnames(`${styles$1["pagination-jump-next"]} pagination-jump-next-rem`, styles$1.listItem),
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
-      }, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      }, id < currentPageIndex ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-text"
-      })), /*#__PURE__*/React.createElement("span", {
+      })), /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-arrow-jump-back"
-      }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-text"
-      })), /*#__PURE__*/React.createElement("span", {
+      })), /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-arrow-jump-next"
       }))));
     }
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/React__default.createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
       className: classnames(`${pageNumber === currentPageNumber ? styles$1.selected : styles$1.listItem}`, `${styles$1["pagination-item"]} pagination-item-rem`)
     }, pageNumber);
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React__default.createElement("button", {
     onClick: onNext,
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-arrow"
   })));
 };
@@ -1692,32 +1729,32 @@ const Autocomplate = ({
   let optionList;
   if (showOptions && inputValue) {
     if (parseOptionsData.length && inputValue.length >= searchCount) {
-      optionList = /*#__PURE__*/React.createElement("div", {
+      optionList = /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
       }, parseOptionsData.map((optionName, index) => {
         let className;
         if (index === activeOption) {
           className = "option-active";
         }
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/React__default.createElement("div", {
           className: `${styles[className]} autocomplate-content-click-rem`,
           key: optionName[keyNames.id],
           onClick: handleClick
-        }, /*#__PURE__*/React.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement("div", {
           id: optionName[keyNames.id],
           className: `${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
         }, optionName[keyNames.name]));
       })));
     } else {
-      optionList = /*#__PURE__*/React.createElement("div", {
+      optionList = /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['no-option']} autocomplate-no-option`
       }, inputValue.length < searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
     }
@@ -1726,15 +1763,15 @@ const Autocomplate = ({
     setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
     setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
   }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     className: `${styles['autocomplate-title']} autocomplate-title-rem`
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")) : "", /*#__PURE__*/React.createElement("div", {
+  }, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
     className: `${styles['autocomplate-content']} autocomplate-content-rem`
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
     id: inputId,
     type: "text",
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
@@ -1746,7 +1783,7 @@ const Autocomplate = ({
     },
     value: inputValue,
     placeholder: placeHolder
-  }, props)), errorMessage ? /*#__PURE__*/React.createElement("span", {
+  }, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
     className: styles.errorMessage
   }, errorMessage) : null, optionList));
 };