@xaypay/tui 0.0.76 → 0.0.77

package/dist/index.es.js

@@ -65,9 +65,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$e = ".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{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.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$e);
+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{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.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$d);
 
 const File = ({
   name,
@@ -129,15 +129,15 @@ const File = ({
     document.querySelector(`.${name}`).value = "";
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
-    className: `${styles$c['file-form-title']} ile-form-title-rem`
+    className: `${styles$b['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
+    className: classnames(`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
+    className: `${styles$b['file-form']} file-form-rem ${error || errorMessage ? styles$b['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default.createElement("input", {
     hidden: true,
@@ -146,23 +146,23 @@ const File = ({
     disabled: disabled,
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['upload-file-content']} upload-file-content-rem`
+    className: `${styles$b['upload-file-content']} upload-file-content-rem`
   }, image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['file-form-inner-upload']} ile-form-inner-upload-rem`
+    className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
   }, /*#__PURE__*/React__default.createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: `${styles$c['upload-info']} upload-info-rem`
+    className: `${styles$b['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: `${styles$c['upload-info-txt']} upload-info-txt-rem`
+    className: `${styles$b['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`
+    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(', '), " )"))), !disabled && /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['delete-upload-icon']} delete-upload-icon-rem`,
+    className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-delete"
@@ -189,212 +189,38 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
-var css_248z$d = ".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$d);
-
-var css_248z$c = ".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$c);
-
-const Checkbox = ({
-  disabled,
-  required,
-  className,
-  name,
-  value,
-  jsonData,
-  onChange,
-  label,
-  keyNames,
-  onClick,
-  ...props
-}) => {
-  const classProps = classnames(styles$a.checkbox, className, 'checkbox-input-rem');
-  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  const [data, setData] = useState(parseData);
-  useEffect(() => {
-    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-    setData(parseData);
-  }, [jsonData]);
-  useEffect(() => {
-    onChange ? onChange(data.filter(d => d.checked)) : '';
-  }, [data]);
-  const handleChange = e => {
-    let id;
-    data.forEach((value, key) => {
-      if (value[keyNames.value] === e.target.value) {
-        id = key;
-      }
-    });
-    let items = [...data];
-    let item = {
-      ...items[id]
-    };
-    item.checked = !item.checked;
-    items[id] = item;
-    setData(items);
-  };
-  !keyNames ? keyNames = {
-    id: 'id',
-    name: 'name',
-    value: 'value',
-    label: 'label'
-  } : '';
-  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__default.createElement("input", _extends({
-      type: "checkbox",
-      className: classProps,
-      disabled: disabled,
-      required: required,
-      value: keyNames.value ? element[keyNames.value] : '',
-      name: keyNames.name ? element[keyNames.name] : '',
-      id: keyNames.id ? element[keyNames.id] : '',
-      onChange: handleChange,
-      onClick: onClick ? onClick : () => {},
-      defaultChecked: element.checked
-    }, 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]) : "");
-  }));
-};
-Checkbox.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  name: PropTypes.string,
-  value: PropTypes.string,
-  jsonData: PropTypes.string,
-  label: PropTypes.string,
-  keyNames: PropTypes.object
-};
-Checkbox.defaultProps = {
-  onChange: undefined,
-  jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
-};
-
-const Table = ({
-  className,
-  onChange,
-  config,
-  jsonData,
-  hearderData,
-  keyNames,
-  actions,
-  ...props
-}) => {
-  classnames(className);
-  let tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-  useEffect(() => {
-    tbodyData = jsonData.length ? JSON.parse(jsonData) : [];
-  }, [jsonData]);
-  const [checked, setChecked] = useState(config.isCheckbox && config.isCheckbox.checked ? config.isCheckbox.checked : []);
-  config.isCheckbox && config.isCheckbox.showCheckbox == undefined ? config.isCheckbox.showCheckbox = () => {
-    return true;
-  } : "";
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$b["table-wrap"]} table-wrap-rem`
-  }, config.isHeader && hearderData.map((header, key) => {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: `${styles$b["table-top"]} table-top-rem`,
-      key: key
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: `${styles$b["table-items"]} table-items-rem`
-    }, header));
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$b["table-bottom"]} table-bottom-rem`
-  }, tbodyData.map((item, key) => {
-    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__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__default.createElement(Checkbox, {
-        onClick: e => {
-          const id = e.target.id;
-          const checkedValue = e.target.checked;
-          let ch = [...checked];
-          checkedValue ? ch.push(Number(id)) : ch.splice(ch.indexOf(id), 1);
-          setChecked(ch);
-          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__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("i", {
-        className: keyName.icon
-      }), item[keyName.name]));
-    }), 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__default.createElement("div", {
-        key: key
-      }, /*#__PURE__*/React__default.createElement("i", {
-        className: action.icon,
-        onClick: action.click ? action.click : () => {}
-      }, action.icon));
-    })));
-  })));
-};
-Table.propTypes = {
-  className: PropTypes.string,
-  onChange: PropTypes.func,
-  config: PropTypes.object,
-  actions: PropTypes.arrayOf(PropTypes.object),
-  jsonData: PropTypes.string,
-  keyNames: PropTypes.arrayOf(PropTypes.oneOf([PropTypes.string, PropTypes.object])),
-  hearderData: PropTypes.array
-};
-Table.defaultProps = {
-  className: "",
-  onChange: undefined,
-  errorMessage: "",
-  config: {
-    isHeader: true,
-    isCheckbox: {
-      checked: []
-    }
-  },
-  actions: [],
-  jsonData: "",
-  keyNames: [],
-  hearderData: []
-};
-
 const _ = require('lodash');
 const compereConfigs = () => {
   let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
+  let packageConfig = require(process.env.STORYBOOK_PATH);
   try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-  }
-
+    projectConfig = require(`${process.env.STORYBOOK_CONFIG_PATH}`);
+  } catch (e) {}
   return _.merge(packageConfig, projectConfig);
 };
 
-var css_248z$b = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
-var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$b);
+({
+  tableHeadItems: PropTypes.array,
+  tableBodyItems: PropTypes.array,
+  tHeadColor: PropTypes.string,
+  tHeadFamily: PropTypes.string,
+  tHeadPadding: PropTypes.string,
+  tHeadFontWeight: PropTypes.number,
+  tHeadBorderRadius: PropTypes.string,
+  tHeadBackgroundColor: PropTypes.string,
+  tBodyColor: PropTypes.string,
+  tBodyPadding: PropTypes.string,
+  tBodyFontSize: PropTypes.string,
+  tBodyTextAlign: PropTypes.string,
+  tBodyFontWeight: PropTypes.string,
+  tBodyFontFamily: PropTypes.string,
+  tBodyRowBorder: PropTypes.string,
+  tBodyMarginTop: PropTypes.string
+});
+
+var css_248z$c = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
+var styles$a = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$c);
 
 const SvgNext = ({
   title,
@@ -567,7 +393,7 @@ const Modal = ({
       height: '100vh'
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${classProps} ${styles$9['animation__modal']}`,
+    className: `${classProps} ${styles$a['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
       top: '0px',
@@ -721,9 +547,9 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$a = ".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$a);
+var css_248z$b = ".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$9 = {"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$b);
 
 const InputTypes = {
   TEL: 'tel',
@@ -762,6 +588,7 @@ const Input = ({
   maxLength,
   labelColor,
   errorColor,
+  borderRight,
   placeholder,
   errorZindex,
   errorBottom,
@@ -779,9 +606,11 @@ const Input = ({
   labelLineHeight,
   backgroundColor,
   telErrorMessage,
+  borderRightColor,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
+  borderRightColorHover,
   errorAnimationDuration,
   ...props
 }) => {
@@ -884,9 +713,9 @@ const Input = ({
     }
   }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$8["input-wrap"]}`
