@majoo-ui/react 1.61.12-rc.11 → 1.61.12-rc.13

package/index.umd.js

@@ -60,12 +60,10 @@
 
   var _jsxFileName$13 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
   function ThemeProvider({
-    name,
     theme,
     children
   }) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      id: name,
       className: theme,
       __self: this,
       __source: {
@@ -76,13 +74,9 @@
     }, children);
   }
   ThemeProvider.propTypes = {
-    name: PropTypes__default["default"].string,
     theme: PropTypes__default["default"].object.isRequired,
     children: PropTypes__default["default"].node.isRequired
   };
-  ThemeProvider.defaultProps = {
-    name: 'default'
-  };
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1338,18 +1332,8 @@
     _a.config;
   createTheme({
     colors: {
-      bgWhite: '#003030',
-      bgGray: '#003030',
-      bgDark: '#FFFFFF',
-      textPrimary: '#FFFFFF',
-      textSecondary: '#FFFFFF',
-      bgHeader: '#004a48',
-      btnPrimary: '#001f1f',
-      btnSecondary: '#003030',
-      primary50: '#001f1f',
-      primary100: '#001f1f',
-      iconPrimary: '#FFFFFF',
-      bgBorder: '#004a49'
+      bgWhite: '#000000',
+      bgDark: '#FFFFFF'
     }
   });
   var colors$8 = core.foundations.colors;
@@ -1525,7 +1509,6 @@
   var _jsxFileName$12 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
   function MajooProvider({
     children,
-    name,
     theme: theme$1 = theme,
     extendStyle,
     disableGlobalStyle
@@ -1536,7 +1519,6 @@
     } = reactI18next.useTranslation();
     moment__default["default"].locale(i18n && i18n.language ? i18n.language : 'id');
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
-      name: name,
       theme: theme$1,
       __self: this,
       __source: {
@@ -1547,18 +1529,11 @@
     }, children);
   }
   MajooProvider.propTypes = {
-    name: PropTypes__default["default"].string,
     theme: PropTypes__default["default"].object.isRequired,
     children: PropTypes__default["default"].node.isRequired,
     extendStyle: PropTypes__default["default"].object,
     disableGlobalStyle: PropTypes__default["default"].bool
   };
-  MajooProvider.defaultProps = {
-    name: 'default',
-    theme: theme,
-    extendStyle: {},
-    disableGlobalStyle: false
-  };
 
   const Box = styled('div', {
     variants: {
@@ -7335,29 +7310,29 @@
       } else {
         formdata.append(reqKey, file);
       }
-      axios__default["default"]({
-        method: 'post',
-        url: url,
-        data: formdata,
+      var config = {
         headers: (_a = {}, _a[tokenKey] = token, _a['Content-Type'] = 'multipart/form-data', _a),
         onUploadProgress: function (progressEvent) {
-          if (progressEvent.total) {
-            var percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);
-            onProgress === null || onProgress === void 0 ? void 0 : onProgress(progressEvent);
-            progress === null || progress === void 0 ? void 0 : progress(percentCompleted);
-          }
+          var percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);
+          onProgress === null || onProgress === void 0 ? void 0 : onProgress({
+            percent: percentCompleted
+          });
+          progress === null || progress === void 0 ? void 0 : progress(percentCompleted);
         }
-      }).then(function (response) {
+      };
+      axios__default["default"].post(url, formdata, config).then(function (res) {
         var _a, _b;
-        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response.data);
-        resolve((_b = (_a = [response.data]) === null || _a === void 0 ? void 0 : _a.concat(resKey === null || resKey === void 0 ? void 0 : resKey.split('.'))) === null || _b === void 0 ? void 0 : _b.reduce(function (a, b) {
+        var response = res.data;
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response);
+        resolve((_b = (_a = [response]) === null || _a === void 0 ? void 0 : _a.concat(resKey === null || resKey === void 0 ? void 0 : resKey.split('.'))) === null || _b === void 0 ? void 0 : _b.reduce(function (a, b) {
           return a[b];
         }));
-      }).catch(function (error) {
+      }).catch(function (err) {
         var _a;
-        var errorMessage = ((_a = error.response) === null || _a === void 0 ? void 0 : _a.data) || error.message;
-        onError === null || onError === void 0 ? void 0 : onError(error, errorMessage);
-        reject(error.message);
+        var error = new Error(err.message);
+        var responseData = (_a = err.response) === null || _a === void 0 ? void 0 : _a.data;
+        onError === null || onError === void 0 ? void 0 : onError(error, responseData);
+        reject(err.message);
       });
     });
     return promise;
@@ -14641,19 +14616,14 @@
       });
     }, [query]);
     React.useEffect(() => {
-      // Only update if value prop actually changes
-      if (value !== undefined) {
-        setInputSelectValue(value || []);
-      }
-    }, [value]);
-
-    // Set initial value from defaultValue only once
-    React.useEffect(() => {
-      if (defaultValue && !value) {
-        setInputSelectValue(defaultValue);
+      if (defaultValue != null && defaultValue.length) {
+        if (value != null && value.length) {
+          setInputSelectValue(value);
+        }
+      } else {
+        setInputSelectValue(value);
       }
-    }, []); // Empty dependency to run only once
-
+    }, [value, defaultValue]);
     const sortItems = React__default["default"].useCallback(() => {
       if (sortBy === 'id') {
         option.sort(function (a, b) {
@@ -14822,7 +14792,6 @@
             {
               if (clearSearchOnSelect) setInputValue('');
             }
-          // eslint-disable-next-line no-fallthrough
           case Downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
           case Downshift.useCombobox.stateChangeTypes.InputBlur:
             if (selectedItem) {
@@ -14957,56 +14926,60 @@
     });
     const memoOptions = React.useMemo(() => maxSelectedItem ? option == null ? void 0 : option.map(item => {
       const isMaxSelectedItem = maxSelectedItem && (selectedValue == null ? void 0 : selectedValue.length) >= maxSelectedItem;
-      // Create a new object instead of mutating the original
-      return Object.assign({}, item, {
-        hideCheck: isMaxSelectedItem && !(selectedValue != null && selectedValue.includes(item.id)),
-        isDisabled: item.isDisabled || isMaxSelectedItem && !(selectedValue != null && selectedValue.includes(item.id))
-      });
+      if (isMaxSelectedItem && !(selectedValue != null && selectedValue.includes(item.id))) {
+        item.hideCheck = true;
+        item.isDisabled = true;
+      } else {
+        item.hideCheck = false;
+        item.isDisabled = false;
+      }
+      return item;
     }) : option, [maxSelectedItem, option, selectedValue]);
-
-    // Remove memoOptionsString as it's not needed and causes issues
-
+    const memoOptionsString = React.useMemo(() => JSON.stringify(memoOptions), [memoOptions]);
     const itemsLength = items == null ? void 0 : items.reduce((acc, item) => {
       return [...acc, ...(item.children ? item.children : [item])];
     }, []).length;
     React.useEffect(() => {
       if (!inputValue || fetchData) {
         sortItems();
-        const newItems = isShowSelectAll ? [{
+        setItems(isShowSelectAll ? [{
+          id: '!all',
+          name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+        }, ...memoOptions] : memoOptions);
+        setInitItems(isShowSelectAll ? [{
           id: '!all',
           name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
-        }, ...memoOptions] : memoOptions;
-        setItems(newItems);
-        setInitItems(newItems);
+        }, ...memoOptions] : memoOptions);
       }
-    }, [isShowSelectAll, selectAllLabel, t, memoOptions, inputValue, fetchData, sortItems]);
+    }, [isShowSelectAll, selectAllLabel, t, memoOptionsString, inputValue]);
     React.useEffect(() => {
       if (selectedValue.length > 0 && disabledOptions.length === 0) {
         setInitItems(sortValue);
         setItems(sortValue);
       }
-    }, []); // Keep empty dependency array for initial setup
-
+    }, []);
     React.useEffect(() => {
       if (sortBy) {
         sortItems();
       }
-    }, [sortBy, sortItems]);
+    }, [sortBy]);
     React.useEffect(() => {
       if (disabledOptions.length > 0) {
         const options = generateOptions(sortDisabled);
-        const newItems = isShowSelectAll ? [{
+        setItems(isShowSelectAll ? [{
+          id: '!all',
+          name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+        }, ...options] : options);
+        setInitItems(isShowSelectAll ? [{
           id: '!all',
           name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
-        }, ...options] : options;
-        setItems(newItems);
-        setInitItems(newItems);
+        }, ...options] : options);
       }
-    }, [disabledOptions, isShowSelectAll, selectAllLabel, t, sortDisabled]);
+    }, [disabledOptions, isShowSelectAll]);
     React.useEffect(() => {
       const selectedVal = itemsLength > 0 && inputSelectValue.length === itemsLength - 1 ? ['!all', ...inputSelectValue] : inputSelectValue;
       setSelectedValue(selectedVal);
-    }, [inputSelectValue, itemsLength]);
+    }, [inputSelectValue, items]);
     React.useEffect(() => {
       if (!!label && label !== '') {
         setInputValue(label);
@@ -15049,7 +15022,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 761,
+          lineNumber: 778,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -15063,7 +15036,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 780,
+          lineNumber: 797,
           columnNumber: 11
         }
       }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15071,7 +15044,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 792,
+          lineNumber: 809,
           columnNumber: 17
         }
       }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15079,21 +15052,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 796,
+          lineNumber: 813,
           columnNumber: 19
         }
       })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < itemsLength ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 800,
+          lineNumber: 817,
           columnNumber: 15
         }
       }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 802,
+          lineNumber: 819,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -15104,7 +15077,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 805,
+          lineNumber: 822,
           columnNumber: 11
         }
       }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name));
@@ -15132,7 +15105,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 821,
+            lineNumber: 838,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -15145,7 +15118,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 834,
+            lineNumber: 851,
             columnNumber: 15
           }
         }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15153,7 +15126,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 844,
+            lineNumber: 861,
             columnNumber: 19
           }
         }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) === (item == null || (_item$children7 = item.children) == null || (_item$children7 = _item$children7.filter(e => !e.isDisabled)) == null ? void 0 : _item$children7.length) ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15161,14 +15134,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 846,
+            lineNumber: 863,
             columnNumber: 19
           }
         }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 848,
+            lineNumber: 865,
             columnNumber: 19
           }
         }, "-") : null), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -15179,14 +15152,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 851,
+            lineNumber: 868,
             columnNumber: 15
           }
         }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 819,
+          lineNumber: 836,
           columnNumber: 9
         }
       }, item == null || (_item$children8 = item.children) == null ? void 0 : _item$children8.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
@@ -15199,7 +15172,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 863,
+        lineNumber: 880,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -15209,7 +15182,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 864,
+        lineNumber: 881,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15224,7 +15197,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 865,
+        lineNumber: 882,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -15242,7 +15215,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 875,
+        lineNumber: 892,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15256,7 +15229,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 882,
+        lineNumber: 899,
         columnNumber: 13
       }
     }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15267,7 +15240,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 893,
+        lineNumber: 910,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -15275,7 +15248,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 898,
+        lineNumber: 915,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15288,7 +15261,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 902,
+        lineNumber: 919,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
@@ -15296,7 +15269,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 908,
+        lineNumber: 925,
         columnNumber: 13
       }
     }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -15317,7 +15290,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 910,
+        lineNumber: 927,
         columnNumber: 17
       }
     }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems == null || (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null || (_selectedItems$filter = _selectedItems$filter.filter((_, idx) => {
@@ -15348,7 +15321,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 939,
+        lineNumber: 956,
         columnNumber: 21
       }
     }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > collapsibleLimit && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15357,7 +15330,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 962,
+        lineNumber: 979,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15367,14 +15340,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 963,
+        lineNumber: 980,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 964,
+        lineNumber: 981,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15388,7 +15361,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 965,
+        lineNumber: 982,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -15396,7 +15369,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 971,
+        lineNumber: 988,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -15404,7 +15377,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 973,
+        lineNumber: 990,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15416,14 +15389,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 975,
+        lineNumber: 992,
         columnNumber: 21
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 979,
+        lineNumber: 996,
         columnNumber: 19
       }
     })), showCollapsibleCounter && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15434,7 +15407,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 982,
+        lineNumber: 999,
         columnNumber: 19
       }
     }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter2 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter2.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15446,7 +15419,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 992,
+        lineNumber: 1009,
         columnNumber: 11
       }
     }, `${totalOptions ? totalOptions : selectedItems == null || (_selectedItems$filter3 = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -15459,7 +15432,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 998,
+        lineNumber: 1015,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15481,7 +15454,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1008,
+        lineNumber: 1025,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -15489,7 +15462,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1025,
+        lineNumber: 1042,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -15501,7 +15474,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1030,
+        lineNumber: 1047,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -15524,14 +15497,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 1034,
+          lineNumber: 1051,
           columnNumber: 19
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1031,
+        lineNumber: 1048,
         columnNumber: 15
       }
     }, isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -15544,14 +15517,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1059,
+        lineNumber: 1076,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1060,
+        lineNumber: 1077,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -15561,7 +15534,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1061,
+        lineNumber: 1078,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -15573,7 +15546,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1062,
+        lineNumber: 1079,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -22470,7 +22443,7 @@
   };
 
   var StyledAccordion = styled(AccordionPrimitive__namespace.Root, {});
-  var Accordion = /*#__PURE__*/React__default["default"].forwardRef(function (_a, forwardedRef) {
+  var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var children = _a.children,
       props = __rest(_a, ["children"]);
     return jsxRuntime.jsx(StyledAccordion, __assign({
@@ -22538,7 +22511,7 @@
       }
     }
   });
-  var AccordionTrigger = /*#__PURE__*/React__default["default"].forwardRef(function (_a, forwardedRef) {
+  var AccordionTrigger = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var children = _a.children,
       _b = _a.arrowPosition,
       arrowPosition = _b === void 0 ? 'right' : _b,
@@ -22773,9 +22746,6 @@
       buttonType: "secondary",
       disabled: currentPage === 1,
       onClick: () => handleSelectPage(1),
-      css: {
-        color: '$iconPrimary'
-      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
@@ -22783,11 +22753,11 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
-      color: "currentColor",
+      color: currentPage === 1 ? colors$8.iconDisable : colors$8.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 194,
+        lineNumber: 191,
         columnNumber: 19
       }
     })), isLg ? /*#__PURE__*/React__default["default"].createElement(PrevNextButtonIcon, {
@@ -22799,7 +22769,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 198,
+        lineNumber: 195,
         columnNumber: 17
       }
     }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -22810,7 +22780,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 206,
+        lineNumber: 203,
         columnNumber: 17
       }
     }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -22821,7 +22791,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$l,
-          lineNumber: 219,
+          lineNumber: 216,
           columnNumber: 15
         }
       }, page);
@@ -22834,7 +22804,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 231,
+        lineNumber: 228,
         columnNumber: 17
       }
     }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -22845,7 +22815,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 239,
+        lineNumber: 236,
         columnNumber: 17
       }
     }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -22853,21 +22823,18 @@
       buttonType: "secondary",
       disabled: currentPage === totalPages,
       onClick: () => handleSelectPage(totalPages),
-      css: {
-        color: '$iconPrimary'
-      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 250,
+        lineNumber: 247,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
-      color: "currentColor",
+      color: currentPage === totalPages ? colors$8.iconDisable : colors$8.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 259,
+        lineNumber: 253,
         columnNumber: 19
       }
     })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -22880,7 +22847,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 268,
+        lineNumber: 262,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22893,7 +22860,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 276,
+        lineNumber: 270,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -22910,7 +22877,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 277,
+        lineNumber: 271,
         columnNumber: 15
       }
     }, t('gotoPageText', 'Ke Halaman')), isMobilePagination ? /*#__PURE__*/React__default["default"].createElement(GoToPageBox, {
@@ -22923,7 +22890,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 289,
+        lineNumber: 283,
         columnNumber: 17
       }
     }, goToPage) : /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -22950,14 +22917,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 293,
+        lineNumber: 287,
         columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 321,
+        lineNumber: 315,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -22967,7 +22934,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 322,
+        lineNumber: 316,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22975,21 +22942,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 323,
+        lineNumber: 317,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 325,
+        lineNumber: 319,
         columnNumber: 9
       }
     }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 326,
+        lineNumber: 320,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement("form", {
@@ -23001,7 +22968,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 327,
+        lineNumber: 321,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -23018,14 +22985,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 333,
+        lineNumber: 327,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 342,
+        lineNumber: 336,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23036,7 +23003,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 343,
+        lineNumber: 337,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -23051,7 +23018,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 344,
+        lineNumber: 338,
         columnNumber: 13
       }
     }, t('btnCancelText', 'Batal')), /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -23066,7 +23033,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 355,
+        lineNumber: 349,
         columnNumber: 13
       }
     }, t('btnSubmitText', 'Lanjutkan'))))));
@@ -23160,7 +23127,6 @@
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
-      color: "primary",
       variant: "status",
       __self: this,
       __source: {
@@ -23188,7 +23154,7 @@
       direction: "column",
       align: "center",
       css: {
-        backgroundColor: '$bgWhite',
+        backgroundColor: '$white',
         boxShadow: '$small'
       },
       __self: this,
@@ -23208,7 +23174,6 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
-      color: "primary",
       variant: "status",
       __self: this,
       __source: {
@@ -23865,7 +23830,7 @@
                             justify: "between",
                             gap: 5,
                             css: {
-                              backgroundColor: '$bgGray',
+                              backgroundColor: colors$8.bgGray,
                               padding: "$spacing-04 $spacing-05 ".concat('selection' in row.values ? '$spacing-04 $spacing-07' : ''),
                               borderBottom: '1pt solid $bgBorder',
                               alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -23900,7 +23865,7 @@
                         gap: 3,
                         css: {
                           height: '40px',
-                          backgroundColor: '$bgGray',
+                          backgroundColor: colors$8.bgGray,
                           paddingRight: '$spacing-04'
                         }
                       }, {
@@ -24261,14 +24226,14 @@
     borderSpacing: 0,
     borderCollapse: 'collapse',
     '& *[data-sticky-td="true"]': {
-      backgroundColor: '$bgHeader'
+      backgroundColor: '$bgWhite'
     }
   });
   var TableHead$3 = styled('thead', {
     position: 'sticky',
     top: 0,
     zIndex: '$docked',
-    backgroundColor: '$bgHeader',
+    backgroundColor: '$bgWhite',
     boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
     borderBottom: '1pt solid $bgBorder',
     color: '$textPrimary',
@@ -24299,7 +24264,7 @@
     padding: '0 $spacing-03',
     '&::after': {
       size: '16px',
-      content: "url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E\")",
+      content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E\")",
       margin: '0 $spacing-02 $spacing-01 0',
       opacity: 1,
       '@lg': {
@@ -24376,16 +24341,6 @@
             opacity: 1
           }
         }
-      },
-      darkTheme: {
-        true: {
-          '&::after': {
-            content: "url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E\")",
-            '@lg': {
-              content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E\")"
-            }
-          }
-        }
       }
     },
     compoundVariants: [{
@@ -24409,32 +24364,10 @@
           opacity: 1
         }
       }
-    }, {
-      isSortedDesc: true,
-      darkTheme: true,
-      css: {
-        '&::after': {
-          content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z'/%3E%3C/g%3E%3C/svg%3E\")",
-          '@lg': {
-            content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z'/%3E%3C/g%3E%3C/svg%3E\")"
-          }
-        }
-      }
-    }, {
-      isSortedDesc: false,
-      darkTheme: true,
-      css: {
-        '&::after': {
-          content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z' transform='rotate(180 12 10.9998)' /%3E%3C/g%3E%3C/svg%3E\")",
-          '@lg': {
-            content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z' transform='rotate(180 12 10.9998)' /%3E%3C/g%3E%3C/svg%3E\")"
-          }
-        }
-      }
     }]
   });
   var TableHeadCellContent = styled(Heading, {
-    backgroundColor: 'transparent',
+    backgroundColor: 'white',
     userSelect: 'none',
     textAlign: 'start',
     position: 'relative',
@@ -24473,7 +24406,6 @@
       }
     }
   });
-  var Cell = styled('td');
   var TableCell$3 = styled('td', {
     height: '68px',
     fontSize: '$short-content-regular',
@@ -24738,7 +24670,7 @@
           css: {
             padding: '$spacing-06 $spacing-05',
             boxShadow: '$medium',
-            backgroundColor: '$bgWhite',
+            backgroundColor: 'white',
             maxHeight: 300,
             minWidth: 167,
             width: 'max-content',
@@ -24891,9 +24823,6 @@
     var _8 = React.useState([]),
       filteredHeader = _8[0],
       setFilteredHeader = _8[1];
-    var _9 = React.useState(false),
-      hasDarkParent = _9[0],
-      setHasDarkParent = _9[1];
     var t = reactI18next.useTranslation('MajooUI/table').t;
     var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var customEmptyDataProps = searchQuery ? defaultEmptySearchProps(t, isMobile, searchQuery) : emptyDataProps || defaultEmptyDataProps(t, isMobile);
@@ -24965,12 +24894,12 @@
       setPageSize = instance.setPageSize,
       toggleRowSelected = instance.toggleRowSelected,
       toggleAllRowsSelected = instance.toggleAllRowsSelected,
-      _10 = instance.state,
-      pageIndex = _10.pageIndex,
-      pageSize = _10.pageSize,
-      sortBy = _10.sortBy,
-      selectedRowIds = _10.selectedRowIds,
-      expanded = _10.expanded,
+      _9 = instance.state,
+      pageIndex = _9.pageIndex,
+      pageSize = _9.pageSize,
+      sortBy = _9.sortBy,
+      selectedRowIds = _9.selectedRowIds,
+      expanded = _9.expanded,
       setHiddenColumns = instance.setHiddenColumns,
       setColumnOrder = instance.setColumnOrder;
     var scrollerRef = React.useRef(null);
@@ -25024,7 +24953,6 @@
         },
         rowsPerPageOptions: rowsPerPageOptions,
         css: {
-          backgroundColor: '$bgWhite',
           padding: '$spacing-04 0',
           '@md': {
             padding: '$spacing-06 $spacing-03'
@@ -25179,8 +25107,7 @@
                     isSortedDesc: column.isSortedDesc,
                     unsortable: column.unsortable,
                     isToggleable: !!column.onToggle,
-                    isToggled: column.isToggled,
-                    darkTheme: hasDarkParent
+                    isToggled: column.isToggled
                   }, {
                     children: jsxRuntime.jsx(TableHeadCellContent, __assign({
                       heading: "headerTable"
@@ -25284,11 +25211,6 @@
       }
     }, [rawData, selectedIds]);
     React.useEffect(function () {
-      if (scrollerRef.current && scrollerRef.current.parentElement) {
-        var parentElement = scrollerRef.current.parentElement;
-        var darkParentDiv = parentElement.closest('div[id*="dark"]');
-        setHasDarkParent(!!darkParentDiv);
-      }
       var listenStorage = function listenStorage() {
         var item = JSON.parse(localStorage.getItem("menu:".concat(id)));
         onColumnChange === null || onColumnChange === void 0 ? void 0 : onColumnChange(item);
@@ -25309,7 +25231,7 @@
       onDragEnd(reactSortableHoc.arrayMove(records, oldIndex, newIndex));
     };
     var cssTableCell = {
-      backgroundColor: '$bgWhite'
+      backgroundColor: 'white'
     };
     return jsxRuntime.jsxs(Box, __assign({
       css: __assign({
@@ -25383,7 +25305,9 @@
                           return filteredHeader.includes(item.id) || filterHeader.includes(item.id);
                         });
                       }
-                      return jsxRuntime.jsx(TableHeadRow$3, __assign({}, headerGroup.getHeaderGroupProps(), {
+                      return jsxRuntime.jsx(TableHeadRow$3, __assign({
+                        css: cssTableCell
+                      }, headerGroup.getHeaderGroupProps(), {
                         children: visibleHeaders.map(function (column, index) {
                           var headerRender = column.render('Header');
                           return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(function (props) {
@@ -25399,9 +25323,9 @@
                               }
                             }];
                           }), {
-                            css: __assign(__assign(__assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
+                            css: __assign(__assign(__assign(__assign(__assign({}, cssTableCell), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
                               position: 'sticky',
-                              zIndex: column.sticky ? '5 !important' : 3,
+                              zIndex: !!column.sticky ? '5 !important' : 3,
                               top: 0
                             })
                           }, {
@@ -25410,7 +25334,6 @@
                               unsortable: id ? true : column.unsortable,
                               isToggleable: !!column.onToggle,
                               isToggled: column.isToggled,
-                              darkTheme: hasDarkParent,
                               css: {
                                 width: column.colWidth,
                                 maxWidth: column.colMaxWidth,
@@ -25683,9 +25606,9 @@
                               subRow: true
                             }, {
                               children: [leftAddOnCells.map(function (_, index) {
-                                return jsxRuntime.jsx(Cell, {
-                                  css: {
-                                    backgroundColor: '$bgGray'
+                                return jsxRuntime.jsx("td", {
+                                  style: {
+                                    backgroundColor: colors$8.bgGray
                                   }
                                 }, index);
                               }), jsxRuntime.jsxs(React__namespace.Fragment, {
@@ -25791,7 +25714,7 @@
                 width: 10,
                 height: '100%',
                 boxShadow: tableScrollPosition === 'end' ? 'none' : '-5px 0px 5px -3px #00000026',
-                backgroundColor: '$bgWhite'
+                backgroundColor: 'white'
               }
             }, void 0)]
           }, void 0)]
@@ -25987,7 +25910,6 @@
         columnNumber: 5
       }
     }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$g,
@@ -25995,12 +25917,11 @@
         columnNumber: 25
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
-      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$g,
         lineNumber: 19,
-        columnNumber: 71
+        columnNumber: 50
       }
     })),
     unsortable: true
@@ -26023,7 +25944,6 @@
         columnNumber: 5
       }
     }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
@@ -26031,12 +25951,11 @@
         columnNumber: 25
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
-      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
         lineNumber: 14,
-        columnNumber: 71
+        columnNumber: 50
       }
     })),
     unsortable: true
@@ -26096,9 +26015,6 @@
           const contextMenu = (_document$getElements = document.getElementsByClassName('react-contextmenu')) == null ? void 0 : _document$getElements[0];
           contextMenu.style.opacity = 0;
         },
-        css: {
-          color: '$iconPrimary'
-        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
@@ -26106,18 +26022,17 @@
           columnNumber: 13
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
-        color: "currentColor",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 45,
+          lineNumber: 42,
           columnNumber: 24
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 49,
+          lineNumber: 46,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -26140,7 +26055,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 50,
+          lineNumber: 47,
           columnNumber: 11
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -26148,7 +26063,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 70,
+          lineNumber: 67,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -26160,7 +26075,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 71,
+          lineNumber: 68,
           columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -26171,7 +26086,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 80,
+          lineNumber: 77,
           columnNumber: 17
         }
       }))))));
@@ -29837,6 +29752,12 @@
         let newFile = files[i];
         newFile.uid = new Date().getTime();
         newFile.url = URL.createObjectURL(newFile);
+        console.warn({
+          files,
+          action,
+          newFile,
+          maxSizeMB
+        });
         if (action && (newFile.size / 1024 / 1024).toFixed(1) <= maxSizeMB) {
           upload({
             url: action,
@@ -29939,6 +29860,9 @@
       }
     }
     function handleChange(e) {
+      console.warn({
+        e
+      });
       if (e.target.files && e.target.files[0]) {
         const files = e.target.files;
         if (isFile || !showCropper) {
@@ -30127,7 +30051,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 667,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -30137,7 +30061,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 666,
+          lineNumber: 668,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -30152,7 +30076,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 676,
+              lineNumber: 678,
               columnNumber: 16
             }
           });
@@ -30163,7 +30087,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 679,
+            lineNumber: 681,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30173,7 +30097,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 680,
+            lineNumber: 682,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30182,7 +30106,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 681,
+            lineNumber: 683,
             columnNumber: 27
           }
         }), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30195,7 +30119,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 683,
+            lineNumber: 685,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30211,7 +30135,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 691,
+            lineNumber: 693,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30221,7 +30145,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 704,
+            lineNumber: 706,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30238,7 +30162,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 715,
+              lineNumber: 717,
               columnNumber: 16
             }
           });
@@ -30248,7 +30172,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 718,
+            lineNumber: 720,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30258,7 +30182,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 719,
+            lineNumber: 721,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30267,7 +30191,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 720,
+            lineNumber: 722,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30280,7 +30204,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 721,
+            lineNumber: 723,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30290,14 +30214,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 729,
+            lineNumber: 731,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 730,
+            lineNumber: 732,
             columnNumber: 17
           }
         }, ".", item == null || (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30305,7 +30229,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 731,
+            lineNumber: 733,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30320,7 +30244,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 732,
+            lineNumber: 734,
             columnNumber: 19
           }
         }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -30333,7 +30257,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 748,
+            lineNumber: 750,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -30349,7 +30273,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 756,
+            lineNumber: 758,
             columnNumber: 17
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -30357,7 +30281,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 769,
+            lineNumber: 771,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -30372,7 +30296,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 780,
+          lineNumber: 782,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30386,7 +30310,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 781,
+          lineNumber: 783,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -30412,7 +30336,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 782,
+          lineNumber: 784,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30420,14 +30344,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 795,
+          lineNumber: 797,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 796,
+          lineNumber: 798,
           columnNumber: 11
         }
       }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -30439,7 +30363,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 804,
+          lineNumber: 806,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -30455,7 +30379,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 805,
+          lineNumber: 807,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -30467,21 +30391,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 816,
+          lineNumber: 818,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 817,
+          lineNumber: 819,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 819,
+          lineNumber: 821,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -30490,7 +30414,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 820,
+          lineNumber: 822,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -30498,7 +30422,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 821,
+          lineNumber: 823,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -30508,7 +30432,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 823,
+          lineNumber: 825,
           columnNumber: 17
         }
       }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
@@ -30518,7 +30442,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 830,
+          lineNumber: 832,
           columnNumber: 19
         }
       }, error));
@@ -30530,7 +30454,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 837,
+          lineNumber: 839,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -30538,7 +30462,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 838,
+          lineNumber: 840,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -30546,7 +30470,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 839,
+          lineNumber: 841,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -30559,7 +30483,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 841,
+          lineNumber: 843,
           columnNumber: 9
         }
       }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -30572,7 +30496,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 844,
+          lineNumber: 846,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -30583,7 +30507,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 852,
+          lineNumber: 854,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -30597,14 +30521,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 853,
+          lineNumber: 855,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 864,
+          lineNumber: 866,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30616,14 +30540,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 865,
+          lineNumber: 867,
           columnNumber: 11
         }
       }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 867,
+          lineNumber: 869,
           columnNumber: 15
         }
       }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -30631,7 +30555,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 869,
+          lineNumber: 871,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -30643,7 +30567,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 870,
+          lineNumber: 872,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -30651,7 +30575,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 877,
+          lineNumber: 879,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -30660,7 +30584,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 878,
+          lineNumber: 880,
           columnNumber: 15
         }
       }, t('label.cancel', 'Batal', {
@@ -30670,7 +30594,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 881,
+          lineNumber: 883,
           columnNumber: 15
         }
       }, t('save', 'Simpan', {
@@ -30687,7 +30611,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 890,
+        lineNumber: 892,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -30696,7 +30620,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 893,
+        lineNumber: 895,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -58528,7 +58452,6 @@
   exports.Card = Card;
   exports.CardComponent = CardComponent;
   exports.CardLineColor = CardLineColor;
-  exports.Cell = Cell;
   exports.CheckboxGroup = CheckboxGroup;
   exports.CheckboxTable = CheckboxTable;
   exports.ColorPicker = ColorPicker$1;