@xaypay/tui 0.0.104 → 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'] : '')
@@ -190,6 +188,29 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (e) {
+    try {
+      packageConfig = require('../../tui.config.js');
+    } catch (err) {
+      packageConfig = {};
+    }
+  }
+  try {
+    projectConfig = require('../../../../tui.config.js');
+  } catch (error) {
+    projectConfig = {};
+    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
+
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -232,17 +253,24 @@ const SvgCheckboxChecked = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-const SingleCheckbox = ({
-  id,
-  float,
+const Checkbox$1 = ({
+  data,
+  styles,
   checked,
-  onClick,
-  content,
   disabled,
   checkedColor,
+  handleChecked,
   unCheckedColor
 }) => {
-  const [innerCheckd, setInnerChecked] = useState(false);
+  const configStyles = compereConfigs();
+  const [innerChecked, setInnerChecked] = useState(false);
+  const [innerDisabled, setInnerDisabled] = useState(false);
+  const handleClick = e => {
+    handleChecked(data, e);
+  };
+  useEffect(() => {
+    setInnerDisabled(disabled);
+  }, [disabled]);
   useEffect(() => {
     setInnerChecked(checked);
   }, [checked]);
@@ -252,48 +280,61 @@ const SingleCheckbox = ({
       height: '16px',
       marginRight: '9px',
       display: 'inline-block',
-      float: float ? float : '',
-      cursor: !disabled && onClick ? 'pointer' : 'normal'
-    }
-  }, innerCheckd ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
-    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
-    fillColor: checkedColor ? checkedColor : ''
+      cursor: !innerDisabled ? 'pointer' : 'not-allowed',
+      ...styles
+    },
+    onClick: !innerDisabled && handleChecked ? handleClick : _ => _
+  }, innerChecked && !innerDisabled ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
+    fillColor: checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor
   }) : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, {
-    onClick: !disabled && onClick ? e => onClick(e, content, id) : _ => _,
-    fillColor: unCheckedColor ? unCheckedColor : ''
-  }));
+    fillColor: unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor
+  }), data?.label && /*#__PURE__*/React__default.createElement("span", null, data.label));
+};
+
+const SingleCheckbox = ({
+  data,
+  styles,
+  checked,
+  disabled,
+  checkedColor,
+  handleChecked,
+  unCheckedColor
+}) => {
+  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, {
+    styles: styles,
+    data: innerData,
+    checked: checked,
+    disabled: disabled,
+    checkedColor: checkedColor,
+    handleChecked: handleChecked,
+    unCheckedColor: unCheckedColor
+  });
 };
 SingleCheckbox.propTypes = {
+  data: PropTypes.object,
+  onClick: PropTypes.func,
+  styles: PropTypes.object,
   disabled: PropTypes.bool,
-  checked: PropTypes.bool.isRequired
+  checkedColor: PropTypes.string,
+  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}";
 styleInject(css_248z$e);
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
 ({
   dataBody: PropTypes.array,
   dataHeader: PropTypes.array,
@@ -310,10 +351,13 @@ const compereConfigs = () => {
   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)}}";