+    className: `${styles$9["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default.createElement("label", {
-    className: `${styles$8["input-title"]}`,
+    className: `${styles$9["input-title"]}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
       fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
@@ -900,7 +729,7 @@ const Input = ({
       color: errorColor ? errorColor : "#ee0000"
     }
   }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$8["input-content"]}`,
+    className: `${styles$9["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
@@ -932,7 +761,9 @@ const Input = ({
       borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
       display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
+      borderRight: borderRight ? borderRight : configStyles.INPUT.borderRight,
       alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
+      borderColor: isHover ? borderRightColorHover ? borderRightColorHover : configStyles.INPUT.borderRightColorHover : borderRightColor ? borderRightColor : configStyles.INPUT.borderRightColor,
       color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
@@ -1014,6 +845,7 @@ Input.propTypes = {
   maxLength: PropTypes.number,
   errorColor: PropTypes.string,
   labelColor: PropTypes.string,
+  borderRight: PropTypes.string,
   placeholder: PropTypes.string,
   errorZindex: PropTypes.string,
   errorBottom: PropTypes.string,
@@ -1031,10 +863,12 @@ Input.propTypes = {
   phoneAlignItems: PropTypes.string,
   errorLineHeight: PropTypes.string,
   labelLineHeight: PropTypes.string,
+  borderRightColor: PropTypes.string,
   labelMarginBottom: PropTypes.string,
   regexpErrorMessage: PropTypes.string,
   regexp: PropTypes.instanceOf(RegExp),
   phoneJustifyContent: PropTypes.string,
+  borderRightColorHover: PropTypes.string,
   errorAnimationDuration: PropTypes.string,
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),
@@ -1045,9 +879,9 @@ Input.defaultProps = {
   type: "text"
 };
 
-var css_248z$9 = ".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$9);
+var css_248z$a = ".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$8 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
+styleInject(css_248z$a);
 
 const Radio = ({
   disabled,
@@ -1061,11 +895,11 @@ const Radio = ({
   keyNames,
   ...props
 }) => {
-  const classProps = classnames(styles$7.checkbox, className);
+  const classProps = classnames(styles$8.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   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`,
+      className: `${styles$8["radio-wrap"]} radio-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "radio",
@@ -1076,9 +910,9 @@ const Radio = ({
       value: value ? value : element.value,
       name: name ? name : element.name
     }, props)), /*#__PURE__*/React__default.createElement("span", {
-      className: `${styles$7["radio-checkmark"]} radio-checkmark-rem`
+      className: `${styles$8["radio-checkmark"]} radio-checkmark-rem`
     }), element.label ? /*#__PURE__*/React__default.createElement("span", {
-      className: styles$7.labelRadio
+      className: styles$8.labelRadio
     }, label ? label : element.label) : "");
   }));
 };
@@ -1100,6 +934,7 @@ Radio.defaultProps = {
 };
 
 const Button = ({
+  icon,
   size,
   type,
   font,
@@ -1128,8 +963,8 @@ const Button = ({
 }) => {
   const [isHover, setIsHover] = useState(false);
   useEffect(() => {
-    if (!label) {
-      alert('Button component: label prop is required, please add it!!!');
+    if (!label && !icon) {
+      alert('Add icon or label props on Button component');
     }
   }, []);
   const configStyles = compereConfigs();
@@ -1142,11 +977,14 @@ const Button = ({
   };
   return /*#__PURE__*/React__default.createElement("button", _extends({
     style: {
+      display: 'flex',
+      alignItems: 'center',
       fontSize: size ? size : configStyles.BUTTON.size,
       fontFamily: font ? font : configStyles.BUTTON.font,
       height: height ? height : configStyles.BUTTON.height,
       fontWeight: weight ? weight : configStyles.BUTTON.weight,
       padding: padding ? padding : configStyles.BUTTON.padding,
+      justifyContent: icon && label ? 'space-between' : 'center',
       borderRadius: radius ? radius : configStyles.BUTTON.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
       transition: transition ? transition : configStyles.BUTTON.transition,
@@ -1164,16 +1002,18 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), label);
+  }, props), icon && icon, " ", label && label, " ", !icon && !label && 'Add icon or label prop on Button component');
 };
 Button.propTypes = {
   type: PropTypes.string,
   size: PropTypes.string,
   font: PropTypes.string,
+  icon: PropTypes.element,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
   onClick: PropTypes.func,
+  label: PropTypes.string,
   weight: PropTypes.string,
   height: PropTypes.string,
   cursor: PropTypes.string,
@@ -1188,7 +1028,6 @@ Button.propTypes = {
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
-  label: PropTypes.string.isRequired,
   disabledLineColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string
 };
@@ -1264,9 +1103,9 @@ const SvgArrow = ({
   fill: "#3C393E"
 }));
 
-var css_248z$8 = ".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$8);
+var css_248z$9 = ".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:9}.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$7 = {"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$9);
 
 const Select = ({
   options,
@@ -1296,7 +1135,6 @@ const Select = ({
   selectedColor,
   selectedRadius,
   selectedMinHeight,
-  selectedBorder,
   selectedPadding,
   selectedFontSize,
   selectedBoxSizing,
@@ -1304,7 +1142,6 @@ const Select = ({
   selectedLineHeight,
   selectedHoverColor,
   selectedTransition,
-  selectedBorderColor,
   optionsBoxShadow,
   optionsBorderRadius,
   optionsBackgroundColor,
@@ -1319,7 +1156,9 @@ const Select = ({
   optionItemColorHover,
   optionItemMarginBottom,
   optionItemBackgroudColor,
-  optionItemBackgroudColorHover
+  optionItemBackgroudColorHover,
+  boxShadow,
+  boxShadowHover
 }) => {
   const ref = useRef();
   const [opened, setOpened] = useState(false);
@@ -1446,12 +1285,11 @@ const Select = ({
   }, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$6['select-content']
+    className: styles$7['select-content']
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
       minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
-      border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
       padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
       borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
       fontSize: selectedFontSize ? selectedFontSize : configStyles.SELECT.selectedFontSize,
@@ -1459,14 +1297,14 @@ const Select = ({
       fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
       lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
       transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
-      borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
+      boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
     },
     onClick: disabled ? _ => _ : _ => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
-    className: `${styles$6['select-content-top']}`
+    className: `${styles$7['select-content-top']}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$6['select-content-top-text']}`,
+    className: `${styles$7['select-content-top-text']}`,
     style: {
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
     }
@@ -1479,9 +1317,9 @@ const Select = ({
       }
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$6['select-content-top-icon']}`
+    className: `${styles$7['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']}`,
+    className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
@@ -1490,7 +1328,7 @@ const Select = ({
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
-    className: `${styles$6['arrow-icon']}`
+    className: `${styles$7['arrow-icon']}`
   }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
@@ -1498,9 +1336,9 @@ const Select = ({
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
       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.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selectedMinHeight.substr(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
-    className: `${styles$6['select-content-bottom']}`
+    className: `${styles$7['select-content-bottom']}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$6['select-content-bottom-inner']}`
+    className: `${styles$7['select-content-bottom-inner']}`
   }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
     return /*#__PURE__*/React__default.createElement("div", {
       key: i,
@@ -1509,7 +1347,7 @@ const Select = ({
       onClick: disabled ? _ => _ : _ => handleSelectItem(option),
       onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
       onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
-      className: `${styles$6['select-content-bottom-row']}`,
+      className: `${styles$7['select-content-bottom-row']}`,
       style: {
         color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
         cursor: optionItemCursor ? optionItemCursor : configStyles.SELECT.optionItemCursor,
@@ -1558,7 +1396,6 @@ Select.propTypes = {
   errorSize: PropTypes.string,
   errorColor: PropTypes.string,
   selectedColor: PropTypes.string,
-  selectedBorder: PropTypes.string,
   selectedRadius: PropTypes.string,
   selectedMinHeight: PropTypes.string,
   selectedPadding: PropTypes.string,
@@ -1568,7 +1405,6 @@ Select.propTypes = {
   selectedFontWeight: PropTypes.string,
   selectedLineHeight: PropTypes.string,
   selectedTransition: PropTypes.string,
-  selectedBorderColor: PropTypes.string,
   optionsBoxShadow: PropTypes.string,
   optionsBorderRadius: PropTypes.string,
   optionsBackgroundColor: PropTypes.string,
@@ -1583,7 +1419,9 @@ Select.propTypes = {
   optionItemLineHeight: PropTypes.string,
   optionItemMarginBottom: PropTypes.string,
   optionItemBackgroudColor: PropTypes.string,
-  optionItemBackgroudColorHover: PropTypes.string
+  optionItemBackgroudColorHover: PropTypes.string,
+  boxShadow: PropTypes.string,
+  boxShadowHover: PropTypes.string
 };
 
 const SvgToasterInfo = ({
@@ -1676,9 +1514,9 @@ const SvgToasterSuccess = ({
   fill: "#0DA574"
 }));
 
-var css_248z$7 = "#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$7);
+var css_248z$8 = "#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$6 = {"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$8);
 
 const ToasterType = {
   info: 'info',
@@ -1743,8 +1581,8 @@ const Toast = ({
       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'] : ''}
+        ${styles$6['notify-block']}
+        ${position === 'top-left' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : position === 'top-right' ? showToaster ? styles$6['bounce-in-right'] : styles$6['bounce-out-right'] : position === 'top-center' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : position === 'bottom-left' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : position === 'bottom-right' ? showToaster ? styles$6['bounce-in-right'] : styles$6['bounce-out-right'] : position === 'bottom-center' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : ''}
       `
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -1840,17 +1678,17 @@ const createToast = ({
     description
   });
   ReactDOM.render(newElem, toastBlock);
-  if (!document.getElementById(styles$5[position]) || document.getElementById(styles$5[position]) == null) {
+  if (!document.getElementById(styles$6[position]) || document.getElementById(styles$6[position]) == null) {
     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.setAttribute('id', styles$6[position]);
     toastParentBlock.appendChild(toastBlock);
     toastify.appendChild(toastParentBlock);
   } else {
-    document.getElementById(styles$5[position]).appendChild(toastBlock);
+    document.getElementById(styles$6[position]).appendChild(toastBlock);
   }
 };
 const toast = {
@@ -1950,9 +1788,9 @@ const SvgTooltip = ({
   fill: "#D1D1D1"
 }));
 
-var css_248z$6 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
-var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
-styleInject(css_248z$6);
+var css_248z$7 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var styles$5 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
+styleInject(css_248z$7);
 
 const Tooltip = ({
   type,
@@ -1975,7 +1813,7 @@ const Tooltip = ({
   const [checkTooltipHeight, setCheckTooltipHeight] = useState(0);
   const [showTooltip, setShowTooltip] = useState(false);
   const configStyles = compereConfigs();
-  const classProps = classnames(styles$4['tooltip'], className);
+  const classProps = classnames(styles$5['tooltip'], className);
   const handleShow = () => {
     setShowTooltip(!showTooltip);
   };
@@ -1987,7 +1825,7 @@ const Tooltip = ({
     tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setCheckTooltipHeight(tooltipRef.current.clientHeight);
   }, [text, tooltipRef, checkTooltipWidth, checkTooltipHeight]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$4['tooltip-block']}`,
+    className: `${styles$5['tooltip-block']}`,
     style: {
       width: width ? width : configStyles.TOOLTIP.width,
       height: height ? height : configStyles.TOOLTIP.height,
@@ -2005,9 +1843,9 @@ const Tooltip = ({
       left: type === 'top' || type === 'bottom' ? `calc(50% - ${checkTooltipWidth / 2}px)` : type === 'left' ? `-${checkTooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$4['tooltip-rel']}`
+    className: `${styles$5['tooltip-rel']}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$4['tooltip-decor']}`,
+    className: `${styles$5['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',
@@ -2082,9 +1920,9 @@ const SvgCaptchaArrowDown = ({
   fill: "#00236A"
 }));
 
-var css_248z$5 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
-var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
-styleInject(css_248z$5);
+var css_248z$6 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var styles$4 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
+styleInject(css_248z$6);
 
 const Captcha = ({
   size,
@@ -2147,7 +1985,7 @@ const Captcha = ({
       alignItems: 'center',
       zIndex: 1
     },
-    className: styles$3['start-point']
+    className: styles$4['start-point']
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
@@ -2174,8 +2012,8 @@ const Captcha = ({
       backgroundColor: 'transparent'
     },
     className: `
-                            ${styles$3['range']}
-                            ${+rangeProgress === rangeNumber ? styles$3['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$3['range-error'] : styles$3['range-default']}
+                            ${styles$4['range']}
+                            ${+rangeProgress === rangeNumber ? styles$4['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$4['range-error'] : styles$4['range-default']}
                         `,
     onInput: handleRange
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -2206,9 +2044,9 @@ Captcha.propTypes = {
   getRange: PropTypes.func.isRequired
 };
 
-var css_248z$4 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
-var styles$2 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
-styleInject(css_248z$4);
+var css_248z$5 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var styles$3 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
+styleInject(css_248z$5);
 
 const Stepper = ({
   className,
@@ -2218,15 +2056,15 @@ const Stepper = ({
 }) => {
   classnames(className, 'stepper-inner-rem');
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$2['stepper-container']} stepper-container-rem`
+    className: `${styles$3['stepper-container']} stepper-container-rem`
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
       steppers.push( /*#__PURE__*/React__default.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$2.activeRing : styles$2.bigRing}`),
+        className: classnames(`${step <= activeSteps ? styles$3.activeRing : styles$3.bigRing}`),
         key: step
       }, /*#__PURE__*/React__default.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$2.smallActiveRing : styles$2.smallRing}`)
+        className: classnames(`${step <= activeSteps ? styles$3.smallActiveRing : styles$3.smallRing}`)
       }, step <= activeSteps ? step : "")));
     }
     return steppers;
@@ -2705,7 +2543,7 @@ const NewFile = ({
   };
   const handleRemoveFile = () => {
     setImage(null);
-    removeFile(singleFile);
+    removeFile && removeFile(singleFile);
   };
   const handleChange = e => {
     const file = e.target.files;
@@ -2813,7 +2651,10 @@ const NewFile = ({
     if (multiple) {
       setSingleFile(null);
     }
-  }, [multiple, filesArray && filesArray.length, defaultData]);
+    if (multiple && !removeFile) {
+      alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+    }
+  }, [multiple, removeFile, filesArray && filesArray.length, defaultData]);
   useEffect(() => {
     if (errorMessage) {
       setError(errorMessage);
@@ -2825,10 +2666,7 @@ const NewFile = ({
     if (!change) {
       alert('Please add change prop on File component');
     }
-    if (!removeFile) {
-      alert('Please add removeFile prop on File component');
-    }
-  }, [change, removeFile]);
+  }, [change]);
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: {
@@ -2961,7 +2799,7 @@ const NewFile = ({
       status: item.status,
       size: item.file.size,
       name: item.file.name,
-      removeFile: removeFile,
+      removeFile: removeFile ? removeFile : _ => _,
       radius: radius ? radius : configStyles.File.radius,
       fileFormat: item.file.type.split('/')[1].toLowerCase(),
       progressColor: progressColor ? progressColor : configStyles.File.progressColor,
@@ -2993,6 +2831,7 @@ NewFile.propTypes = {
   upload: PropTypes.string,
   weight: PropTypes.number,
   maxSize: PropTypes.number,
+  removeFile: PropTypes.func,
   errorSize: PropTypes.string,
   labelSize: PropTypes.string,
   labelColor: PropTypes.string,
@@ -3019,7 +2858,6 @@ NewFile.propTypes = {
   progressTrackColor: PropTypes.string,
   fileAreaImageWidth: PropTypes.string,
   listItemErrorColor: PropTypes.string,
-  removeFile: PropTypes.func.isRequired,
   fileAreaImageHeight: PropTypes.string,
   progressFailedColor: PropTypes.string,
   progressSuccessColor: PropTypes.string,
@@ -3032,10 +2870,98 @@ NewFile.propTypes = {
   fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };
 NewFile.defaultProps = {
-  maxSize: 50,
+  maxSize: 10,
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+var css_248z$4 = ".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$2 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
+styleInject(css_248z$4);
+
+const Checkbox = ({
+  disabled,
+  required,
+  className,
+  name,
+  value,
+  jsonData,
+  onChange,
+  label,
+  keyNames,
+  onClick,
+  ...props
+}) => {
+  const classProps = classnames(styles$2.checkbox, className, 'checkbox-input-rem');
+  const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+  const [data, setData] = useState(parseData);
+  useEffect(() => {
+    const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
+    setData(parseData);
+  }, [jsonData]);
+  useEffect(() => {
+    onChange ? onChange(data.filter(d => d.checked)) : '';
+  }, [data]);
+  const handleChange = e => {
+    let id;
+    data.forEach((value, key) => {
+      if (value[keyNames.value] === e.target.value) {
+        id = key;
+      }
+    });
+    let items = [...data];
+    let item = {
+      ...items[id]
+    };
+    item.checked = !item.checked;
+    items[id] = item;
+    setData(items);
+  };
+  !keyNames ? keyNames = {
+    id: 'id',
+    name: 'name',
+    value: 'value',
+    label: 'label'
+  } : '';
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, data.map(element => {
+    return /*#__PURE__*/React__default.createElement("label", {
+      className: `${styles$2["checkbox-wrap"]} checkbox-wrap-rem`,
+      key: element.value
+    }, /*#__PURE__*/React__default.createElement("input", _extends({
+      type: "checkbox",
+      className: classProps,
+      disabled: disabled,
+      required: required,
+      value: keyNames.value ? element[keyNames.value] : '',
+      name: keyNames.name ? element[keyNames.name] : '',
+      id: keyNames.id ? element[keyNames.id] : '',
+      onChange: handleChange,
+      onClick: onClick ? onClick : () => {},
+      defaultChecked: element.checked
+    }, props)), /*#__PURE__*/React__default.createElement("span", {
+      className: `${styles$2["checkmark"]} checkmark-rem`
+    }), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
+      className: styles$2.labelCheckbox,
+      for: element[keyNames.id]
+    }, element[keyNames.label]) : "");
+  }));
+};
+Checkbox.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  jsonData: PropTypes.string,
+  label: PropTypes.string,
+  keyNames: PropTypes.object
+};
+Checkbox.defaultProps = {
+  onChange: undefined,
+  jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
+};
+
 var css_248z$3 = "textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
 styleInject(css_248z$3);
 
@@ -4046,4 +3972,4 @@ NewAutocomplete.defaultProps = {
   disabled: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };