flipper-ui 0.41.1 → 0.42.1

package/core/data-display/data-table/data-table.d.ts

@@ -19,6 +19,7 @@ export type DataTableProps<D extends Data, V extends StackView = Record<string,
     size?: 'small' | 'medium';
     maxHeight?: number | string;
     stickyHeader?: boolean;
+    stickyFooter?: boolean;
     cellPadding?: CSSProperties['padding'];
     framed?: boolean;
     borderRadius?: number | string;

package/core/data-display/data-table/data-table.js

@@ -64,6 +64,7 @@ var DataTable = exports.DataTable = function DataTable(props) {
     size = props.size,
     maxHeight = props.maxHeight,
     stickyHeader = props.stickyHeader,
+    stickyFooter = props.stickyFooter,
     cellPadding = props.cellPadding,
     framed = props.framed,
     borderRadius = props.borderRadius,
@@ -257,7 +258,8 @@ var DataTable = exports.DataTable = function DataTable(props) {
     }, _styles.SCROLLBAR) : undefined), (0, _styles.tableFrame)(framed, borderRadius))
   }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     size: size,
-    stickyHeader: stickyHeader
+    stickyHeader: stickyHeader,
+    sx: stickyFooter ? _styles.STICKY_FOOTER : undefined
   }, !noHeader && /*#__PURE__*/_react["default"].createElement(_TableHead["default"], {
     style: headStyle
   }, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {

package/core/data-display/data-table/data-table.stories.d.ts

@@ -43,6 +43,16 @@ export declare const StickyHeader: {
         };
     };
 };
+export declare const StickyFooter: {
+    (): React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
 export declare const Custom: {
     (): React.JSX.Element;
     parameters: {

package/core/data-display/list-item-dark/styles.js

@@ -14,7 +14,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var _theme$colors = _theme.theme.colors,
   neutral = _theme$colors.neutral,
   orange = _theme$colors.orange;
-var FavoriteActions = exports.FavoriteActions = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 120ms ease;\n"])));
+var FavoriteActions = exports.FavoriteActions = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    margin-left: auto;\n    opacity: 0;\n    transition: opacity 120ms ease;\n\n    & svg {\n        width: 18px;\n        height: 18px;\n    }\n"])));
 var ItemLabel = exports.ItemLabel = (0, _styled["default"])('div', {
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'expanded';
@@ -30,7 +30,7 @@ var ItemButton = exports.ItemButton = (0, _styled["default"])(_ListItemButton["d
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'expanded';
   }
-})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n        align-items: center;\n        justify-content: ", ";\n        width: 100%;\n        border-radius: 4px;\n        padding: ", ";\n        border-left: 3px solid\n            ", ";\n        background-color: ", ";\n        color: ", ";\n        font-weight: ", ";\n        overflow: hidden;\n        white-space: nowrap;\n        transition:\n            background-color 120ms ease,\n            color 120ms ease;\n    }\n\n    & svg {\n        width: 18px;\n        height: 18px;\n        flex-shrink: 0;\n        color: inherit;\n    }\n\n    & svg path,\n    & svg circle,\n    & svg rect {\n        fill: currentColor;\n    }\n\n    &:hover .list-item-dark-actions,\n    &:focus-within .list-item-dark-actions {\n        opacity: 1;\n    }\n\n    &&:hover {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    &&.Mui-disabled {\n        opacity: 0.5;\n    }\n\n    &&.Mui-focusVisible {\n        outline: 2px solid ", ";\n        outline-offset: -2px;\n    }\n"])), function (props) {
+})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n        align-items: center;\n        justify-content: ", ";\n        width: 100%;\n        border-radius: 4px;\n        padding: ", ";\n        border-left: 3px solid\n            ", ";\n        background-color: ", ";\n        color: ", ";\n        font-weight: ", ";\n        overflow: hidden;\n        white-space: nowrap;\n        transition:\n            background-color 120ms ease,\n            color 120ms ease;\n    }\n\n    & svg {\n        flex-shrink: 0;\n        color: inherit;\n    }\n\n    & svg path,\n    & svg circle,\n    & svg rect {\n        fill: currentColor;\n    }\n\n    &:hover .list-item-dark-actions,\n    &:focus-within .list-item-dark-actions {\n        opacity: 1;\n    }\n\n    &&:hover {\n        background-color: ", ";\n        color: ", ";\n    }\n\n    &&.Mui-disabled {\n        opacity: 0.5;\n    }\n\n    &&.Mui-focusVisible {\n        outline: 2px solid ", ";\n        outline-offset: -2px;\n    }\n"])), function (props) {
   return props.expanded ? 'flex-start' : 'center';
 }, function (props) {
   return props.dense ? '8px 12px' : '12px';

package/core/data-display/table/index.js

@@ -46,6 +46,9 @@ var SMALL_SIZE_SX = {
   },
   '&& tfoot .MuiIconButton-root': {
     padding: '4px'
+  },
+  '&& thead .MuiTableSortLabel-icon': {
+    fontSize: '14px'
   }
 };
 var Table = function Table(_ref) {

package/core/data-display/table/styles.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties } from 'react';
 export type Truncate = boolean | number | string;
+export declare const toPx: (value: number | string) => string;
 export declare const SCROLLBAR: {
     readonly scrollbarWidth: "thin";
     readonly scrollbarColor: `${string} transparent`;
@@ -18,6 +19,17 @@ export declare const SCROLLBAR: {
         readonly backgroundColor: string;
     };
 };
+export declare const STICKY_FOOTER: {
+    readonly borderCollapse: "separate";
+    readonly '& tfoot td': {
+        readonly zIndex: 2;
+        readonly bottom: 0;
+        readonly position: "sticky";
+        readonly borderBottom: "none";
+        readonly backgroundColor: string;
+        readonly boxShadow: `0 -1px 0 ${string}, 0 -4px 12px ${string}`;
+    };
+};
 export declare const tableFrame: (framed?: boolean, borderRadius?: number | string) => {
     borderRadius: string;
     boxShadow?: undefined;

package/core/data-display/table/styles.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.truncateStyle = exports.tableFrame = exports.SCROLLBAR = void 0;
+exports.truncateStyle = exports.toPx = exports.tableFrame = exports.STICKY_FOOTER = exports.SCROLLBAR = void 0;
 var _styles = require("@mui/material/styles");
 var _theme = require("../../../theme");
-var gray = _theme.theme.colors.gray;
+var _theme$colors = _theme.theme.colors,
+  gray = _theme$colors.gray,
+  neutral = _theme$colors.neutral;
 var DEFAULT_RADIUS = 12;
 var DEFAULT_MAX_WIDTH = 150;
 // sx reads a bare number as a theme multiple, so pin the unit
-var toPx = function toPx(value) {
+var toPx = exports.toPx = function toPx(value) {
   return typeof value === 'number' ? "".concat(value, "px") : value;
 };
 var SCROLLBAR = exports.SCROLLBAR = {
@@ -31,6 +33,21 @@ var SCROLLBAR = exports.SCROLLBAR = {
     backgroundColor: (0, _styles.alpha)(gray[900], 0.35)
   }
 };
+
+// under border-collapse a cell paints neither its own borders nor a shadow —
+// both belong to the table grid and stay behind when the stuck cell moves. MUI
+// only flips to separate for stickyHeader, so the footer has to flip it too
+var STICKY_FOOTER = exports.STICKY_FOOTER = {
+  borderCollapse: 'separate',
+  '& tfoot td': {
+    zIndex: 2,
+    bottom: 0,
+    position: 'sticky',
+    borderBottom: 'none',
+    backgroundColor: neutral[50],
+    boxShadow: "0 -1px 0 ".concat(gray[200], ", 0 -4px 12px ").concat((0, _styles.alpha)(gray[800], 0.04))
+  }
+};
 var tableFrame = exports.tableFrame = function tableFrame(framed, borderRadius) {
   if (!framed) {
     return borderRadius === undefined ? undefined : {

package/core/data-display/table/table-pagination.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ChangeEvent, CSSProperties, MouseEvent } from 'react';
+import type { ChangeEvent, CSSProperties, MouseEvent, ReactNode } from 'react';
 import type { TablePaginationProps } from '@mui/material/TablePagination';
 interface ITablePaginationProps extends Omit<TablePaginationProps, 'component' | 'count' | 'page' | 'rowsPerPage' | 'onPageChange' | 'onRowsPerPageChange'> {
     count: number;
@@ -8,7 +8,8 @@ interface ITablePaginationProps extends Omit<TablePaginationProps, 'component' |
     rowsPerPageOptions?: number[];
     onPageChange: (event: MouseEvent<HTMLButtonElement> | null, page: number) => void;
     onRowsPerPageChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    footerActions?: ReactNode;
     style?: CSSProperties;
 }
-declare const TablePagination: ({ count, page, rowsPerPage, rowsPerPageOptions, onPageChange, onRowsPerPageChange, style, padding, ...props }: ITablePaginationProps) => React.JSX.Element;
+declare const TablePagination: ({ count, page, rowsPerPage, rowsPerPageOptions, onPageChange, onRowsPerPageChange, footerActions, slotProps, style, padding, ...props }: ITablePaginationProps) => React.JSX.Element;
 export default TablePagination;

package/core/data-display/table/table-pagination.js

@@ -11,10 +11,18 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _TablePagination = _interopRequireDefault(require("@mui/material/TablePagination"));
 var _theme = require("../../../theme");
-var _excluded = ["count", "page", "rowsPerPage", "rowsPerPageOptions", "onPageChange", "onRowsPerPageChange", "style", "padding"];
+var _excluded = ["count", "page", "rowsPerPage", "rowsPerPageOptions", "onPageChange", "onRowsPerPageChange", "footerActions", "slotProps", "style", "padding"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var gray = _theme.theme.colors.gray;
+
+// the toolbar lays its children out left to right and the spacer is the first
+// of them, so filling the spacer is what puts content opposite the controls
+var FOOTER_ACTIONS_SX = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px'
+};
 var TablePagination = function TablePagination(_ref) {
   var count = _ref.count,
     page = _ref.page,
@@ -22,6 +30,8 @@ var TablePagination = function TablePagination(_ref) {
     rowsPerPageOptions = _ref.rowsPerPageOptions,
     onPageChange = _ref.onPageChange,
     onRowsPerPageChange = _ref.onRowsPerPageChange,
+    footerActions = _ref.footerActions,
+    slotProps = _ref.slotProps,
     style = _ref.style,
     padding = _ref.padding,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -44,6 +54,12 @@ var TablePagination = function TablePagination(_ref) {
     sx: {
       borderBottom: "1px solid ".concat(gray[200])
     },
+    slotProps: footerActions ? _objectSpread(_objectSpread({}, slotProps), {}, {
+      spacer: {
+        children: footerActions,
+        sx: FOOTER_ACTIONS_SX
+      }
+    }) : slotProps,
     onPageChange: onPageChange,
     onRowsPerPageChange: onRowsPerPageChange
   }, props));

package/core/data-display/table-interactive/TableInteractive.d.ts

@@ -27,12 +27,15 @@ export interface ITableInteractive extends Omit<TableProps, 'children'> {
     paginated?: boolean;
     rowsPerPage?: number;
     direction?: Direction;
+    stickyFooter?: boolean;
     isInteractive?: boolean;
     isCollapsible?: boolean;
     visibleColumns?: string[];
     columnsTemporary?: string[];
     rowsPerPageOptions?: number[];
+    headerMargin?: number | string;
     headerActions?: JSX.Element | undefined;
+    footerActions?: ReactNode;
     valuesInvoices?: Record<string, unknown>[];
     onCancel?: () => void;
     onConfirm?: () => void;

package/core/data-display/table-interactive/TableInteractive.js

@@ -49,6 +49,8 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
   var maxPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
   var page = Math.min((_props$page = props.page) !== null && _props$page !== void 0 ? _props$page : 0, maxPage);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.isInteractive && /*#__PURE__*/_react["default"].createElement(_TableInteractiveHeader.TableInteractiveHeader, {
+    size: props.size,
+    headerMargin: props.headerMargin,
     headerActions: props.headerActions,
     handleOpen: props.handleOpen
   }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
@@ -72,7 +74,7 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     style: {
       border: props.isInteractive ? 'none !important' : "1px solid ".concat(gray[300])
     },
-    sx: _objectSpread(_objectSpread({}, props.size !== 'small' && BODY_CELL_SX), props.sx)
+    sx: _objectSpread(_objectSpread(_objectSpread({}, props.size !== 'small' && BODY_CELL_SX), props.stickyFooter && _styles.STICKY_FOOTER), props.sx)
   }, /*#__PURE__*/_react["default"].createElement(_TableInteractiveHead.TableInteractiveHead, {
     fixed: props.fixed,
     active: props.active,
@@ -89,6 +91,7 @@ var TableInteractive = exports.TableInteractive = function TableInteractive(prop
     page: page,
     count: count,
     rowsPerPage: (_props$rowsPerPage2 = props.rowsPerPage) !== null && _props$rowsPerPage2 !== void 0 ? _props$rowsPerPage2 : 10,
+    footerActions: props.footerActions,
     rowsPerPageOptions: (_props$rowsPerPageOpt = props.rowsPerPageOptions) !== null && _props$rowsPerPageOpt !== void 0 ? _props$rowsPerPageOpt : [10, 25, 50, 100],
     ActionsComponent: _TablePaginationActions.TablePaginationActions,
     onPageChange: function onPageChange(_, page) {

package/core/data-display/table-interactive/TableInteractiveHeader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { ITableInteractive } from './TableInteractive';
-export type ITableInteractiveHeader = Pick<ITableInteractive, 'handleOpen' | 'headerActions'>;
+export type ITableInteractiveHeader = Pick<ITableInteractive, 'handleOpen' | 'headerActions' | 'headerMargin' | 'size'>;
 export declare const TableInteractiveHeader: (props: ITableInteractiveHeader) => React.JSX.Element;

package/core/data-display/table-interactive/TableInteractiveHeader.js

@@ -10,11 +10,15 @@ var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _mui = require("../../../icons/mui");
 var _styles = require("./styles");
 var TableInteractiveHeader = exports.TableInteractiveHeader = function TableInteractiveHeader(props) {
-  return /*#__PURE__*/_react["default"].createElement(_styles.TableHeaderContent, null, /*#__PURE__*/_react["default"].createElement("div", null, props.headerActions), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-    padding: "4px 6px",
+  var isSmall = props.size === 'small';
+  return /*#__PURE__*/_react["default"].createElement(_styles.TableHeaderContent, {
+    margin: props.headerMargin
+  }, /*#__PURE__*/_react["default"].createElement("div", null, props.headerActions), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
+    padding: "4px",
     "aria-label": "Prefer\xEAncias",
     onClick: props.handleOpen
   }, /*#__PURE__*/_react["default"].createElement(_mui.IconSettings, {
-    color: "primary"
+    color: "primary",
+    fontSize: isSmall ? 'small' : 'medium'
   })));
 };

package/core/data-display/table-interactive/styles.d.ts

@@ -5,6 +5,8 @@ export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
 export declare const TableHeaderContent: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    margin?: number | string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ActionsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/core/data-display/table-interactive/styles.js

@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableHeaderContent = exports.TableCellInteractive = exports.ContentWrapper = exports.ActionsWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _styles = require("../table/styles");
 var _tableCell = _interopRequireDefault(require("../table/table-cell"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var gray = _theme.theme.colors.gray;
 var ContentWrapper = exports.ContentWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    border-bottom: 2px solid ", ";\n"])), gray[300]);
-var TableHeaderContent = exports.TableHeaderContent = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: flex-end;\n    gap: 4px;\n    margin: 0 0 8px 0;\n\n    & > div {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 6px;\n    }\n"])));
+var TableHeaderContent = exports.TableHeaderContent = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 4px;\n    margin: ", ";\n\n    & > div {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 6px;\n    }\n"])), function (props) {
+  return props.margin === undefined ? '0 0 8px 0' : (0, _styles.toPx)(props.margin);
+});
 var ActionsWrapper = exports.ActionsWrapper = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n"])));
 var TableCellInteractive = exports.TableCellInteractive = (0, _styled["default"])(_tableCell["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        min-width: 60px;\n        max-width: ", ";\n        padding: 16px 8px;\n    }\n"])), function (props) {
   return props.fixed ? props.width : 'none';

package/core/data-display/table-interactive/table-interactive.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof TableInteractive>;
 export declare const interactiveTable: Story;
 export declare const framed: Story;
 export declare const stickyHeader: Story;
+export declare const stickyFooter: Story;

package/icons/mui/index.d.ts

@@ -84,6 +84,7 @@ export { default as IconFileOpenRounded } from '@mui/icons-material/FileOpenRoun
 export { default as IconFileUpload } from '@mui/icons-material/FileUpload';
 export { default as IconFilterList } from '@mui/icons-material/FilterList';
 export { default as IconFirstPage } from '@mui/icons-material/FirstPage';
+export { default as IconFlagRounded } from '@mui/icons-material/FlagRounded';
 export { default as IconFolderShared } from '@mui/icons-material/FolderShared';
 export { default as IconFormatAlignCenterRounded } from '@mui/icons-material/FormatAlignCenterRounded';
 export { default as IconFormatAlignLeftRounded } from '@mui/icons-material/FormatAlignLeftRounded';

package/icons/mui/index.js

@@ -520,6 +520,12 @@ Object.defineProperty(exports, "IconFirstPage", {
     return _FirstPage["default"];
   }
 });
+Object.defineProperty(exports, "IconFlagRounded", {
+  enumerable: true,
+  get: function get() {
+    return _FlagRounded["default"];
+  }
+});
 Object.defineProperty(exports, "IconFolderShared", {
   enumerable: true,
   get: function get() {
@@ -1422,6 +1428,7 @@ var _FileOpenRounded = _interopRequireDefault(require("@mui/icons-material/FileO
 var _FileUpload = _interopRequireDefault(require("@mui/icons-material/FileUpload"));
 var _FilterList = _interopRequireDefault(require("@mui/icons-material/FilterList"));
 var _FirstPage = _interopRequireDefault(require("@mui/icons-material/FirstPage"));
+var _FlagRounded = _interopRequireDefault(require("@mui/icons-material/FlagRounded"));
 var _FolderShared = _interopRequireDefault(require("@mui/icons-material/FolderShared"));
 var _FormatAlignCenterRounded = _interopRequireDefault(require("@mui/icons-material/FormatAlignCenterRounded"));
 var _FormatAlignLeftRounded = _interopRequireDefault(require("@mui/icons-material/FormatAlignLeftRounded"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.41.1",
+    "version": "0.42.1",
     "author": "NG",
     "license": "MIT",
     "main": "dist/index.js",

package/theme/theme.d.ts

@@ -124,5 +124,12 @@ export declare const muiThemeOptions: {
                 };
             };
         };
+        MuiTableCell: {
+            styleOverrides: {
+                stickyHeader: {
+                    backgroundColor: string;
+                };
+            };
+        };
     };
 };

package/theme/theme.js

@@ -35,6 +35,16 @@ var muiThemeOptions = exports.muiThemeOptions = {
       defaultProps: {
         variantMapping: _typography.variantMapping
       }
+    },
+    // a sticky head cell needs an opaque background or the rows scroll
+    // through it, and MUI paints it with background.default — the page
+    // colour set above, not the surface the table sits on
+    MuiTableCell: {
+      styleOverrides: {
+        stickyHeader: {
+          backgroundColor: _colors["default"].neutral[50]
+        }
+      }
     }
   }
 };

package/theme/theme.spec.d.ts

@@ -0,0 +1 @@
+export {};