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

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('react-i18next'), require('moment'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('superagent'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('react-dom/server'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('react-table'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-sortable-hoc'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-virtual'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky'), require('react-signature-pad-wrapper')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', 'react-i18next', 'moment', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'superagent', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'react-dom/server', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', 'react-table', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-sortable-hoc', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky', 'react-signature-pad-wrapper'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.reactI18next, global.moment, global.icons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.request, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.server, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.reactTable, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactSortableHoc, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky, global.SignaturePad));
-})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, icons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, request, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, server, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, reactTable, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactSortableHoc, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky, SignaturePad) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('react-i18next'), require('moment'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('react-transition-group'), require('@majoo-ui/helpers'), require('axios'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-hook-form'), require('@radix-ui/react-switch'), require('react-dom/server'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('@floating-ui/react'), require('otp-input-react'), require('@radix-ui/react-dialog'), require('@radix-ui/react-toggle-group'), require('dayzed'), require('@radix-ui/react-separator'), require('react-table'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-accordion'), require('react-sortable-hoc'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@monsonjeremy/react-leaflet'), require('leaflet/dist/leaflet.css'), require('leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'), require('leaflet-defaulticon-compatibility'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-virtual'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky'), require('react-signature-pad-wrapper')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', 'react-i18next', 'moment', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', 'react-transition-group', '@majoo-ui/helpers', 'axios', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-hook-form', '@radix-ui/react-switch', 'react-dom/server', 'downshift', 'react-infinite-scroller', 'lodash.debounce', '@floating-ui/react', 'otp-input-react', '@radix-ui/react-dialog', '@radix-ui/react-toggle-group', 'dayzed', '@radix-ui/react-separator', 'react-table', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-accordion', 'react-sortable-hoc', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@monsonjeremy/react-leaflet', 'leaflet/dist/leaflet.css', 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css', 'leaflet-defaulticon-compatibility', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-virtual', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky', 'react-signature-pad-wrapper'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.reactI18next, global.moment, global.icons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.reactTransitionGroup, global.helpers, global.axios, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.reactHookForm, global.SwitchPrimitive, global.server, global.Downshift, global.InfiniteScroll, global.debounce, global.react$1, global.OTPInput, global.DialogPrimitive, global.ToggleGroupPrimitive, global.dayzed, global.SeparatorPrimitive, global.reactTable, global.SliderPrimitive, global.TabsPrimitive, global.AccordionPrimitive, global.reactSortableHoc, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.reactLeaflet, null, null, null, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.reactVirtual, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky, global.SignaturePad));
+})(this, (function (exports, React, PropTypes, react, core, reactI18next, moment, icons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, reactTransitionGroup, helpers, axios, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, reactHookForm, SwitchPrimitive, server, Downshift, InfiniteScroll, debounce, react$1, OTPInput, DialogPrimitive, ToggleGroupPrimitive, dayzed, SeparatorPrimitive, reactTable, SliderPrimitive, TabsPrimitive, AccordionPrimitive, reactSortableHoc, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, reactLeaflet, leaflet_css, leafletDefaulticonCompatibility_css, leafletDefaulticonCompatibility, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, reactVirtual, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky, SignaturePad) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +31,7 @@
   var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
   var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
   var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
-  var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
+  var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
   var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
   var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
   var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -60,10 +60,12 @@
 
   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: {
@@ -74,9 +76,13 @@
     }, 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 : {};
 
@@ -1332,8 +1338,18 @@
     _a.config;
   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'
     }
   });
   var colors$8 = core.foundations.colors;
@@ -1509,6 +1525,7 @@
   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