@@ -434,7 +478,8 @@ const Modal = ({
   justifyContent,
   backgroundColor,
   grayDecorHeight,
-  layerBackgroundColor
+  layerBackgroundColor,
+  imageWrapHeight
 }) => {
   const [select, setSelect] = useState(0);
   const [innerData, setInnerData] = useState([]);
@@ -607,18 +652,22 @@ 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 {
         return /*#__PURE__*/React__default.createElement("img", {
           style: {
+            display: 'block',
             objectFit: 'cover',
             objectPosition: 'center',
             borderRadius: radius ? radius : configStyles.MODAL.radius,
+            width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
             height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
           },
           src: item.url,
@@ -627,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',
@@ -641,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',
@@ -696,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'};
@@ -744,7 +793,6 @@ const Input = ({
   errorMessage,
   autoComplete,
   labelDisplay,
-  errorPosition,
   boxShadowHover,
   errorClassName,
   errorAnimation,
@@ -780,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 => {
@@ -1031,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,
@@ -1044,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,
@@ -1091,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,
@@ -1203,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}";
@@ -1219,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 = {
@@ -1262,6 +1309,7 @@ Radio.defaultProps = {
 
 const Button = ({
   icon,
+  hoverIcon,
   size,
   type,
   font,
@@ -1328,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,
@@ -1513,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;
       }
@@ -1526,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]);
@@ -1543,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 => {
@@ -1574,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']
@@ -1594,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']}`,
@@ -1642,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'] : ''}`,
@@ -1957,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;
@@ -2131,7 +2182,7 @@ const Tooltip = ({
   const handleShow = () => {
     setShowTooltip(!showTooltip);
   };
-  useEffect(_ => {
+  useEffect(() => {
     if (!text) {
       alert('Add text on tooltip');
     }
@@ -2309,7 +2360,6 @@ const Captcha = ({
       right: '0px',
       width: '100%',
       height: '4px',
-      borderRadius: '2px',
       backgroundColor: '#EEEEEE',
       borderRadius: '10px',
       zIndex: -2
@@ -2341,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", {
@@ -2365,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`
   }, (() => {
@@ -2381,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;
   })());
@@ -2426,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);
@@ -2561,6 +2607,7 @@ const SvgListItemDelete = ({
   fill: fillColor ? fillColor : '#051942'
 }));
 
+// eslint-disable-next-line react/display-name
 const FileItem = /*#__PURE__*/React__default.memo(({
   size,
   name,
@@ -2852,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);
@@ -3072,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
     }
@@ -3084,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',
@@ -3124,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,
@@ -3205,11 +3253,8 @@ const Checkbox = ({
   disabled,
   required,
   className,
-  name,
-  value,
   jsonData,
   onChange,
-  label,
   keyNames,
   onClick,
   ...props
@@ -3247,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",
@@ -3261,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 = {
@@ -3547,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,
@@ -3574,9 +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);
 
-// import styles from "./pagination.module.scss";
-
-const Dots = "...";
+const Dots = '...';
 const range = (start, end) => {
   const length = end - start + 1;
   return Array.from({
@@ -3584,41 +3627,36 @@ const range = (start, end) => {
   }, (_, idx) => idx + start);
 };
 const PaginationRange = ({
-  currentTotalCount,
   offset,
-  siblingCountNumber,
+  currentTotalCount,
   currentPageNumber
 }) => {
   const paginationRange = useMemo(() => {
+    const firstPageIndex = 1;
     const totalPageCount = Math.ceil(currentTotalCount / offset);
-
-    //currentPage + 2*Dots + start + end = 5
-    const totalPageNumber = siblingCountNumber + 5;
-    if (totalPageNumber >= totalPageCount) {
+    const lastPageIndex = totalPageCount;
+    if (7 >= totalPageCount) {
       return range(1, totalPageCount);
     }
-    const rightSiblingIndex = Math.min(currentPageNumber + siblingCountNumber, totalPageCount);
-    const leftSiblingIndex = Math.max(currentPageNumber - siblingCountNumber, 1);
+    const leftSiblingIndex = Math.max(currentPageNumber - 1, 1);
+    const rightSiblingIndex = Math.min(currentPageNumber + 1, totalPageCount);
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPageCount;
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      let leftItemCount = currentPageNumber === 4 && lastPageIndex > 7 ? 4 + siblingCountNumber : 3 + siblingCountNumber;
+      let leftItemCount = currentPageNumber === 4 && lastPageIndex >= 7 ? 5 : 4;
       let leftRange = range(1, leftItemCount);
       return [...leftRange, Dots, totalPageCount];
-    }
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      let rightItemCount = 0;
-      currentPageNumber === lastPageIndex - 3 && lastPageIndex > 7 ? rightItemCount = 4 + siblingCountNumber : rightItemCount = 3 + siblingCountNumber;
+    } else if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = currentPageNumber === lastPageIndex - 3 && lastPageIndex >= 7 ? 4 : 3;
       let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
       return [firstPageIndex, Dots, ...rightRange];
-    }
-    if (shouldShowLeftDots && shouldShowRightDots) {
+    } else if (shouldShowLeftDots && shouldShowRightDots) {
       let middleRange = range(leftSiblingIndex, rightSiblingIndex);
       return [firstPageIndex, Dots, ...middleRange, Dots, lastPageIndex];
+    } else {
+      return range(firstPageIndex, totalPageCount);
     }
-  }, [currentTotalCount, offset, siblingCountNumber, currentPageNumber]);
+  }, [currentTotalCount, offset, currentPageNumber]);
   return paginationRange;
 };
 
@@ -3662,24 +3700,19 @@ const SvgNextarrow = ({
 
 const Pagination = ({
   goTo,
+  offset,
   onChange,
+  className,
   totalCount,
-  siblingCount,
-  currentPage,
-  offset,
-  className
+  currentPage
 }) => {
   const [inpVal, setInpVal] = useState('');
   const [error, setError] = useState(false);
-  const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
   useEffect(() => {
     setcurrentTotalCount(totalCount);
   }, [totalCount]);
-  useEffect(() => {
-    setSibilingCountNumber(siblingCount);
-  }, [siblingCount]);
   useEffect(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
@@ -3694,13 +3727,12 @@ const Pagination = ({
   const paginationRange = PaginationRange({
     currentPageNumber,
     currentTotalCount,
-    siblingCountNumber,
     offset
   });
-  if (currentPageNumber === 0 || paginationRange.length < 2) {
+  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);
   };
@@ -3710,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 => {
@@ -3727,7 +3759,7 @@ const Pagination = ({
     }
   };
   const handleKeyDown = e => {
-    const forbiddenKeys = ["e", ".", "+", "-"];
+    const forbiddenKeys = ['e', '.', '+', '-'];
     if (forbiddenKeys.includes(e.key)) {
       e.preventDefault();
     }
@@ -3763,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,
@@ -3824,12 +3856,10 @@ Pagination.propTypes = {
   offset: PropTypes.number,
   totalCount: PropTypes.number,
   className: PropTypes.string,
-  siblingCount: PropTypes.number,
   currentPage: PropTypes.number
 };
 Pagination.defaultProps = {
-  offset: 2,
-  siblingCount: 2
+  offset: 2
 };
 
 var css_248z$1 = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;width:100%;z-index:1}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
@@ -3838,12 +3868,10 @@ styleInject(css_248z$1);
 
 const Autocomplate = ({
   label,
-  value,
   required,
   disabled,
   keyNames,
   onChange,
-  className,
   searchCount,
   placeHolder,
   errorMessage,
@@ -3853,7 +3881,6 @@ const Autocomplate = ({
   ...props
 }) => {
   const configStyles = compereConfigs();
-  classnames(styles$1.searchBox, className);
   const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
     name: '',
     id: ''
@@ -3895,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`,
@@ -3926,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,
@@ -4047,6 +4074,7 @@ const NewAutocomplete = ({
   contentBottomRowMarginBottom,
   contentBottomRowBackgroundColor,
   contentBottomRowHoverBackgroundColor,
+  backgroundDisableColor,
   ...props
 }) => {
   const [id, setId] = useState('');
@@ -4063,7 +4091,7 @@ const NewAutocomplete = ({
             max-height: 400px;
         }
     `;
-  const animation = _ => css`
+  const animation = () => css`
         ${showOption} ${showOptionDuration ? showOptionDuration : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
     `;
   const handleMouseEnter = () => {
@@ -4159,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})`,
@@ -4174,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`);
       }
@@ -4243,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,
@@ -4338,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,