@xaypay/tui 0.0.115 → 0.0.117

package/dist/index.es.js

@@ -84,9 +84,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$f = ".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$d = {"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$f);
+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);
 
 const File = ({
   name,
@@ -146,11 +146,11 @@ const File = ({
     document.querySelector(`.${name}`).value = '';
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
-    className: `${styles$d['file-form-title']} ile-form-title-rem`
+    className: `${styles$c['file-form-title']} ile-form-title-rem`
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(`${styles$d['file-form-wrap']} file-form-wrap-rem`, image ? styles$d['active'] : '')
+    className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$d['file-form']} file-form-rem ${error || errorMessage ? styles$d['error'] : ''}`,
+    className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default.createElement("input", {
     hidden: true,
@@ -159,23 +159,23 @@ const File = ({
     disabled: disabled,
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$d['upload-file-content']} upload-file-content-rem`
+    className: `${styles$c['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$d['file-form-inner-upload']} ile-form-inner-upload-rem`
+    className: `${styles$c['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$d['upload-info']} upload-info-rem`
+    className: `${styles$c['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: `${styles$d['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.createElement("span", {
-    className: `${styles$d['upload-info-size']} upload-info-size-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.createElement("div", {
-    className: `${styles$d['delete-upload-icon']} delete-upload-icon-rem`,
+    className: `${styles$c['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-delete"
@@ -273,24 +273,24 @@ const SvgCheckboxChecked = ({
 const Checkbox$1 = ({
   data,
   index,
+  label,
   styles,
   checked,
   disabled,
   innerIndex,
+  checkedIcon,
   checkedColor,
+  unCheckedIcon,
   handleChecked,
   unCheckedColor,
+  labelMarginLeft,
   ignoreDisabledForChecked
 }) => {
   const configStyles = compereConfigs();
   const [innerChecked, setInnerChecked] = useState(false);
   const [innerDisabled, setInnerDisabled] = useState(false);
   const handleClick = e => {
-    if (index !== undefined && innerIndex !== undefined && typeof index === 'number' && typeof innerIndex === 'number') {
-      handleChecked(data, e, index, innerIndex);
-    } else {
-      handleChecked(data, e);
-    }
+    handleChecked(data, e, index, innerIndex);
   };
   useEffect(() => {
     setInnerDisabled(disabled);
@@ -298,83 +298,103 @@ const Checkbox$1 = ({
   useEffect(() => {
     setInnerChecked(checked);
   }, [checked]);
+  useEffect(() => {
+    if (index && typeof index !== 'number') {
+      alert('Please set index value as valid number');
+    }
+  }, [index]);
+  useEffect(() => {
+    if (innerIndex && typeof innerIndex !== 'number') {
+      alert('Please set index value as valid number');
+    }
+  }, [innerIndex]);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: '16px',
+      width: label ? 'fit-content' : '16px',
       height: '16px',
       marginRight: '9px',
-      display: 'inline-block',
+      display: label ? 'flex' : 'inline-block',
       cursor: !innerDisabled ? 'pointer' : 'not-allowed',
       ...styles
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
-  }, innerChecked && (ignoreDisabledForChecked ? ignoreDisabledForChecked : !innerDisabled) ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
-    fillColor: checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor
-  }) : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, {
-    fillColor: unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor
-  }), data?.label && /*#__PURE__*/React__default.createElement("span", null, data.label));
+  }, innerChecked && (ignoreDisabledForChecked ? ignoreDisabledForChecked : !innerDisabled) ? checkedIcon ? checkedIcon : /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
+    fillColor: checkedColor ? checkedColor : configStyles.CHECKBOX.checkedColor
+  }) : unCheckedIcon ? unCheckedIcon : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, {
+    fillColor: unCheckedColor ? unCheckedColor : configStyles.CHECKBOX.unCheckedColor
+  }), label && /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      marginLeft: labelMarginLeft
+    }
+  }, label));
 };
 
 const SingleCheckbox = ({
   data,
   index,
+  label,
   styles,
   checked,
   disabled,
   innerIndex,
+  checkedIcon,
   checkedColor,
+  unCheckedIcon,
   handleChecked,
   unCheckedColor,
+  labelMarginLeft,
   ignoreDisabledForChecked
 }) => {
+  const configStyles = compereConfigs();
   const [innerData, setInnerData] = useState(null);
   useEffect(() => {
-    // if (data) {
-    //   if (typeof data === 'object' && data.constructor === Object) {
-    //     setInnerData(data);
-    //   } else {
-    //     alert('Data props on Checkbox component must be an object');
-    //   }
-    // } else {
-    //   alert('Please add data props on Checkbox component');
-    // }
     setInnerData(data);
   }, [data]);
   return /*#__PURE__*/React__default.createElement(Checkbox$1, {
     index: index,
+    label: label,
     styles: styles,
     data: innerData,
     checked: checked,
     disabled: disabled,
     innerIndex: innerIndex,
+    checkedIcon: checkedIcon,
     checkedColor: checkedColor,
+    unCheckedIcon: unCheckedIcon,
     handleChecked: handleChecked,
     unCheckedColor: unCheckedColor,
-    ignoreDisabledForChecked: ignoreDisabledForChecked
+    ignoreDisabledForChecked: ignoreDisabledForChecked,
+    labelMarginLeft: labelMarginLeft ? labelMarginLeft : configStyles.CHECKBOX.labelMarginLeft
   });
 };
 SingleCheckbox.propTypes = {
   data: PropTypes.object,
+  label: PropTypes.string,
   onClick: PropTypes.func,
   index: PropTypes.number,
   styles: PropTypes.object,
   disabled: PropTypes.bool,
   innerIndex: PropTypes.number,
   checkedColor: PropTypes.string,
+  checkedIcon: PropTypes.element,
+  unCheckedIcon: PropTypes.element,
   unCheckedColor: PropTypes.string,
+  labelMarginLeft: PropTypes.string,
   ignoreDisabledForChecked: PropTypes.bool
 };
 
-var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{cursor:pointer;margin:0 0 8px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
-var styles$c = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
-styleInject(css_248z$e);
+var css_248z$d = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{cursor:pointer;margin:0 0 8px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
+var styles$b = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
+styleInject(css_248z$d);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
   item,
+  hideBorder,
   tHeadFamily,
   tHeadPadding,
   tHeadFontSize,
+  tHeadTextAlign,
   tHeadFontWeight,
   handleCheckedHeader,
   borderTopLeftRadius,
@@ -398,19 +418,19 @@ const TH = ({
       fontFamily: tHeadFamily,
       fontWeight: tHeadFontWeight,
       borderTopLeftRadius: borderTopLeftRadius,
-      borderTopRightRadius: borderTopRightRadius
+      borderTopRightRadius: borderTopRightRadius,
+      borderColor: hideBorder ? 'transparent' : '#eeeeee'
     },
     onClick: handleHeaderItemClick,
-    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$c['sorting-arrows'] : '' : ''}`
+    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$b['sorting-arrows'] : '' : ''}`
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
+      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : tHeadTextAlign ? tHeadTextAlign === 'left' ? 'flex-start' : tHeadTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
     }
   }, hasOwnerProperty(item, 'checkBox') ? /*#__PURE__*/React__default.createElement(SingleCheckbox, {
     data: item,
-    float: "left",
     checked: item.checkBox.checked,
     disabled: item.checkBox.disabled,
     handleChecked: !item.checkBox.disabled ? handleCheckedHeader : _ => _,
@@ -425,8 +445,12 @@ const TH = ({
 };
 
 const TD = ({
+  row,
   item,
   index,
+  rowItem,
+  rowRadius,
+  hideBorder,
   innerIndex,
   tBodyColor,
   borderRight,
@@ -494,7 +518,12 @@ const TD = ({
       textAlign: tBodyTextAlign,
       fontFamily: tBodyFontFamily,
       fontWeight: tBodyFontWeight,
-      boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : ''
+      borderColor: hideBorder ? 'transparent' : '#eeeeee',
+      boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
+      borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
+      borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
+      borderTopRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
+      borderBottomRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px'
     }
   }, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
     if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
@@ -507,10 +536,10 @@ const TD = ({
         },
         id: newItem.id,
         type: newItem.type,
-        className: styles$c['td-span'],
+        className: styles$b['td-span'],
         key: `${newItem.id}_${newIndex}`,
         onClick: e => handleCheckActions(e, newItem, 'type', newIndex)
-      }, newItem.content);
+      }, newItem.content === 0 ? newItem.content.toString() : newItem.content ? newItem.content : '');
     } else if (newItem && Array.isArray(newItem)) {
       return /*#__PURE__*/React__default.createElement("span", {
         key: `${newItem.id}_${newIndex}`,
@@ -529,10 +558,10 @@ const TD = ({
           },
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
-          className: styles$c['td-span'],
+          className: styles$b['td-span'],
           onClick: e => handleCheckActions(e, iT, 'type', iN),
           key: `${iT.id || iT.content}_${iN}`
-        }, iT.content);
+        }, iT.content === 0 ? iT.content.toString() : iT.content ? iT.content : '');
       }));
     } else {
       return /*#__PURE__*/React__default.createElement("span", {
@@ -543,7 +572,7 @@ const TD = ({
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
+      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : tBodyTextAlign ? tBodyTextAlign === 'left' ? 'flex-start' : tBodyTextAlign === 'right' ? 'flex-end' : 'center' : 'center'
     }
   }, !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true) ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default.createElement("div", {
     id: item.id,
@@ -553,7 +582,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$c['td-span']
+    className: styles$b['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
     data: item,
     index: index,
@@ -574,7 +603,7 @@ const TD = ({
       cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto'
     },
     onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
-  }, item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default.createElement("span", {
+  }, item.content === 0 ? item.content.toString() : item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       display: 'block',
       position: 'relative'
@@ -598,7 +627,7 @@ const TD = ({
   }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default.createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
-      className: styles$c['dots-option-item'],
+      className: styles$b['dots-option-item'],
       style: {
         color: '#3C393E',
         fontSize: '14px',
@@ -619,7 +648,7 @@ const TD = ({
         marginBottom: '5px'
       },
       title: optionItem.content
-    }, optionItem.content));
+    }, optionItem.content === 0 ? optionItem.content.toString() : optionItem.content ? optionItem.content : ''));
   }))) : ''), hasOwnerProperty(item, 'contentList') && /*#__PURE__*/React__default.createElement("div", {
     style: {
       overflow: 'auto',
@@ -631,13 +660,13 @@ const TD = ({
   }, item.contentList.map((innerItem, innerItemIndex) => {
     return /*#__PURE__*/React__default.createElement("p", {
       key: `${innerItem}_${innerItemIndex}`,
-      className: styles$c['list-text'],
+      className: styles$b['list-text'],
       style: {
         color: openListColor,
         maxWidth: (item.content.length * 9 <= 100 ? 100 : item.content.length * 9) + 'px'
       },
       onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
-    }, innerItem.content);
+    }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
   }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default.createElement("div", {
     id: item.id,
     style: {
@@ -646,7 +675,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$c['td-span']
+    className: styles$b['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '') : '');
 };
 
@@ -708,10 +737,15 @@ const Table = ({
   arrowShow,
   dataHeader,
   arrowColumn,
+  tableRowItem,
+  tableRowRadius,
+  tableRowBGColor,
+  tableRowBoxShadow,
   tHeadColor,
   tHeadFamily,
   tHeadPadding,
   tHeadFontSize,
+  tHeadTextAlign,
   tHeadFontWeight,
   tHeadBorderRadius,
   tHeadBackgroundColor,
@@ -719,10 +753,14 @@ const Table = ({
   tBodyPadding,
   tBodyFontSize,
   tBodyTextAlign,
+  tBodyRowBorder,
+  tBodyBoxShadow,
   tBodyFontWeight,
   tBodyFontFamily,
-  tBodyRowBorder,
-  openListColor
+  tBodyRowMarginTop,
+  className,
+  openListColor,
+  hideBorder
 }) => {
   const [body, setBody] = useState([]);
   const [header, setHeader] = useState([]);
@@ -1003,7 +1041,6 @@ const Table = ({
     });
   };
   const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex, clickableItem) => {
-    console.log(clickableItem, 'clickableItem');
     let single = {};
     const allArrows = [];
     const checkedOpenableRow = body[arrowRowIndex].map((item, index) => {
@@ -1198,17 +1235,21 @@ const Table = ({
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("table", {
     style: {
       width: '100%',
-      borderCollapse: 'collapse'
+      borderCollapse: (tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem) ? 'separate' : 'collapse',
+      borderSpacing: `0 ${tBodyRowMarginTop ? tBodyRowMarginTop : configStyles.TABLE.tBodyRowMarginTop}`
     },
-    onClick: handleTableClick
+    onClick: handleTableClick,
+    className: className ? className : configStyles.TABLE.className
   }, header && header.length > 0 && /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
     style: {
       color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
-      backgroundColor: tHeadBackgroundColor ? tHeadBackgroundColor : configStyles.TABLE.tHeadBackgroundColor
+      backgroundColor: tHeadBackgroundColor ? tHeadBackgroundColor : configStyles.TABLE.tHeadBackgroundColor,
+      borderColor: hideBorder ? 'transparent' : '#eeeeee'
     }
   }, header.map((item, index) => {
     return /*#__PURE__*/React__default.createElement(TH, {
       item: item,
+      hideBorder: hideBorder,
       key: `${item}_${index}`,
       handleCheckedHeader: handleCheckedHeader,
       handleHeaderItemClick: handleHeaderItemClick,
@@ -1216,25 +1257,31 @@ const Table = ({
       tHeadFamily: tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily,
       tHeadPadding: tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding,
       tHeadFontSize: tHeadFontSize ? tHeadFontSize : configStyles.TABLE.tHeadFontSize,
+      tHeadTextAlign: tHeadTextAlign ? tHeadTextAlign : configStyles.TABLE.tHeadTextAlign,
       tHeadFontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
       borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
       borderTopRightRadius: index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
     });
   }))), body && body.length > 0 && /*#__PURE__*/React__default.createElement("tbody", {
     style: {
-      boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
+      boxShadow: tBodyBoxShadow ? tBodyBoxShadow : configStyles.TABLE.tBodyBoxShadow
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default.createElement("tr", {
       key: `${item}_${index}`,
       style: {
-        borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
+        backgroundColor: tableRowBGColor ? tableRowBGColor : configStyles.TABLE.tableRowBGColor,
+        borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder,
+        borderColor: hideBorder ? 'transparent' : '#eeeeee',
+        boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem) ? tableRowBoxShadow ? tableRowBoxShadow : configStyles.TABLE.tableRowBoxShadow : 'none'
       }
     }, Object.values(item).map((innerItem, innerIndex) => {
       return /*#__PURE__*/React__default.createElement(TD, {
         index: index,
         item: innerItem,
+        hideBorder: hideBorder,
         innerIndex: innerIndex,
+        row: Object.values(item),
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
@@ -1244,6 +1291,8 @@ const Table = ({
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
         tBodyColor: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
+        rowItem: tableRowItem ? tableRowItem : configStyles.TABLE.tableRowItem,
+        rowRadius: tableRowRadius ? tableRowRadius : configStyles.TABLE.tableRowRadius,
         tBodyPadding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
         tBodyFontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
         tBodyTextAlign: tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign,
@@ -1262,26 +1311,35 @@ Table.propTypes = {
   arrowShow: PropTypes.bool,
   dataHeader: PropTypes.array,
   arrowColumn: PropTypes.number,
+  tableRowItem: PropTypes.bool,
+  tableRowRadius: PropTypes.string,
+  tableRowBGColor: PropTypes.string,
+  tableRowBoxShadow: PropTypes.string,
   tHeadColor: PropTypes.string,
   tHeadFamily: PropTypes.string,
   tHeadPadding: PropTypes.string,
   tHeadFontSize: PropTypes.string,
+  tHeadTextAlign: PropTypes.string,
   tHeadFontWeight: PropTypes.number,
   tHeadBorderRadius: PropTypes.string,
   tHeadBackgroundColor: PropTypes.string,
   tBodyColor: PropTypes.string,
   tBodyPadding: PropTypes.string,
   tBodyFontSize: PropTypes.string,
+  tBodyBoxShadow: PropTypes.string,
   tBodyTextAlign: PropTypes.string,
   tBodyFontWeight: PropTypes.string,
   tBodyFontFamily: PropTypes.string,
+  tBodyRowMarginTop: PropTypes.string,
+  className: PropTypes.string,
   tBodyRowBorder: PropTypes.string,
-  openListColor: PropTypes.string
+  openListColor: PropTypes.string,
+  hideBorder: PropTypes.bool
 };
 
-var css_248z$d = ".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$b = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$d);
+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,
@@ -1426,9 +1484,10 @@ const Modal = ({
   layerBackgroundColor
 }) => {
   const [select, setSelect] = useState(0);
+  const [isHover, setIsHover] = useState(false);
   const [innerData, setInnerData] = useState([]);
   const configStyles = compereConfigs();
-  const classProps = classnames(className);
+  const classProps = classnames(className ? className : configStyles.MODAL.className);
   const handleCloseModal = () => {
     setShow(false);
   };
@@ -1460,6 +1519,12 @@ const Modal = ({
     imageLink.href = url, imageLink.target = '_blank';
     imageLink.click();
   };
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
   useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -1493,6 +1558,7 @@ const Modal = ({
     };
   }, []);
   return /*#__PURE__*/React__default.createElement("div", {
+    className: classProps,
     onClick: outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : _ => _,
     style: {
       top: '0px',
@@ -1513,7 +1579,7 @@ const Modal = ({
       justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${classProps} ${styles$b['animation__modal']}`,
+    className: `${styles$a['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
       position: 'relative',
@@ -1573,7 +1639,9 @@ const Modal = ({
       borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
       borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
       borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
-    }
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
   }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
@@ -1624,7 +1692,7 @@ const Modal = ({
             maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
           },
           src: item.url
-        }), showZoomIcon ? /*#__PURE__*/React__default.createElement("div", {
+        }), isHover && showZoomIcon ? /*#__PURE__*/React__default.createElement("div", {
           style: {
             top: '0px',
             left: '0px',
@@ -1715,9 +1783,9 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@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$a = {"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","inp-num":"input-module_inp-num__vH7HL"};
-styleInject(css_248z$c);
+var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@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","inp-num":"input-module_inp-num__vH7HL"};
+styleInject(css_248z$b);
 
 const InputTypes = {
   TEL: 'tel',
@@ -1773,6 +1841,7 @@ const Input = ({
   boxShadowHover,
   errorClassName,
   errorAnimation,
+  labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
@@ -1794,7 +1863,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames(className ? className : configStyles.INPUT.className, type === 'number' ? styles$a['inp-num'] : '');
+  const classProps = classnames(className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '', styles$9['input-wrap']);
   const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -2082,19 +2151,19 @@ const Input = ({
     }
   }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage, configStyles.INPUT.maxLength]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$a['input-wrap']}`
+    className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
-    className: `${styles$a['input-title']}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
       fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
       display: labelDisplay ? labelDisplay : configStyles.INPUT.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.INPUT.labelWeight,
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
-      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
+      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom,
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.INPUT.labelFontFamily
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$a['input-content']}`,
+    className: `${styles$9['input-content']}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
@@ -2136,7 +2205,6 @@ const Input = ({
     }
   }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
     value: innerValue,
-    className: classProps,
     onInput: handleChange,
     disabled: disabled ? disabled : '',
     name: name ? name : `tui_${random}_tui`,
@@ -2232,6 +2300,7 @@ Input.propTypes = {
   errorPosition: PropTypes.string,
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   telErrorMessage: PropTypes.string,
   backgroundColor: PropTypes.string,
   phoneAlignItems: PropTypes.string,
@@ -2254,9 +2323,9 @@ Input.defaultProps = {
   type: 'text'
 };
 
-var css_248z$b = ".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$9 = {"radio-wrap":"radio-module_radio-wrap__-lO7V","radio-checkmark":"radio-module_radio-checkmark__Kvol0"};
-styleInject(css_248z$b);
+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,
@@ -2269,11 +2338,11 @@ const Radio = ({
   label,
   ...props
 }) => {
-  const classProps = classnames(styles$9.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$9['radio-wrap']} radio-wrap-rem`,
+      className: `${styles$8['radio-wrap']} radio-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "radio",
@@ -2284,9 +2353,9 @@ const Radio = ({
       value: value ? value : element.value,
       name: name ? name : element.name
     }, props)), /*#__PURE__*/React__default.createElement("span", {
-      className: `${styles$9['radio-checkmark']} radio-checkmark-rem`
+      className: `${styles$8['radio-checkmark']} radio-checkmark-rem`
     }), element.label ? /*#__PURE__*/React__default.createElement("span", {
-      className: styles$9.labelRadio
+      className: styles$8.labelRadio
     }, label ? label : element.label) : '');
   }));
 };
@@ -2309,7 +2378,6 @@ Radio.defaultProps = {
 
 const Button = ({
   icon,
-  hoverIcon,
   size,
   type,
   font,
@@ -2327,6 +2395,7 @@ const Button = ({
   disabled,
   className,
   boxSizing,
+  hoverIcon,
   hoverColor,
   transition,
   contentWidth,
@@ -2346,7 +2415,7 @@ const Button = ({
     }
   }, []);
   const configStyles = compereConfigs();
-  const classProps = classnames(className);
+  const classProps = classnames(className ? className : configStyles.BUTTON.className);
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -2356,6 +2425,7 @@ const Button = ({
   return /*#__PURE__*/React__default.createElement("button", _extends({
     style: {
       display: 'flex',
+      outline: 'none',
       alignItems: 'center',
       justifyContent: 'center',
       fontSize: size ? size : configStyles.BUTTON.size,
@@ -2437,9 +2507,9 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$a = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;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:99999999999}.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}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
-var styles$8 = {"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","ellipsis":"select-module_ellipsis__uNgol"};
-styleInject(css_248z$a);
+var css_248z$9 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;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:99999999999}.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}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@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","ellipsis":"select-module_ellipsis__uNgol"};
+styleInject(css_248z$9);
 
 const Select = ({
   dots,
@@ -2465,6 +2535,7 @@ const Select = ({
   labelDisplay,
   labelFontSize,
   labelLineHeight,
+  labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
   cursor,
@@ -2506,7 +2577,7 @@ const Select = ({
   const [newSelected, setNewSelected] = useState([]);
   const [existOptions, setExistOptions] = useState([]);
   const configStyles = compereConfigs();
-  const classProps = classnames(className);
+  const classProps = classnames(className ? className : configStyles.SELECT.className);
   const handleOpenClose = () => {
     setOpened(!opened);
   };
@@ -2514,7 +2585,9 @@ const Select = ({
     onChange({});
     setNewSelected([]);
     const clearedOptions = existOptions && existOptions.length > 0 && existOptions.map(item => {
-      item.checked = false;
+      if (hasOwnerProperty(item, 'checked')) {
+        item.checked = false;
+      }
       return item;
     });
     setExistOptions(clearedOptions);
@@ -2619,13 +2692,14 @@ const Select = ({
       display: labelDisplay ? labelDisplay : configStyles.SELECT.labelDisplay,
       fontSize: labelFontSize ? labelFontSize : configStyles.SELECT.labelFontSize,
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.SELECT.labelLineHeight,
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.SELECT.labelFontFamily,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$8['select-content']
+    className: styles$7['select-content']
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
@@ -2643,9 +2717,9 @@ const Select = ({
     onClick: disabled ? _ => _ : () => handleOpenClose(),
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : () => handleMouseLeave(),
-    className: `${styles$8['select-content-top']}`
+    className: `${styles$7['select-content-top']}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$8['select-content-top-text']}`,
+    className: `${styles$7['select-content-top-text']}`,
     style: {
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: 'hidden',
@@ -2661,9 +2735,9 @@ const Select = ({
       }
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$8['select-content-top-icon']}`
+    className: `${styles$7['select-content-top-icon']}`
   }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$8['close-icon']}`,
+    className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
@@ -2672,7 +2746,7 @@ const Select = ({
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
-    className: `${styles$8['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,
@@ -2680,9 +2754,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$8['select-content-bottom']}`
+    className: `${styles$7['select-content-bottom']}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$8['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,
@@ -2691,7 +2765,7 @@ const Select = ({
       onClick: disabled ? _ => _ : () => handleSelectItem(option),
       onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
       onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
-      className: `${styles$8['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$8['ellipsis'] : ''}`,
+      className: `${styles$7['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$7['ellipsis'] : ''}`,
       style: {
         overflowWrap: !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
         color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
@@ -2742,6 +2816,7 @@ Select.propTypes = {
   labelDisplay: PropTypes.string,
   labelFontSize: PropTypes.string,
   labelLineHeight: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   labelMarginBottom: PropTypes.string,
   labelTextTransform: PropTypes.string,
   cursor: PropTypes.string,
@@ -2873,9 +2948,9 @@ const SvgToasterSuccess = ({
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
-var css_248z$9 = "#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}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@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$7 = {"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","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","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$9);
+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}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@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","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","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);
 
 let wWidth$1 = window.innerWidth;
 const ToasterType = {
@@ -2941,8 +3016,8 @@ const Toast = ({
       justifyContent: 'space-between'
     },
     className: `
-        ${styles$7['notify-block']}
-        ${position === 'top-left' ? showToaster ? styles$7['bounce-in-left'] : styles$7['bounce-out-left'] : position === 'top-right' ? showToaster ? styles$7['bounce-in-right'] : styles$7['bounce-out-right'] : position === 'top-center' ? showToaster ? styles$7['bounce-in-left'] : styles$7['bounce-out-left'] : position === 'bottom-left' ? showToaster ? styles$7['bounce-in-left'] : styles$7['bounce-out-left'] : position === 'bottom-right' ? showToaster ? styles$7['bounce-in-right'] : styles$7['bounce-out-right'] : position === 'bottom-center' ? showToaster ? styles$7['bounce-in-left'] : styles$7['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: {
@@ -2968,7 +3043,7 @@ const Toast = ({
       lineHeight: '22px',
       fontStyle: 'normal'
     },
-    className: styles$7['notify-title']
+    className: styles$6['notify-title']
   }, title ? title : ''), /*#__PURE__*/React__default.createElement("span", {
     style: {
       fontWeight: 500,
@@ -2979,7 +3054,7 @@ const Toast = ({
       fontFamily: '',
       opacity: 0.8
     },
-    className: styles$7['notify-desc']
+    className: styles$6['notify-desc']
   }, description ? description : '')), /*#__PURE__*/React__default.createElement("div", {
     onClick: () => handleCloseToaster(ref),
     style: {
@@ -3042,17 +3117,17 @@ const createToast = ({
     description
   });
   ReactDOM.render(newElem, toastBlock);
-  if (!document.getElementById(styles$7[position]) || document.getElementById(styles$7[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 = 999999999999;
     toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
-    toastParentBlock.setAttribute('id', styles$7[position]);
+    toastParentBlock.setAttribute('id', styles$6[position]);
     toastParentBlock.appendChild(toastBlock);
     toastify.appendChild(toastParentBlock);
   } else {
-    document.getElementById(styles$7[position]).appendChild(toastBlock);
+    document.getElementById(styles$6[position]).appendChild(toastBlock);
   }
 };
 const toast = {
@@ -3113,7 +3188,11 @@ const toast = {
     });
   }
 };
-const Toaster = () => {
+const Toaster = ({
+  className
+}) => {
+  const configStyles = compereConfigs();
+  const classProps = classnames(className ? className : configStyles.TOASTER.className);
   window.addEventListener('popstate', () => {
     if (path !== window.location.href) {
       if (!toastify) {
@@ -3130,6 +3209,7 @@ const Toaster = () => {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     onClick: handleToasterClick,
+    className: classProps,
     id: "toastify"
   });
 };
@@ -3153,9 +3233,9 @@ const SvgTooltip = ({
   fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
-var css_248z$8 = ".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$6 = {"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$8);
+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,
@@ -3178,7 +3258,7 @@ const Tooltip = ({
   const [checkTooltipHeight, setCheckTooltipHeight] = useState(0);
   const [showTooltip, setShowTooltip] = useState(false);
   const configStyles = compereConfigs();
-  const classProps = classnames(styles$6['tooltip'], className);
+  const classProps = classnames(styles$5['tooltip-block'], className ? className : configStyles.TOOLTIP.className);
   const handleShow = () => {
     setShowTooltip(!showTooltip);
   };
@@ -3190,7 +3270,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$6['tooltip-block']}`,
+    className: classProps,
     style: {
       width: width ? width : configStyles.TOOLTIP.width,
       height: height ? height : configStyles.TOOLTIP.height,
@@ -3199,7 +3279,7 @@ const Tooltip = ({
     }
   }, showTooltip ? /*#__PURE__*/React__default.createElement("div", {
     ref: tooltipRef,
-    className: classProps,
+    className: `${styles$5['tooltip']}`,
     style: {
       width: tooltipWidth ? tooltipWidth : configStyles.TOOLTIP.tooltipWidth,
       borderRadius: tooltipRadius ? tooltipRadius : configStyles.TOOLTIP.tooltipRadius,
@@ -3208,9 +3288,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$6['tooltip-rel']}`
+    className: `${styles$5['tooltip-rel']}`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$6['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',
@@ -3287,20 +3367,22 @@ const SvgCaptchaArrowDown = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-var css_248z$7 = ".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$5 = {"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$7);
+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,
   color,
   range,
   label,
+  className,
   getRange
 }) => {
   const [rangeNumber, setRangeNumber] = useState(0);
   const [rangeProgress, setRangeProgress] = useState(0);
   const configStyles = compereConfigs();
+  const classProps = classnames(className ? className : configStyles.CAPTCHA.className);
   const handleRange = e => {
     const value = e.target.value;
     getRange(value);
@@ -3322,7 +3404,9 @@ const Captcha = ({
       setRangeNumber(Math.min(roundedRange, 100));
     }
   }, [range, getRange]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("p", {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classProps
+  }, label && /*#__PURE__*/React__default.createElement("p", {
     style: {
       fontSize: size ? size : configStyles.Captcha.size,
       color: color ? color : configStyles.Captcha.color
@@ -3352,7 +3436,7 @@ const Captcha = ({
       alignItems: 'center',
       zIndex: 1
     },
-    className: styles$5['start-point']
+    className: styles$4['start-point']
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
@@ -3378,8 +3462,8 @@ const Captcha = ({
       backgroundColor: 'transparent'
     },
     className: `
-                            ${styles$5['range']}
-                            ${+rangeProgress === rangeNumber ? styles$5['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$5['range-error'] : styles$5['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", {
@@ -3409,24 +3493,26 @@ Captcha.propTypes = {
   getRange: PropTypes.func.isRequired
 };
 
-var css_248z$6 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;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$4 = {"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$6);
+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%;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 = ({
   stepLength,
-  activeSteps
+  activeSteps,
+  className
 }) => {
+  const configStyles = compereConfigs();
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$4['stepper-container']} stepper-container-rem`
+    className: classnames(className ? className : configStyles.STEPPER.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$4.activeRing : styles$4.bigRing}`),
+        className: classnames(`${step <= activeSteps ? styles$3.activeRing : styles$3.bigRing}`),
         key: step
       }, /*#__PURE__*/React__default.createElement("div", {
-        className: classnames(`${step <= activeSteps ? styles$4.smallActiveRing : styles$4.smallRing}`)
+        className: classnames(`${step <= activeSteps ? styles$3.smallActiveRing : styles$3.smallRing}`)
       }, step <= activeSteps ? step : '')));
     }
     return steppers;
@@ -3472,7 +3558,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -3927,6 +4013,7 @@ const NewFile = ({
   disabled,
   multiple,
   required,
+  className,
   errorSize,
   labelSize,
   removeFile,
@@ -3971,13 +4058,14 @@ const NewFile = ({
 }) => {
   const ref = useRef(null);
   const inpRef = useRef(null);
+  const configStyles = compereConfigs();
   const memoizedItems = useMemo(() => filesArray, [filesArray]);
+  const classProps = classnames(className ? className : configStyles.FILE.className);
   const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [singleFile, setSingleFile] = useState(null);
   const [choosenFileCount, setChoosenFileCount] = useState(0);
   const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
-  const configStyles = compereConfigs();
   const handleRemoveComponent = () => {
     if (!multiple) {
       removeFile && removeFile(singleFile);
@@ -4180,8 +4268,9 @@ const NewFile = ({
     ref: ref,
     style: {
       width: '100%',
-      maxWidth: maxWidth ? maxWidth : configStyles.File.maxWidth
-    }
+      maxWidth: maxWidth ? maxWidth : configStyles.FILE.maxWidth
+    },
+    className: classProps
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -4191,8 +4280,8 @@ const NewFile = ({
     }
   }, label && /*#__PURE__*/React__default.createElement("label", {
     style: {
-      color: labelColor ? labelColor : configStyles.File.labelColor,
-      fontSize: labelSize ? labelSize : configStyles.File.labelSize
+      color: labelColor ? labelColor : configStyles.FILE.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.FILE.labelSize
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
     style: {
@@ -4208,11 +4297,11 @@ const NewFile = ({
       boxSizing: 'border-box',
       justifyContent: 'center',
       cursor: !disabled ? 'pointer' : 'not-allowed',
-      height: height ? height : configStyles.File.height,
-      border: border ? border : configStyles.File.border,
-      borderRadius: radius ? radius : configStyles.File.radius,
-      backgroundColor: backgroundColor ? backgroundColor : configStyles.File.backgroundColor,
-      borderColor: error ? errorColor ? errorColor : configStyles.File.errorColor : disabled ? borderColor ? borderColor : configStyles.File.borderColor : isHover ? borderHoverColor ? borderHoverColor : configStyles.File.borderHoverColor : borderColor ? borderColor : configStyles.File.borderColor
+      height: height ? height : configStyles.FILE.height,
+      border: border ? border : configStyles.FILE.border,
+      borderRadius: radius ? radius : configStyles.FILE.radius,
+      backgroundColor: backgroundColor ? backgroundColor : configStyles.FILE.backgroundColor,
+      borderColor: error ? errorColor ? errorColor : configStyles.FILE.errorColor : disabled ? borderColor ? borderColor : configStyles.FILE.borderColor : isHover ? borderHoverColor ? borderHoverColor : configStyles.FILE.borderHoverColor : borderColor ? borderColor : configStyles.FILE.borderColor
     },
     onDrop: handleDrop,
     onClick: handleClick,
@@ -4236,9 +4325,9 @@ const NewFile = ({
       alignItems: 'center',
       flexDirection: 'column',
       justifyContent: 'center',
-      color: color ? color : configStyles.File.color,
-      fontSize: size ? size : configStyles.File.size,
-      fontWeight: weight ? weight : configStyles.File.weight
+      color: color ? color : configStyles.FILE.color,
+      fontSize: size ? size : configStyles.FILE.size,
+      fontWeight: weight ? weight : configStyles.FILE.weight
     }
   }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default.createElement(SvgHeic, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
@@ -4247,27 +4336,27 @@ const NewFile = ({
       maxWidth: '100%',
       maxHeight: '95%',
       objectFit: 'contain',
-      width: fileAreaImageWidth ? fileAreaImageWidth : configStyles.File.fileAreaImageWidth,
-      height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.File.fileAreaImageHeight
+      width: fileAreaImageWidth ? fileAreaImageWidth : configStyles.FILE.fileAreaImageWidth,
+      height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.FILE.fileAreaImageHeight
     },
     alt: "file preview"
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SvgUpload, null)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px'
     }
-  }, putFileHere ? putFileHere : configStyles.File.putFileHere, /*#__PURE__*/React__default.createElement("br", null), or ? or : configStyles.File.or, ' ', /*#__PURE__*/React__default.createElement("span", {
+  }, putFileHere ? putFileHere : configStyles.FILE.putFileHere, /*#__PURE__*/React__default.createElement("br", null), or ? or : configStyles.FILE.or, ' ', /*#__PURE__*/React__default.createElement("span", {
     style: {
-      color: uploadColor ? uploadColor : configStyles.File.uploadColor
+      color: uploadColor ? uploadColor : configStyles.FILE.uploadColor
     }
-  }, upload ? upload : configStyles.File.upload))), /*#__PURE__*/React__default.createElement("div", {
+  }, upload ? upload : configStyles.FILE.upload))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      marginTop: extentionsRowMarginTop ? extentionsRowMarginTop : configStyles.File.extentionsRowMarginTop
+      marginTop: extentionsRowMarginTop ? extentionsRowMarginTop : configStyles.FILE.extentionsRowMarginTop
     }
   }, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px'
     }
-  }, fileSizeText ? fileSizeText : configStyles.File.fileSizeText, " ", maxSize, "\u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default.createElement("div", {
+  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, "\u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -4280,9 +4369,9 @@ const NewFile = ({
       boxSizing: 'border-box',
       alignItems: 'flex-start',
       justifyContent: 'flex-end',
-      borderRadius: radius ? radius : configStyles.File.radius,
+      borderRadius: radius ? radius : configStyles.FILE.radius,
       display: !multiple && !disabled && image && !error && isHover ? 'flex' : 'none',
-      backgroundColor: hiddenBackgroundColor ? hiddenBackgroundColor : configStyles.File.hiddenBackgroundColor
+      backgroundColor: hiddenBackgroundColor ? hiddenBackgroundColor : configStyles.FILE.hiddenBackgroundColor
     },
     onClick: handleStopPropagation
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -4294,8 +4383,8 @@ const NewFile = ({
     style: {
       marginTop: '6px',
       display: 'inline-block',
-      color: errorColor ? errorColor : configStyles.File.errorColor,
-      fontSize: errorSize ? errorSize : configStyles.File.errorSize
+      color: errorColor ? errorColor : configStyles.FILE.errorColor,
+      fontSize: errorSize ? errorSize : configStyles.FILE.errorSize
     }
   }, error) : '', multiple && memoizedItems && memoizedItems.length > 0 && memoizedItems.map(item => {
     return /*#__PURE__*/React__default.createElement(FileItem, {
@@ -4307,20 +4396,20 @@ const NewFile = ({
       name: item.file.name,
       timeForRemoveError: timeForRemoveError,
       removeFile: removeFile ? removeFile : _ => _,
-      radius: radius ? radius : configStyles.File.radius,
+      radius: radius ? radius : configStyles.FILE.radius,
       fileFormat: item.file.type.split('/')[1]?.toLowerCase(),
-      progressColor: progressColor ? progressColor : configStyles.File.progressColor,
-      listItemHeight: listItemHeight ? listItemHeight : configStyles.File.listItemHeight,
-      listItemPadding: listItemPadding ? listItemPadding : configStyles.File.listItemPadding,
-      progressFontSize: progressFontSize ? progressFontSize : configStyles.File.progressFontSize,
-      listItemErrorSize: listItemErrorSize ? listItemErrorSize : configStyles.File.listItemErrorSize,
-      listItemErrorColor: listItemErrorColor ? listItemErrorColor : configStyles.File.listItemErrorColor,
-      progressTrackColor: progressTrackColor ? progressTrackColor : configStyles.File.progressTrackColor,
-      progressFailedColor: progressFailedColor ? progressFailedColor : configStyles.File.progressFailedColor,
-      progressSuccessColor: progressSuccessColor ? progressSuccessColor : configStyles.File.progressSuccessColor,
-      progressLoadingColor: progressLoadingColor ? progressLoadingColor : configStyles.File.progressLoadingColor,
-      listItemBackgroundColor: listItemBackgroundColor ? listItemBackgroundColor : configStyles.File.listItemBackgroundColor,
-      listItemBackgroundErrorColor: listItemBackgroundErrorColor ? listItemBackgroundErrorColor : configStyles.File.listItemBackgroundErrorColor
+      progressColor: progressColor ? progressColor : configStyles.FILE.progressColor,
+      listItemHeight: listItemHeight ? listItemHeight : configStyles.FILE.listItemHeight,
+      listItemPadding: listItemPadding ? listItemPadding : configStyles.FILE.listItemPadding,
+      progressFontSize: progressFontSize ? progressFontSize : configStyles.FILE.progressFontSize,
+      listItemErrorSize: listItemErrorSize ? listItemErrorSize : configStyles.FILE.listItemErrorSize,
+      listItemErrorColor: listItemErrorColor ? listItemErrorColor : configStyles.FILE.listItemErrorColor,
+      progressTrackColor: progressTrackColor ? progressTrackColor : configStyles.FILE.progressTrackColor,
+      progressFailedColor: progressFailedColor ? progressFailedColor : configStyles.FILE.progressFailedColor,
+      progressSuccessColor: progressSuccessColor ? progressSuccessColor : configStyles.FILE.progressSuccessColor,
+      progressLoadingColor: progressLoadingColor ? progressLoadingColor : configStyles.FILE.progressLoadingColor,
+      listItemBackgroundColor: listItemBackgroundColor ? listItemBackgroundColor : configStyles.FILE.listItemBackgroundColor,
+      listItemBackgroundErrorColor: listItemBackgroundErrorColor ? listItemBackgroundErrorColor : configStyles.FILE.listItemBackgroundErrorColor
     });
   }));
 };
@@ -4337,8 +4426,8 @@ NewFile.propTypes = {
   upload: PropTypes.string,
   weight: PropTypes.number,
   maxSize: PropTypes.number,
-  maxWidth: PropTypes.string,
   removeFile: PropTypes.func,
+  className: PropTypes.string,
   errorSize: PropTypes.string,
   labelSize: PropTypes.string,
   labelColor: PropTypes.string,
@@ -4387,89 +4476,94 @@ NewFile.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 };
 
-var css_248z$5 = ".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$3 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
-styleInject(css_248z$5);
-
+const DirectionMode = {
+  VERTICAL: 'vertical',
+  HORINZONTAL: 'horizontal'
+};
 const Checkbox = ({
-  disabled,
-  required,
-  className,
-  jsonData,
-  onChange,
+  data,
+  getData,
   keyNames,
-  onClick,
-  ...props
+  className,
+  direction,
+  checkedIcon,
+  unCheckedIcon,
+  labelMarginLeft,
+  checkBoxMarginBottom
 }) => {
-  const classProps = classnames(styles$3.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]);
+  const configStyles = compereConfigs();
+  const [innerData, setInnerData] = useState([]);
+  const classProps = classnames(className ? className : configStyles.CHECKBOX.className);
+  const handleSendData = (_, e, index) => {
+    const dataForSend = {};
+    setInnerData(prev => prev.map((innerItem, innerIndex) => {
+      if (innerIndex === index) {
+        innerItem[keyNames.checked] = !innerItem[keyNames.checked];
+        dataForSend.item = innerItem;
+        dataForSend.itemIndex = innerIndex;
+        dataForSend.itemId = innerItem[keyNames.id];
+      }
+      return innerItem;
+    }));
+    dataForSend.checkboxArr = innerData;
+    getData && getData(dataForSend);
+  };
   useEffect(() => {
-    onChange ? onChange(data.filter(d => d.checked)) : '';
+    if (Array.isArray(data)) {
+      setInnerData(data);
+    } else {
+      setInnerData([data]);
+    }
   }, [data]);
-  const handleChange = e => {
-    let id;
-    data.forEach((value, key) => {
-      if (value[keyNames.value] === e.target.value) {
-        id = key;
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: direction === 'vertical' ? 'column' : 'row'
+    },
+    className: classProps
+  }, innerData && innerData.length > 0 && innerData.map((item, index) => {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: `TUI_${index}_checkbox`,
+      style: {
+        width: 'fit-content',
+        marginBottom: direction === 'vertical' ? checkBoxMarginBottom ? checkBoxMarginBottom : configStyles.CHECKBOX.checkBoxMarginBottom : '0px'
       }
-    });
-    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$3['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$3['checkmark']} checkmark-rem`
-    }), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
-      className: styles$3.labelCheckbox,
-      htmlFor: element[keyNames.id]
-    }, element[keyNames.label]) : '');
+    }, /*#__PURE__*/React__default.createElement(SingleCheckbox, {
+      data: item,
+      index: index,
+      checkedColor: "#00236A",
+      unCheckedColor: "#D1D1D1",
+      checkedIcon: checkedIcon,
+      label: item[keyNames.label],
+      unCheckedIcon: unCheckedIcon,
+      handleChecked: handleSendData,
+      checked: item[keyNames.checked],
+      disabled: item[keyNames.disabled],
+      ignoreDisabledForChecked: item[keyNames.ignoreDisabledForChecked],
+      labelMarginLeft: labelMarginLeft ? labelMarginLeft : configStyles.CHECKBOX.labelMarginLeft
+    }));
   }));
 };
 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
+  getData: PropTypes.func,
+  keyNames: PropTypes.object,
+  checkedIcon: PropTypes.element,
+  unCheckedIcon: PropTypes.element,
+  labelMarginLeft: PropTypes.string,
+  checkBoxMarginBottom: PropTypes.string,
+  direction: PropTypes.oneOf(Object.values(DirectionMode)),
+  data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
 };
 Checkbox.defaultProps = {
-  onChange: undefined,
-  jsonData: '[{"value":"email", "name":"contact1", "label":"Email", "id":"contactChoice1"}, {"value":"phone", "name":"contact2", "label":"Phone", "id":"contactChoice2"}]'
+  direction: 'vertical',
+  keyNames: {
+    id: 'id',
+    label: 'label',
+    checked: 'checked',
+    disabled: 'disabled',
+    ignoreDisabledForChecked: 'ignoreDisabledForChecked'
+  }
 };
 
 var css_248z$4 = "textarea{-webkit-appearance:none}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}";
@@ -4497,12 +4591,14 @@ const Textarea = ({
   labelSize,
   errorSize,
   marginTop,
+  className,
   labelColor,
   errorColor,
   labelWeight,
   placeholder,
   labelDisplay,
   errorMessage,
+  labelFontFamily,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
@@ -4514,6 +4610,7 @@ const Textarea = ({
   const [isFocus, setIsFocus] = useState(false);
   const [innerValue, setInnerValue] = useState('');
   const configStyles = compereConfigs();
+  const classProps = classnames(className ? className : configStyles.TEXTAREA.className);
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -4561,12 +4658,14 @@ const Textarea = ({
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: width ? width : configStyles.TEXTAREA.width
-    }
+    },
+    className: classProps
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: label ? 'space-between' : 'flex-end',
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.TEXTAREA.labelFontFamily,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom
     }
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -4638,12 +4737,14 @@ Textarea.propTypes = {
   maxLength: PropTypes.number,
   labelSize: PropTypes.string,
   errorSize: PropTypes.string,
+  className: PropTypes.string,
   labelColor: PropTypes.string,
   errorColor: PropTypes.string,
   labelWeight: PropTypes.string,
   placeholder: PropTypes.string,
   errorMessage: PropTypes.string,
   labelDisplay: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   backgroundColor: PropTypes.string,
   showCharacterCount: PropTypes.bool,
   value: PropTypes.string.isRequired,
@@ -4689,7 +4790,7 @@ const Typography = ({
   ...props
 }) => {
   const configStyles = compereConfigs();
-  const classProps = classnames(className);
+  const classProps = classnames(className ? className : configStyles.TYPOGRAPHY.className);
   const [isHover, setIsHover] = useState(false);
   const [validVariant, setValidVariant] = useState(false);
   useEffect(() => {
@@ -4843,6 +4944,7 @@ const Pagination = ({
   totalCount,
   currentPage
 }) => {
+  const configStyles = compereConfigs();
   const [inpVal, setInpVal] = useState('');
   const [error, setError] = useState(false);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
@@ -4869,7 +4971,7 @@ const Pagination = ({
   if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
   }
-  const classProps = classnames(styles$2.list, className ? className : `${styles$2['pagination-bar']} pagination-bar-rem`);
+  const classProps = classnames(styles$2.list, className ? className : configStyles.PAGINATION.className, `${styles$2['pagination-bar']} pagination-bar-rem`);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -4923,10 +5025,9 @@ const Pagination = ({
       margin: '0 auto',
       alignItems: 'center',
       justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React__default.createElement("ul", {
+    },
     className: classProps
-  }, /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("button", {
     style: {
       transform: 'rotate(180deg)'
     },
@@ -5158,6 +5259,7 @@ const NewAutocomplete = ({
   contentPosition,
   contentTopColor,
   labelLineHeight,
+  labelFontFamily,
   contentDirection,
   contentTopWeight,
   contentTopRadius,
@@ -5270,7 +5372,7 @@ const NewAutocomplete = ({
     setInnerValue(selectedValue[keyNames.name]);
     getItem(selectedValue);
   };
-  const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+  const optionList = /*#__PURE__*/React__default.createElement("div", null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
       width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
@@ -5360,12 +5462,15 @@ const NewAutocomplete = ({
   useEffect(() => {
     setInnerError(errorMessage);
   }, [errorMessage]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classProps
+  }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
       fontSize: labelSize ? labelSize : configStyles.NEWAUTOCOMPLETE.labelSize,
       display: labelDisplay ? labelDisplay : configStyles.NEWAUTOCOMPLETE.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.NEWAUTOCOMPLETE.labelWeight,
+      fontFamily: labelFontFamily ? labelFontFamily : configStyles.NEWAUTOCOMPLETE.labelFontFamily,
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
       maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
@@ -5388,7 +5493,6 @@ const NewAutocomplete = ({
     onInput: handleChange,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    className: classProps,
     placeholder: placeHolder ? placeHolder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete,
     style: {
@@ -5445,6 +5549,7 @@ NewAutocomplete.propTypes = {
   labelLineHeight: PropTypes.string,
   contentTopColor: PropTypes.string,
   change: PropTypes.func.isRequired,
+  labelFontFamily: PropTypes.string,
   contentDirection: PropTypes.string,
   contentTopWeight: PropTypes.number,
   contentTopRadius: PropTypes.string,
@@ -5502,4 +5607,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, DirectionMode, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };