@majoo-ui/react 1.61.12-rc.20 → 1.61.12-rc.22

package/index.esm.js

@@ -12,7 +12,7 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { Transition } from 'react-transition-group';
 import { Portal } from '@majoo-ui/helpers';
-import request from 'superagent';
+import axios from 'axios';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -44,7 +44,7 @@ import { MapContainer, Circle, TileLayer, useMapEvents } from '@monsonjeremy/rea
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
 import 'leaflet-defaulticon-compatibility';
-import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$2, BarChart, Legend, Bar, Cell, LabelList, PieChart, Pie, Sector } from 'recharts';
+import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$2, BarChart, Legend, Bar, Cell as Cell$1, LabelList, PieChart, Pie, Sector } from 'recharts';
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
@@ -59,10 +59,12 @@ import SignaturePad from 'react-signature-pad-wrapper';
 
 var _jsxFileName$13 = "/home/alfiantryp/Project/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 function ThemeProvider({
+  name,
   theme,
   children
 }) {
   return /*#__PURE__*/React__default.createElement("div", {
+    id: name,
     className: theme,
     __self: this,
     __source: {
@@ -73,9 +75,13 @@ function ThemeProvider({
   }, children);
 }
 ThemeProvider.propTypes = {
+  name: PropTypes.string,
   theme: PropTypes.object.isRequired,
   children: PropTypes.node.isRequired
 };
+ThemeProvider.defaultProps = {
+  name: 'default'
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1223,8 +1229,18 @@ const {
 });
 createTheme({
   colors: {
-    bgWhite: '#000000',
-    bgDark: '#FFFFFF'
+    bgWhite: '#003030',
+    bgGray: '#003030',
+    bgDark: '#FFFFFF',
+    textPrimary: '#FFFFFF',
+    textSecondary: '#FFFFFF',
+    bgHeader: '#004a48',
+    btnPrimary: '#001f1f',
+    btnSecondary: '#003030',
+    primary50: '#001f1f',
+    primary100: '#001f1f',
+    iconPrimary: '#FFFFFF',
+    bgBorder: '#004a49'
   }
 });
 const colors$8 = foundations.colors;
@@ -1400,6 +1416,7 @@ const applyGlobalStyles = additionaStyles => {
 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
@@ -1410,6 +1427,7 @@ function MajooProvider({
   } = useTranslation();
   moment.locale(i18n && i18n.language ? i18n.language : 'id');
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    name: name,
     theme: theme$1,
     __self: this,
     __source: {
@@ -1420,11 +1438,18 @@ function MajooProvider({
   }, children);
 }
 MajooProvider.propTypes = {
+  name: PropTypes.string,
   theme: PropTypes.object.isRequired,
   children: PropTypes.node.isRequired,
   extendStyle: PropTypes.object,
   disableGlobalStyle: PropTypes.bool
 };
+MajooProvider.defaultProps = {
+  name: 'default',
+  theme: theme,
+  extendStyle: {},
+  disableGlobalStyle: false
+};
 
 const Box = styled('div', {
   variants: {
@@ -7235,23 +7260,32 @@ function upload({
     } else {
       formdata.append(reqKey, file);
     }
-    request.post(url).set(tokenKey, token).send(formdata).on('progress', e => {
-      onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
-      progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
-    }).end((err, res) => {
-      var _a, _b;
-      if (err) {
-        const error = new Error(err.message);
-        onError === null || onError === void 0 ? void 0 : onError(error, (res === null || res === void 0 ? void 0 : res.text) && JSON.parse(res.text));
-        reject(err.message);
-      }
-      if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
-        const response = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
-        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];
-        }));
+    axios({
+      method: 'post',
+      url: url,
+      data: formdata,
+      headers: {
+        [tokenKey]: token,
+        'Content-Type': 'multipart/form-data'
+      },
+      onUploadProgress: progressEvent => {
+        if (progressEvent.total) {
+          const 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);
+        }
       }
+    }).then(response => {
+      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) {
+        return a[b];
+      }));
+    }).catch(error => {
+      var _a;
+      const 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);
     });
   });
   return promise;
@@ -14437,8 +14471,10 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   const {
-    t
+    t,
+    ready
   } = useTranslation(['MajooUI/inputSelectCheck', 'translation']);
+  // const t = (key, defaultValue) => defaultValue;
   const [initItem, setInitItems] = React__default.useState(option); //init filter selectedItems on useMultipleSelection
   const [items, setItems] = React__default.useState([]);
   const [selectedValue, setSelectedValue] = React__default.useState([]);
@@ -14448,7 +14484,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [query, setQuery] = React__default.useState('');
   const scrollerRef = React__default.useRef(null);
   const isShowSelectAll = showSelectAll && !maxSelectedItem;
-  useEffect(() => {
+  useMountedLayoutEffect(() => {
     var _scrollerRef$current;
     (_scrollerRef$current = scrollerRef.current) == null || _scrollerRef$current.scrollTo({
       top: 0
@@ -14778,7 +14814,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     return [...acc, ...(item.children ? item.children : [item])];
   }, []).length;
   useEffect(() => {
-    if (!inputValue || fetchData) {
+    if ((!inputValue || fetchData) && ready) {
       sortItems();
       setItems(isShowSelectAll ? [{
         id: '!all',
@@ -14789,7 +14825,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
       }, ...memoOptions] : memoOptions);
     }
-  }, [isShowSelectAll, selectAllLabel, t, memoOptionsString, inputValue]);
+  }, [isShowSelectAll, selectAllLabel, ready, memoOptionsString, inputValue]);
   useEffect(() => {
     if (selectedValue.length > 0 && disabledOptions.length === 0) {
       setInitItems(sortValue);
@@ -14814,7 +14850,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       }, ...options] : options);
     }
   }, [disabledOptions, isShowSelectAll]);
-  useEffect(() => {
+  useMountedLayoutEffect(() => {
     const selectedVal = itemsLength > 0 && inputSelectValue.length === itemsLength - 1 ? ['!all', ...inputSelectValue] : inputSelectValue;
     setSelectedValue(selectedVal);
   }, [inputSelectValue, items]);
@@ -14860,7 +14896,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 778,
+        lineNumber: 781,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -14874,7 +14910,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 797,
+        lineNumber: 800,
         columnNumber: 11
       }
     }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14882,7 +14918,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 809,
+        lineNumber: 812,
         columnNumber: 17
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14890,21 +14926,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 813,
+        lineNumber: 816,
         columnNumber: 19
       }
     })), isShowSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < itemsLength ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 817,
+        lineNumber: 820,
         columnNumber: 15
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 819,
+        lineNumber: 822,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -14915,7 +14951,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 822,
+        lineNumber: 825,
         columnNumber: 11
       }
     }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name));
@@ -14943,7 +14979,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 838,
+          lineNumber: 841,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -14956,7 +14992,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 851,
+          lineNumber: 854,
           columnNumber: 15
         }
       }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -14964,7 +15000,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 861,
+          lineNumber: 864,
           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.createElement(CheckOutline, {
@@ -14972,14 +15008,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 863,
+          lineNumber: 866,
           columnNumber: 19
         }
       }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default.createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 865,
+          lineNumber: 868,
           columnNumber: 19
         }
       }, "-") : null), /*#__PURE__*/React__default.createElement(Item$2, {
@@ -14990,14 +15026,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 868,
+          lineNumber: 871,
           columnNumber: 15
         }
       }, item.render ? item.render == null ? void 0 : item.render(item.name) : item.name)),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 836,
+        lineNumber: 839,
         columnNumber: 9
       }
     }, item == null || (_item$children8 = item.children) == null ? void 0 : _item$children8.map((optItem, optIndex) => renderOptionItem(optItem, groupIndex + optIndex + 1, true)));
@@ -15010,7 +15046,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 880,
+      lineNumber: 883,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -15020,7 +15056,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 881,
+      lineNumber: 884,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15035,7 +15071,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 882,
+      lineNumber: 885,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -15053,7 +15089,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 892,
+      lineNumber: 895,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15067,7 +15103,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 899,
+      lineNumber: 902,
       columnNumber: 13
     }
   }), (_ref2 = label != null ? label : placeholder) != null ? _ref2 : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15078,7 +15114,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 910,
+      lineNumber: 913,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -15086,7 +15122,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 915,
+      lineNumber: 918,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15099,7 +15135,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 919,
+      lineNumber: 922,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -15107,7 +15143,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 925,
+      lineNumber: 928,
       columnNumber: 13
     }
   }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
@@ -15128,7 +15164,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 927,
+      lineNumber: 930,
       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) => {
@@ -15159,7 +15195,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 956,
+      lineNumber: 959,
       columnNumber: 21
     }
   }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems == null ? void 0 : selectedItems.length) > collapsibleLimit && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15168,7 +15204,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 979,
+      lineNumber: 982,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15178,14 +15214,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 980,
+      lineNumber: 983,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 981,
+      lineNumber: 984,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15199,7 +15235,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 982,
+      lineNumber: 985,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -15207,7 +15243,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 988,
+      lineNumber: 991,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -15215,7 +15251,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 990,
+      lineNumber: 993,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15227,14 +15263,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 992,
+      lineNumber: 995,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 996,
+      lineNumber: 999,
       columnNumber: 19
     }
   })), showCollapsibleCounter && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15245,7 +15281,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 999,
+      lineNumber: 1002,
       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.createElement(Paragraph, {
@@ -15257,7 +15293,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1009,
+      lineNumber: 1012,
       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.createElement(OptionWrapper$1, {
@@ -15270,7 +15306,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1015,
+      lineNumber: 1018,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15292,7 +15328,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1025,
+      lineNumber: 1028,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -15300,7 +15336,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1042,
+      lineNumber: 1045,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -15312,7 +15348,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1047,
+      lineNumber: 1050,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -15335,14 +15371,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1051,
+        lineNumber: 1054,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1048,
+      lineNumber: 1051,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => item != null && item.children ? renderOptionGroupItem(item) : renderOptionItem(item, index)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -15355,14 +15391,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1076,
+      lineNumber: 1079,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1077,
+      lineNumber: 1080,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -15372,7 +15408,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1078,
+      lineNumber: 1081,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -15384,7 +15420,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$x,
-      lineNumber: 1079,
+      lineNumber: 1082,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -22123,7 +22159,7 @@ IconButton.propTypes = {
 };
 
 const StyledAccordion = styled(AccordionPrimitive.Root, {});
-const Accordion = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+const Accordion = /*#__PURE__*/React__default.forwardRef((_a, forwardedRef) => {
   var {
       children
     } = _a,
@@ -22193,7 +22229,7 @@ const StyledTrigger = styled(AccordionPrimitive.Trigger, {
     }
   }
 });
-const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+const AccordionTrigger = /*#__PURE__*/React__default.forwardRef((_a, forwardedRef) => {
   var {
       children,
       arrowPosition = 'right',
@@ -22427,6 +22463,9 @@ const PaginationButton = ({
     buttonType: "secondary",
     disabled: currentPage === 1,
     onClick: () => handleSelectPage(1),
+    css: {
+      color: '$iconPrimary'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
@@ -22434,11 +22473,11 @@ const PaginationButton = ({
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
-    color: currentPage === 1 ? colors$8.iconDisable : colors$8.iconPrimary,
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 191,
+      lineNumber: 194,
       columnNumber: 19
     }
   })), isLg ? /*#__PURE__*/React__default.createElement(PrevNextButtonIcon, {
@@ -22450,7 +22489,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 195,
+      lineNumber: 198,
       columnNumber: 17
     }
   }) : /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -22461,7 +22500,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 203,
+      lineNumber: 206,
       columnNumber: 17
     }
   }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -22472,7 +22511,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 216,
+        lineNumber: 219,
         columnNumber: 15
       }
     }, page);
@@ -22485,7 +22524,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 228,
+      lineNumber: 231,
       columnNumber: 17
     }
   }) : /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -22496,7 +22535,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 236,
+      lineNumber: 239,
       columnNumber: 17
     }
   }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -22504,18 +22543,21 @@ const PaginationButton = ({
     buttonType: "secondary",
     disabled: currentPage === totalPages,
     onClick: () => handleSelectPage(totalPages),
+    css: {
+      color: '$iconPrimary'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 247,
+      lineNumber: 250,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
-    color: currentPage === totalPages ? colors$8.iconDisable : colors$8.iconPrimary,
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 253,
+      lineNumber: 259,
       columnNumber: 19
     }
   })))), !hideInputPageSection && totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -22528,7 +22570,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 262,
+      lineNumber: 268,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22541,7 +22583,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 270,
+      lineNumber: 276,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -22558,7 +22600,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 271,
+      lineNumber: 277,
       columnNumber: 15
     }
   }, t('gotoPageText', 'Ke Halaman')), isMobilePagination ? /*#__PURE__*/React__default.createElement(GoToPageBox, {
@@ -22571,7 +22613,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 283,
+      lineNumber: 289,
       columnNumber: 17
     }
   }, goToPage) : /*#__PURE__*/React__default.createElement(InputNumber, {
@@ -22598,14 +22640,14 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 287,
+      lineNumber: 293,
       columnNumber: 17
     }
   })))), /*#__PURE__*/React__default.createElement(ModalDialog, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 315,
+      lineNumber: 321,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -22615,7 +22657,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 316,
+      lineNumber: 322,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -22623,21 +22665,21 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 317,
+      lineNumber: 323,
       columnNumber: 11
     }
   })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 319,
+      lineNumber: 325,
       columnNumber: 9
     }
   }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 320,
+      lineNumber: 326,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -22649,7 +22691,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 321,
+      lineNumber: 327,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(InputNumber, {
@@ -22666,14 +22708,14 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 327,
+      lineNumber: 333,
       columnNumber: 13
     }
   }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 336,
+      lineNumber: 342,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22684,7 +22726,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 337,
+      lineNumber: 343,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -22699,7 +22741,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 338,
+      lineNumber: 344,
       columnNumber: 13
     }
   }, t('btnCancelText', 'Batal')), /*#__PURE__*/React__default.createElement(Button$4, {
@@ -22714,7 +22756,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 349,
+      lineNumber: 355,
       columnNumber: 13
     }
   }, t('btnSubmitText', 'Lanjutkan'))))));
@@ -22808,6 +22850,7 @@ function PaginationInfo(_ref) {
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    color: "primary",
     variant: "status",
     __self: this,
     __source: {
@@ -22835,7 +22878,7 @@ function PaginationInfo(_ref) {
     direction: "column",
     align: "center",
     css: {
-      backgroundColor: '$white',
+      backgroundColor: '$bgWhite',
       boxShadow: '$small'
     },
     __self: this,
@@ -22855,6 +22898,7 @@ function PaginationInfo(_ref) {
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    color: "primary",
     variant: "status",
     __self: this,
     __source: {
@@ -23494,7 +23538,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                           justify: "between",
                           gap: 5,
                           css: {
-                            backgroundColor: colors$8.bgGray,
+                            backgroundColor: '$bgGray',
                             padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
                             borderBottom: '1pt solid $bgBorder',
                             alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
@@ -23529,7 +23573,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       gap: 3,
                       css: {
                         height: '40px',
-                        backgroundColor: colors$8.bgGray,
+                        backgroundColor: '$bgGray',
                         paddingRight: '$spacing-04'
                       }
                     }, {
@@ -23877,14 +23921,14 @@ const TableContent$3 = styled('table', {
   borderSpacing: 0,
   borderCollapse: 'collapse',
   '& *[data-sticky-td="true"]': {
-    backgroundColor: '$bgWhite'
+    backgroundColor: '$bgHeader'
   }
 });
 const TableHead$3 = styled('thead', {
   position: 'sticky',
   top: 0,
   zIndex: '$docked',
-  backgroundColor: '$bgWhite',
+  backgroundColor: '$bgHeader',
   boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
   borderBottom: '1pt solid $bgBorder',
   color: '$textPrimary',
@@ -23915,7 +23959,7 @@ const TableHeaderCellContainer = styled(Flex$1, {
   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': {
@@ -23992,6 +24036,16 @@ const TableHeaderCellContainer = styled(Flex$1, {
           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: [{
@@ -24015,10 +24069,32 @@ const TableHeaderCellContainer = styled(Flex$1, {
         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")`
+        }
+      }
+    }
   }]
 });
 const TableHeadCellContent = styled(Heading, {
-  backgroundColor: 'white',
+  backgroundColor: 'transparent',
   userSelect: 'none',
   textAlign: 'start',
   position: 'relative',
@@ -24057,6 +24133,7 @@ const TableRow$3 = styled('tr', {
     }
   }
 });
+const Cell = styled('td');
 const TableCell$3 = styled('td', {
   height: '68px',
   fontSize: '$short-content-regular',
@@ -24309,7 +24386,7 @@ function HeaderMenuOption(props) {
         css: {
           padding: '$spacing-06 $spacing-05',
           boxShadow: '$medium',
-          backgroundColor: 'white',
+          backgroundColor: '$bgWhite',
           maxHeight: 300,
           minWidth: 167,
           width: 'max-content',
@@ -24420,6 +24497,7 @@ function Table({
   const [stateSelectedRowIds, setStateSelectedRowIds] = useState(selectedIds ? Object.keys(selectedIds) : []);
   const [filterHeader, setFilterHeader] = useLocalStorageState(`menu:${id}`, []);
   const [filteredHeader, setFilteredHeader] = useState([]);
+  const [hasDarkParent, setHasDarkParent] = useState(false);
   const {
     t
   } = useTranslation('MajooUI/table');
@@ -24540,6 +24618,7 @@ function Table({
     },
     rowsPerPageOptions: rowsPerPageOptions,
     css: {
+      backgroundColor: '$bgWhite',
       padding: '$spacing-04 0',
       '@md': {
         padding: '$spacing-06 $spacing-03'
@@ -24677,7 +24756,8 @@ function Table({
                   isSortedDesc: column.isSortedDesc,
                   unsortable: column.unsortable,
                   isToggleable: !!column.onToggle,
-                  isToggled: column.isToggled
+                  isToggled: column.isToggled,
+                  darkTheme: hasDarkParent
                 }, {
                   children: jsx(TableHeadCellContent, Object.assign({
                     heading: "headerTable"
@@ -24777,6 +24857,11 @@ function Table({
     }
   }, [rawData, selectedIds]);
   useEffect(() => {
+    if (scrollerRef.current && scrollerRef.current.parentElement) {
+      const parentElement = scrollerRef.current.parentElement;
+      const darkParentDiv = parentElement.closest('div[id*="dark"]');
+      setHasDarkParent(!!darkParentDiv);
+    }
     const listenStorage = () => {
       const item = JSON.parse(localStorage.getItem(`menu:${id}`));
       onColumnChange === null || onColumnChange === void 0 ? void 0 : onColumnChange(item);
@@ -24798,7 +24883,7 @@ function Table({
     onDragEnd(arrayMove(records, oldIndex, newIndex));
   };
   const cssTableCell = {
-    backgroundColor: 'white'
+    backgroundColor: '$bgWhite'
   };
   return jsxs(Box, Object.assign({
     css: Object.assign({
@@ -24866,9 +24951,7 @@ function Table({
                     if (filteredHeader.length > 0 || filterHeader.length > 0) {
                       visibleHeaders = visibleHeaders.filter(item => filteredHeader.includes(item.id) || filterHeader.includes(item.id));
                     }
-                    return jsx(TableHeadRow$3, Object.assign({
-                      css: cssTableCell
-                    }, headerGroup.getHeaderGroupProps(), {
+                    return jsx(TableHeadRow$3, Object.assign({}, headerGroup.getHeaderGroupProps(), {
                       children: visibleHeaders.map((column, index) => {
                         const headerRender = column.render('Header');
                         return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
@@ -24882,9 +24965,9 @@ function Table({
                             minWidth: column.colMinWidth
                           }
                         }]), {
-                          css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
+                          css: Object.assign(Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
                             position: 'sticky',
-                            zIndex: !!column.sticky ? '5 !important' : 3,
+                            zIndex: column.sticky ? '5 !important' : 3,
                             top: 0
                           })
                         }, {
@@ -24893,6 +24976,7 @@ function Table({
                             unsortable: id ? true : column.unsortable,
                             isToggleable: !!column.onToggle,
                             isToggled: column.isToggled,
+                            darkTheme: hasDarkParent,
                             css: {
                               width: column.colWidth,
                               maxWidth: column.colMaxWidth,
@@ -25129,9 +25213,9 @@ function Table({
                         }), void 0), row.isExpanded ? subRowCells.map((cell, index) => !cell.column.isCustomSubRow ? jsxs(TableRow$3, Object.assign({
                           subRow: true
                         }, {
-                          children: [leftAddOnCells.map((_, index) => jsx("td", {
-                            style: {
-                              backgroundColor: colors$8.bgGray
+                          children: [leftAddOnCells.map((_, index) => jsx(Cell, {
+                            css: {
+                              backgroundColor: '$bgGray'
                             }
                           }, index)), jsxs(React.Fragment, {
                             children: [jsx(TableCell$3, Object.assign({
@@ -25231,7 +25315,7 @@ function Table({
               width: 10,
               height: '100%',
               boxShadow: tableScrollPosition === 'end' ? 'none' : '-5px 0px 5px -3px #00000026',
-              backgroundColor: 'white'
+              backgroundColor: '$bgWhite'
             }
           }, void 0)]
         }, void 0)]
@@ -25419,6 +25503,7 @@ const rowExpanderColumn = {
       columnNumber: 5
     }
   }), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$g,
@@ -25426,11 +25511,12 @@ const rowExpanderColumn = {
       columnNumber: 25
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$g,
       lineNumber: 19,
-      columnNumber: 50
+      columnNumber: 71
     }
   })),
   unsortable: true
@@ -25453,6 +25539,7 @@ const rowExpanderMultipleColumn = {
       columnNumber: 5
     }
   }), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$f,
@@ -25460,11 +25547,12 @@ const rowExpanderMultipleColumn = {
       columnNumber: 25
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$f,
       lineNumber: 14,
-      columnNumber: 50
+      columnNumber: 71
     }
   })),
   unsortable: true
@@ -25524,6 +25612,9 @@ const rowMenuColumn = (options, icon, config) => ({
         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,
@@ -25531,17 +25622,18 @@ const rowMenuColumn = (options, icon, config) => ({
         columnNumber: 13
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
+      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 42,
+        lineNumber: 45,
         columnNumber: 24
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 46,
+        lineNumber: 49,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
@@ -25564,7 +25656,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 47,
+        lineNumber: 50,
         columnNumber: 11
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -25572,7 +25664,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 67,
+        lineNumber: 70,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -25584,7 +25676,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 68,
+        lineNumber: 71,
         columnNumber: 17
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -25595,7 +25687,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 77,
+        lineNumber: 80,
         columnNumber: 17
       }
     }))))));
@@ -56050,7 +56142,7 @@ function BarChartComponent({
             barSize: 12,
             radius: 50
           }, {
-            children: [formattedData.map(item => jsx(Cell, {
+            children: [formattedData.map(item => jsx(Cell$1, {
               fill: item.color || colors$1.chartGreen
             }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && jsx(LabelList, {
               style: {
@@ -56324,7 +56416,7 @@ const PieChartComponent = ({
             },
             labelLine: false
           }, {
-            children: [formattedData.map(item => jsx(Cell, {
+            children: [formattedData.map(item => jsx(Cell$1, {
               fill: item.color || colors.chartGreen
             }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && !label.render && jsx(LabelList, {
               stroke: "0",
@@ -57672,4 +57764,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, Cell, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, ResourceList as InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };