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

package/index.umd.js

@@ -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 : {};
 
@@ -1330,8 +1336,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;
@@ -1507,6 +1523,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
@@ -1517,6 +1534,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: {
@@ -1527,11 +1545,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: {
@@ -22724,6 +22749,9 @@
       buttonType: "secondary",
       disabled: currentPage === 1,
       onClick: () => handleSelectPage(1),
+      css: {
+        color: '$iconPrimary'
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
@@ -22731,11 +22759,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, {
@@ -22747,7 +22775,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 195,
+        lineNumber: 198,
         columnNumber: 17
       }
     }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -22758,7 +22786,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 203,
+        lineNumber: 206,
         columnNumber: 17
       }
     }, t('previousButton', 'Sebelumnya'))), generatePages().map((page, index) => {
@@ -22769,7 +22797,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$l,
-          lineNumber: 216,
+          lineNumber: 219,
           columnNumber: 15
         }
       }, page);
@@ -22782,7 +22810,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 228,
+        lineNumber: 231,
         columnNumber: 17
       }
     }) : /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -22793,7 +22821,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 236,
+        lineNumber: 239,
         columnNumber: 17
       }
     }, t('nextButton', 'Selanjutnya')), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -22801,18 +22829,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, {
@@ -22825,7 +22856,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 262,
+        lineNumber: 268,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22838,7 +22869,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 270,
+        lineNumber: 276,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -22855,7 +22886,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 271,
+        lineNumber: 277,
         columnNumber: 15
       }
     }, t('gotoPageText', 'Ke Halaman')), isMobilePagination ? /*#__PURE__*/React__default["default"].createElement(GoToPageBox, {
@@ -22868,7 +22899,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 283,
+        lineNumber: 289,
         columnNumber: 17
       }
     }, goToPage) : /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -22895,14 +22926,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, {
@@ -22912,7 +22943,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 316,
+        lineNumber: 322,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22920,21 +22951,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", {
@@ -22946,7 +22977,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 321,
+        lineNumber: 327,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputNumber, {
@@ -22963,14 +22994,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, {
@@ -22981,7 +23012,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 337,
+        lineNumber: 343,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -22996,7 +23027,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 338,
+        lineNumber: 344,
         columnNumber: 13
       }
     }, t('btnCancelText', 'Batal')), /*#__PURE__*/React__default["default"].createElement(Button$4, {
@@ -23011,7 +23042,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$l,
-        lineNumber: 349,
+        lineNumber: 355,
         columnNumber: 13
       }
     }, t('btnSubmitText', 'Lanjutkan'))))));
@@ -23105,6 +23136,7 @@
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      color: "primary",
       variant: "status",
       __self: this,
       __source: {
@@ -23132,7 +23164,7 @@
       direction: "column",
       align: "center",
       css: {
-        backgroundColor: '$white',
+        backgroundColor: '$bgWhite',
         boxShadow: '$small'
       },
       __self: this,
@@ -23152,6 +23184,7 @@
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      color: "primary",
       variant: "status",
       __self: this,
       __source: {
@@ -23808,7 +23841,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'
@@ -23843,7 +23876,7 @@
                         gap: 3,
                         css: {
                           height: '40px',
-                          backgroundColor: colors$8.bgGray,
+                          backgroundColor: '$bgGray',
                           paddingRight: '$spacing-04'
                         }
                       }, {
@@ -24204,14 +24237,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',
@@ -24242,7 +24275,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': {
@@ -24319,6 +24352,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: [{
@@ -24342,10 +24385,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',
@@ -24384,6 +24449,7 @@
       }
     }
   });
+  var Cell = styled('td');
   var TableCell$3 = styled('td', {
     height: '68px',
     fontSize: '$short-content-regular',
@@ -24648,7 +24714,7 @@
           css: {
             padding: '$spacing-06 $spacing-05',
             boxShadow: '$medium',
-            backgroundColor: 'white',
+            backgroundColor: '$bgWhite',
             maxHeight: 300,
             minWidth: 167,
             width: 'max-content',
@@ -24801,6 +24867,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);
@@ -24872,12 +24941,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);
@@ -24931,6 +25000,7 @@
         },
         rowsPerPageOptions: rowsPerPageOptions,
         css: {
+          backgroundColor: '$bgWhite',
           padding: '$spacing-04 0',
           '@md': {
             padding: '$spacing-06 $spacing-03'
@@ -25085,7 +25155,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"
@@ -25189,6 +25260,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);
@@ -25209,7 +25285,7 @@
       onDragEnd(reactSortableHoc.arrayMove(records, oldIndex, newIndex));
     };
     var cssTableCell = {
-      backgroundColor: 'white'
+      backgroundColor: '$bgWhite'
     };
     return jsxRuntime.jsxs(Box, __assign({
       css: __assign({
@@ -25283,9 +25359,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) {
@@ -25301,7 +25375,7 @@
                               }
                             }];
                           }), {
-                            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,
                               top: 0
@@ -25312,6 +25386,7 @@
                               unsortable: id ? true : column.unsortable,
                               isToggleable: !!column.onToggle,
                               isToggled: column.isToggled,
+                              darkTheme: hasDarkParent,
                               css: {
                                 width: column.colWidth,
                                 maxWidth: column.colMaxWidth,
@@ -25584,9 +25659,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, {
@@ -25692,7 +25767,7 @@
                 width: 10,
                 height: '100%',
                 boxShadow: tableScrollPosition === 'end' ? 'none' : '-5px 0px 5px -3px #00000026',
-                backgroundColor: 'white'
+                backgroundColor: '$bgWhite'
               }
             }, void 0)]
           }, void 0)]
@@ -25889,6 +25964,7 @@
         columnNumber: 5
       }
     }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$g,
@@ -25896,11 +25972,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
@@ -25923,6 +26000,7 @@
         columnNumber: 5
       }
     }), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      color: "currentColor",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
@@ -25930,11 +26008,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
@@ -25994,6 +26073,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,
@@ -26001,17 +26083,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, {
@@ -26034,7 +26117,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, {
@@ -26042,7 +26125,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 67,
+          lineNumber: 70,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -26054,7 +26137,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 68,
+          lineNumber: 71,
           columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -26065,7 +26148,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$e,
-          lineNumber: 77,
+          lineNumber: 80,
           columnNumber: 17
         }
       }))))));
@@ -58254,6 +58337,7 @@
   exports.Card = Card;
   exports.CardComponent = CardComponent;
   exports.CardLineColor = CardLineColor;
+  exports.Cell = Cell;
   exports.CheckboxGroup = CheckboxGroup;
   exports.CheckboxTable = CheckboxTable;
   exports.ColorPicker = ColorPicker$1;