@majoo-ui/react 1.61.10 → 1.61.11-rc.2

package/index.esm.js

@@ -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 : {};
 
@@ -1226,8 +1232,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;
@@ -1403,6 +1419,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
@@ -1413,6 +1430,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: {
@@ -1423,11 +1441,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: {
@@ -22412,6 +22437,9 @@ const PaginationButton = ({
     buttonType: "secondary",
     disabled: currentPage === 1,
     onClick: () => handleSelectPage(1),
+    css: {
+      color: '$iconPrimary'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
@@ -22419,11 +22447,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, {
@@ -22435,7 +22463,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 195,
+      lineNumber: 198,
       columnNumber: 17
     }
   }) : /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -22446,7 +22474,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 203,
+      lineNumber: 206,
       columnNumber: 17
     }
   }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -22457,7 +22485,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 216,
+        lineNumber: 219,
         columnNumber: 15
       }
     }, page);
@@ -22470,7 +22498,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 228,
+      lineNumber: 231,
       columnNumber: 17
     }
   }) : /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -22481,7 +22509,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 236,
+      lineNumber: 239,
       columnNumber: 17
     }
   }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -22489,18 +22517,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, {
@@ -22513,7 +22544,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 262,
+      lineNumber: 268,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22526,7 +22557,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 270,
+      lineNumber: 276,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -22543,7 +22574,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, {
@@ -22556,7 +22587,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 283,
+      lineNumber: 289,
       columnNumber: 17
     }
   }, goToPage) : /*#__PURE__*/React__default.createElement(InputNumber, {
@@ -22583,14 +22614,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, {
@@ -22600,7 +22631,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 316,
+      lineNumber: 322,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -22608,21 +22639,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", {
@@ -22634,7 +22665,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 321,
+      lineNumber: 327,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(InputNumber, {
@@ -22651,14 +22682,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, {
@@ -22669,7 +22700,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 337,
+      lineNumber: 343,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -22684,7 +22715,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 338,
+      lineNumber: 344,
       columnNumber: 13
     }
   }, t('btnCancelText', 'Batal')), /*#__PURE__*/React__default.createElement(Button$4, {
@@ -22699,7 +22730,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$l,
-      lineNumber: 349,
+      lineNumber: 355,
       columnNumber: 13
     }
   }, t('btnSubmitText', 'Lanjutkan'))))));
@@ -22793,6 +22824,7 @@ function PaginationInfo(_ref) {
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    color: "primary",
     variant: "status",
     __self: this,
     __source: {
@@ -22820,7 +22852,7 @@ function PaginationInfo(_ref) {
     direction: "column",
     align: "center",
     css: {
-      backgroundColor: '$white',
+      backgroundColor: '$bgWhite',
       boxShadow: '$small'
     },
     __self: this,
@@ -22840,6 +22872,7 @@ function PaginationInfo(_ref) {
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
+    color: "primary",
     variant: "status",
     __self: this,
     __source: {
@@ -23479,7 +23512,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'
@@ -23514,7 +23547,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       gap: 3,
                       css: {
                         height: '40px',
-                        backgroundColor: colors$8.bgGray,
+                        backgroundColor: '$bgGray',
                         paddingRight: '$spacing-04'
                       }
                     }, {
@@ -23862,14 +23895,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',
@@ -23900,7 +23933,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': {
@@ -23977,6 +24010,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: [{
@@ -24000,10 +24043,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',
@@ -24042,6 +24107,7 @@ const TableRow$3 = styled('tr', {
     }
   }
 });
+const Cell = styled('td');
 const TableCell$3 = styled('td', {
   height: '68px',
   fontSize: '$short-content-regular',
@@ -24294,7 +24360,7 @@ function HeaderMenuOption(props) {
         css: {
           padding: '$spacing-06 $spacing-05',
           boxShadow: '$medium',
-          backgroundColor: 'white',
+          backgroundColor: '$bgWhite',
           maxHeight: 300,
           minWidth: 167,
           width: 'max-content',
@@ -24405,6 +24471,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');
@@ -24525,6 +24592,7 @@ function Table({
     },
     rowsPerPageOptions: rowsPerPageOptions,
     css: {
+      backgroundColor: '$bgWhite',
       padding: '$spacing-04 0',
       '@md': {
         padding: '$spacing-06 $spacing-03'
@@ -24662,7 +24730,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"
@@ -24762,6 +24831,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);
@@ -24783,7 +24857,7 @@ function Table({
     onDragEnd(arrayMove(records, oldIndex, newIndex));
   };
   const cssTableCell = {
-    backgroundColor: 'white'
+    backgroundColor: '$bgWhite'
   };
   return jsxs(Box, Object.assign({
     css: Object.assign({
@@ -24851,9 +24925,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({
@@ -24867,7 +24939,7 @@ 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,
                             top: 0
@@ -24878,6 +24950,7 @@ function Table({
                             unsortable: id ? true : column.unsortable,
                             isToggleable: !!column.onToggle,
                             isToggled: column.isToggled,
+                            darkTheme: hasDarkParent,
                             css: {
                               width: column.colWidth,
                               maxWidth: column.colMaxWidth,
@@ -25114,9 +25187,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({
@@ -25216,7 +25289,7 @@ function Table({
               width: 10,
               height: '100%',
               boxShadow: tableScrollPosition === 'end' ? 'none' : '-5px 0px 5px -3px #00000026',
-              backgroundColor: 'white'
+              backgroundColor: '$bgWhite'
             }
           }, void 0)]
         }, void 0)]
@@ -25405,6 +25478,7 @@ const rowExpanderColumn = {
       columnNumber: 5
     }
   }), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$g,
@@ -25412,11 +25486,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
@@ -25439,6 +25514,7 @@ const rowExpanderMultipleColumn = {
       columnNumber: 5
     }
   }), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    color: "currentColor",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$f,
@@ -25446,11 +25522,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
@@ -25510,6 +25587,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,
@@ -25517,17 +25597,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, {
@@ -25550,7 +25631,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, {
@@ -25558,7 +25639,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 67,
+        lineNumber: 70,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -25570,7 +25651,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, {
@@ -25581,7 +25662,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$e,
-        lineNumber: 77,
+        lineNumber: 80,
         columnNumber: 17
       }
     }))))));
@@ -55868,7 +55949,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: {
@@ -56142,7 +56223,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",
@@ -57490,4 +57571,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 };