@xaypay/tui 0.0.62 → 0.0.63

package/dist/index.js

@@ -6,6 +6,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var classnames = require('classnames');
 var styled = require('styled-components');
+var ReactDOM = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -32,6 +33,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -60,12 +62,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,
@@ -128,16 +130,16 @@ const File = ({
     document.querySelector(`.${name}`).value = "";
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: `${styles$b['file-form-title']} ile-form-title-rem`
+    className: `${styles$c['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
+    className: classnames__default["default"](`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     onChange: e => console.log(e),
-    className: `${styles$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__default["default"].createElement("input", {
     hidden: true,
@@ -146,23 +148,23 @@ const File = ({
     disabled: disabled,
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$b['upload-file-content']} upload-file-content-rem`
+    className: `${styles$c['upload-file-content']} upload-file-content-rem`
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
+    className: `${styles$c['file-form-inner-upload']} ile-form-inner-upload-rem`
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$b['upload-info']} upload-info-rem`
+    className: `${styles$c['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
+    className: `${styles$c['upload-info-txt']} upload-info-txt-rem`
   }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default["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__default["default"].createElement("div", {
-    className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
+    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["default"].createElement("div", {
+    className: `${styles$c['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-delete"
@@ -189,9 +191,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) {
@@ -208,9 +210,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,
@@ -225,7 +227,7 @@ const Checkbox = ({
   onClick,
   ...props
 }) => {
-  const classProps = classnames__default["default"](styles$9.checkbox, className, 'checkbox-input-rem');
+  const classProps = classnames__default["default"](styles$a.checkbox, className, 'checkbox-input-rem');
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = React.useState(parseData);
   React.useEffect(() => {
@@ -258,7 +260,7 @@ const Checkbox = ({
   } : '';
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, data.map(element => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
+      className: `${styles$a["checkbox-wrap"]} checkbox-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
       type: "checkbox",
@@ -272,9 +274,9 @@ const Checkbox = ({
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${styles$9["checkmark"]} checkmark-rem`
+      className: `${styles$a["checkmark"]} checkmark-rem`
     }), element[keyNames.label] ? /*#__PURE__*/React__default["default"].createElement("label", {
-      className: styles$9.labelCheckbox,
+      className: styles$a.labelCheckbox,
       for: element[keyNames.id]
     }, element[keyNames.label]) : "");
   }));
@@ -316,23 +318,23 @@ const Table = ({
     return true;
   } : "";
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$a["table-wrap"]} table-wrap-rem`
+    className: `${styles$b["table-wrap"]} table-wrap-rem`
   }, config.isHeader && hearderData.map((header, key) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-top"]} table-top-rem`,
+      className: `${styles$b["table-top"]} table-top-rem`,
       key: key
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-items"]} table-items-rem`
+      className: `${styles$b["table-items"]} table-items-rem`
     }, header));
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$a["table-bottom"]} table-bottom-rem`
+    className: `${styles$b["table-bottom"]} table-bottom-rem`
   }, tbodyData.map((item, key) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-bottom-inner"]} table-bottom-inner-rem`,
+      className: `${styles$b["table-bottom-inner"]} table-bottom-inner-rem`,
       key: key
     }, keyNames.map((keyName, keyNameKey) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: `${styles$a["table-items"]} table-items-rem`,
+        className: `${styles$b["table-items"]} table-items-rem`,
         key: keyNameKey
       }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
         onClick: e => {
@@ -348,7 +350,7 @@ const Table = ({
         className: keyName.icon
       }), item[keyName.name]));
     }), actions && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-items"]} table-items-rem`
