@redsift/table 10.3.0-alpha.6 → 10.3.0-alpha.7

package/index.js

@@ -1,9 +1,9 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
 export * from '@mui/x-data-grid-pro';
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useLayoutEffect, useEffect, useRef, forwardRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
-import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, IconButton as IconButton$2, Button, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Switch, Text, ButtonsColorPalette, Checkbox, LinkButton, ThemeProvider as ThemeProvider$4, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
+import { Icon, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, ThemeProvider as ThemeProvider$4, LinkButton, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
 import { mdiSync, mdiFilterVariant, mdiViewColumn, mdiChevronUp, mdiChevronDown, mdiViewHeadline, mdiViewSequential, mdiViewStream, mdiChevronRight, mdiTrayArrowDown } from '@redsift/icons';
 import emStyled from '@emotion/styled';
 import { Global, ThemeContext as ThemeContext$3, keyframes } from '@emotion/react';
@@ -3625,7 +3625,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$S = ["values", "unit", "step"];
+const _excluded$Q = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -3660,7 +3660,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$S);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$Q);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -4689,7 +4689,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$R = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$P = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -4697,7 +4697,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$R);
+    other = _objectWithoutPropertiesLoose(options, _excluded$P);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -4765,7 +4765,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$Q = ["sx"];
+const _excluded$O = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -4786,7 +4786,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$Q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$O);
   const {
     systemProps,
     otherProps
@@ -4812,7 +4812,7 @@ function extendSxProp(props) {
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-const _excluded$P = ["className", "component"];
+const _excluded$N = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -4830,7 +4830,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$P);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$N);
     return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -4841,7 +4841,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$O = ["variant"];
+const _excluded$M = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -4855,7 +4855,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$O);
+    other = _objectWithoutPropertiesLoose(props, _excluded$M);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -4867,7 +4867,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$N = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$L = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -4962,7 +4962,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$N);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$L);
 
     // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
     const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver : componentSlot && componentSlot !== 'Root' || false;
@@ -5639,7 +5639,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$M = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$K = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -5808,7 +5808,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$M);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$K);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -5932,7 +5932,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$L = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$J = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$2(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -5963,7 +5963,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$L);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -6030,7 +6030,7 @@ function createShadow(...px) {
 const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
 var shadows$1 = shadows;
 
-const _excluded$K = ["duration", "easing", "delay"];
+const _excluded$I = ["duration", "easing", "delay"];
 // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
 // to learn the context in which each easing should be used.
 const easing = {
@@ -6081,7 +6081,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$K);
+      other = _objectWithoutPropertiesLoose(options, _excluded$I);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -6128,7 +6128,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$J = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$H = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -6136,7 +6136,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$J);
+    other = _objectWithoutPropertiesLoose(options, _excluded$H);
   if (options.vars) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : formatMuiErrorMessage(18));
@@ -6227,12 +6227,12 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$I = ["theme"];
+const _excluded$G = ["theme"];
 function ThemeProvider$1(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
   const scopedTheme = themeInput[THEME_ID];
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, _extends$1({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
@@ -6456,7 +6456,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$H = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$F = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -6472,7 +6472,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$H);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$F);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -8688,7 +8688,7 @@ function getPopperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopper', ['root']);
 
-const _excluded$G = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+const _excluded$E = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
   _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 function flipPlacement(placement, direction) {
   if (direction === 'ltr') {
@@ -8741,7 +8741,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
       // @ts-ignore internal logic
       // prevent from spreading to DOM, it can come from the parent component e.g. Select.
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$G);
+    other = _objectWithoutPropertiesLoose(props, _excluded$E);
   const tooltipRef = React.useRef(null);
   const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React.useRef(null);
@@ -9268,7 +9268,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$F = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const _excluded$D = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
 const useUtilityClasses$o = ownerState => {
   const {
     open,
@@ -9337,7 +9337,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$F);
+    other = _objectWithoutPropertiesLoose(props, _excluded$D);
   // TODO: `modal`` must change its type in this file to match the type of methods
   // provided by `ModalManager`
   const manager = managerProp;
@@ -9627,7 +9627,7 @@ process.env.NODE_ENV !== "production" ? Modal$2.propTypes /* remove-proptypes */
 } : void 0;
 var ModalUnstyled = Modal$2;
 
-const _excluded$E = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$C = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -9669,7 +9669,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$E);
+    other = _objectWithoutPropertiesLoose(props, _excluded$C);
   const {
     current: isControlled
   } = React.useRef(value != null);
@@ -9963,7 +9963,7 @@ function getInputBaseUtilityClass(slot) {
 const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 var inputBaseClasses$1 = inputBaseClasses;
 
-const _excluded$D = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
+const _excluded$B = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -10194,7 +10194,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$D);
+    other = _objectWithoutPropertiesLoose(props, _excluded$B);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -10656,7 +10656,7 @@ function getInputUtilityClass(slot) {
 const inputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
 var inputClasses$1 = inputClasses;
 
-const _excluded$C = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$A = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$m = ownerState => {
   const {
     classes,
@@ -10769,7 +10769,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$C);
+    other = _objectWithoutPropertiesLoose(props, _excluded$A);
   const classes = useUtilityClasses$m(props);
   const ownerState = {
     disableUnderline
@@ -10992,7 +10992,7 @@ function getFilledInputUtilityClass(slot) {
 const filledInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
 var filledInputClasses$1 = filledInputClasses;
 
-const _excluded$B = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$z = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$l = ownerState => {
   const {
     classes,
@@ -11176,7 +11176,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$B);
+    other = _objectWithoutPropertiesLoose(props, _excluded$z);
   const ownerState = _extends$1({}, props, {
     fullWidth,
     inputComponent,
@@ -11407,7 +11407,7 @@ FilledInput.muiName = 'Input';
 var FilledInput$1 = FilledInput;
 
 var _span$2;
-const _excluded$A = ["children", "classes", "className", "label", "notched"];
+const _excluded$y = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset')({
   textAlign: 'left',
   position: 'absolute',
@@ -11480,7 +11480,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$A);
+    other = _objectWithoutPropertiesLoose(props, _excluded$y);
   const withLabel = label != null && label !== '';
   const ownerState = _extends$1({}, props, {
     notched,
@@ -11537,7 +11537,7 @@ function getOutlinedInputUtilityClass(slot) {
 const outlinedInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 var outlinedInputClasses$1 = outlinedInputClasses;
 
-const _excluded$z = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const _excluded$x = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 const useUtilityClasses$k = ownerState => {
   const {
     classes
@@ -11656,7 +11656,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$x);
   const classes = useUtilityClasses$k(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -11877,7 +11877,7 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$y = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const _excluded$w = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 const useUtilityClasses$j = ownerState => {
   const {
     classes,
@@ -11942,7 +11942,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12033,7 +12033,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$x = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const _excluded$v = ["disableAnimation", "margin", "shrink", "variant", "className"];
 const useUtilityClasses$i = ownerState => {
   const {
     classes,
@@ -12135,7 +12135,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -12238,7 +12238,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$w = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const _excluded$u = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 const useUtilityClasses$h = ownerState => {
   const {
     classes,
@@ -12324,7 +12324,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -12520,7 +12520,7 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 var formHelperTextClasses$1 = formHelperTextClasses;
 
 var _span$1;
-const _excluded$v = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const _excluded$t = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 const useUtilityClasses$g = ownerState => {
   const {
     classes,
@@ -12579,7 +12579,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12685,7 +12685,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$u = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const _excluded$s = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 const useUtilityClasses$f = ownerState => {
   const {
     classes,
@@ -12733,7 +12733,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const context = React.useMemo(() => ({
     dense
   }), [dense]);
@@ -12800,7 +12800,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
 } : void 0;
 var List$1 = List;
 
-const _excluded$t = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$r = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -12882,7 +12882,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],
@@ -14072,7 +14072,7 @@ function getTransitionProps(props, options) {
   };
 }
 
-const _excluded$s = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$q = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale$1(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -14116,7 +14116,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -14320,7 +14320,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$r = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$p = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles = {
   entering: {
     opacity: 1
@@ -14357,7 +14357,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
       // eslint-disable-next-line react/prop-types
       TransitionComponent = Transition$1
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -14518,7 +14518,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$q = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const _excluded$o = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 const useUtilityClasses$e = ownerState => {
   const {
     classes,
@@ -14573,7 +14573,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       TransitionComponent = Fade$1,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const ownerState = _extends$1({}, props, {
     component,
     invisible
@@ -14694,7 +14694,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
 } : void 0;
 var Backdrop$1 = Backdrop;
 
-const _excluded$p = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+const _excluded$n = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 const ModalRoot = styled$1('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -14773,7 +14773,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$n);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     container,
@@ -14997,7 +14997,7 @@ function getPaperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
-const _excluded$o = ["className", "component", "elevation", "square", "variant"];
+const _excluded$m = ["className", "component", "elevation", "square", "variant"];
 const useUtilityClasses$d = ownerState => {
   const {
     square,
@@ -15052,7 +15052,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$m);
   const ownerState = _extends$1({}, props, {
     component,
     elevation,
@@ -15133,7 +15133,7 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
-const _excluded$n = ["onEntering"],
+const _excluded$l = ["onEntering"],
   _excluded2$2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
   _excluded3 = ["slotProps"];
 function getOffsetTop(rect, vertical) {
@@ -15230,7 +15230,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
         onEntering
       } = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$n),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$l),
     other = _objectWithoutPropertiesLoose(props, _excluded2$2);
   const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React.useRef();
@@ -15636,7 +15636,7 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$m = ["onEntering"],
+const _excluded$k = ["onEntering"],
   _excluded2$1 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
 const RTL_ORIGIN = {
   vertical: 'top',
@@ -15703,7 +15703,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       } = {},
       variant = 'selectedMenu'
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$m),
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$k),
     other = _objectWithoutPropertiesLoose(props, _excluded2$1);
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
@@ -15893,7 +15893,7 @@ function getNativeSelectUtilityClasses(slot) {
 const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 var nativeSelectClasses$1 = nativeSelectClasses;
 
-const _excluded$l = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
+const _excluded$j = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 const useUtilityClasses$a = ownerState => {
   const {
     classes,
@@ -16022,7 +16022,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$l);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const ownerState = _extends$1({}, props, {
     disabled,
     variant,
@@ -16107,7 +16107,7 @@ const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple',
 var selectClasses$1 = selectClasses;
 
 var _span;
-const _excluded$k = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded$i = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 const SelectSelect = styled$1('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -16229,7 +16229,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -16740,7 +16740,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$j = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const _excluded$h = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 const useUtilityClasses$8 = ownerState => {
   const {
     color,
@@ -16806,7 +16806,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -16932,7 +16932,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path"
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$i = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+const _excluded$g = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 const useUtilityClasses$7 = ownerState => {
   const {
     classes
@@ -16976,7 +16976,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$g);
   const inputComponent = native ? NativeSelectInput$1 : SelectInput$1;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -17199,7 +17199,7 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTextField', ['root']);
 
-const _excluded$h = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const _excluded$f = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input$1,
   filled: FilledInput$1,
@@ -17292,7 +17292,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
       value,
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$f);
   const ownerState = _extends$1({}, props, {
     autoFocus,
     color,
@@ -17871,6 +17871,76 @@ class LicenseInfo {
   }
 }
 
+/**
+ * Component style.
+ */
+const StyledDataGrid = styled$3.div`
+  ${_ref => {
+  let {
+    $height
+  } = _ref;
+  return $height ? css`
+          height: ${$height};
+        ` : '';
+}}
+
+  width: 100%;
+
+  .MuiDataGrid-root {
+    font-family: var(--redsift-typography-datagrid-header-font-family);
+    border: none;
+  }
+
+  .MuiDataGrid-row {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+    font-size: var(--redsift-typography-datagrid-cell-font-size);
+    font-weight: var(--redsift-typography-datagrid-cell-font-weight);
+  }
+
+  .MuiDataGrid-columnHeaderTitle {
+    font-family: var(--redsift-typography-datagrid-header-font-family);
+    font-size: var(--redsift-typography-datagrid-header-font-size);
+    font-weight: var(--redsift-typography-datagrid-header-font-weight);
+  }
+
+  .MuiDataGrid-columnHeaders {
+    border-bottom-color: var(--redsift-color-primary-n);
+  }
+
+  .MuiDataGrid-columnSeparator {
+    display: none;
+  }
+
+  .MuiTablePagination-root {
+    .MuiTablePagination-selectLabel {
+      font-family: var(--redsift-typography-datagrid-header-font-family);
+    }
+    .MuiTablePagination-displayedRows {
+      font-family: var(--redsift-typography-datagrid-cell-font-family);
+    }
+
+    .MuiInputBase-root {
+      font-family: var(--redsift-typography-datagrid-cell-font-family);
+    }
+  }
+
+  .Mui-checked {
+    color: var(--redsift-color-primary-n);
+  }
+
+  .MuiDataGrid-rowCount {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  }
+
+  .MuiTablePagination-displayedRows {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  }
+
+  .MuiBadge-standard {
+    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  }
+`;
+
 /**
  * Component style.
  */
@@ -21452,34 +21522,6 @@ const useInteractions = function (propsList) {
   }), [getReferenceProps, getFloatingProps, getItemProps]);
 };
 
-const TooltipContext = /*#__PURE__*/React__default.createContext(null);
-
-/**
- * Context props.
- */
-
-/**
- * Component variant.
- */
-const TooltipPlacement = {
-  top: 'top',
-  right: 'right',
-  bottom: 'bottom',
-  left: 'left',
-  'top-start': 'top-start',
-  'top-end': 'top-end',
-  'right-start': 'right-start',
-  'right-end': 'right-end',
-  'bottom-start': 'bottom-start',
-  'bottom-end': 'bottom-end',
-  'left-start': 'left-start',
-  'left-end': 'left-end'
-};
-
-/**
- * Component props.
- */
-
 /**
  * Component style.
  */
@@ -21709,6 +21751,34 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
 TooltipTrigger.className = CLASSNAME$4;
 TooltipTrigger.displayName = COMPONENT_NAME$4;
 
+const TooltipContext = /*#__PURE__*/React__default.createContext(null);
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component variant.
+ */
+const TooltipPlacement = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+  'left-start': 'left-start',
+  'left-end': 'left-end'
+};
+
+/**
+ * Component props.
+ */
+
 function useTooltip(_ref) {
   let {
     color,
@@ -21777,42 +21847,6 @@ function useTooltip(_ref) {
 const ThemeContext = /*#__PURE__*/React__default.createContext(null);
 const ThemeProvider = ThemeContext.Provider;
 
-const _excluded$g = ["tooltip", "tooltipProps", "tooltipTriggerProps", "tooltipContentProps"];
-const IconButtonWithTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      tooltip,
-      tooltipProps,
-      tooltipTriggerProps,
-      tooltipContentProps
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$g);
-  return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, tooltipTriggerProps, /*#__PURE__*/React__default.createElement(IconButton$2, _extends$2({
-    "aria-label": tooltip
-  }, props, {
-    "aria-describedby": undefined,
-    ref: ref
-  }))), /*#__PURE__*/React__default.createElement(Tooltip.Content, tooltipContentProps, tooltip));
-});
-IconButtonWithTooltip.displayName = 'IconButton';
-
-const _excluded$f = ["tooltip", "tooltipProps", "tooltipTriggerProps", "tooltipContentProps"];
-const ButtonWithTooltip = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      tooltip,
-      tooltipProps,
-      tooltipTriggerProps,
-      tooltipContentProps
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$f);
-  return /*#__PURE__*/React__default.createElement(Tooltip, tooltipProps, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, tooltipTriggerProps, /*#__PURE__*/React__default.createElement(Button, _extends$2({
-    "aria-label": tooltip
-  }, props, {
-    "aria-describedby": undefined,
-    ref: ref
-  }))), /*#__PURE__*/React__default.createElement(Tooltip.Content, tooltipContentProps, tooltip));
-});
-ButtonWithTooltip.displayName = 'Button';
-
 const COMPONENT_NAME$3 = 'Tooltip';
 const CLASSNAME$3 = 'redsift-tooltip';
 
@@ -21857,10 +21891,7 @@ BaseTooltip.className = CLASSNAME$3;
 BaseTooltip.displayName = COMPONENT_NAME$3;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
-  Content: TooltipContent,
-  Button: ButtonWithTooltip,
-  IconButton: IconButtonWithTooltip,
-  IconButtonLink: IconButtonWithTooltip
+  Content: TooltipContent
 });
 
 const useTooltipContext = () => {
@@ -21887,7 +21918,7 @@ const StyledGridToolbarFilterSemanticField = styled$3.form`
   }
 `;
 
-const _excluded$e = ["className", "dateFormat", "defaultFilter", "defaultModel", "disablePower", "localeText", "nlpFilterConfig", "onFilterModelChange"];
+const _excluded$e = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
 const COMPONENT_NAME$2 = 'GridToolbarFilterSemanticField';
 const CLASSNAME$2 = 'redsift-datagrid-toolbar-nlp-filter-field';
 const DEFAULT_OPERATORS = {
@@ -21961,16 +21992,16 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
   const fieldRef = ref || useRef();
   const {
       className,
+      nlpFilterConfig,
+      onFilterModelChange,
       dateFormat = 'yyyy-mm-dd',
+      defaultModel = 'gpt-4-1106-preview',
       defaultFilter = {
         items: [],
-        linkOperator: 'and'
+        logicOperator: 'and'
       },
-      defaultModel = 'gpt-4-1106-preview',
       disablePower = false,
-      localeText,
-      nlpFilterConfig,
-      onFilterModelChange
+      localeText
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
   const {
@@ -22120,7 +22151,33 @@ const Toolbar$3 = props => {
   }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
 
-const _excluded$d = ["children", "color", "onClick", "startIcon"];
+const _excluded$d = ["displayName"];
+const muiIconToDSIcon = {
+  ColumnFilteredIcon: mdiFilterVariant,
+  ColumnSelectorIcon: mdiViewColumn,
+  ColumnSortedAscendingIcon: mdiChevronUp,
+  ColumnSortedDescendingIcon: mdiChevronDown,
+  DensityCompactIcon: mdiViewHeadline,
+  DensityStandardIcon: mdiViewSequential,
+  DensityComfortableIcon: mdiViewStream,
+  DetailPanelCollapseIcon: mdiChevronDown,
+  DetailPanelExpandIcon: mdiChevronRight,
+  ExportIcon: mdiTrayArrowDown,
+  OpenFilterButtonIcon: mdiFilterVariant
+};
+const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      displayName
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+  return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
+    ref: ref,
+    size: forwardedProps.fontSize,
+    icon: muiIconToDSIcon[displayName]
+  }));
+});
+
+const _excluded$c = ["children", "color", "onClick", "startIcon"];
 const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$className;
   const {
@@ -22129,7 +22186,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       startIcon
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
   if ((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('redsift-condensed')) {
     return /*#__PURE__*/React__default.createElement(IconButton$2, _extends$2({}, forwardedProps, {
@@ -22155,7 +22212,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
   }), children);
 });
 
-const _excluded$c = ["checked", "indeterminate", "disabled", "onChange"];
+const _excluded$b = ["checked", "indeterminate", "disabled", "onChange"];
 const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       checked,
@@ -22163,7 +22220,7 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
       disabled,
       onChange
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$b);
   return /*#__PURE__*/React__default.createElement(Checkbox, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
     isSelected: checked && !indeterminate,
     isDisabled: disabled,
@@ -22173,32 +22230,6 @@ const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const _excluded$b = ["displayName"];
-const muiIconToDSIcon = {
-  ColumnFilteredIcon: mdiFilterVariant,
-  ColumnSelectorIcon: mdiViewColumn,
-  ColumnSortedAscendingIcon: mdiChevronUp,
-  ColumnSortedDescendingIcon: mdiChevronDown,
-  DensityCompactIcon: mdiViewHeadline,
-  DensityStandardIcon: mdiViewSequential,
-  DensityComfortableIcon: mdiViewStream,
-  DetailPanelCollapseIcon: mdiChevronDown,
-  DetailPanelExpandIcon: mdiChevronRight,
-  ExportIcon: mdiTrayArrowDown,
-  OpenFilterButtonIcon: mdiFilterVariant
-};
-const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      displayName
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$b);
-  return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
-    ref: ref,
-    size: forwardedProps.fontSize,
-    icon: muiIconToDSIcon[displayName]
-  }));
-});
-
 const _excluded$a = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 const PopperRoot = styled$1(BasePopper$1, {
   name: 'MuiPopper',
@@ -22400,86 +22431,6 @@ const BasePopper = /*#__PURE__*/forwardRef((props, ref) => {
   }));
 });
 
-const defaultSxStyle = {
-  '.MuiDataGrid-columnHeaders': {
-    flexDirection: 'column',
-    alignItems: 'normal'
-  },
-  '.MuiDataGrid-selectedRowCount': {
-    margin: 'none'
-  }
-};
-
-/**
- * Component style.
- */
-const StyledDataGrid = styled$3.div`
-  ${_ref => {
-  let {
-    $height
-  } = _ref;
-  return $height ? css`
-          height: ${$height};
-        ` : '';
-}}
-
-  width: 100%;
-
-  .MuiDataGrid-root {
-    font-family: var(--redsift-typography-datagrid-header-font-family);
-    border: none;
-  }
-
-  .MuiDataGrid-row {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-    font-size: var(--redsift-typography-datagrid-cell-font-size);
-    font-weight: var(--redsift-typography-datagrid-cell-font-weight);
-  }
-
-  .MuiDataGrid-columnHeaderTitle {
-    font-family: var(--redsift-typography-datagrid-header-font-family);
-    font-size: var(--redsift-typography-datagrid-header-font-size);
-    font-weight: var(--redsift-typography-datagrid-header-font-weight);
-  }
-
-  .MuiDataGrid-columnHeaders {
-    border-bottom-color: var(--redsift-color-primary-n);
-  }
-
-  .MuiDataGrid-columnSeparator {
-    display: none;
-  }
-
-  .MuiTablePagination-root {
-    .MuiTablePagination-selectLabel {
-      font-family: var(--redsift-typography-datagrid-header-font-family);
-    }
-    .MuiTablePagination-displayedRows {
-      font-family: var(--redsift-typography-datagrid-cell-font-family);
-    }
-
-    .MuiInputBase-root {
-      font-family: var(--redsift-typography-datagrid-cell-font-family);
-    }
-  }
-
-  .Mui-checked {
-    color: var(--redsift-color-primary-n);
-  }
-
-  .MuiDataGrid-rowCount {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-  }
-
-  .MuiTablePagination-displayedRows {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-  }
-
-  .MuiBadge-standard {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
-  }
-`;
-
 function Ripple(props) {
   const {
     className,
@@ -24638,163 +24589,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const ControlledPagination$1 = _ref => {
-  let {
-    apiRef,
-    selectionStatus,
-    setSelectionStatusType,
-    selectionStatusType,
-    displaySelection,
-    displayPagination,
-    paginationModel,
-    onPaginationModelChange,
-    pageSizeOptions,
-    displayRowsPerPage,
-    paginationProps,
-    rowCount
-  } = _ref;
-  const totalNumberOfRowsInTable = rowCount;
-  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
-  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
-  return /*#__PURE__*/React__default.createElement(Flexbox, {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: "7px"
-  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatusType === 'table' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, "All selectable rows in the table are selected.", ' ', /*#__PURE__*/React__default.createElement(LinkButton, {
-    onClick: () => {
-      setSelectionStatusType('none');
-      apiRef.current.selectRows([], false, true);
-    }
-  }, "Clear selection.")) : selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, pageRowsLabel, ' ', /*#__PURE__*/React__default.createElement(LinkButton, {
-    onClick: () => {
-      setSelectionStatusType('table');
-    }
-  }, "Select all selectable rows in the table.")) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
-    component: "div",
-    count: totalNumberOfRowsInTable,
-    page: paginationModel.page,
-    onPageChange: (event, page) => onPaginationModelChange({
-      page,
-      pageSize: paginationModel.pageSize
-    }),
-    rowsPerPage: paginationModel.pageSize,
-    onRowsPerPageChange: event => onPaginationModelChange({
-      page: paginationModel.page,
-      pageSize: parseInt(event.target.value, 10)
-    }),
-    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
-  }, paginationProps)) : null);
-};
-
-const onServerSideSelectionStatusChange = _ref => {
-  let {
-    newSelectionModel,
-    apiRef,
-    selectionStatus,
-    selectionStatusType,
-    setSelectionStatusType,
-    isRowSelectable,
-    page,
-    pageSize
-  } = _ref;
-  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref2 => {
-    let {
-      model
-    } = _ref2;
-    return isRowSelectable({
-      row: model
-    });
-  }).map(_ref3 => {
-    let {
-      id
-    } = _ref3;
-    return id;
-  }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
-  const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-  const numberOfSelectedRows = newSelectionModel.length;
-  const selectedRowsInPage = selectableRowsInPage.filter(rowId => newSelectionModel.includes(rowId));
-  const numberOfSelectedRowsInPage = selectedRowsInPage.length;
-  const isSamePage = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.page) == page;
-  const isSamePageSize = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.pageSize) == pageSize;
-  if (selectionStatusType === 'table') {
-    // if we just move across page or pageSize
-    if (!isSamePage || !isSamePageSize) {
-      selectionStatus.current = {
-        type: 'table',
-        numberOfSelectedRows,
-        numberOfSelectedRowsInPage,
-        page,
-        pageSize
-      };
-    }
-    // if we selected all selectable rows (as effect of the previous if condition)
-    else if (numberOfSelectedRows > 0) {
-      setSelectionStatusType('none');
-      selectionStatus.current = {
-        type: 'none',
-        numberOfSelectedRows,
-        numberOfSelectedRowsInPage,
-        page,
-        pageSize
-      };
-      apiRef.current.selectRows([], false, true);
-    }
-    return;
-  }
-  if (selectionStatusType === 'page' && isSamePage && isSamePageSize && numberOfSelectedRowsInPage === numberOfSelectableRowsInPage) {
-    setSelectionStatusType('none');
-    selectionStatus.current = {
-      type: 'none',
-      numberOfSelectedRows,
-      numberOfSelectedRowsInPage,
-      page,
-      pageSize
-    };
-    setTimeout(() => {
-      apiRef.current.selectRows(selectedRowsInPage, false, false);
-    }, 0);
-    return;
-  }
-  if (numberOfSelectedRowsInPage === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage != 0) {
-    setSelectionStatusType('page');
-    selectionStatus.current = {
-      type: 'page',
-      numberOfSelectedRows,
-      numberOfSelectedRowsInPage,
-      page,
-      pageSize
-    };
-    return;
-  }
-  if (numberOfSelectedRows > 0) {
-    setSelectionStatusType('other');
-    selectionStatus.current = {
-      type: 'other',
-      numberOfSelectedRows,
-      numberOfSelectedRowsInPage,
-      page,
-      pageSize
-    };
-    return;
-  }
-  setSelectionStatusType('none');
-  selectionStatus.current = {
-    type: 'none',
-    numberOfSelectedRows,
-    numberOfSelectedRowsInPage,
-    page,
-    pageSize
-  };
-  return;
-};
-
+const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "ControlledPagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"],
+  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "rowSelectionModel", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "paginationMode", "rowCount"];
+const COMPONENT_NAME$1 = 'DataGrid';
+const CLASSNAME$1 = 'redsift-datagrid';
 const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
   return isRowSelectable && typeof isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref => {
     let {
@@ -24810,8 +24608,7 @@ const getSelectableRowsInTable = (apiRef, isRowSelectable) => {
     return id;
   }) : gridFilteredSortedRowIdsSelector(apiRef);
 };
-
-const ControlledPagination = _ref => {
+const ControlledPagination = _ref3 => {
   let {
     displaySelection = false,
     displayRowsPerPage = false,
@@ -24823,7 +24620,7 @@ const ControlledPagination = _ref => {
     pageSizeOptions,
     isRowSelectable,
     paginationProps
-  } = _ref;
+  } = _ref3;
   const filteredRowsInTable = getSelectableRowsInTable(apiRef);
   const selectableRowsInTable = getSelectableRowsInTable(apiRef, isRowSelectable);
   const numberOfFilteredRowsInTable = filteredRowsInTable.length;
@@ -24863,22 +24660,56 @@ const ControlledPagination = _ref => {
     rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
   }, paginationProps)) : null);
 };
-
-const _excluded$1 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "selectionStatusType", "setSelectionStatusType", "apiRef", "isRowSelectable", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "paginationProps", "paginationMode", "rowCount"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "isPreviousData", "isRowSelectable", "license", "onFilterModelChange", "paginationModel", "onPaginationModelChange", "pageSizeOptions", "rowSelectionModel", "onRowSelectionModelChange", "onSelectionStatusChange", "pagination", "paginationMode", "paginationPlacement", "paginationProps", "rowCount", "rows", "sx", "theme"];
-const COMPONENT_NAME$1 = 'DataGrid';
-const CLASSNAME$1 = 'redsift-datagrid';
-const Toolbar = _ref => {
+const ServerSideControlledPagination = _ref4 => {
+  let {
+    selectionStatus,
+    displaySelection,
+    displayPagination,
+    paginationModel,
+    onPaginationModelChange,
+    pageSizeOptions,
+    displayRowsPerPage,
+    paginationProps,
+    rowCount
+  } = _ref4;
+  const totalNumberOfRowsInTable = rowCount;
+  const totalRowsLabel = `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`;
+  const pageRowsLabel = `All ${selectionStatus.numberOfSelectedRowsInPage} selectable rows on this page are selected${selectionStatus.numberOfSelectedRows != selectionStatus.numberOfSelectedRowsInPage ? ` (${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected in total)` : ''}.`;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "7px"
+  }, displaySelection ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, selectionStatus.type === 'page' && selectionStatus.numberOfSelectedRowsInPage != 0 ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, pageRowsLabel) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, totalRowsLabel) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
+    component: "div",
+    count: totalNumberOfRowsInTable,
+    page: paginationModel.page,
+    onPageChange: (event, page) => onPaginationModelChange({
+      page,
+      pageSize: paginationModel.pageSize
+    }),
+    rowsPerPage: paginationModel.pageSize,
+    onRowsPerPageChange: event => onPaginationModelChange({
+      page: paginationModel.page,
+      pageSize: parseInt(event.target.value, 10)
+    }),
+    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions : []
+  }, paginationProps)) : null);
+};
+const Toolbar = _ref5 => {
   let {
       hideToolbar,
       RenderedToolbar,
       filterModel,
       onFilterModelChange,
       pagination,
+      ControlledPagination,
       paginationPlacement,
       selectionStatus,
-      selectionStatusType,
-      setSelectionStatusType,
       apiRef,
       isRowSelectable,
       paginationModel,
@@ -24887,19 +24718,16 @@ const Toolbar = _ref => {
       paginationProps,
       paginationMode = 'client',
       rowCount
-    } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$1);
+    } = _ref5,
+    forwardedProps = _objectWithoutProperties(_ref5, _excluded$1);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends$2({}, forwardedProps, {
     filterModel: filterModel,
     onFilterModelChange: onFilterModelChange
-  })) : null, pagination ? paginationMode === 'server' ? /*#__PURE__*/React__default.createElement(ControlledPagination$1, {
-    apiRef: apiRef,
+  })) : null, pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
     displaySelection: true,
     displayRowsPerPage: false,
     displayPagination: ['top', 'both'].includes(paginationPlacement),
     selectionStatus: selectionStatus.current,
-    setSelectionStatusType: setSelectionStatusType,
-    selectionStatusType: selectionStatusType,
     paginationModel: paginationModel,
     onPaginationModelChange: onPaginationModelChange,
     pageSizeOptions: pageSizeOptions,
@@ -24918,8 +24746,63 @@ const Toolbar = _ref => {
     paginationProps: paginationProps
   }) : null);
 };
+const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
+  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
+    let {
+      model
+    } = _ref6;
+    return isRowSelectable({
+      row: model
+    });
+  }).map(_ref7 => {
+    let {
+      id
+    } = _ref7;
+    return id;
+  }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+  const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+  const numberOfSelectedRows = newSelectionModel.length;
+  const selectedRowsInPage = selectableRowsInPage.filter(rowId => newSelectionModel.includes(rowId));
+  const numberOfSelectedRowsInPage = selectedRowsInPage.length;
+  const isSamePage = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.page) == page;
+  const isSamePageSize = (selectionStatus === null || selectionStatus === void 0 ? void 0 : selectionStatus.current.pageSize) == pageSize;
+
+  // if previous status is `page`,
+  // if page and pageSize didn't change
+  // and all the rows are selected, deselect all row
+  if (selectionStatus.current.type === 'page' && isSamePage && isSamePageSize && numberOfSelectedRowsInPage === numberOfSelectableRowsInPage) {
+    setTimeout(() => {
+      apiRef.current.selectRows(selectedRowsInPage, false, false);
+    }, 0);
+  }
+  if (numberOfSelectedRowsInPage === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage != 0) {
+    selectionStatus.current = {
+      type: 'page',
+      numberOfSelectedRows,
+      numberOfSelectedRowsInPage,
+      page,
+      pageSize
+    };
+  } else if (numberOfSelectedRows > 0) {
+    selectionStatus.current = {
+      type: 'other',
+      numberOfSelectedRows,
+      numberOfSelectedRowsInPage,
+      page,
+      pageSize
+    };
+  } else {
+    selectionStatus.current = {
+      type: 'none',
+      numberOfSelectedRows,
+      numberOfSelectedRowsInPage,
+      page,
+      pageSize
+    };
+  }
+};
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _ref2, _ref3, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref4, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
+  var _ref8, _ref9, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _pageSizeOptions$, _ref10, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
@@ -24931,24 +24814,22 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       height: propsHeight,
       hideToolbar,
       initialState,
-      isPreviousData,
       isRowSelectable,
       license = process.env.MUI_LICENSE_KEY,
       onFilterModelChange: propsOnFilterModelChange,
+      rowSelectionModel: propsSelectionModel,
       paginationModel: propsPaginationModel,
       onPaginationModelChange: propsOnPaginationModelChange,
-      pageSizeOptions,
-      rowSelectionModel: propsRowSelectionModel,
       onRowSelectionModelChange,
-      onSelectionStatusChange: propsOnSelectionStatusChange,
       pagination,
-      paginationMode = 'client',
       paginationPlacement = 'both',
       paginationProps,
-      rowCount,
       rows,
+      pageSizeOptions,
       sx,
-      theme: propsTheme
+      theme: propsTheme,
+      paginationMode = 'client',
+      rowCount
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2);
   const theme = useTheme$4(propsTheme);
@@ -24968,13 +24849,13 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setFilterModel(model);
     }
   };
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   useEffect(() => {
-    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
-  }, [propsRowSelectionModel]);
+    setRowSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
   const [paginationModel, setPaginationModel] = useState({
-    pageSize: (_ref2 = (_ref3 = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _ref3 !== void 0 ? _ref3 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref2 !== void 0 ? _ref2 : 100,
-    page: (_ref4 = (_initialState$paginat4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat5 = initialState.pagination) === null || _initialState$paginat5 === void 0 ? void 0 : (_initialState$paginat6 = _initialState$paginat5.paginationModel) === null || _initialState$paginat6 === void 0 ? void 0 : _initialState$paginat6.page) !== null && _initialState$paginat4 !== void 0 ? _initialState$paginat4 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref4 !== void 0 ? _ref4 : 0
+    pageSize: (_ref8 = (_ref9 = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _ref9 !== void 0 ? _ref9 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref8 !== void 0 ? _ref8 : 100,
+    page: (_ref10 = (_initialState$paginat4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat5 = initialState.pagination) === null || _initialState$paginat5 === void 0 ? void 0 : (_initialState$paginat6 = _initialState$paginat5.paginationModel) === null || _initialState$paginat6 === void 0 ? void 0 : _initialState$paginat6.page) !== null && _initialState$paginat4 !== void 0 ? _initialState$paginat4 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref10 !== void 0 ? _ref10 : 0
   });
   const onPaginationModelChange = model => {
     if (propsOnPaginationModelChange) {
@@ -24988,48 +24869,24 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       setPaginationModel(propsPaginationModel);
     }
   }, [propsPaginationModel]);
-  const [selectionStatusType, setSelectionStatusType] = useState('none');
   const selectionStatus = useRef({
-    type: selectionStatusType,
+    type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectedRowsInPage: 0,
     page: paginationModel.page,
     pageSize: paginationModel.pageSize
   });
-  useEffect(() => {
-    if (propsOnSelectionStatusChange) {
-      propsOnSelectionStatusChange(selectionStatusType);
-    }
-  }, [selectionStatusType]);
 
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
-    if (paginationMode === 'server') {
-      onServerSideSelectionStatusChange({
-        newSelectionModel: Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel],
-        apiRef,
-        selectionStatus,
-        selectionStatusType,
-        setSelectionStatusType,
-        isRowSelectable,
-        page: paginationModel.page,
-        pageSize: paginationModel.pageSize
-      });
+    if (paginationMode == 'server') {
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
-  useEffect(() => {
-    if (paginationMode === 'server' && selectionStatusType === 'table' && !isPreviousData) {
-      const selectableRowsInPage = getSelectableRowsInTable(apiRef, isRowSelectable);
-      setTimeout(() => {
-        apiRef.current.selectRows(selectableRowsInPage, false, true);
-      }, 0);
-    }
-  }, [isPreviousData]);
   if (!Array.isArray(rows)) {
     return null;
   }
-  const isServerTableSelection = paginationMode === 'server' && selectionStatusType === 'table';
   const muiTheme = useMemo(() => createTheme({
     palette: {
       mode: theme,
@@ -25096,7 +24953,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }, props))
     }, slots), {}, {
       toolbar: Toolbar,
-      pagination: props => pagination ? paginationMode === 'server' ? /*#__PURE__*/React__default.createElement(ControlledPagination$1, _extends$2({}, props, {
+      pagination: props => pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
         displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -25129,10 +24986,9 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         filterModel,
         onFilterModelChange,
         pagination,
+        ControlledPagination: paginationMode == 'server' ? ServerSideControlledPagination : ControlledPagination,
         paginationPlacement,
         selectionStatus,
-        selectionStatusType,
-        setSelectionStatusType,
         apiRef,
         isRowSelectable,
         paginationModel,
@@ -25145,43 +25001,43 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     }),
     filterModel: filterModel,
     initialState: initialState,
-    isRowSelectable: !isServerTableSelection ? isRowSelectable : () => false,
+    isRowSelectable: isRowSelectable,
     onFilterModelChange: onFilterModelChange,
     pagination: pagination,
     paginationMode: paginationMode,
-    keepNonExistentRowsSelected: paginationMode === 'server',
+    keepNonExistentRowsSelected: paginationMode == 'server',
     rows: rows,
+    pageSizeOptions: pageSizeOptions,
     paginationModel: paginationModel,
     onPaginationModelChange: onPaginationModelChange,
-    pageSizeOptions: pageSizeOptions,
-    rowSelectionModel: isServerTableSelection ? getSelectableRowsInTable(apiRef, isRowSelectable) : rowSelectionModel,
+    rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref5 => {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref11 => {
           let {
             model
-          } = _ref5;
+          } = _ref11;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref6 => {
+        }).map(_ref12 => {
           let {
             id
-          } = _ref6;
+          } = _ref12;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref13 => {
           let {
             model
-          } = _ref7;
+          } = _ref13;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref8 => {
+        }).map(_ref14 => {
           let {
             id
-          } = _ref8;
+          } = _ref14;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -25192,25 +25048,21 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           }, 0);
         }
         if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-          setSelectionStatusType('page');
           selectionStatus.current = {
             type: 'page',
             numberOfSelectedRows
           };
         } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-          setSelectionStatusType('table');
           selectionStatus.current = {
             type: 'table',
             numberOfSelectedRows
           };
         } else if (numberOfSelectedRows > 0) {
-          setSelectionStatusType('other');
           selectionStatus.current = {
             type: 'other',
             numberOfSelectedRows
           };
         } else {
-          setSelectionStatusType('none');
           selectionStatus.current = {
             type: 'none',
             numberOfSelectedRows
@@ -25219,7 +25071,15 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }
       onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
-    sx: _objectSpread2(_objectSpread2({}, sx), defaultSxStyle)
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      '.MuiDataGrid-columnHeaders': {
+        flexDirection: 'column',
+        alignItems: 'normal'
+      },
+      '.MuiDataGrid-selectedRowCount': {
+        margin: 'none'
+      }
+    })
   })))));
 });
 DataGrid.className = CLASSNAME$1;