@xaypay/tui 0.0.105 → 0.0.106

package/dist/index.es.js

@@ -77,11 +77,9 @@ const File = ({
   required,
   disabled,
   onChange,
-  className,
   defaultData,
   errorMessage,
-  fileExtensions,
-  ...props
+  fileExtensions
 }) => {
   const [error, setError] = useState('');
   const [fileName, setFileName] = useState('no selected file');
@@ -127,13 +125,13 @@ const File = ({
       target: null
     });
     setFileName('no selected file');
-    document.querySelector(`.${name}`).value = "";
+    document.querySelector(`.${name}`).value = '';
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: `${styles$c['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: '#ee0000'
     }
   }, "*")), /*#__PURE__*/React__default.createElement("div", {
     className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
@@ -290,7 +288,7 @@ const Checkbox$1 = ({
     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));
 };
 
 const SingleCheckbox = ({
@@ -326,12 +324,12 @@ const SingleCheckbox = ({
   });
 };
 SingleCheckbox.propTypes = {
+  data: PropTypes.object,
   onClick: PropTypes.func,
   styles: PropTypes.object,
   disabled: PropTypes.bool,
   checkedColor: PropTypes.string,
-  unCheckedColor: PropTypes.string,
-  data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired
+  unCheckedColor: PropTypes.string
 };
 
 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{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
@@ -353,10 +351,13 @@ styleInject(css_248z$e);
   tBodyFontWeight: PropTypes.string,
   tBodyFontFamily: PropTypes.string,
   tBodyRowBorder: PropTypes.string,
-  handleCheckedBody: PropTypes.func,
-  handleCheckedHeader: PropTypes.func,
-  handleHeaderItemClick: PropTypes.func,
-  handleBodyActionClick: PropTypes.func
+  // handleCheckedBody: PropTypes.func,
+  // handleCheckedHeader: PropTypes.func,
+  // handleHeaderItemClick: PropTypes.func,
+  // handleBodyActionClick: PropTypes.func
+
+  setTableDataBody: PropTypes.func,
+  setTableDataHeader: PropTypes.func
 });
 
 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)}}";
@@ -477,7 +478,8 @@ const Modal = ({
   justifyContent,
   backgroundColor,
   grayDecorHeight,
-  layerBackgroundColor
+  layerBackgroundColor,
+  imageWrapHeight
 }) => {
   const [select, setSelect] = useState(0);
   const [innerData, setInnerData] = useState([]);
@@ -650,10 +652,12 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      height: '100%'
+      width: '100%',
+      height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
     if (select === index) {
+      // eslint-disable-next-line no-prototype-builtins
       if (!item.hasOwnProperty('url')) {
         alert('Please add url property in data prop on each element');
       } else {
@@ -672,7 +676,7 @@ const Modal = ({
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
-    onClick: _ => handleGoTo('prev'),
+    onClick: () => handleGoTo('prev'),
     style: {
       position: 'absolute',
       left: '14px',
@@ -686,7 +690,7 @@ const Modal = ({
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/React__default.createElement(SvgPrev, null)), /*#__PURE__*/React__default.createElement("button", {
-    onClick: _ => handleGoTo('next'),
+    onClick: () => handleGoTo('next'),
     style: {
       position: 'absolute',
       width: '24px',
@@ -741,9 +745,9 @@ styleInject(css_248z$c);
 
 const InputTypes = {
   TEL: 'tel',
-  TEXT: "text",
+  TEXT: 'text',
   NUMBER: 'number',
-  PASSWORD: "password"
+  PASSWORD: 'password'
 };
 const P = styled.span`
     animation: ${props => props.errorAnimation ? props.animation : 'none'};
@@ -789,7 +793,6 @@ const Input = ({
   errorMessage,
   autoComplete,
   labelDisplay,
-  errorPosition,
   boxShadowHover,
   errorClassName,
   errorAnimation,
@@ -825,7 +828,7 @@ const Input = ({
             -o-transform: scale3d(1,1,1);
         }
     `;
-  const animation = _ => css`
+  const animation = () => css`
         ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
     `;
   const handleChange = event => {
@@ -1076,9 +1079,9 @@ const Input = ({
     }
   }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$a["input-wrap"]}`
+    className: `${styles$a['input-wrap']}`
   }, label ? /*#__PURE__*/React__default.createElement("label", {
-    className: `${styles$a["input-title"]}`,
+    className: `${styles$a['input-title']}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
       fontSize: labelSize ? labelSize : configStyles.INPUT.labelSize,
@@ -1089,10 +1092,10 @@ const Input = ({
     }
   }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
-      color: errorColor ? errorColor : "#ee0000"
+      color: errorColor ? errorColor : '#ee0000'
     }
   }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$a["input-content"]}`,
+    className: `${styles$a['input-content']}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
@@ -1136,7 +1139,7 @@ const Input = ({
     value: innerValue,
     className: classProps,
     onInput: handleChange,
-    disabled: disabled ? disabled : "",
+    disabled: disabled ? disabled : '',
     name: name ? name : `tui_${random}_tui`,
     placeholder: placeholder ? placeholder : '',
     type: show || type === 'number' ? 'text' : type,
@@ -1248,7 +1251,7 @@ Input.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 Input.defaultProps = {
-  type: "text"
+  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}";
@@ -1264,28 +1267,27 @@ const Radio = ({
   value,
   jsonData,
   label,
-  keyNames,
   ...props
 }) => {
   const classProps = classnames(styles$9.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$9['radio-wrap']} radio-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "radio",
       className: classProps,
       disabled: disabled,
       required: required,
-      defaultChecked: id === 0 ? defaultChecked : "",
+      defaultChecked: id === 0 ? defaultChecked : '',
       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$9['radio-checkmark']} radio-checkmark-rem`
     }), element.label ? /*#__PURE__*/React__default.createElement("span", {
       className: styles$9.labelRadio
-    }, label ? label : element.label) : "");
+    }, label ? label : element.label) : '');
   }));
 };
 Radio.propTypes = {
@@ -1307,6 +1309,7 @@ Radio.defaultProps = {
 
 const Button = ({
   icon,
+  hoverIcon,
   size,
   type,
   font,
@@ -1373,21 +1376,22 @@ const Button = ({
     },
     type: type ? type : configStyles.BUTTON.type,
     disabled: disabled ? disabled : configStyles.BUTTON.disabled,
-    onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : _ => alert('Add click event handler on Button component') : _ => _,
+    onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : () => alert('Add click event handler on Button component') : _ => _,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), icon && icon, " ", label && /*#__PURE__*/React__default.createElement("span", {
+  }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default.createElement("span", {
     style: {
       marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px'
     }
-  }, label), " ", !icon && !label && 'Add icon or label prop on Button component');
+  }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
 };
 Button.propTypes = {
   type: PropTypes.string,
   size: PropTypes.string,
   font: PropTypes.string,
   icon: PropTypes.element,
+  hoverIcon: PropTypes.element,
   color: PropTypes.string,
   width: PropTypes.string,
   outline: PropTypes.bool,
@@ -1558,6 +1562,7 @@ const Select = ({
   };
   const isObjectEmpty = obj => {
     for (var key in obj) {
+      // eslint-disable-next-line no-prototype-builtins
       if (obj.hasOwnProperty(key)) {
         return false;
       }
@@ -1571,9 +1576,9 @@ const Select = ({
           setOpened(false);
         }
       };
-      document.addEventListener("mousedown", checkIfClickedOutside);
+      document.addEventListener('mousedown', checkIfClickedOutside);
       return () => {
-        document.removeEventListener("mousedown", checkIfClickedOutside);
+        document.removeEventListener('mousedown', checkIfClickedOutside);
       };
     }
   }, [opened]);
@@ -1588,7 +1593,7 @@ const Select = ({
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
-      const modifiedOptions = options && options.length > 0 && options.map((item, index) => {
+      const modifiedOptions = options && options.length > 0 && options.map(item => {
         item.checked = false;
         if (selected && selected.length > 0) {
           selected.map(innerItem => {
@@ -1619,9 +1624,9 @@ const Select = ({
     }
   }, label, required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: '#ee0000'
     }
-  }, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
+  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$8['select-content']
@@ -1639,9 +1644,9 @@ const Select = ({
       backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
       boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
     },
-    onClick: disabled ? _ => _ : _ => handleOpenClose(),
-    onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
-    onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
+    onClick: disabled ? _ => _ : () => handleOpenClose(),
+    onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
+    onMouseLeave: disabled ? _ => _ : () => handleMouseLeave(),
     className: `${styles$8['select-content-top']}`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8['select-content-top-text']}`,
@@ -1687,7 +1692,7 @@ const Select = ({
       key: i,
       disabled: true,
       defaultValue: option[keyNames.id],
-      onClick: disabled ? _ => _ : _ => handleSelectItem(option),
+      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'] : ''}`,
@@ -2002,6 +2007,7 @@ Toast.defaultProps = {
 let toastify;
 let path = window.location.href;
 const removeToast = ref => {
+  // eslint-disable-next-line react/no-find-dom-node
   const node = ReactDOM.findDOMNode(ref.current);
   const removeElem = node.parentNode;
   const parent = removeElem.parentNode;
@@ -2176,7 +2182,7 @@ const Tooltip = ({
   const handleShow = () => {
     setShowTooltip(!showTooltip);
   };
-  useEffect(_ => {
+  useEffect(() => {
     if (!text) {
       alert('Add text on tooltip');
     }
@@ -2354,7 +2360,6 @@ const Captcha = ({
       right: '0px',
       width: '100%',
       height: '4px',
-      borderRadius: '2px',
       backgroundColor: '#EEEEEE',
       borderRadius: '10px',
       zIndex: -2
@@ -2386,7 +2391,6 @@ const Captcha = ({
       height: '4px',
       borderRadius: '2px',
       backgroundColor: +rangeProgress === rangeNumber ? '#0DA574' : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? '#EE0000' : 'transparent',
-      borderRadius: '2px',
       zIndex: -1
     }
   })), /*#__PURE__*/React__default.createElement("div", {
@@ -2410,12 +2414,9 @@ var styles$4 = {"stepper-container":"stepper-module_stepper-container__-OVGy","b
 styleInject(css_248z$6);
 
 const Stepper = ({
-  className,
-  onChange,
   stepLength,
   activeSteps
 }) => {
-  classnames(className, 'stepper-inner-rem');
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['stepper-container']} stepper-container-rem`
   }, (() => {
@@ -2426,7 +2427,7 @@ const Stepper = ({
         key: step
       }, /*#__PURE__*/React__default.createElement("div", {
         className: classnames(`${step <= activeSteps ? styles$4.smallActiveRing : styles$4.smallRing}`)
-      }, step <= activeSteps ? step : "")));
+      }, step <= activeSteps ? step : '')));
     }
     return steppers;
   })());
@@ -2471,7 +2472,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);
@@ -2606,6 +2607,7 @@ const SvgListItemDelete = ({
   fill: fillColor ? fillColor : '#051942'
 }));
 
+// eslint-disable-next-line react/display-name
 const FileItem = /*#__PURE__*/React__default.memo(({
   size,
   name,
@@ -2897,6 +2899,7 @@ const NewFile = ({
   const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
   const configStyles = compereConfigs();
   const handleRemoveComponent = () => {
+    // eslint-disable-next-line react/no-find-dom-node
     const node = ReactDOM.findDOMNode(ref.current);
     const parent = node.parentNode;
     parent.removeChild(node);
@@ -3117,7 +3120,7 @@ const NewFile = ({
     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
     }
@@ -3129,7 +3132,7 @@ const NewFile = ({
     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',
@@ -3169,7 +3172,7 @@ const NewFile = ({
       name: item.file.name,
       removeFile: removeFile ? removeFile : _ => _,
       radius: radius ? radius : configStyles.File.radius,
-      fileFormat: item.file.type.split('/')[1].toLowerCase(),
+      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,
@@ -3250,11 +3253,8 @@ const Checkbox = ({
   disabled,
   required,
   className,
-  name,
-  value,
   jsonData,
   onChange,
-  label,
   keyNames,
   onClick,
   ...props
@@ -3292,7 +3292,7 @@ const Checkbox = ({
   } : '';
   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`,
+      className: `${styles$3['checkbox-wrap']} checkbox-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "checkbox",
@@ -3306,11 +3306,11 @@ const Checkbox = ({
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
     }, props)), /*#__PURE__*/React__default.createElement("span", {
-      className: `${styles$3["checkmark"]} checkmark-rem`
+      className: `${styles$3['checkmark']} checkmark-rem`
     }), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
       className: styles$3.labelCheckbox,
-      for: element[keyNames.id]
-    }, element[keyNames.label]) : "");
+      htmlFor: element[keyNames.id]
+    }, element[keyNames.label]) : '');
   }));
 };
 Checkbox.propTypes = {
@@ -3592,7 +3592,7 @@ const Typography = ({
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
-  size: PropTypes.string,
+  size: PropTypes.oneOf(PropTypes.string, PropTypes.number),
   color: PropTypes.string,
   onClick: PropTypes.func,
   weight: PropTypes.string,
@@ -3619,7 +3619,7 @@ var css_248z$2 = ".pagination-module_listItem__b1-WN:focus{background-color:#4ca
 var styles$2 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
 styleInject(css_248z$2);
 
-const Dots = "...";
+const Dots = '...';
 const range = (start, end) => {
   const length = end - start + 1;
   return Array.from({
@@ -3732,7 +3732,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 : `${styles$2['pagination-bar']} pagination-bar-rem`);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -3742,7 +3742,7 @@ const Pagination = ({
   const onNextFive = () => {
     currentPageNumber !== lastPage - 4 ? onPageChange(currentPageNumber + 5) : onPageChange(currentPageNumber + 4);
   };
-  const onPreviousFive = e => {
+  const onPreviousFive = () => {
     currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
   };
   const handleChangeInput = e => {
@@ -3759,7 +3759,7 @@ const Pagination = ({
     }
   };
   const handleKeyDown = e => {
-    const forbiddenKeys = ["e", ".", "+", "-"];
+    const forbiddenKeys = ['e', '.', '+', '-'];
     if (forbiddenKeys.includes(e.key)) {
       e.preventDefault();
     }
@@ -3795,37 +3795,37 @@ const Pagination = ({
     },
     onClick: onPrevious,
     disabled: currentPageNumber === 1 ? true : false,
-    className: `${styles$2["pagination-btn"]} pagination-btn-rem`
+    className: `${styles$2['pagination-btn']} pagination-btn-rem`
   }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default.createElement("li", {
         key: id,
-        className: classnames(`${styles$2["pagination-jump-next"]} pagination-jump-next-rem`, styles$2.listItem),
+        className: classnames(`${styles$2['pagination-jump-next']} pagination-jump-next-rem`, styles$2.listItem),
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
       }, id < currentPageIndex ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-        className: `${styles$2["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
+        className: `${styles$2['pagination-jump-next-txt']} pagination-jump-next-txt-rem`
       }, /*#__PURE__*/React__default.createElement(SvgDots, null)), /*#__PURE__*/React__default.createElement("span", {
-        className: `${styles$2["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`,
+        className: `${styles$2['pagination-jump-next-arrow']} pagination-jump-next-arrow-rem`,
         style: {
           transform: 'rotate(180deg)'
         }
       }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-        className: `${styles$2["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
+        className: `${styles$2['pagination-jump-next-txt']} pagination-jump-next-txt-rem`
       }, /*#__PURE__*/React__default.createElement(SvgDots, null)), /*#__PURE__*/React__default.createElement("span", {
-        className: `${styles$2["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
+        className: `${styles$2['pagination-jump-next-arrow']} pagination-jump-next-arrow-rem`
       }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null))));
     }
     return /*#__PURE__*/React__default.createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames(`${pageNumber === currentPageNumber ? styles$2.selected : styles$2.listItem}`, `${styles$2["pagination-item"]} pagination-item-rem`)
+      className: classnames(`${pageNumber === currentPageNumber ? styles$2.selected : styles$2.listItem}`, `${styles$2['pagination-item']} pagination-item-rem`)
     }, pageNumber);
   }), /*#__PURE__*/React__default.createElement("button", {
     onClick: onNext,
     disabled: currentPageNumber === lastPage ? true : false,
-    className: `${styles$2["pagination-btn"]} pagination-btn-rem`
+    className: `${styles$2['pagination-btn']} pagination-btn-rem`
   }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null))), goTo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
     onKeyDown: handleKeyDown,
     onInput: handleChangeInput,
@@ -3868,12 +3868,10 @@ styleInject(css_248z$1);
 
 const Autocomplate = ({
   label,
-  value,
   required,
   disabled,
   keyNames,
   onChange,
-  className,
   searchCount,
   placeHolder,
   errorMessage,
@@ -3883,7 +3881,6 @@ const Autocomplate = ({
   ...props
 }) => {
   const configStyles = compereConfigs();
-  classnames(styles$1.searchBox, className);
   const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
     name: '',
     id: ''
@@ -3925,7 +3922,7 @@ const Autocomplate = ({
       }, parseOptionsData.map((optionName, index) => {
         let className;
         if (index === activeOption) {
-          className = "option-active";
+          className = 'option-active';
         }
         return /*#__PURE__*/React__default.createElement("div", {
           className: `${styles$1[className]} autocomplate-content-click-rem`,
@@ -3956,9 +3953,9 @@ const Autocomplate = ({
     className: `${styles$1['autocomplate-title']} autocomplate-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: '#ee0000'
     }
-  }, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
+  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$1['autocomplate-content']} autocomplate-content-rem`
   }, /*#__PURE__*/React__default.createElement("input", _extends({
     id: inputId,
@@ -4077,6 +4074,7 @@ const NewAutocomplete = ({
   contentBottomRowMarginBottom,
   contentBottomRowBackgroundColor,
   contentBottomRowHoverBackgroundColor,
+  backgroundDisableColor,
   ...props
 }) => {
   const [id, setId] = useState('');
@@ -4093,7 +4091,7 @@ const NewAutocomplete = ({
             max-height: 400px;
         }
     `;
-  const animation = _ => css`
+  const animation = () => css`
         ${showOption} ${showOptionDuration ? showOptionDuration : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
     `;
   const handleMouseEnter = () => {
@@ -4189,7 +4187,7 @@ const NewAutocomplete = ({
   }))) : innerOptions.length <= 0 ? innerError ? '' : /*#__PURE__*/React__default.createElement("span", {
     style: {
       position: 'absolute',
-      zIndex: '9999999999',
+      zIndex: '1',
       color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
       fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
       top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
@@ -4204,6 +4202,7 @@ const NewAutocomplete = ({
       alert('Please add options prop');
     }
     options && options.length > 0 && options.map(item => {
+      // eslint-disable-next-line no-prototype-builtins
       if (!item.hasOwnProperty(keyNames.name)) {
         alert(`Please add ${keyNames.name} property in items of options array`);
       }
@@ -4273,6 +4272,7 @@ const NewAutocomplete = ({
       cursor: disabled ? 'not-allowed' : 'auto',
       color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
       fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
+      backgroundColor: disabled && (backgroundDisableColor ?? configStyles.NEWAUTOCOMPLETE.backgroundDisableColor),
       height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
       padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
       display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
@@ -4368,7 +4368,8 @@ NewAutocomplete.propTypes = {
   contentBottomRowMarginBottom: PropTypes.string,
   contentBottomBackgroundColor: PropTypes.string,
   contentBottomRowBackgroundColor: PropTypes.string,
-  contentBottomRowHoverBackgroundColor: PropTypes.string
+  contentBottomRowHoverBackgroundColor: PropTypes.string,
+  backgroundDisableColor: PropTypes.string
 };
 NewAutocomplete.defaultProps = {
   searchCount: 3,