@@ -1519,6 +1536,7 @@
     } = 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: {
@@ -1529,11 +1547,18 @@
     }, 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: {
@@ -7301,31 +7326,38 @@
       onProgress = _a.onProgress;
     var promise = new Promise(function (resolve, reject) {
       var _a;
+      var _b;
       var formdata = new FormData();
       if (customBody) {
-        for (var i = 0; i < ((_a = Object.keys(customBody)) === null || _a === void 0 ? void 0 : _a.length); i++) {
+        for (var i = 0; i < ((_b = Object.keys(customBody)) === null || _b === void 0 ? void 0 : _b.length); i++) {
           formdata.append(Object.keys(customBody)[i], customBody[Object.keys(customBody)[i]]);
         }
       } else {
         formdata.append(reqKey, file);
       }
-      request__default["default"].post(url).set(tokenKey, token).send(formdata).on('progress', function (e) {
-        onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
-        progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
-      }).end(function (err, res) {
-        var _a, _b;
-        if (err) {
-          var 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)) {
-          var 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__default["default"]({
+        method: 'post',
+        url: url,
+        data: formdata,
+        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);
+          }
         }
+      }).then(function (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(function (error) {
+        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);
       });
     });
     return promise;
@@ -14591,8 +14623,10 @@
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     const {
-      t
+      t,
+      ready
     } = reactI18next.useTranslation(['MajooUI/inputSelectCheck', 'translation']);
+    // const t = (key, defaultValue) => defaultValue;
     const [initItem, setInitItems] = React__default["default"].useState(option); //init filter selectedItems on useMultipleSelection
     const [items, setItems] = React__default["default"].useState([]);
     const [selectedValue, setSelectedValue] = React__default["default"].useState([]);
@@ -14602,7 +14636,7 @@
     const [query, setQuery] = React__default["default"].useState('');
     const scrollerRef = React__default["default"].useRef(null);
     const isShowSelectAll = showSelectAll && !maxSelectedItem;
-    React.useEffect(() => {
+    reactTable.useMountedLayoutEffect(() => {
       var _scrollerRef$current;
       (_scrollerRef$current = scrollerRef.current) == null || _scrollerRef$current.scrollTo({
         top: 0
@@ -14933,7 +14967,7 @@
       return [...acc, ...(item.children ? item.children : [item])];
     }, []).length;
     React.useEffect(() => {
-      if (!inputValue || fetchData) {
+      if ((!inputValue || fetchData) && ready) {
         sortItems();
         setItems(isShowSelectAll ? [{
           id: '!all',
@@ -14944,7 +14978,7 @@
           name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
         }, ...memoOptions] : memoOptions);
       }
-    }, [isShowSelectAll, selectAllLabel, t, memoOptionsString, inputValue]);
+    }, [isShowSelectAll, selectAllLabel, ready, memoOptionsString, inputValue]);
     React.useEffect(() => {
       if (selectedValue.length > 0 && disabledOptions.length === 0) {
         setInitItems(sortValue);
@@ -14969,7 +15003,7 @@
         }, ...options] : options);
       }
     }, [disabledOptions, isShowSelectAll]);
-    React.useEffect(() => {
+    reactTable.useMountedLayoutEffect(() => {
       const selectedVal = itemsLength > 0 && inputSelectValue.length === itemsLength - 1 ? ['!all', ...inputSelectValue] : inputSelectValue;
       setSelectedValue(selectedVal);
     }, [inputSelectValue, items]);
@@ -15015,7 +15049,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 778,
+          lineNumber: 781,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -15029,7 +15063,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 797,
+          lineNumber: 800,
           columnNumber: 11
         }
       }, !(item != null && item.hideCheck) && (item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15037,7 +15071,7 @@
         __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["default"].createElement(CheckOutline, {
@@ -15045,21 +15079,21 @@
         __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["default"].createElement(IndeterminateFilled$1, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 817,
+          lineNumber: 820,
           columnNumber: 15
         }
       }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$x,
-          lineNumber: 819,
+          lineNumber: 822,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -15070,7 +15104,7 @@
         __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));
@@ -15098,7 +15132,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 838,
+            lineNumber: 841,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -15111,7 +15145,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 851,
+            lineNumber: 854,
             columnNumber: 15
           }
         }, !(item != null && item.hideCheck) && item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -15119,7 +15153,7 @@
           __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["default"].createElement(CheckOutline, {
@@ -15127,14 +15161,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 863,
+            lineNumber: 866,
             columnNumber: 19
           }
         }) : (filterSelectedChild == null ? void 0 : filterSelectedChild.length) > 0 ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled$1, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$x,
-            lineNumber: 865,
+            lineNumber: 868,
             columnNumber: 19
           }
         }, "-") : null), /*#__PURE__*/React__default["default"].createElement(Item$2, {
@@ -15145,14 +15179,14 @@
           __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)));
@@ -15165,7 +15199,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 880,
+        lineNumber: 883,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -15175,7 +15209,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 881,
+        lineNumber: 884,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -15190,7 +15224,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 882,
+        lineNumber: 885,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -15208,7 +15242,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 892,
+        lineNumber: 895,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -15222,7 +15256,7 @@
       __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["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -15233,7 +15267,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 910,
+        lineNumber: 913,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -15241,7 +15275,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 915,
+        lineNumber: 918,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15254,7 +15288,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 919,
+        lineNumber: 922,
         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, {
@@ -15262,7 +15296,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 925,
+        lineNumber: 928,
         columnNumber: 13
       }
     }, isShowTagSelectAll ? /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
@@ -15283,7 +15317,7 @@
       __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) => {
@@ -15314,7 +15348,7 @@
       __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["default"].createElement(Flex$1, {
@@ -15323,7 +15357,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 979,
+        lineNumber: 982,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15333,14 +15367,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 980,
+        lineNumber: 983,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 981,
+        lineNumber: 984,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15354,7 +15388,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 982,
+        lineNumber: 985,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -15362,7 +15396,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 988,
+        lineNumber: 991,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -15370,7 +15404,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 990,
+        lineNumber: 993,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15382,14 +15416,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 992,
+        lineNumber: 995,
         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: 996,
+        lineNumber: 999,
         columnNumber: 19
       }
     })), showCollapsibleCounter && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -15400,7 +15434,7 @@
       __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["default"].createElement(Paragraph, {
@@ -15412,7 +15446,7 @@
       __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["default"].createElement(OptionWrapper$1, {
@@ -15425,7 +15459,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1015,
+        lineNumber: 1018,
         columnNumber: 9
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15447,7 +15481,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1025,
+        lineNumber: 1028,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -15455,7 +15489,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1042,
+        lineNumber: 1045,
         columnNumber: 15
       }
     }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({
@@ -15467,7 +15501,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1047,
+        lineNumber: 1050,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -15490,14 +15524,14 @@
         __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["default"].createElement(Option, _extends({
@@ -15510,14 +15544,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1076,
+        lineNumber: 1079,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1077,
+        lineNumber: 1080,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -15527,7 +15561,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1078,
+        lineNumber: 1081,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -15539,7 +15573,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$x,
-        lineNumber: 1079,
+        lineNumber: 1082,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -22436,7 +22470,7 @@
   };
 
   var StyledAccordion = styled(AccordionPrimitive__namespace.Root, {});
-  var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+  var Accordion = /*#__PURE__*/React__default["default"].forwardRef(function (_a, forwardedRef) {
     var children = _a.children,
       props = __rest(_a, ["children"]);
     return jsxRuntime.jsx(StyledAccordion, __assign({
@@ -22504,7 +22538,7 @@
       }
     }
   });
-  var AccordionTrigger = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+  var AccordionTrigger = /*#__PURE__*/React__default["default"].forwardRef(function (_a, forwardedRef) {
     var children = _a.children,
       _b = _a.arrowPosition,
       arrowPosition = _b === void 0 ? 'right' : _b,
@@ -22739,6 +22773,9 @@
       buttonType: "secondary",
       disabled: currentPage === 1,
       onClick: () => handleSelectPage(1),
+      css: {
+        color: '$iconPrimary'
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
@@ -22746,11 +22783,11 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.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["default"].createElement(PrevNextButtonIcon, {
@@ -22762,7 +22799,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 195,
+        lineNumber: 198,
         columnNumber: 17
       }
     }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -22773,7 +22810,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 203,
+        lineNumber: 206,
         columnNumber: 17
       }
     }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -22784,7 +22821,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$l,
-          lineNumber: 216,
+          lineNumber: 219,
           columnNumber: 15
         }
       }, page);
@@ -22797,7 +22834,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 228,
+        lineNumber: 231,
         columnNumber: 17
       }
     }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -22808,7 +22845,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 236,
+        lineNumber: 239,
         columnNumber: 17
       }
     }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -22816,18 +22853,21 @@
       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["default"].createElement(icons.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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -22840,7 +22880,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 262,
+        lineNumber: 268,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22853,7 +22893,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 270,
+        lineNumber: 276,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -22870,7 +22910,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 271,
+        lineNumber: 277,
         columnNumber: 15
       }
     }, t('gotoPageText', 'Ke Halaman')), isMobilePagination ? /*#__PURE__*/React__default["default"].createElement(GoToPageBox, {
@@ -22883,7 +22923,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 283,
+        lineNumber: 289,
         columnNumber: 17
       }
     }, goToPage) : /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -22910,14 +22950,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 287,
+        lineNumber: 293,
         columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 315,
+        lineNumber: 321,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -22927,7 +22967,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 316,
+        lineNumber: 322,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22935,21 +22975,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 317,
+        lineNumber: 323,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 319,
+        lineNumber: 325,
         columnNumber: 9
       }
     }, t('gotoPageText', 'Ke Halaman')), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 320,
+        lineNumber: 326,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement("form", {
@@ -22961,7 +23001,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 321,
+        lineNumber: 327,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -22978,14 +23018,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 327,
+        lineNumber: 333,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 336,
+        lineNumber: 342,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22996,7 +23036,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 337,
+        lineNumber: 343,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -23011,7 +23051,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 338,
+        lineNumber: 344,
         columnNumber: 13
       }
     }, t('btnCancelText', 'Batal')), /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -23026,7 +23066,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 349,
+        lineNumber: 355,
         columnNumber: 13
       }
     }, t('btnSubmitText', 'Lanjutkan'))))));
@@ -23120,6 +23160,7 @@
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      color: "primary",
       variant: "status",
       __self: this,
       __source: {
@@ -23147,7 +23188,7 @@
       direction: "column",
       align: "center",
       css: {
-        backgroundColor: '$white',
+        backgroundColor: '$bgWhite',
         boxShadow: '$small'
       },
       __self: this,
@@ -23167,6 +23208,7 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      color: "primary",
       variant: "status",
       __self: this,
       __source: {
@@ -23823,7 +23865,7 @@
                             justify: "between",
                             gap: 5,
                             css: {
-                              backgroundColor: colors$8.bgGray,
+                              backgroundColor: '$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'
@@ -23858,7 +23900,7 @@
                         gap: 3,
                         css: {
                           height: '40px',
-                          backgroundColor: colors$8.bgGray,
+                          backgroundColor: '$bgGray',
                           paddingRight: '$spacing-04'
                         }
                       }, {
@@ -24219,14 +24261,14 @@
     borderSpacing: 0,
     borderCollapse: 'collapse',
     '& *[data-sticky-td="true"]': {
-      backgroundColor: '$bgWhite'
+      backgroundColor: '$bgHeader'
     }
   });
   var 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',
@@ -24257,7 +24299,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': {
@@ -24334,6 +24376,16 @@
             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: [{
@@ -24357,10 +24409,32 @@
           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: 'white',
+    backgroundColor: 'transparent',
     userSelect: 'none',
     textAlign: 'start',
     position: 'relative',
@@ -24399,6 +24473,7 @@
       }
     }
   });
+  var Cell = styled('td');
   var TableCell$3 = styled('td', {
     height: '68px',
     fontSize: '$short-content-regular',
@@ -24663,7 +24738,7 @@
           css: {
             padding: '$spacing-06 $spacing-05',
             boxShadow: '$medium',
-            backgroundColor: 'white',
+            backgroundColor: '$bgWhite',
             maxHeight: 300,
             minWidth: 167,
             width: 'max-content',
@@ -24816,6 +24891,9 @@
     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);
@@ -24887,12 +24965,12 @@
       setPageSize = instance.setPageSize,
       toggleRowSelected = instance.toggleRowSelected,
       toggleAllRowsSelected = instance.toggleAllRowsSelected,
-      _9 = instance.state,
-      pageIndex = _9.pageIndex,
-      pageSize = _9.pageSize,
-      sortBy = _9.sortBy,
-      selectedRowIds = _9.selectedRowIds,
-      expanded = _9.expanded,
+      _10 = instance.state,
+      pageIndex = _10.pageIndex,
+      pageSize = _10.pageSize,
+      sortBy = _10.sortBy,
+      selectedRowIds = _10.selectedRowIds,
+      expanded = _10.expanded,
       setHiddenColumns = instance.setHiddenColumns,
       setColumnOrder = instance.setColumnOrder;
     var scrollerRef = React.useRef(null);
@@ -24946,6 +25024,7 @@
         },
         rowsPerPageOptions: rowsPerPageOptions,
         css: {
+          backgroundColor: '$bgWhite',
           padding: '$spacing-04 0',
           '@md': {
             padding: '$spacing-06 $spacing-03'
@@ -25100,7 +25179,8 @@
                     isSortedDesc: column.isSortedDesc,
                     unsortable: column.unsortable,
                     isToggleable: !!column.onToggle,
-                    isToggled: column.isToggled
+                    isToggled: column.isToggled,
+                    darkTheme: hasDarkParent
                   }, {
                     children: jsxRuntime.jsx(TableHeadCellContent, __assign({
                       heading: "headerTable"
@@ -25204,6 +25284,11 @@
       }
     }, [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);
@@ -25224,7 +25309,7 @@
       onDragEnd(reactSortableHoc.arrayMove(records, oldIndex, newIndex));
     };
     var cssTableCell = {
-      backgroundColor: 'white'
+      backgroundColor: '$bgWhite'
     };
     return jsxRuntime.jsxs(Box, __assign({
       css: __assign({
@@ -25298,9 +25383,7 @@
                           return filteredHeader.includes(item.id) || filterHeader.includes(item.id);
                         });
                       }
-                      return jsxRuntime.jsx(TableHeadRow$3, __assign({
-                        css: cssTableCell
-                      }, headerGroup.getHeaderGroupProps(), {
+                      return jsxRuntime.jsx(TableHeadRow$3, __assign({}, headerGroup.getHeaderGroupProps(), {
                         children: visibleHeaders.map(function (column, index) {
                           var headerRender = column.render('Header');
                           return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(function (props) {
@@ -25316,9 +25399,9 @@
                               }
                             }];
                           }), {
-                            css: __assign(__assign(__assign(__assign(__assign({}, cssTableCell), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
+                            css: __assign(__assign(__assign(__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
                             })
                           }, {
@@ -25327,6 +25410,7 @@
                               unsortable: id ? true : column.unsortable,
                               isToggleable: !!column.onToggle,
                               isToggled: column.isToggled,
+                              darkTheme: hasDarkParent,
                               css: {
                                 width: column.colWidth,
                                 maxWidth: column.colMaxWidth,
@@ -25599,9 +25683,9 @@
                               subRow: true
                             }, {
                               children: [leftAddOnCells.map(function (_, index) {
-                                return jsxRuntime.jsx("td", {
-                                  style: {
-                                    backgroundColor: colors$8.bgGray
+                                return jsxRuntime.jsx(Cell, {
+                                  css: {
+                                    backgroundColor: '$bgGray'
                                   }
                                 }, index);
                               }), jsxRuntime.jsxs(React__namespace.Fragment, {
@@ -25707,7 +25791,7 @@
                 width: 10,
                 height: '100%',
                 boxShadow: tableScrollPosition === 'end' ? 'none' : '-5px 0px 5px -3px #00000026',
-                backgroundColor: 'white'
+                backgroundColor: '$bgWhite'
               }
             }, void 0)]
           }, void 0)]
@@ -25903,6 +25987,7 @@
         columnNumber: 5
       }
     }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$g,
@@ -25910,11 +25995,12 @@
         columnNumber: 25
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
+      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$g,
         lineNumber: 19,
-        columnNumber: 50
+        columnNumber: 71
       }
     })),
     unsortable: true
@@ -25937,6 +26023,7 @@
         columnNumber: 5
       }
     }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
@@ -25944,11 +26031,12 @@
         columnNumber: 25
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightOutline, {
+      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
         lineNumber: 14,
-        columnNumber: 50
+        columnNumber: 71
       }
     })),
     unsortable: true
@@ -26008,6 +26096,9 @@
           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,
@@ -26015,17 +26106,18 @@
           columnNumber: 13
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
+        color: "currentColor",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 42,
+          lineNumber: 45,
           columnNumber: 24
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 46,
+          lineNumber: 49,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -26048,7 +26140,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 47,
+          lineNumber: 50,
           columnNumber: 11
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -26056,7 +26148,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 67,
+          lineNumber: 70,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -26068,7 +26160,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 68,
+          lineNumber: 71,
           columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -26079,7 +26171,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 77,
+          lineNumber: 80,
           columnNumber: 17
         }
       }))))));
@@ -58436,6 +58528,7 @@
   exports.Card = Card;
   exports.CardComponent = CardComponent;
   exports.CardLineColor = CardLineColor;
+  exports.Cell = Cell;
   exports.CheckboxGroup = CheckboxGroup;
   exports.CheckboxTable = CheckboxTable;
   exports.ColorPicker = ColorPicker$1;