@xaypay/tui 0.0.109 → 0.0.111

package/dist/index.es.js

@@ -44,16 +44,16 @@ const SvgRequired = ({
   titleId,
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends({
-  width: "12",
-  height: "12",
-  viewBox: "0 0 12 12",
+  width: "10",
+  height: "10",
+  viewBox: "0 0 10 10",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
 }, props), title ? /*#__PURE__*/React.createElement("title", {
   id: titleId
 }, title) : null, /*#__PURE__*/React.createElement("path", {
-  d: "M9.281 7.317 7 6l2.281-1.317a.5.5 0 0 0-.5-.866L6.5 5.134V2.5a.5.5 0 1 0-1 0v2.634L3.219 3.817a.5.5 0 0 0-.5.866L5 6 2.719 7.317a.5.5 0 0 0 .5.866L5.5 6.866V9.5a.5.5 0 1 0 1 0V6.866l2.281 1.317a.5.5 0 0 0 .5-.866Z",
+  d: "M7.734 6.097 5.834 5l1.9-1.098a.417.417 0 0 0-.417-.721l-1.9 1.097V2.083a.417.417 0 0 0-.834 0v2.195l-1.9-1.097a.417.417 0 0 0-.417.721L4.166 5l-1.9 1.097a.417.417 0 0 0 .416.722l1.901-1.097v2.195a.417.417 0 1 0 .834 0V5.722l1.9 1.097a.417.417 0 0 0 .417-.722Z",
   fill: "#E00"
 }));
 
@@ -85,7 +85,7 @@ function styleInject(css, ref) {
 }
 
 var css_248z$f = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
-var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
+var styles$d = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
 styleInject(css_248z$f);
 
 const File = ({
@@ -146,11 +146,11 @@ const File = ({
     document.querySelector(`.${name}`).value = '';
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
-    className: `${styles$c['file-form-title']} ile-form-title-rem`
+    className: `${styles$d['file-form-title']} ile-form-title-rem`
   }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
+    className: classnames(`${styles$d['file-form-wrap']} file-form-wrap-rem`, image ? styles$d['active'] : '')
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
+    className: `${styles$d['file-form']} file-form-rem ${error || errorMessage ? styles$d['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default.createElement("input", {
     hidden: true,
@@ -159,23 +159,23 @@ const File = ({
     disabled: disabled,
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['upload-file-content']} upload-file-content-rem`
+    className: `${styles$d['upload-file-content']} upload-file-content-rem`
   }, image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['file-form-inner-upload']} ile-form-inner-upload-rem`
+    className: `${styles$d['file-form-inner-upload']} ile-form-inner-upload-rem`
   }, /*#__PURE__*/React__default.createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: `${styles$c['upload-info']} upload-info-rem`
+    className: `${styles$d['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: `${styles$c['upload-info-txt']} upload-info-txt-rem`
+    className: `${styles$d['upload-info-txt']} upload-info-txt-rem`
   }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default.createElement("span", {
-    className: `${styles$c['upload-info-size']} upload-info-size-rem`
+    className: `${styles$d['upload-info-size']} upload-info-size-rem`
   }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), !disabled && /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$c['delete-upload-icon']} delete-upload-icon-rem`,
+    className: `${styles$d['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-delete"
@@ -269,9 +269,11 @@ const SvgCheckboxChecked = ({
 
 const Checkbox$1 = ({
   data,
+  index,
   styles,
   checked,
   disabled,
+  innerIndex,
   checkedColor,
   handleChecked,
   unCheckedColor,
@@ -281,7 +283,11 @@ const Checkbox$1 = ({
   const [innerChecked, setInnerChecked] = useState(false);
   const [innerDisabled, setInnerDisabled] = useState(false);
   const handleClick = e => {
-    handleChecked(data, e);
+    if (index !== undefined && innerIndex !== undefined && typeof index === 'number' && typeof innerIndex === 'number') {
+      handleChecked(data, e, index, innerIndex);
+    } else {
+      handleChecked(data, e);
+    }
   };
   useEffect(() => {
     setInnerDisabled(disabled);
@@ -308,9 +314,11 @@ const Checkbox$1 = ({
 
 const SingleCheckbox = ({
   data,
+  index,
   styles,
   checked,
   disabled,
+  innerIndex,
   checkedColor,
   handleChecked,
   unCheckedColor,
@@ -330,10 +338,12 @@ const SingleCheckbox = ({
     setInnerData(data);
   }, [data]);
   return /*#__PURE__*/React__default.createElement(Checkbox$1, {
+    index: index,
     styles: styles,
     data: innerData,
     checked: checked,
     disabled: disabled,
+    innerIndex: innerIndex,
     checkedColor: checkedColor,
     handleChecked: handleChecked,
     unCheckedColor: unCheckedColor,
@@ -343,22 +353,889 @@ const SingleCheckbox = ({
 SingleCheckbox.propTypes = {
   data: PropTypes.object,
   onClick: PropTypes.func,
+  index: PropTypes.number,
   styles: PropTypes.object,
   disabled: PropTypes.bool,
+  innerIndex: PropTypes.number,
   checkedColor: PropTypes.string,
   unCheckedColor: PropTypes.string,
   ignoreDisabledForChecked: PropTypes.bool
 };
 
-var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
+var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{cursor:pointer;margin:0 0 8px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
+var styles$c = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
 styleInject(css_248z$e);
 
-({
+/* eslint-disable no-prototype-builtins */
+const TH = ({
+  item,
+  tHeadFamily,
+  tHeadPadding,
+  tHeadFontSize,
+  tHeadFontWeight,
+  handleCheckedHeader,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  handleHeaderItemClick,
+  handleCheckArrowActionHeader
+}) => {
+  return /*#__PURE__*/React__default.createElement("th", {
+    style: {
+      width: 'auto',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap',
+      position: 'relative',
+      padding: tHeadPadding,
+      fontSize: tHeadFontSize,
+      fontFamily: tHeadFamily,
+      fontWeight: tHeadFontWeight,
+      borderTopLeftRadius: borderTopLeftRadius,
+      borderTopRightRadius: borderTopRightRadius
+    },
+    onClick: handleHeaderItemClick,
+    className: `${item.sortingArrows && styles$c['sorting-arrows']}`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: Object.prototype.hasOwnProperty.call(item, 'checkBox') ? 'space-between' : 'center'
+    }
+  }, item.hasOwnProperty('checkBox') ? /*#__PURE__*/React__default.createElement(SingleCheckbox, {
+    data: item,
+    float: "left",
+    checked: item.checkBox.checked,
+    disabled: item.checkBox.disabled,
+    handleChecked: !item.checkBox.disabled ? handleCheckedHeader : _ => _,
+    checkedColor: item.checkBox.checkedColor ? item.checkBox.checkedColor : '',
+    unCheckedColor: item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''
+  }) : '', /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      margin: '0px'
+    },
+    onClick: Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? e => handleCheckArrowActionHeader(e, item) : _ => _
+  }, item.type === 'show' ? item.content : Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
+};
+
+const TD = ({
+  item,
+  index,
+  innerIndex,
+  tBodyColor,
+  borderRight,
+  tBodyPadding,
+  tBodyFontSize,
+  openListColor,
+  tBodyTextAlign,
+  tBodyFontFamily,
+  tBodyFontWeight,
+  handleCheckDots,
+  handleCheckedBody,
+  handleBodyActionClick,
+  handleMoreOptionsClick,
+  handleContentListClick,
+  handleCheckArrowAction,
+  handleOpenCloseRowSingleArrow
+}) => {
+  const handleBodyAction = (e, data) => {
+    const actionData = {
+      index,
+      innerIndex,
+      items: item,
+      item: data.item,
+      itemIndex: data.itemIndex
+    };
+    handleBodyActionClick(e, actionData);
+  };
+  return /*#__PURE__*/React__default.createElement("td", {
+    style: {
+      width: 'auto',
+      color: tBodyColor,
+      verticalAlign: 'top',
+      whiteSpace: 'nowrap',
+      padding: tBodyPadding,
+      fontSize: tBodyFontSize,
+      borderRight: borderRight,
+      textAlign: tBodyTextAlign,
+      fontFamily: tBodyFontFamily,
+      fontWeight: tBodyFontWeight,
+      boxShadow: Object.prototype.hasOwnProperty.call(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : ''
+    }
+  }, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
+    if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
+      return /*#__PURE__*/React__default.createElement("span", {
+        style: {
+          width: '32px',
+          height: '32px',
+          marginRight: '10px',
+          cursor: Object.prototype.hasOwnProperty.call(newItem, 'type') ? 'pointer' : 'auto'
+        },
+        id: newItem.id,
+        type: newItem.type,
+        className: styles$c['td-span'],
+        key: `${newItem.id}_${newIndex}`,
+        onClick: Object.prototype.hasOwnProperty.call(newItem, 'type') ? e => handleBodyAction(e, {
+          item: newItem,
+          itemIndex: newIndex
+        }) : _ => _
+      }, newItem.content);
+    } else if (newItem && Array.isArray(newItem)) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        key: `${newItem.id}_${newIndex}`,
+        style: {
+          display: 'inline-block',
+          marginRight: newIndex !== item.length - 1 ? '10px' : '0px',
+          borderRight: newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none'
+        }
+      }, item[newIndex].map((iT, iN) => {
+        return /*#__PURE__*/React__default.createElement("span", {
+          style: {
+            width: '32px',
+            height: '32px',
+            marginRight: '10px',
+            cursor: Object.prototype.hasOwnProperty.call(iT, 'type') ? 'pointer' : 'auto'
+          },
+          id: iT.id ? iT.id : '',
+          type: iT.type ? iT.type : '',
+          className: styles$c['td-span'],
+          onClick: Object.prototype.hasOwnProperty.call(iT, 'type') ? e => handleBodyAction(e, {
+            item: iT,
+            itemIndex: iN
+          }) : _ => _,
+          key: `${iT.id || iT.content}_${iN}`
+        }, iT.content);
+      }));
+    } else {
+      return /*#__PURE__*/React__default.createElement("span", {
+        key: `${newItem.id}_${newIndex}`
+      }, newItem);
+    }
+  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : item !== null && !Array.isArray(item) && typeof item === 'object' ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: Object.prototype.hasOwnProperty.call(item, 'contentList') || Object.prototype.hasOwnProperty.call(item, 'checkBox') ? 'space-between' : 'center'
+    }
+  }, Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default.createElement("div", {
+    id: item.id,
+    style: {
+      width: '21px',
+      height: '21px',
+      cursor: 'pointer'
+    },
+    onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex),
+    className: styles$c['td-span']
+  }, item.status === 'close' ? item.closeArrow : item.openArrow), Object.prototype.hasOwnProperty.call(item, 'checkBox') && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
+    data: item,
+    index: index,
+    innerIndex: innerIndex,
+    checked: item.checkBox.checked,
+    handleChecked: handleCheckedBody,
+    disabled: item.checkBox.disabled,
+    checkedColor: item.checkBox.checkedColor,
+    unCheckedColor: item.checkBox.unCheckedColor
+  }), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginLeft: item.contentList ? '10px' : '0px'
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      margin: '0px',
+      cursor: Object.prototype.hasOwnProperty.call(item, 'arrowComponent') || Object.prototype.hasOwnProperty.call(item, 'dots') ? 'pointer' : 'auto'
+    },
+    onClick: Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : Object.prototype.hasOwnProperty.call(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
+  }, item.content ? item.content : Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : Object.prototype.hasOwnProperty.call(item, 'dots') ? /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      display: 'block',
+      position: 'relative'
+    }
+  }, item.dotsStatus === 'deActive' ? item.deActiveIcon : item.activeIcon, /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      position: 'absolute',
+      display: item.dotsStatus === 'deActive' ? 'none' : 'block',
+      top: '0px',
+      zIndex: 100,
+      right: 'calc(100% + 6px)',
+      width: '223px',
+      height: 'auto',
+      overflow: 'auto',
+      minHeight: '40px',
+      maxHeight: '246px',
+      borderRadius: '6px',
+      backgroundColor: '#FFFFFF',
+      boxShadow: '0px 0px 20px 0px #3C393E4D'
+    }
+  }, Object.prototype.hasOwnProperty.call(item, 'options') && item.options.map((optionItem, optionIndex) => {
+    return /*#__PURE__*/React__default.createElement("span", {
+      key: `${optionItem.content}_${optionIndex}`,
+      className: styles$c['dots-option-item'],
+      style: {
+        color: '#3C393E',
+        fontSize: '14px',
+        fontFamily: 'Noto Sans Armenian'
+      },
+      onClick: () => handleMoreOptionsClick({
+        item,
+        index,
+        optionItem,
+        innerIndex,
+        optionIndex,
+        options: item.options
+      })
+    }, /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        marginRight: '10px'
+      }
+    }, optionItem.icon), /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        width: 'calc(100% - 36px)',
+        textAlign: 'left',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+      },
+      title: optionItem.content
+    }, optionItem.content));
+  }))) : ''), Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      overflow: 'auto',
+      marginTop: '10px',
+      maxHeight: '300px',
+      maxWidth: '100%',
+      height: item.status === 'close' ? '0px' : 'auto'
+    }
+  }, item.contentList.map((innerItem, innerItemIndex) => {
+    return /*#__PURE__*/React__default.createElement("p", {
+      key: `${innerItem}_${innerItemIndex}`,
+      className: styles$c['list-text'],
+      style: {
+        color: openListColor
+      },
+      onClick: e => handleContentListClick(e, {
+        item,
+        index,
+        innerIndex,
+        listContentId: innerItem.id,
+        listContent: innerItem.content,
+        listContentIndex: innerItemIndex
+      })
+    }, innerItem.content.length >= item.content.length ? innerItem.content.substr(0, item.content.length - 4) + '...' : innerItem.content);
+  })))) : '');
+};
+
+const SvgUpArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "21",
+  height: "21",
+  viewBox: "0 0 21 21",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("rect", {
+  x: 0.5,
+  y: 0.5,
+  width: 20,
+  height: 20,
+  rx: 0.5,
+  fill: "#fff",
+  stroke: "#EEE"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10.509 8.002c.183 0 .36.07.502.197l4.706 4.284a.912.912 0 0 1 .102 1.208.767.767 0 0 1-.532.305.742.742 0 0 1-.574-.194l-4.204-3.838-4.204 3.7a.765.765 0 0 1-.272.157.721.721 0 0 1-.599-.07.805.805 0 0 1-.235-.215.879.879 0 0 1-.16-.303.932.932 0 0 1 .06-.683.84.84 0 0 1 .21-.264l4.705-4.138a.735.735 0 0 1 .495-.146Z",
+  fill: "#3C393E"
+}));
+
+const SvgDownArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "21",
+  height: "21",
+  viewBox: "0 0 21 21",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("rect", {
+  x: 0.5,
+  y: 0.5,
+  width: 20,
+  height: 20,
+  rx: 0.5,
+  fill: "#fff",
+  stroke: "#EEE"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10.491 13.998a.745.745 0 0 1-.502-.197L5.283 9.517a.912.912 0 0 1-.102-1.208.767.767 0 0 1 .532-.305c.208-.021.414.049.574.194l4.204 3.838 4.204-3.7a.765.765 0 0 1 .272-.157.721.721 0 0 1 .599.07c.09.054.17.127.235.215a.88.88 0 0 1 .16.303.933.933 0 0 1-.06.683.841.841 0 0 1-.21.264l-4.706 4.138a.735.735 0 0 1-.494.146Z",
+  fill: "#3C393E"
+}));
+
+const Table = ({
+  getData,
+  dataBody,
+  arrowShow,
+  dataHeader,
+  arrowColumn,
+  tHeadColor,
+  tHeadFamily,
+  tHeadPadding,
+  tHeadFontSize,
+  tHeadFontWeight,
+  tHeadBorderRadius,
+  tHeadBackgroundColor,
+  tBodyColor,
+  tBodyPadding,
+  tBodyFontSize,
+  tBodyTextAlign,
+  tBodyFontWeight,
+  tBodyFontFamily,
+  tBodyRowBorder,
+  openListColor
+}) => {
+  const [body, setBody] = useState([]);
+  const [header, setHeader] = useState([]);
+  const [disableArr, setDisableArr] = useState([]);
+  const [checkedArray, setCheckedArray] = useState([]);
+  const configStyles = compereConfigs();
+  const handleCheckIfArrow = (bodyData, data) => {
+    let removeItemIndex;
+    let headerWithoutArrow = [];
+    bodyData.map((item, index) => {
+      if (index === data.index) {
+        item.map((innerItem, innerIndex) => {
+          if (Object.prototype.hasOwnProperty.call(innerItem, 'arrowComponent')) {
+            removeItemIndex = innerIndex;
+          }
+        });
+        if (removeItemIndex !== undefined) {
+          const firstPart = item.slice(0, removeItemIndex);
+          const secondPart = item.slice(removeItemIndex + 1, item.length);
+          headerWithoutArrow = [...firstPart, ...secondPart];
+        } else {
+          headerWithoutArrow.push(item);
+        }
+      }
+    });
+    return {
+      removeItemIndex,
+      headerWithoutArrow
+    };
+  };
+  const handleHeaderItemClick = e => {
+    e.stopPropagation();
+    if (!e.target.tagName.startsWith('svg') && e.target.innerText !== undefined && e.target.innerText !== '') {
+      let removeItemIndex;
+      let headerWithoutArrow;
+      header.map((item, index) => {
+        if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+          removeItemIndex = index;
+        }
+      });
+      if (removeItemIndex !== undefined) {
+        const firstPart = header.slice(0, removeItemIndex);
+        const secondPart = header.slice(removeItemIndex + 1, header.length);
+        headerWithoutArrow = [...firstPart, ...secondPart];
+      }
+      const returnedData = {
+        from: 'header',
+        content: e.target.innerText,
+        row: headerWithoutArrow !== undefined ? headerWithoutArrow : header
+      };
+      getData(returnedData);
+    }
+  };
+  const handleBodyActionClick = (e, data) => {
+    e.stopPropagation();
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, data);
+    const actionData = {
+      from: 'body',
+      item: data.item,
+      id: data.item.id,
+      items: data.items,
+      type: data.item.type,
+      rowIndex: data.index,
+      row: headerWithoutArrow,
+      itemInnerIndex: data.itemIndex,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex
+    };
+    getData(actionData);
+  };
+  const handleSetCheckboxArray = data => {
+    let checkedItems = [];
+    data.map((item, index) => {
+      item.map((innerItem, innerIndex) => {
+        if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+          if (!checkedItems[innerIndex]) {
+            checkedItems[innerIndex] = [];
+          }
+          checkedItems[innerIndex].push({
+            rowCount: index,
+            columnCount: innerIndex,
+            checked: innerItem.checkBox.checked
+          });
+        }
+      });
+    });
+    return checkedItems;
+  };
+  const handleSetInsertIndex = (data, count) => {
+    let arrowColumnCount;
+    if (typeof count !== 'number') {
+      alert('arrowColumn props must be a number, please check it');
+    } else {
+      if (count <= 0) {
+        arrowColumnCount = 0;
+      } else {
+        if (count >= data.length - 1) {
+          arrowColumnCount = data.length;
+        } else {
+          arrowColumnCount = count;
+        }
+      }
+    }
+    return arrowColumnCount;
+  };
+  const handleInsertArrow = (data, count, arrowObject) => {
+    if (count === 0) {
+      data.unshift(arrowObject);
+    } else if (count >= data.length - 1) {
+      data.push(arrowObject);
+    } else {
+      data.splice(count, 0, arrowObject);
+    }
+    return data;
+  };
+  const handleTransformDataForInsertArrow = (data, count, type) => {
+    const arrowObject = {
+      status: 'close',
+      checkIndex: null,
+      arrowComponent: true,
+      openArrow: /*#__PURE__*/React__default.createElement(SvgUpArrow, null),
+      closeArrow: /*#__PURE__*/React__default.createElement(SvgDownArrow, null)
+    };
+    if (type === 'body') {
+      return data.map((item, index) => {
+        const newObjWithArrow = {
+          ...arrowObject
+        };
+        newObjWithArrow.checkIndex = index;
+        return handleInsertArrow(item, count, newObjWithArrow);
+      });
+    } else {
+      const newObjWithArrow = {
+        ...arrowObject
+      };
+      newObjWithArrow.checkIndex = count;
+      return handleInsertArrow(data, count, newObjWithArrow);
+    }
+  };
+  const handleCheckedHeader = (data, e) => {
+    e.stopPropagation();
+    let removeItemIndex;
+    let checkableItemBool;
+    let checkableItemIndex;
+    let headerWithoutArrow;
+    let checkableBodyRowItems = [];
+    const updatedHeader = header.slice();
+    const updatedBody = body.slice().map(item => Object.values(item));
+    const newData = updatedHeader.map((item, index) => {
+      if (item.content == data.content) {
+        checkableItemIndex = index;
+        checkableItemBool = !item.checkBox.checked;
+        item.checkBox.checked = !item.checkBox.checked;
+      }
+      if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+        removeItemIndex = index;
+      }
+      return item;
+    });
+    const newUpdatedBody = updatedBody.map((item, index) => {
+      return item.map((innerItem, innerIndex) => {
+        if (checkableItemIndex === innerIndex) {
+          innerItem.checkBox.checked = checkableItemBool;
+          checkableBodyRowItems.push({
+            column: innerIndex,
+            columnItem: innerItem
+          });
+          handleHeaderCheckedUpdate({
+            row: index,
+            column: innerIndex,
+            checked: {
+              checked: checkableItemBool
+            }
+          });
+        }
+        return innerItem;
+      });
+    });
+    if (removeItemIndex !== undefined) {
+      const firstPart = newData.slice(0, removeItemIndex);
+      const secondPart = newData.slice(removeItemIndex + 1, newData.length);
+      headerWithoutArrow = [...firstPart, ...secondPart];
+    }
+    const returnedData = {
+      from: 'header',
+      content: data.content,
+      checkBox: data.checkBox,
+      columnArray: checkableBodyRowItems,
+      row: headerWithoutArrow !== undefined ? headerWithoutArrow : newData
+    };
+    getData(returnedData);
+    setHeader(newData);
+    setBody(newUpdatedBody);
+  };
+  const handleCheckedBody = (data, e, dataRowIndex, dataItemIndex) => {
+    e.stopPropagation();
+    const transformedData = {
+      ...data
+    };
+    transformedData.index = dataRowIndex;
+    transformedData.innerIndex = dataItemIndex;
+    const updatedBody = body.slice().map(item => Object.values(item));
+    const newData = updatedBody.map((item, index) => {
+      return item.map((innerItem, innerIndex) => {
+        if (innerItem.id === data.id && innerItem.content == data.content && Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+          innerItem.checkBox.checked = !innerItem.checkBox.checked;
+          handleHeaderCheckedUpdate({
+            row: index,
+            column: innerIndex,
+            checked: innerItem.checkBox
+          });
+        }
+        return innerItem;
+      });
+    });
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, transformedData);
+    const checkedData = {
+      item: data,
+      from: 'body',
+      row: removeItemIndex !== undefined ? headerWithoutArrow : headerWithoutArrow[0],
+      rowIndex: transformedData.index,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < transformedData.innerIndex ? transformedData.innerIndex - 1 : transformedData.innerIndex
+    };
+    getData(checkedData);
+    setBody(newData);
+  };
+  const handleHeaderCheckedUpdate = checkedData => {
+    const updatedHeader = header.slice();
+    const newCheckedArray = checkedArray.map((item, index) => {
+      return item.map((innerItem, innerIndex) => {
+        if (index === checkedData.column) {
+          if (innerIndex === checkedData.row) {
+            innerItem.checked = checkedData.checked.checked;
+          }
+        }
+        return innerItem;
+      });
+    });
+    const newData = updatedHeader.map((item, index) => {
+      if (newCheckedArray[index]) {
+        const tempCheckedArray = [];
+        newCheckedArray[index].map(innerItem => {
+          tempCheckedArray.push(innerItem.checked);
+        });
+        if (tempCheckedArray.every(i => i)) {
+          item.checkBox.checked = true;
+        } else {
+          item.checkBox.checked = false;
+        }
+      }
+      return item;
+    });
+    setHeader(newData);
+    setCheckedArray(newCheckedArray);
+  };
+  const handleCheckArrowAction = (item, rowPosition) => {
+    const status = item.status;
+    const checkedOpenableRow = body[rowPosition].map(innerItem => {
+      if (Object.prototype.hasOwnProperty.call(innerItem, 'status')) {
+        if (status === 'close') {
+          innerItem.status = 'open';
+        } else {
+          innerItem.status = 'close';
+        }
+      }
+      return innerItem;
+    });
+    setBody(prev => {
+      prev[rowPosition] = checkedOpenableRow;
+      return [...prev];
+    });
+  };
+  const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex) => {
+    let single = {};
+    const allArrows = [];
+    const checkedOpenableRow = body[arrowRowIndex].map((item, index) => {
+      if (index === arrowIndex) {
+        if (item.status === 'close') {
+          item.status = 'open';
+        } else {
+          item.status = 'close';
+        }
+        single = item;
+      }
+      if (Object.prototype.hasOwnProperty.call(item, 'status') && !Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+        allArrows.push(item);
+      }
+      return item;
+    });
+    const checkedOpenableRowArrow = checkedOpenableRow.map(item => {
+      if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+        if (single && single.status === 'close') {
+          item.status = 'close';
+        } else if (single && single.status === 'open') {
+          if (allArrows.every(i => i.status === 'open')) {
+            item.status = 'open';
+          }
+        }
+      }
+      return item;
+    });
+    setBody(prev => {
+      prev[arrowRowIndex] = checkedOpenableRowArrow;
+      return [...prev];
+    });
+  };
+  const handleCheckArrowActionHeader = (e, item) => {
+    e.stopPropagation();
+    const checkedOpenableAllRows = header.map((innerItem, innerIndex) => {
+      if (item.checkIndex === innerIndex) {
+        if (item.status === 'close') {
+          innerItem.status = 'open';
+        } else {
+          innerItem.status = 'close';
+        }
+      }
+      return innerItem;
+    });
+    const checkedOpenableAllRowsBody = body.map(innerItem => {
+      return innerItem.map(iElem => {
+        if (Object.prototype.hasOwnProperty.call(iElem, 'status')) {
+          if (item.status === 'open') {
+            iElem.status = 'open';
+          } else {
+            iElem.status = 'close';
+          }
+        }
+        return iElem;
+      });
+    });
+    setHeader(() => checkedOpenableAllRows);
+    setBody(() => checkedOpenableAllRowsBody);
+  };
+  const handleCheckDots = (e, item, index, innerIndex) => {
+    e.stopPropagation();
+    const checkBodyMore = body.map((elemItem, elemIndex) => {
+      return elemItem.map((elemInnerItem, elemInnerIndex) => {
+        if (elemIndex === index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+          if (elemInnerIndex === innerIndex) {
+            if (item.dotsStatus === 'deActive') {
+              elemInnerItem.dotsStatus = 'active';
+            } else {
+              elemInnerItem.dotsStatus = 'deActive';
+            }
+          }
+        } else if (elemIndex !== index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+          if (elemInnerIndex === innerIndex) {
+            elemInnerItem.dotsStatus = 'deActive';
+          }
+        }
+        return elemInnerItem;
+      });
+    });
+    setBody(() => checkBodyMore);
+  };
+  const handleCheckDisable = (arr, disableArr) => {
+    let headerWithDisabled = [];
+    if (disableArr && disableArr.length > 0) {
+      headerWithDisabled = arr.map((item, index) => {
+        if (disableArr[index]) {
+          if (Object.prototype.hasOwnProperty.call(item, 'checkBox')) {
+            item.checkBox.disabled = true;
+          }
+        }
+        return item;
+      });
+    }
+    return headerWithDisabled;
+  };
+  const handleContentListClick = (e, data) => {
+    e.stopPropagation();
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, data);
+    const listData = {
+      from: 'body',
+      item: data.item,
+      rowIndex: data.index,
+      row: headerWithoutArrow,
+      listItemId: data.listContentId,
+      listItemContent: data.listContent,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
+      listItemInnerIndex: data.listContentIndex
+    };
+    getData(listData);
+  };
+  const handleMoreOptionsClick = data => {
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, data);
+    const moreData = {
+      from: 'body',
+      item: data.item,
+      rowIndex: data.index,
+      options: data.options,
+      row: headerWithoutArrow,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
+      optionItem: data.optionItem,
+      optionIndex: data.optionIndex
+    };
+    getData(moreData);
+  };
+  useEffect(() => {
+    let checkedItems = [];
+    const disabledArray = [];
+    const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
+    if (arrowShow) {
+      const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
+      const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
+      const insert = checkForInsertArrow.map((item, index) => {
+        item.map((innerItem, innerIndex) => {
+          if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+            if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+              if (innerItem.checkBox.disabled === true) {
+                if (!disabledArray[innerIndex]) {
+                  disabledArray[innerIndex] = {
+                    rowIndex: index,
+                    columnIndex: innerIndex
+                  };
+                }
+              }
+            }
+          }
+        });
+        return item;
+      });
+      checkedItems = handleSetCheckboxArray(insert);
+      setBody(() => insert);
+    } else {
+      const insert = checkBodyForChackedItems.map((item, index) => {
+        item.map((innerItem, innerIndex) => {
+          if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+            if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+              if (innerItem.checkBox.disabled === true) {
+                if (!disabledArray[innerIndex]) {
+                  disabledArray[innerIndex] = {
+                    rowIndex: index,
+                    columnIndex: innerIndex
+                  };
+                }
+              }
+            }
+          }
+        });
+        return item;
+      });
+      checkedItems = handleSetCheckboxArray(insert);
+      setBody(() => insert);
+    }
+    setDisableArr(disabledArray);
+    setCheckedArray(() => checkedItems);
+  }, [dataBody, arrowColumn, arrowShow]);
+  useEffect(() => {
+    if (arrowShow) {
+      const header = dataHeader.slice();
+      const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
+      const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
+      const headerWithDisabled = handleCheckDisable(checkForInsertArrow, disableArr);
+      setHeader(() => headerWithDisabled.length > 0 ? headerWithDisabled : checkForInsertArrow);
+    } else {
+      const headerWithDisabled = handleCheckDisable(dataHeader, disableArr);
+      setHeader(() => headerWithDisabled.length > 0 ? headerWithDisabled : dataHeader);
+    }
+  }, [dataHeader, arrowColumn, arrowShow, disableArr]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("table", {
+    style: {
+      width: '100%',
+      borderCollapse: 'collapse'
+    }
+  }, header && header.length > 0 && /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
+    style: {
+      color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
+      backgroundColor: tHeadBackgroundColor ? tHeadBackgroundColor : configStyles.TABLE.tHeadBackgroundColor
+    }
+  }, header.map((item, index) => {
+    return /*#__PURE__*/React__default.createElement(TH, {
+      item: item,
+      key: `${item}_${index}`,
+      handleCheckedHeader: handleCheckedHeader,
+      handleHeaderItemClick: handleHeaderItemClick,
+      handleCheckArrowActionHeader: handleCheckArrowActionHeader,
+      tHeadFamily: tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily,
+      tHeadPadding: tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding,
+      tHeadFontSize: tHeadFontSize ? tHeadFontSize : configStyles.TABLE.tHeadFontSize,
+      tHeadFontWeight: tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight,
+      borderTopLeftRadius: index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px',
+      borderTopRightRadius: index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'
+    });
+  }))), body && body.length > 0 && /*#__PURE__*/React__default.createElement("tbody", {
+    style: {
+      boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
+    }
+  }, body.map((item, index) => {
+    return /*#__PURE__*/React__default.createElement("tr", {
+      key: `${item}_${index}`,
+      style: {
+        borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.tBodyRowBorder
+      }
+    }, Object.values(item).map((innerItem, innerIndex) => {
+      return /*#__PURE__*/React__default.createElement(TD, {
+        index: index,
+        item: innerItem,
+        innerIndex: innerIndex,
+        id: item.id ? item.id : '',
+        handleCheckDots: handleCheckDots,
+        key: `${innerItem}_${index}_${innerIndex}`,
+        openListColor: openListColor ? openListColor : configStyles.TABLE.openListColor,
+        handleCheckedBody: handleCheckedBody,
+        handleBodyActionClick: handleBodyActionClick,
+        handleMoreOptionsClick: handleMoreOptionsClick,
+        handleContentListClick: handleContentListClick,
+        tBodyColor: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
+        tBodyPadding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
+        tBodyFontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
+        tBodyTextAlign: tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign,
+        tBodyFontFamily: tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily,
+        tBodyFontWeight: tBodyFontWeight ? tBodyFontWeight : configStyles.TABLE.tBodyFontWeight,
+        borderRight: innerIndex === Object.values(item).length - 1 ? 'none' : configStyles.TABLE.tBodyRowBorder,
+        handleCheckArrowAction: handleCheckArrowAction,
+        handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
+      });
+    }));
+  }))));
+};
+Table.propTypes = {
+  getData: PropTypes.func,
   dataBody: PropTypes.array,
+  arrowShow: PropTypes.bool,
   dataHeader: PropTypes.array,
+  arrowColumn: PropTypes.number,
   tHeadColor: PropTypes.string,
   tHeadFamily: PropTypes.string,
   tHeadPadding: PropTypes.string,
+  tHeadFontSize: PropTypes.string,
   tHeadFontWeight: PropTypes.number,
   tHeadBorderRadius: PropTypes.string,
   tHeadBackgroundColor: PropTypes.string,
@@ -369,8 +1246,8 @@ styleInject(css_248z$e);
   tBodyFontWeight: PropTypes.string,
   tBodyFontFamily: PropTypes.string,
   tBodyRowBorder: PropTypes.string,
-  setTableDataHeader: PropTypes.func
-});
+  openListColor: PropTypes.string
+};
 
 var css_248z$d = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
 var styles$b = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
@@ -2491,7 +3368,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]];
+  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();
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -2951,6 +3828,7 @@ const NewFile = ({
   labelColor,
   errorColor,
   filesArray,
+  componentId,
   putFileHere,
   borderColor,
   uploadColor,
@@ -2965,6 +3843,7 @@ const NewFile = ({
   listItemHeight,
   backgroundColor,
   deleteComponent,
+  removeComponent,
   listItemPadding,
   progressFontSize,
   borderHoverColor,
@@ -3000,6 +3879,7 @@ const NewFile = ({
     } else {
       removeFile && removeFile(filesArray);
     }
+    removeComponent(componentId);
   };
   const handleRemoveFile = () => {
     setImage(null);
@@ -3119,6 +3999,11 @@ const NewFile = ({
       alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
     }
   }, [multiple, removeFile, filesArray && filesArray.length, defaultData]);
+  useEffect(() => {
+    if (deleteComponent && !removeComponent) {
+      alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
+    }
+  }, [deleteComponent]);
   useEffect(() => {
     if (errorMessage) {
       setError(errorMessage);
@@ -3303,12 +4188,14 @@ NewFile.propTypes = {
   borderColor: PropTypes.string,
   uploadColor: PropTypes.string,
   defaultData: PropTypes.object,
+  componentId: PropTypes.number,
   maxSizeError: PropTypes.string,
   errorMessage: PropTypes.string,
   fileSizeText: PropTypes.string,
   noChoosenFile: PropTypes.string,
   progressColor: PropTypes.string,
   deleteComponent: PropTypes.bool,
+  removeComponent: PropTypes.func,
   listItemHeight: PropTypes.string,
   backgroundColor: PropTypes.string,
   change: PropTypes.func.isRequired,
@@ -3699,7 +4586,7 @@ Typography.propTypes = {
   textDecoration: PropTypes.string,
   backgroundColor: PropTypes.string,
   variant: PropTypes.oneOf(Object.values(TypographyType)),
-  size: PropTypes.oneOf(PropTypes.string, PropTypes.number)
+  size: PropTypes.oneOf([PropTypes.string, PropTypes.number])
 };
 Typography.defaultProps = {
   variant: 'p'
@@ -4456,4 +5343,4 @@ NewAutocomplete.defaultProps = {
   disabled: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };