@xaypay/tui 0.0.105 → 0.0.107

package/dist/index.js

@@ -107,11 +107,9 @@ const File = ({
   required,
   disabled,
   onChange,
-  className,
   defaultData,
   errorMessage,
-  fileExtensions,
-  ...props
+  fileExtensions
 }) => {
   const [error, setError] = React.useState('');
   const [fileName, setFileName] = React.useState('no selected file');
@@ -157,13 +155,13 @@ const File = ({
       target: null
     });
     setFileName('no selected file');
-    document.querySelector(`.${name}`).value = "";
+    document.querySelector(`.${name}`).value = '';
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
     className: `${styles$c['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: '#ee0000'
     }
   }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"](`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
@@ -320,7 +318,7 @@ const Checkbox$1 = ({
     fillColor: checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor
   }) : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
     fillColor: unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor
-  }));
+  }), data?.label && /*#__PURE__*/React__default["default"].createElement("span", null, data.label));
 };
 
 const SingleCheckbox = ({
@@ -356,12 +354,12 @@ const SingleCheckbox = ({
   });
 };
 SingleCheckbox.propTypes = {
+  data: PropTypes__default["default"].object,
   onClick: PropTypes__default["default"].func,
   styles: PropTypes__default["default"].object,
   disabled: PropTypes__default["default"].bool,
   checkedColor: PropTypes__default["default"].string,
-  unCheckedColor: PropTypes__default["default"].string,
-  data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]).isRequired
+  unCheckedColor: PropTypes__default["default"].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}";
@@ -383,10 +381,13 @@ styleInject(css_248z$e);
   tBodyFontWeight: PropTypes__default["default"].string,
   tBodyFontFamily: PropTypes__default["default"].string,
   tBodyRowBorder: PropTypes__default["default"].string,
-  handleCheckedBody: PropTypes__default["default"].func,
-  handleCheckedHeader: PropTypes__default["default"].func,
-  handleHeaderItemClick: PropTypes__default["default"].func,
-  handleBodyActionClick: PropTypes__default["default"].func
+  // handleCheckedBody: PropTypes.func,
+  // handleCheckedHeader: PropTypes.func,
+  // handleHeaderItemClick: PropTypes.func,
+  // handleBodyActionClick: PropTypes.func
+
+  setTableDataBody: PropTypes__default["default"].func,
+  setTableDataHeader: PropTypes__default["default"].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)}}";
@@ -507,7 +508,8 @@ const Modal = ({
   justifyContent,
   backgroundColor,
   grayDecorHeight,
-  layerBackgroundColor
+  layerBackgroundColor,
+  imageWrapHeight
 }) => {
   const [select, setSelect] = React.useState(0);
   const [innerData, setInnerData] = React.useState([]);
@@ -680,10 +682,12 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["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 {
@@ -702,7 +706,7 @@ const Modal = ({
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: _ => handleGoTo('prev'),
+    onClick: () => handleGoTo('prev'),
     style: {
       position: 'absolute',
       left: '14px',
@@ -716,7 +720,7 @@ const Modal = ({
       backgroundColor: 'transparent'
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgPrev, null)), /*#__PURE__*/React__default["default"].createElement("button", {
-    onClick: _ => handleGoTo('next'),
+    onClick: () => handleGoTo('next'),
     style: {
       position: 'absolute',
       width: '24px',
@@ -771,9 +775,9 @@ styleInject(css_248z$c);
 
 const InputTypes = {
   TEL: 'tel',
-  TEXT: "text",
+  TEXT: 'text',
   NUMBER: 'number',
-  PASSWORD: "password"
+  PASSWORD: 'password'
 };
 const P = styled__default["default"].span`
     animation: ${props => props.errorAnimation ? props.animation : 'none'};
@@ -819,7 +823,6 @@ const Input = ({
   errorMessage,
   autoComplete,
   labelDisplay,
-  errorPosition,
   boxShadowHover,
   errorClassName,
   errorAnimation,
@@ -855,7 +858,7 @@ const Input = ({
             -o-transform: scale3d(1,1,1);
         }
     `;
-  const animation = _ => styled.css`
+  const animation = () => styled.css`
         ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
     `;
   const handleChange = event => {
@@ -1106,9 +1109,9 @@ const Input = ({
     }
   }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$a["input-wrap"]}`
+    className: `${styles$a['input-wrap']}`
   }, label ? /*#__PURE__*/React__default["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,
@@ -1119,10 +1122,10 @@ const Input = ({
     }
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
-      color: errorColor ? errorColor : "#ee0000"
+      color: errorColor ? errorColor : '#ee0000'
     }
   }, "*")) : '', /*#__PURE__*/React__default["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,
@@ -1166,7 +1169,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,
@@ -1278,7 +1281,7 @@ Input.propTypes = {
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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}";
@@ -1294,28 +1297,27 @@ const Radio = ({
   value,
   jsonData,
   label,
-  keyNames,
   ...props
 }) => {
   const classProps = classnames__default["default"](styles$9.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, parseData.map((element, id) => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: `${styles$9["radio-wrap"]} radio-wrap-rem`,
+      className: `${styles$9['radio-wrap']} radio-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default["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["default"].createElement("span", {
-      className: `${styles$9["radio-checkmark"]} radio-checkmark-rem`
+      className: `${styles$9['radio-checkmark']} radio-checkmark-rem`
     }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
       className: styles$9.labelRadio
-    }, label ? label : element.label) : "");
+    }, label ? label : element.label) : '');
   }));
 };
 Radio.propTypes = {
@@ -1337,6 +1339,7 @@ Radio.defaultProps = {
 
 const Button = ({
   icon,
+  hoverIcon,
   size,
   type,
   font,
@@ -1403,21 +1406,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["default"].createElement("span", {
+  }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default["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__default["default"].string,
   size: PropTypes__default["default"].string,
   font: PropTypes__default["default"].string,
   icon: PropTypes__default["default"].element,
+  hoverIcon: PropTypes__default["default"].element,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   outline: PropTypes__default["default"].bool,
@@ -1588,6 +1592,7 @@ const Select = ({
   };
   const isObjectEmpty = obj => {
     for (var key in obj) {
+      // eslint-disable-next-line no-prototype-builtins
       if (obj.hasOwnProperty(key)) {
         return false;
       }
@@ -1601,9 +1606,9 @@ const Select = ({
           setOpened(false);
         }
       };
-      document.addEventListener("mousedown", checkIfClickedOutside);
+      document.addEventListener('mousedown', checkIfClickedOutside);
       return () => {
-        document.removeEventListener("mousedown", checkIfClickedOutside);
+        document.removeEventListener('mousedown', checkIfClickedOutside);
       };
     }
   }, [opened]);
@@ -1618,7 +1623,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 => {
@@ -1635,7 +1640,8 @@ const Select = ({
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps,
     style: {
-      position: 'relative'
+      position: 'relative',
+      width: '100%'
     }
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
@@ -1649,9 +1655,9 @@ const Select = ({
     }
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: '#ee0000'
     }
-  }, "*")) : "", /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$8['select-content']
@@ -1669,14 +1675,14 @@ 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["default"].createElement("div", {
     className: `${styles$8['select-content-top-text']}`,
     style: {
-      whiteSpace: 'nowrap',
+      whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
@@ -1717,7 +1723,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'] : ''}`,
@@ -1902,10 +1908,11 @@ 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}@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","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"};
+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);
 
+let wWidth$1 = window.innerWidth;
 const ToasterType = {
   info: 'info',
   warn: 'warn',
@@ -1958,7 +1965,7 @@ const Toast = ({
     style: {
       position: 'absolute',
       display: 'flex',
-      width: '440px',
+      width: wWidth$1 > 480 ? '440px' : '300px',
       height: '83px',
       borderRadius: '40px',
       alignItems: 'center',
@@ -1995,8 +2002,9 @@ const Toast = ({
       fontSize: '16px',
       lineHeight: '22px',
       fontStyle: 'normal'
-    }
-  }, title ? title.length > 25 ? title.substr(0, 25) + '...' : title : ''), /*#__PURE__*/React__default["default"].createElement("span", {
+    },
+    className: styles$7['notify-title']
+  }, title ? title : ''), /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       fontWeight: 500,
       color: '#3C393E',
@@ -2005,8 +2013,9 @@ const Toast = ({
       fontStyle: 'normal',
       fontFamily: '',
       opacity: 0.8
-    }
-  }, description ? description.length > 120 ? description.substr(0, 120) + '...' : description : '')), /*#__PURE__*/React__default["default"].createElement("div", {
+    },
+    className: styles$7['notify-desc']
+  }, description ? description : '')), /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: () => handleCloseToaster(ref),
     style: {
       width: '18px',
@@ -2031,7 +2040,9 @@ Toast.defaultProps = {
 
 let toastify;
 let path = window.location.href;
+let wWidth = window.innerWidth;
 const removeToast = ref => {
+  // eslint-disable-next-line react/no-find-dom-node
   const node = ReactDOM__default["default"].findDOMNode(ref.current);
   const removeElem = node.parentNode;
   const parent = removeElem.parentNode;
@@ -2054,7 +2065,7 @@ const createToast = ({
   const toastBlock = document.createElement('div');
   toastBlock.style.position = 'relative';
   toastBlock.style.flexShrink = 0;
-  toastBlock.style.width = '440px';
+  toastBlock.style.width = wWidth > 480 ? '440px' : '300px';
   toastBlock.style.height = '83px';
   toastBlock.style.marginBottom = '20px';
   const newElem = /*#__PURE__*/React__default["default"].createElement(Toast, {
@@ -2206,7 +2217,7 @@ const Tooltip = ({
   const handleShow = () => {
     setShowTooltip(!showTooltip);
   };
-  React.useEffect(_ => {
+  React.useEffect(() => {
     if (!text) {
       alert('Add text on tooltip');
     }
@@ -2384,7 +2395,6 @@ const Captcha = ({
       right: '0px',
       width: '100%',
       height: '4px',
-      borderRadius: '2px',
       backgroundColor: '#EEEEEE',
       borderRadius: '10px',
       zIndex: -2
@@ -2416,7 +2426,6 @@ const Captcha = ({
       height: '4px',
       borderRadius: '2px',
       backgroundColor: +rangeProgress === rangeNumber ? '#0DA574' : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? '#EE0000' : 'transparent',
-      borderRadius: '2px',
       zIndex: -1
     }
   })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2440,12 +2449,9 @@ var styles$4 = {"stepper-container":"stepper-module_stepper-container__-OVGy","b
 styleInject(css_248z$6);
 
 const Stepper = ({
-  className,
-  onChange,
   stepLength,
   activeSteps
 }) => {
-  classnames__default["default"](className, 'stepper-inner-rem');
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$4['stepper-container']} stepper-container-rem`
   }, (() => {
@@ -2456,7 +2462,7 @@ const Stepper = ({
         key: step
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: classnames__default["default"](`${step <= activeSteps ? styles$4.smallActiveRing : styles$4.smallRing}`)
-      }, step <= activeSteps ? step : "")));
+      }, step <= activeSteps ? step : '')));
     }
     return steppers;
   })());
@@ -2501,7 +2507,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);
@@ -2636,6 +2642,7 @@ const SvgListItemDelete = ({
   fill: fillColor ? fillColor : '#051942'
 }));
 
+// eslint-disable-next-line react/display-name
 const FileItem = /*#__PURE__*/React__default["default"].memo(({
   size,
   name,
@@ -2650,6 +2657,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
   listItemPadding,
   progressFontSize,
   listItemErrorSize,
+  timeForRemoveError,
   listItemErrorColor,
   progressTrackColor,
   progressFailedColor,
@@ -2702,7 +2710,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
     if (check !== '') {
       setT(setTimeout(() => {
         removeFile(uuid);
-      }, 3500));
+      }, timeForRemoveError));
     }
   }, [check]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2909,6 +2917,7 @@ const NewFile = ({
   fileAreaImageWidth,
   listItemErrorColor,
   labelRequiredColor,
+  timeForRemoveError,
   progressFailedColor,
   fileAreaImageHeight,
   progressSuccessColor,
@@ -2927,6 +2936,7 @@ const NewFile = ({
   const [image, setImage] = React.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__default["default"].findDOMNode(ref.current);
     const parent = node.parentNode;
     parent.removeChild(node);
@@ -3147,7 +3157,7 @@ const NewFile = ({
     style: {
       margin: '0px'
     }
-  }, putFileHere ? putFileHere : configStyles.File.putFileHere, /*#__PURE__*/React__default["default"].createElement("br", null), or ? or : configStyles.File.or, " ", /*#__PURE__*/React__default["default"].createElement("span", {
+  }, putFileHere ? putFileHere : configStyles.File.putFileHere, /*#__PURE__*/React__default["default"].createElement("br", null), or ? or : configStyles.File.or, ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: uploadColor ? uploadColor : configStyles.File.uploadColor
     }
@@ -3159,7 +3169,7 @@ const NewFile = ({
     style: {
       margin: '0px'
     }
-  }, fileSizeText ? fileSizeText : configStyles.File.fileSizeText, " ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileSizeText ? fileSizeText : configStyles.File.fileSizeText, " ", maxSize, "\u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -3197,9 +3207,10 @@ const NewFile = ({
       status: item.status,
       size: item.file.size,
       name: item.file.name,
+      timeForRemoveError: timeForRemoveError,
       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,
@@ -3252,6 +3263,7 @@ NewFile.propTypes = {
   progressFontSize: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   listItemErrorSize: PropTypes__default["default"].string,
+  timeForRemoveError: PropTypes__default["default"].number,
   labelRequiredColor: PropTypes__default["default"].string,
   progressTrackColor: PropTypes__default["default"].string,
   fileAreaImageWidth: PropTypes__default["default"].string,
@@ -3269,6 +3281,7 @@ NewFile.propTypes = {
 };
 NewFile.defaultProps = {
   maxSize: 10,
+  timeForRemoveError: 4000,
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
@@ -3280,11 +3293,8 @@ const Checkbox = ({
   disabled,
   required,
   className,
-  name,
-  value,
   jsonData,
   onChange,
-  label,
   keyNames,
   onClick,
   ...props
@@ -3322,7 +3332,7 @@ const Checkbox = ({
   } : '';
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, data.map(element => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: `${styles$3["checkbox-wrap"]} checkbox-wrap-rem`,
+      className: `${styles$3['checkbox-wrap']} checkbox-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
       type: "checkbox",
@@ -3336,11 +3346,11 @@ const Checkbox = ({
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${styles$3["checkmark"]} checkmark-rem`
+      className: `${styles$3['checkmark']} checkmark-rem`
     }), element[keyNames.label] ? /*#__PURE__*/React__default["default"].createElement("label", {
       className: styles$3.labelCheckbox,
-      for: element[keyNames.id]
-    }, element[keyNames.label]) : "");
+      htmlFor: element[keyNames.id]
+    }, element[keyNames.label]) : '');
   }));
 };
 Checkbox.propTypes = {
@@ -3622,7 +3632,7 @@ const Typography = ({
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
-  size: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].oneOf(PropTypes__default["default"].string, PropTypes__default["default"].number),
   color: PropTypes__default["default"].string,
   onClick: PropTypes__default["default"].func,
   weight: PropTypes__default["default"].string,
@@ -3649,7 +3659,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({
@@ -3762,7 +3772,7 @@ const Pagination = ({
   if (currentPageNumber === 0 || paginationRange?.length < 2) {
     return null;
   }
-  const classProps = classnames__default["default"](styles$2.list, className ? className : `${styles$2["pagination-bar"]} pagination-bar-rem`);
+  const classProps = classnames__default["default"](styles$2.list, className ? className : `${styles$2['pagination-bar']} pagination-bar-rem`);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -3772,7 +3782,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 => {
@@ -3789,7 +3799,7 @@ const Pagination = ({
     }
   };
   const handleKeyDown = e => {
-    const forbiddenKeys = ["e", ".", "+", "-"];
+    const forbiddenKeys = ['e', '.', '+', '-'];
     if (forbiddenKeys.includes(e.key)) {
       e.preventDefault();
     }
@@ -3825,37 +3835,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["default"].createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default["default"].createElement("li", {
         key: id,
-        className: classnames__default["default"](`${styles$2["pagination-jump-next"]} pagination-jump-next-rem`, styles$2.listItem),
+        className: classnames__default["default"](`${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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement(SvgDots, null)), /*#__PURE__*/React__default["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["default"].createElement(SvgNextarrow, null))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["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["default"].createElement(SvgDots, null)), /*#__PURE__*/React__default["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["default"].createElement(SvgNextarrow, null))));
     }
     return /*#__PURE__*/React__default["default"].createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$2.selected : styles$2.listItem}`, `${styles$2["pagination-item"]} pagination-item-rem`)
+      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$2.selected : styles$2.listItem}`, `${styles$2['pagination-item']} pagination-item-rem`)
     }, pageNumber);
   }), /*#__PURE__*/React__default["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["default"].createElement(SvgNextarrow, null))), goTo && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     onKeyDown: handleKeyDown,
     onInput: handleChangeInput,
@@ -3898,12 +3908,10 @@ styleInject(css_248z$1);
 
 const Autocomplate = ({
   label,
-  value,
   required,
   disabled,
   keyNames,
   onChange,
-  className,
   searchCount,
   placeHolder,
   errorMessage,
@@ -3913,7 +3921,6 @@ const Autocomplate = ({
   ...props
 }) => {
   const configStyles = compereConfigs();
-  classnames__default["default"](styles$1.searchBox, className);
   const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
     name: '',
     id: ''
@@ -3955,7 +3962,7 @@ const Autocomplate = ({
       }, parseOptionsData.map((optionName, index) => {
         let className;
         if (index === activeOption) {
-          className = "option-active";
+          className = 'option-active';
         }
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: `${styles$1[className]} autocomplate-content-click-rem`,
@@ -3986,9 +3993,9 @@ const Autocomplate = ({
     className: `${styles$1['autocomplate-title']} autocomplate-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
-      color: "#ee0000"
+      color: '#ee0000'
     }
-  }, "*")) : "", /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$1['autocomplate-content']} autocomplate-content-rem`
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     id: inputId,
@@ -4107,6 +4114,7 @@ const NewAutocomplete = ({
   contentBottomRowMarginBottom,
   contentBottomRowBackgroundColor,
   contentBottomRowHoverBackgroundColor,
+  backgroundDisableColor,
   ...props
 }) => {
   const [id, setId] = React.useState('');
@@ -4123,7 +4131,7 @@ const NewAutocomplete = ({
             max-height: 400px;
         }
     `;
-  const animation = _ => styled.css`
+  const animation = () => styled.css`
         ${showOption} ${showOptionDuration ? showOptionDuration : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
     `;
   const handleMouseEnter = () => {
@@ -4219,7 +4227,7 @@ const NewAutocomplete = ({
   }))) : innerOptions.length <= 0 ? innerError ? '' : /*#__PURE__*/React__default["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})`,
@@ -4234,6 +4242,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`);
       }
@@ -4303,6 +4312,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,
@@ -4398,7 +4408,8 @@ NewAutocomplete.propTypes = {
   contentBottomRowMarginBottom: PropTypes__default["default"].string,
   contentBottomBackgroundColor: PropTypes__default["default"].string,
   contentBottomRowBackgroundColor: PropTypes__default["default"].string,
-  contentBottomRowHoverBackgroundColor: PropTypes__default["default"].string
+  contentBottomRowHoverBackgroundColor: PropTypes__default["default"].string,
+  backgroundDisableColor: PropTypes__default["default"].string
 };
 NewAutocomplete.defaultProps = {
   searchCount: 3,