@xaypay/tui 0.0.61 → 0.0.63

package/dist/index.es.js

@@ -1,7 +1,9 @@
-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';
+import ReactDOM from 'react-dom';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -30,12 +32,12 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$c = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
-var styles$b = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
-styleInject(css_248z$c);
+var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{bottom:0;display:block;height:190px;left:0;margin:auto;max-height:190px;position:absolute;right:0;top:0;width:auto}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
+styleInject(css_248z$d);
 
-var css_248z$b = "";
-styleInject(css_248z$b);
+var css_248z$c = "";
+styleInject(css_248z$c);
 
 const File = ({
   name,
@@ -97,46 +99,46 @@ const File = ({
     setFileName('no selected file');
     document.querySelector(`.${name}`).value = "";
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: `${styles$b['file-form-title']} ile-form-title-rem`
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
+    className: `${styles$c['file-form-title']} ile-form-title-rem`
+  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")), /*#__PURE__*/React.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", {
+    className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
+  }, /*#__PURE__*/React__default.createElement("div", {
     onChange: e => console.log(e),
-    className: `${styles$b['file-form']} file-form-rem ${errorMessage ? styles$b['error'] : ''}`,
+    className: `${styles$c['file-form']} file-form-rem ${errorMessage ? styles$c['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", {
-    className: `${styles$b['upload-file-content']} upload-file-content-rem`
-  }, /*#__PURE__*/React.createElement("img", {
+  }), image ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$c['upload-file-content']} upload-file-content-rem`
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: fileName
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
-  }, /*#__PURE__*/React.createElement("img", {
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$c['file-form-inner-upload']} ile-form-inner-upload-rem`
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
-  }), /*#__PURE__*/React.createElement("span", {
-    className: `${styles$b['upload-info']} upload-info-rem`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
-  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.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", {
-    className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: `${styles$c['upload-info']} upload-info-rem`
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: `${styles$c['upload-info-txt']} upload-info-txt-rem`
+  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default.createElement("span", {
+    className: `${styles$c['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(', '), " )"))), !disabled && /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$c['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'
     }
@@ -159,9 +161,9 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
-var css_248z$a = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
-var styles$a = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
-styleInject(css_248z$a);
+var css_248z$b = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
+var styles$b = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
+styleInject(css_248z$b);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -178,9 +180,9 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var css_248z$9 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
-var styles$9 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
-styleInject(css_248z$9);
+var css_248z$a = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
+var styles$a = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
+styleInject(css_248z$a);
 
 const Checkbox = ({
   disabled,
@@ -195,7 +197,7 @@ const Checkbox = ({
   onClick,
   ...props
 }) => {
-  const classProps = classnames(styles$9.checkbox, className, 'checkbox-input-rem');
+  const classProps = classnames(styles$a.checkbox, className, 'checkbox-input-rem');
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
   useEffect(() => {
@@ -226,11 +228,11 @@ const Checkbox = ({
     value: 'value',
     label: 'label'
   } : '';
-  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
-    return /*#__PURE__*/React.createElement("label", {
-      className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, data.map(element => {
+    return /*#__PURE__*/React__default.createElement("label", {
+      className: `${styles$a["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,10 +243,10 @@ const Checkbox = ({
       onChange: handleChange,
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
-    }, props)), /*#__PURE__*/React.createElement("span", {
-      className: `${styles$9["checkmark"]} checkmark-rem`
-    }), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
-      className: styles$9.labelCheckbox,
+    }, props)), /*#__PURE__*/React__default.createElement("span", {
+      className: `${styles$a["checkmark"]} checkmark-rem`
+    }), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
+      className: styles$a.labelCheckbox,
       for: element[keyNames.id]
     }, element[keyNames.label]) : "");
   }));
@@ -285,26 +287,26 @@ const Table = ({
   config.isCheckbox && config.isCheckbox.showCheckbox == undefined ? config.isCheckbox.showCheckbox = () => {
     return true;
   } : "";
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$a["table-wrap"]} table-wrap-rem`
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$b["table-wrap"]} table-wrap-rem`
   }, config.isHeader && hearderData.map((header, key) => {
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${styles$a["table-top"]} table-top-rem`,
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: `${styles$b["table-top"]} table-top-rem`,
       key: key
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${styles$a["table-items"]} table-items-rem`
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: `${styles$b["table-items"]} table-items-rem`
     }, header));
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$a["table-bottom"]} table-bottom-rem`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$b["table-bottom"]} table-bottom-rem`
   }, tbodyData.map((item, key) => {
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${styles$a["table-bottom-inner"]} table-bottom-inner-rem`,
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: `${styles$b["table-bottom-inner"]} table-bottom-inner-rem`,
       key: key
     }, keyNames.map((keyName, keyNameKey) => {
-      return /*#__PURE__*/React.createElement("div", {
-        className: `${styles$a["table-items"]} table-items-rem`,
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: `${styles$b["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 +316,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", {
-      className: `${styles$a["table-items"]} table-items-rem`
+    }), actions && /*#__PURE__*/React__default.createElement("div", {
+      className: `${styles$b["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));
@@ -354,9 +356,9 @@ Table.defaultProps = {
   hearderData: []
 };
 
-var css_248z$8 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
-var styles$8 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$8);
+var css_248z$9 = ".modal-module_modal-wrap__IsXXf{background:rgba(0,0,0,.4);height:100%;left:0;position:fixed;top:0;width:100%;z-index:9}.modal-module_modal-top__ntDBi{background:#fbfbfb;box-sizing:border-box;display:flex;flex-direction:row;height:44px;padding:4px 10px 4px 0;width:100%}.modal-module_modal-title__r-WKl{align-items:center;color:#3c393e;display:flex;flex:1 1;font-size:20px;font-weight:500;line-height:24px;padding-right:20px}.modal-module_close-btn__Qf2UD{cursor:pointer;flex:0 0 auto;width:24px}.modal-module_close-btn__Qf2UD,.modal-module_modal-section__Bp8jN{align-items:center;display:flex;height:100%;justify-content:center}.modal-module_modal-section__Bp8jN{flex:1 1;padding:10px 0;width:100%}.modal-module_modal-content__1F-uE{align-items:center;animation:modal-module_show-popup__WrH7a .24s;background:#fff;border-radius:8px;display:flex;flex-direction:column;height:auto;left:0;margin:auto;min-height:130px;overflow:hidden;padding:10px;position:absolute;right:0;top:110px;width:fit-content}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-30%,0)}to{opacity:1;transform:translateZ(0)}}";
+var styles$9 = {"modal-wrap":"modal-module_modal-wrap__IsXXf","modal-top":"modal-module_modal-top__ntDBi","modal-title":"modal-module_modal-title__r-WKl","close-btn":"modal-module_close-btn__Qf2UD","modal-section":"modal-module_modal-section__Bp8jN","modal-content":"modal-module_modal-content__1F-uE","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$9);
 
 const _ = require('lodash');
 const compereConfigs = () => {
@@ -428,7 +430,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,
@@ -486,53 +488,53 @@ const Modal = ({
   selected,
   children
 }) => {
-  classnames(styles$8.modal, className);
+  classnames(styles$9.modal, className);
   const [select, setSelect] = useState(selected);
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["modal-wrap"]} modal-wrap-rem`,
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["modal-wrap"]} modal-wrap-rem`,
     onClick: () => setShow(false)
-  }, type == "content" ? /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["modal-content"]} modal-content-rem`,
+  }, type == "content" ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["modal-top"]} modal-top-rem`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["modal-title"]} modal-title-rem`
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["modal-top"]} modal-top-rem`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["modal-title"]} modal-title-rem`
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: TypographyType.p,
     color: "#00236A"
-  }, headerText)), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["close-btn"]} close-btn-rem`,
+  }, headerText)), /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-close"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["modal-section"]} modal-section-rem`
-  }, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["modal-content"]} modal-content-rem`,
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["modal-section"]} modal-section-rem`
+  }, children)) : type == "images" ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["close-btn"]} close-btn-rem`,
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$9["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-close"
-  })), /*#__PURE__*/React.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", {
+    className: `${styles$9["modal-section"]} modal-section-rem`
+  }, /*#__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);
     }
@@ -547,9 +549,9 @@ Modal.propTypes = {
   data: PropTypes.array
 };
 
-var css_248z$7 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$7 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
-styleInject(css_248z$7);
+var css_248z$8 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
+styleInject(css_248z$8);
 
 const InputTypes = {
   TEL: 'tel',
@@ -581,6 +583,7 @@ const Input = ({
   errorLeft,
   errorSize,
   labelSize,
+  maxLength,
   labelColor,
   errorColor,
   placeholder,
@@ -634,10 +637,10 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$7["input-wrap"]}`
-  }, label ? /*#__PURE__*/React.createElement("label", {
-    className: `${styles$7["input-title"]}`,
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$8["input-wrap"]}`
+  }, label ? /*#__PURE__*/React__default.createElement("label", {
+    className: `${styles$8["input-title"]}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
       fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
@@ -646,12 +649,12 @@ 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", {
-    className: `${styles$7["input-content"]}`,
+  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$8["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
@@ -659,7 +662,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 +676,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,8 +691,8 @@ const Input = ({
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, "+374") : '', /*#__PURE__*/React.createElement("input", _extends({}, props, {
-    value: value,
+  }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
+    value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
     className: classProps,
     onChange: handleChange,
     type: show ? 'text' : type,
@@ -710,7 +713,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 +727,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,
@@ -760,6 +763,7 @@ Input.propTypes = {
   errorSize: PropTypes.string,
   errorLeft: PropTypes.string,
   labelSize: PropTypes.string,
+  maxLength: PropTypes.number,
   errorColor: PropTypes.string,
   labelColor: PropTypes.string,
   placeholder: PropTypes.string,
@@ -789,9 +793,9 @@ Input.defaultProps = {
   type: "text"
 };
 
-var css_248z$6 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
-var styles$6 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
-styleInject(css_248z$6);
+var css_248z$7 = ".radio-module_radio-wrap__-lO7V{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.radio-module_radio-wrap__-lO7V>input{height:0;opacity:0;position:absolute;width:0}.radio-module_radio-wrap__-lO7V .radio-module_radio-checkmark__Kvol0{border:1px solid #d9d9d9;border-radius:50%;display:inline-block;height:14px;left:0;margin-right:4px;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.radio-module_radio-wrap__-lO7V>.radio-module_radio-checkmark__Kvol0:after{background-color:#d9d9d9;border-radius:50%;bottom:0;content:\"\";height:8px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;transition:opacity .24s,background-color .24s;width:8px}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0:after{background-color:#1890ff;opacity:1}.radio-module_radio-wrap__-lO7V:hover input~.radio-module_radio-checkmark__Kvol0:after{opacity:1}.radio-module_radio-wrap__-lO7V input:checked~.radio-module_radio-checkmark__Kvol0{border-color:#1890ff}";
+var styles$7 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
+styleInject(css_248z$7);
 
 const Radio = ({
   disabled,
@@ -805,13 +809,13 @@ const Radio = ({
   keyNames,
   ...props
 }) => {
-  const classProps = classnames(styles$6.checkbox, className);
+  const classProps = classnames(styles$7.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", {
-      className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, parseData.map((element, id) => {
+    return /*#__PURE__*/React__default.createElement("label", {
+      className: `${styles$7["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,10 +823,10 @@ const Radio = ({
       defaultChecked: id === 0 ? defaultChecked : "",
       value: value ? value : element.value,
       name: name ? name : element.name
-    }, props)), /*#__PURE__*/React.createElement("span", {
-      className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
-    }), element.label ? /*#__PURE__*/React.createElement("span", {
-      className: styles$6.labelRadio
+    }, props)), /*#__PURE__*/React__default.createElement("span", {
+      className: `${styles$7["radio-checkmark"]} radio-checkmark-rem`
+    }), element.label ? /*#__PURE__*/React__default.createElement("span", {
+      className: styles$7.labelRadio
     }, label ? label : element.label) : "");
   }));
 };
@@ -884,7 +888,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 +948,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,13 +962,45 @@ 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 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);
+var css_248z$6 = ".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$6 = {"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$6);
 
 const Select = ({
   options,
@@ -1079,6 +1115,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 => {
@@ -1093,7 +1137,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 {
@@ -1111,9 +1155,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,
@@ -1123,15 +1167,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", {
-    className: styles$5['select-content']
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$6['select-content']
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
       minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
@@ -1148,9 +1192,9 @@ const Select = ({
     onClick: disabled ? _ => _ : _ => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
-    className: `${styles$5['select-content-top']}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$5['select-content-top-text']}`,
+    className: `${styles$6['select-content-top']}`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$6['select-content-top-text']}`,
     style: {
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
     }
@@ -1162,44 +1206,38 @@ const Select = ({
         return newSelected[index][keyNames.name];
       }
     }
-  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React.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", {
-    className: `${styles$5['close-icon']}`,
+  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$6['select-content-top-icon']}`
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$6['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", {
+    className: `${styles$6['arrow-icon']}`
+  }, 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,
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: parseFloat(selectedMinHeight ? selectedMinHeight.substring(0, selectedMinHeight.length - 2) : configStyles.SELECT.selectedMinHeight.substring(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
+      top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selectedMinHeight.includes('rem') ? parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight - 2)) + 6 + 'px'
     },
-    className: `${styles$5['select-content-bottom']}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${styles$5['select-content-bottom-inner']}`
+    className: `${styles$6['select-content-bottom']}`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${styles$6['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],
       onClick: disabled ? _ => _ : _ => handleSelectItem(option),
       onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
       onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
-      className: `${styles$5['select-content-bottom-row']}`,
+      className: `${styles$6['select-content-bottom-row']}`,
       style: {
         color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
         cursor: optionItemCursor ? optionItemCursor : configStyles.SELECT.optionItemCursor,
@@ -1212,10 +1250,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
@@ -1276,6 +1314,277 @@ Select.propTypes = {
   optionItemBackgroudColorHover: PropTypes.string
 };
 
+const SvgToasterInfo = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24",
+  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 18c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854v-4.83c0-.34-.115-.62-.346-.84A1.19 1.19 0 0 0 12 10.8c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854v4.83c0 .34.115.62.346.84.23.22.515.33.854.33Zm0-9.6c.34 0 .625-.115.856-.346.23-.23.345-.515.344-.854 0-.34-.115-.625-.346-.856A1.157 1.157 0 0 0 12 6c-.34 0-.625.115-.856.346-.23.23-.345.515-.344.854 0 .34.115.625.346.856.23.23.515.345.854.344ZM12 24c-1.66 0-3.22-.315-4.68-.946a12.137 12.137 0 0 1-3.81-2.564 12.11 12.11 0 0 1-2.564-3.81C.316 15.22 0 13.66 0 12c0-1.66.315-3.22.946-4.68.63-1.46 1.485-2.73 2.564-3.81A12.11 12.11 0 0 1 7.32.946C8.78.316 10.34 0 12 0c1.66 0 3.22.315 4.68.946 1.46.63 2.73 1.485 3.81 2.564a12.127 12.127 0 0 1 2.566 3.81c.63 1.46.945 3.02.944 4.68 0 1.66-.315 3.22-.946 4.68a12.137 12.137 0 0 1-2.564 3.81 12.127 12.127 0 0 1-3.81 2.566c-1.46.63-3.02.945-4.68.944Z",
+  fill: "#00236A"
+}));
+
+const SvgToasterError = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24",
+  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 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm0 16a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm0-11a1 1 0 0 0-.984.82L11 6v7l.016.18a1 1 0 0 0 1.968 0L13 13V6l-.016-.18A1 1 0 0 0 12 5Z",
+  fill: "#E00"
+}));
+
+const SvgToasterClose = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 18 18",
+  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: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
+  fill: "#D1D1D1"
+}));
+
+const SvgToasterWarning = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 21",
+  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: "M1.156 21a1.143 1.143 0 0 1-.994-.583 1.285 1.285 0 0 1-.16-.57c-.01-.204.043-.403.16-.597L10.978.583c.117-.194.268-.34.454-.437C11.616.049 11.806 0 12 0c.194 0 .384.049.57.146.185.097.336.243.452.437L23.838 19.25c.116.194.17.394.161.599a1.26 1.26 0 0 1-.161.568 1.14 1.14 0 0 1-.41.423 1.09 1.09 0 0 1-.584.16H1.156ZM12 17.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83 0-.331-.112-.608-.337-.832a1.128 1.128 0 0 0-.832-.335c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83 0 .33.112.608.337.832.224.224.502.336.832.335Zm0-3.5c.331 0 .61-.112.834-.336.224-.224.336-.5.335-.83v-3.5c0-.331-.112-.608-.337-.832A1.128 1.128 0 0 0 12 8.166c-.331 0-.609.112-.834.336-.224.224-.336.5-.335.83v3.5c0 .33.112.608.337.832.224.224.502.336.832.335Z",
+  fill: "#FF8A00"
+}));
+
+const SvgToasterSuccess = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24",
+  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 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24Zm-1.495 14.367L7.84 11.7a1.028 1.028 0 1 0-1.455 1.455l3.394 3.395a1.024 1.024 0 0 0 1.456 0l7.028-7.03a1.03 1.03 0 1 0-1.453-1.456l-6.304 6.303Z",
+  fill: "#0DA574"
+}));
+
+var css_248z$5 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}";
+var styles$5 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO"};
+styleInject(css_248z$5);
+
+const ToasterType = {
+  info: 'info',
+  warn: 'warn',
+  error: 'error',
+  success: 'success'
+};
+const ToasterPosition = {
+  topLeft: 'top-left',
+  topRight: 'top-right',
+  topCenter: 'top-center',
+  bottomLeft: 'bottom-left',
+  bottomRight: 'bottom-right',
+  bottomCenter: 'bottom-center'
+};
+const Toast = ({
+  type,
+  title,
+  timer,
+  position,
+  removeToast,
+  description
+}) => {
+  let timeoutCall;
+  let timeoutClick;
+  const ref = useRef(null);
+  const [showToaster, setShowToaster] = useState(true);
+  const handleToasterClick = e => {
+    e.stopPropagation();
+  };
+  const handleCloseToaster = ref => {
+    setShowToaster(false);
+    timeoutClick = setTimeout(() => {
+      removeToast(ref, position);
+    }, 300);
+    clearTimeout(timeoutCall);
+  };
+  useEffect(() => {
+    timeoutCall = setTimeout(() => {
+      handleCloseToaster(ref);
+    }, timer);
+    return () => {
+      setShowToaster(true);
+      clearTimeout(timeoutCall);
+      clearTimeout(timeoutClick);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: ref,
+    onClick: handleToasterClick,
+    style: {
+      position: 'absolute',
+      display: 'flex',
+      width: '440px',
+      height: '83px',
+      borderRadius: '40px',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      backgroundColor: '#FFFFFF',
+      border: '2px solid #EEEEEE',
+      padding: '14px 29px 14px 12px',
+      justifyContent: 'space-between'
+    },
+    className: `
+        ${styles$5['notify-block']}
+        ${position === 'top-left' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'top-right' ? showToaster ? styles$5['bounce-in-right'] : styles$5['bounce-out-right'] : position === 'top-center' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'bottom-left' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : position === 'bottom-right' ? showToaster ? styles$5['bounce-in-right'] : styles$5['bounce-out-right'] : position === 'bottom-center' ? showToaster ? styles$5['bounce-in-left'] : styles$5['bounce-out-left'] : ''}
+      `
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      width: '60px',
+      height: '60px',
+      borderRadius: '30px',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: type === 'info' ? 'rgba(0, 35, 106, 0.05)' : type === 'warn' ? 'rgba(255, 138, 0, 0.05)' : type === 'error' ? 'rgba(238, 0, 0, 0.05)' : type === 'success' ? 'rgba(13, 165, 116, 0.05)' : ''
+    }
+  }, type === 'info' ? /*#__PURE__*/React__default.createElement(SvgToasterInfo, null) : type === 'warn' ? /*#__PURE__*/React__default.createElement(SvgToasterWarning, null) : type === 'error' ? /*#__PURE__*/React__default.createElement(SvgToasterError, null) : type === 'success' ? /*#__PURE__*/React__default.createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      height: '100%',
+      width: 'calc(100% - 90px)'
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      fontWeight: 600,
+      color: '#3C393E',
+      fontSize: '16px',
+      lineHeight: '22px',
+      fontStyle: 'normal',
+      fontFamily: ''
+    }
+  }, title ? title.length > 25 ? title.substr(0, 25) + '...' : title : ''), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      fontWeight: 500,
+      color: '#3C393E',
+      fontSize: '12px',
+      lineHeight: '16px',
+      fontStyle: 'normal',
+      fontFamily: '',
+      opacity: 0.8
+    }
+  }, description ? description.length > 120 ? description.substr(0, 120) + '...' : description : '')), /*#__PURE__*/React__default.createElement("div", {
+    onClick: () => handleCloseToaster(ref),
+    style: {
+      width: '18px',
+      height: '18px',
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgToasterClose, null)));
+};
+Toast.propTypes = {
+  description: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  timer: PropTypes.number.isRequired,
+  removeToast: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(Object.values(ToasterType)).isRequired,
+  position: PropTypes.oneOf(Object.values(ToasterPosition)).isRequired
+};
+
+let toastify;
+const removeToast = (ref, position) => {
+  const parent = document.getElementById(styles$5[position]);
+  const node = ReactDOM.findDOMNode(ref.current);
+  const removeElem = node.parentNode;
+  parent.removeChild(removeElem);
+  if (!parent.hasChildNodes()) {
+    toastify.removeChild(parent);
+  }
+};
+const createToast = ({
+  type,
+  title,
+  timer,
+  position,
+  description
+}) => {
+  let toastParentBlock;
+  const toastBlock = document.createElement('div');
+  toastBlock.style.position = 'relative';
+  toastBlock.style.flexShrink = 0;
+  toastBlock.style.width = '440px';
+  toastBlock.style.height = '83px';
+  toastBlock.style.marginBottom = '20px';
+  const newElem = /*#__PURE__*/React__default.createElement(Toast, {
+    type,
+    timer,
+    title,
+    position,
+    removeToast,
+    description
+  });
+  ReactDOM.render(newElem, toastBlock);
+  if (!toastify) {
+    toastify = document.getElementById('toastify');
+  }
+  if (!document.getElementById(styles$5[position])) {
+    toastParentBlock = document.createElement('div');
+    toastParentBlock.style.position = 'fixed';
+    toastParentBlock.style.display = 'flex';
+    toastParentBlock.style.zIndex = 99999;
+    toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
+    toastParentBlock.setAttribute('id', styles$5[position]);
+    toastParentBlock.appendChild(toastBlock);
+    toastify.appendChild(toastParentBlock);
+  } else {
+    document.getElementById(styles$5[position]).appendChild(toastBlock);
+  }
+};
+const Toaster = () => {
+  const handleToasterClick = e => {
+    e.stopPropagation();
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    onClick: handleToasterClick,
+    id: "toastify"
+  });
+};
+
 var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\n</svg>";
 
 var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
@@ -1314,7 +1623,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,
@@ -1322,7 +1631,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: {
@@ -1332,27 +1641,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
   })));
 };
@@ -1410,27 +1719,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"
   }))));
 };
@@ -1454,15 +1763,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 : "")));
     }
@@ -1579,50 +1888,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"
   })));
 };
@@ -1694,32 +2003,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} նիշ` : 'Նման տվյալ առկա չէ'))));
     }
@@ -1728,15 +2037,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,
@@ -1748,7 +2057,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));
 };
@@ -1771,4 +2080,4 @@ Autocomplate.defaultProps = {
   required: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Tooltip, Typography, TypographyType };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectCheckbox, Stepper, Table, Toaster, Tooltip, Typography, TypographyType, createToast };