+      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__default["default"].createElement("div", {
         key: key
@@ -384,9 +386,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 = () => {
@@ -516,42 +518,42 @@ const Modal = ({
   selected,
   children
 }) => {
-  classnames__default["default"](styles$8.modal, className);
+  classnames__default["default"](styles$9.modal, className);
   const [select, setSelect] = React.useState(selected);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["modal-wrap"]} modal-wrap-rem`,
+    className: `${styles$9["modal-wrap"]} modal-wrap-rem`,
     onClick: () => setShow(false)
   }, type == "content" ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["modal-content"]} modal-content-rem`,
+    className: `${styles$9["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["modal-top"]} modal-top-rem`
+    className: `${styles$9["modal-top"]} modal-top-rem`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["modal-title"]} modal-title-rem`
+    className: `${styles$9["modal-title"]} modal-title-rem`
   }, /*#__PURE__*/React__default["default"].createElement(Typography, {
     variant: TypographyType.p,
     color: "#00236A"
   }, headerText)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["close-btn"]} close-btn-rem`,
+    className: `${styles$9["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-close"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["modal-section"]} modal-section-rem`
+    className: `${styles$9["modal-section"]} modal-section-rem`
   }, children)) : type == "images" ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["modal-content"]} modal-content-rem`,
+    className: `${styles$9["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["close-btn"]} close-btn-rem`,
+    className: `${styles$9["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-close"
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8["modal-section"]} modal-section-rem`
+    className: `${styles$9["modal-section"]} modal-section-rem`
   }, /*#__PURE__*/React__default["default"].createElement("div", null, select > 1 ? /*#__PURE__*/React__default["default"].createElement("h1", {
     onClick: () => setSelect(select - 1)
   }, "-") : null, data.map(elem => {
@@ -577,9 +579,9 @@ Modal.propTypes = {
   data: PropTypes__default["default"].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',
@@ -611,6 +613,7 @@ const Input = ({
   errorLeft,
   errorSize,
   labelSize,
+  maxLength,
   labelColor,
   errorColor,
   placeholder,
@@ -665,9 +668,9 @@ const Input = ({
     setIsHover(false);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7["input-wrap"]}`
+    className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: `${styles$7["input-title"]}`,
+    className: `${styles$8["input-title"]}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
       fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
@@ -681,7 +684,7 @@ const Input = ({
       color: "#ee0000"
     }
   }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7["input-content"]}`,
+    className: `${styles$8["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
@@ -719,7 +722,7 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
-    value: value,
+    value: maxLength && value && value.length > maxLength ? value.substr(0, maxLength) : value,
     className: classProps,
     onChange: handleChange,
     type: show ? 'text' : type,
@@ -790,6 +793,7 @@ Input.propTypes = {
   errorSize: PropTypes__default["default"].string,
   errorLeft: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,
+  maxLength: PropTypes__default["default"].number,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
@@ -819,9 +823,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,
@@ -835,11 +839,11 @@ const Radio = ({
   keyNames,
   ...props
 }) => {
-  const classProps = classnames__default["default"](styles$6.checkbox, className);
+  const classProps = classnames__default["default"](styles$7.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, parseData.map((element, id) => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
+      className: `${styles$7["radio-wrap"]} radio-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
       type: "radio",
@@ -850,9 +854,9 @@ const Radio = ({
       value: value ? value : element.value,
       name: name ? name : element.name
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
+      className: `${styles$7["radio-checkmark"]} radio-checkmark-rem`
     }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$6.labelRadio
+      className: styles$7.labelRadio
     }, label ? label : element.label) : "");
   }));
 };
@@ -1024,9 +1028,9 @@ const SvgCloseIcon = ({
   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;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);
+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,
@@ -1200,7 +1204,7 @@ const Select = ({
   }, "*")) : "", /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5['select-content']
+    className: styles$6['select-content']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
@@ -1218,9 +1222,9 @@ const Select = ({
     onClick: disabled ? _ => _ : _ => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
-    className: `${styles$5['select-content-top']}`
+    className: `${styles$6['select-content-top']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-top-text']}`,
+    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
     }
@@ -1233,9 +1237,9 @@ const Select = ({
       }
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-top-icon']}`
-  }, multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['close-icon']}`,
+    className: `${styles$6['select-content-top-icon']}`
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${styles$6['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
@@ -1244,17 +1248,17 @@ const Select = ({
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
-    className: `${styles$5['arrow-icon']}`
+    className: `${styles$6['arrow-icon']}`
   }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default["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']}`
+    className: `${styles$6['select-content-bottom']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-bottom-inner']}`
+    className: `${styles$6['select-content-bottom-inner']}`
   }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: i,
@@ -1263,7 +1267,7 @@ const Select = ({
       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,
@@ -1340,6 +1344,277 @@ Select.propTypes = {
   optionItemBackgroudColorHover: PropTypes__default["default"].string
 };
 
+const SvgToasterInfo = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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 = React.useRef(null);
+  const [showToaster, setShowToaster] = React.useState(true);
+  const handleToasterClick = e => {
+    e.stopPropagation();
+  };
+  const handleCloseToaster = ref => {
+    setShowToaster(false);
+    timeoutClick = setTimeout(() => {
+      removeToast(ref, position);
+    }, 300);
+    clearTimeout(timeoutCall);
+  };
+  React.useEffect(() => {
+    timeoutCall = setTimeout(() => {
+      handleCloseToaster(ref);
+    }, timer);
+    return () => {
+      setShowToaster(true);
+      clearTimeout(timeoutCall);
+      clearTimeout(timeoutClick);
+    };
+  }, []);
+  return /*#__PURE__*/React__default["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["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["default"].createElement(SvgToasterInfo, null) : type === 'warn' ? /*#__PURE__*/React__default["default"].createElement(SvgToasterWarning, null) : type === 'error' ? /*#__PURE__*/React__default["default"].createElement(SvgToasterError, null) : type === 'success' ? /*#__PURE__*/React__default["default"].createElement(SvgToasterSuccess, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      height: '100%',
+      width: 'calc(100% - 90px)'
+    }
+  }, /*#__PURE__*/React__default["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["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["default"].createElement("div", {
+    onClick: () => handleCloseToaster(ref),
+    style: {
+      width: '18px',
+      height: '18px',
+      cursor: 'pointer'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(SvgToasterClose, null)));
+};
+Toast.propTypes = {
+  description: PropTypes__default["default"].string,
+  title: PropTypes__default["default"].string.isRequired,
+  timer: PropTypes__default["default"].number.isRequired,
+  removeToast: PropTypes__default["default"].func.isRequired,
+  type: PropTypes__default["default"].oneOf(Object.values(ToasterType)).isRequired,
+  position: PropTypes__default["default"].oneOf(Object.values(ToasterPosition)).isRequired
+};
+
+let toastify;
+const removeToast = (ref, position) => {
+  const parent = document.getElementById(styles$5[position]);
+  const node = ReactDOM__default["default"].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["default"].createElement(Toast, {
+    type,
+    timer,
+    title,
+    position,
+    removeToast,
+    description
+  });
+  ReactDOM__default["default"].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["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}";
@@ -1849,6 +2124,8 @@ exports.Select = Select;
 exports.SelectCheckbox = SelectCheckbox;
 exports.Stepper = Stepper;
 exports.Table = Table;
+exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
 exports.TypographyType = TypographyType;
+exports.createToast = createToast;