@redsift/table 11.0.0-muiv5-alpha.1 → 11.0.0-muiv5-alpha.3

package/index.js

@@ -1,8 +1,8 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLinkOperator, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, GRID_CHECKBOX_SELECTION_COL_DEF, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLinkOperator, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, useGridApiRef, DataGridPro, GRID_CHECKBOX_SELECTION_COL_DEF } 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, partitionComponents, isComponent, Flexbox, TextField as TextField$2, Button, Switch, Text, ButtonsColorPalette, IconButton as IconButton$2, Checkbox, LinkButton, ThemeProvider as ThemeProvider$4, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, Shield } from '@redsift/design-system';
+import React__default, { Children, isValidElement, cloneElement, forwardRef, useLayoutEffect, useEffect, useRef, useContext, useState, useCallback, createElement, useMemo } from 'react';
+import { Icon, ButtonsColorPalette, IconButton as IconButton$2, Button, Checkbox, TextField as TextField$2, baseContainer, Theme, AppContainerContext, useTheme as useTheme$4, useId as useId$2, partitionComponents, isComponent, Flexbox, Switch, Text, LinkButton, ThemeProvider as ThemeProvider$4, 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';
@@ -3624,7 +3624,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const _excluded$R = ["values", "unit", "step"];
+const _excluded$S = ["values", "unit", "step"];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -3659,7 +3659,7 @@ function createBreakpoints(breakpoints) {
       unit = 'px',
       step = 5
     } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$R);
+    other = _objectWithoutPropertiesLoose(breakpoints, _excluded$S);
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
@@ -4688,7 +4688,7 @@ const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
 var styleFunctionSx$1 = styleFunctionSx;
 
-const _excluded$Q = ["breakpoints", "palette", "spacing", "shape"];
+const _excluded$R = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme$1(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -4696,7 +4696,7 @@ function createTheme$1(options = {}, ...args) {
       spacing: spacingInput,
       shape: shapeInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$Q);
+    other = _objectWithoutPropertiesLoose(options, _excluded$R);
   const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
@@ -4764,7 +4764,7 @@ process.env.NODE_ENV !== "production" ? GlobalStyles$1.propTypes /* remove-propt
   themeId: PropTypes.string
 } : void 0;
 
-const _excluded$P = ["sx"];
+const _excluded$Q = ["sx"];
 const splitProps = props => {
   var _props$theme$unstable, _props$theme;
   const result = {
@@ -4785,7 +4785,7 @@ function extendSxProp(props) {
   const {
       sx: inSx
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$P);
+    other = _objectWithoutPropertiesLoose(props, _excluded$Q);
   const {
     systemProps,
     otherProps
@@ -4811,7 +4811,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$O = ["className", "component"];
+const _excluded$P = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -4829,7 +4829,7 @@ function createBox(options = {}) {
         className,
         component = 'div'
       } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$O);
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$P);
     return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends$1({
       as: component,
       ref: ref,
@@ -4840,7 +4840,7 @@ function createBox(options = {}) {
   return Box;
 }
 
-const _excluded$N = ["variant"];
+const _excluded$O = ["variant"];
 function isEmpty$3(string) {
   return string.length === 0;
 }
@@ -4854,7 +4854,7 @@ function propsToClassKey(props) {
   const {
       variant
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$N);
+    other = _objectWithoutPropertiesLoose(props, _excluded$O);
   let classKey = variant || '';
   Object.keys(other).sort().forEach(key => {
     if (key === 'color') {
@@ -4866,7 +4866,7 @@ function propsToClassKey(props) {
   return classKey;
 }
 
-const _excluded$M = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded$N = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty$2(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -4961,7 +4961,7 @@ function createStyled(input = {}) {
         skipSx: inputSkipSx,
         overridesResolver
       } = inputOptions,
-      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$M);
+      options = _objectWithoutPropertiesLoose(inputOptions, _excluded$N);
 
     // 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;
@@ -5638,7 +5638,7 @@ const green = {
 };
 var green$1 = green;
 
-const _excluded$L = ["mode", "contrastThreshold", "tonalOffset"];
+const _excluded$M = ["mode", "contrastThreshold", "tonalOffset"];
 const light = {
   // The colors used to style the text.
   text: {
@@ -5807,7 +5807,7 @@ function createPalette(palette) {
       contrastThreshold = 3,
       tonalOffset = 0.2
     } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded$L);
+    other = _objectWithoutPropertiesLoose(palette, _excluded$M);
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -5931,7 +5931,7 @@ const theme2 = createTheme({ palette: {
   return paletteOutput;
 }
 
-const _excluded$K = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+const _excluded$L = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
 function round$2(value) {
   return Math.round(value * 1e5) / 1e5;
 }
@@ -5962,7 +5962,7 @@ function createTypography(palette, typography) {
       allVariants,
       pxToRem: pxToRem2
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$L);
   if (process.env.NODE_ENV !== 'production') {
     if (typeof fontSize !== 'number') {
       console.error('MUI: `fontSize` is required to be a number.');
@@ -6029,7 +6029,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$J = ["duration", "easing", "delay"];
+const _excluded$K = ["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 = {
@@ -6080,7 +6080,7 @@ function createTransitions(inputTransitions) {
         easing: easingOption = mergedEasing.easeInOut,
         delay = 0
       } = options,
-      other = _objectWithoutPropertiesLoose(options, _excluded$J);
+      other = _objectWithoutPropertiesLoose(options, _excluded$K);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
       // IE11 support, replace with Number.isNaN
@@ -6127,7 +6127,7 @@ const zIndex = {
 };
 var zIndex$1 = zIndex;
 
-const _excluded$I = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
+const _excluded$J = ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"];
 function createTheme(options = {}, ...args) {
   const {
       mixins: mixinsInput = {},
@@ -6135,7 +6135,7 @@ function createTheme(options = {}, ...args) {
       transitions: transitionsInput = {},
       typography: typographyInput = {}
     } = options,
-    other = _objectWithoutPropertiesLoose(options, _excluded$I);
+    other = _objectWithoutPropertiesLoose(options, _excluded$J);
   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));
@@ -6226,12 +6226,12 @@ const styled = createStyled({
 });
 var styled$1 = styled;
 
-const _excluded$H = ["theme"];
+const _excluded$I = ["theme"];
 function ThemeProvider$1(_ref) {
   let {
       theme: themeInput
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
   const scopedTheme = themeInput[THEME_ID];
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, _extends$1({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
@@ -6455,7 +6455,7 @@ function mergeSlotProps(parameters) {
   };
 }
 
-const _excluded$G = ["elementType", "externalSlotProps", "ownerState"];
+const _excluded$H = ["elementType", "externalSlotProps", "ownerState"];
 /**
  * @ignore - do not document.
  * Builds the props to be passed into the slot of an unstyled component.
@@ -6471,7 +6471,7 @@ function useSlotProps(parameters) {
       externalSlotProps,
       ownerState
     } = parameters,
-    rest = _objectWithoutPropertiesLoose(parameters, _excluded$G);
+    rest = _objectWithoutPropertiesLoose(parameters, _excluded$H);
   const resolvedComponentsProps = resolveComponentProps(externalSlotProps, ownerState);
   const {
     props: mergedProps,
@@ -8687,8 +8687,8 @@ function getPopperUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopper', ['root']);
 
-const _excluded$F = ["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"];
+const _excluded$G = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
+  _excluded2$2 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
 function flipPlacement(placement, direction) {
   if (direction === 'ltr') {
     return placement;
@@ -8740,7 +8740,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$F);
+    other = _objectWithoutPropertiesLoose(props, _excluded$G);
   const tooltipRef = React.useRef(null);
   const ownRef = useForkRef(tooltipRef, forwardedRef);
   const popperRef = React.useRef(null);
@@ -8872,7 +8872,7 @@ const Popper$2 = /*#__PURE__*/React.forwardRef(function Popper(props, forwardedR
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2$3);
+    other = _objectWithoutPropertiesLoose(props, _excluded2$2);
   const [exited, setExited] = React.useState(true);
   const handleEnter = () => {
     setExited(false);
@@ -9267,7 +9267,7 @@ function getModalUtilityClass(slot) {
 }
 generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
 
-const _excluded$E = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+const _excluded$F = ["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,
@@ -9336,7 +9336,7 @@ const Modal$2 = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef
       slotProps = {},
       slots = {}
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$E);
+    other = _objectWithoutPropertiesLoose(props, _excluded$F);
   // TODO: `modal`` must change its type in this file to match the type of methods
   // provided by `ModalManager`
   const manager = managerProp;
@@ -9626,7 +9626,7 @@ process.env.NODE_ENV !== "production" ? Modal$2.propTypes /* remove-proptypes */
 } : void 0;
 var ModalUnstyled = Modal$2;
 
-const _excluded$D = ["onChange", "maxRows", "minRows", "style", "value"];
+const _excluded$E = ["onChange", "maxRows", "minRows", "style", "value"];
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
@@ -9668,7 +9668,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       style,
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$D);
+    other = _objectWithoutPropertiesLoose(props, _excluded$E);
   const {
     current: isControlled
   } = React.useRef(value != null);
@@ -9962,7 +9962,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$C = ["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$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 rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -10193,7 +10193,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       type = 'text',
       value: valueProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$C);
+    other = _objectWithoutPropertiesLoose(props, _excluded$D);
   const value = inputPropsProp.value != null ? inputPropsProp.value : valueProp;
   const {
     current: isControlled
@@ -10655,7 +10655,7 @@ function getInputUtilityClass(slot) {
 const inputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
 var inputClasses$1 = inputClasses;
 
-const _excluded$B = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$C = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$m = ownerState => {
   const {
     classes,
@@ -10768,7 +10768,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$B);
+    other = _objectWithoutPropertiesLoose(props, _excluded$C);
   const classes = useUtilityClasses$m(props);
   const ownerState = {
     disableUnderline
@@ -10991,7 +10991,7 @@ function getFilledInputUtilityClass(slot) {
 const filledInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
 var filledInputClasses$1 = filledInputClasses;
 
-const _excluded$A = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
+const _excluded$B = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 const useUtilityClasses$l = ownerState => {
   const {
     classes,
@@ -11175,7 +11175,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$A);
+    other = _objectWithoutPropertiesLoose(props, _excluded$B);
   const ownerState = _extends$1({}, props, {
     fullWidth,
     inputComponent,
@@ -11406,7 +11406,7 @@ FilledInput.muiName = 'Input';
 var FilledInput$1 = FilledInput;
 
 var _span$2;
-const _excluded$z = ["children", "classes", "className", "label", "notched"];
+const _excluded$A = ["children", "classes", "className", "label", "notched"];
 const NotchedOutlineRoot$1 = styled$1('fieldset')({
   textAlign: 'left',
   position: 'absolute',
@@ -11479,7 +11479,7 @@ function NotchedOutline(props) {
       label,
       notched
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$z);
+    other = _objectWithoutPropertiesLoose(props, _excluded$A);
   const withLabel = label != null && label !== '';
   const ownerState = _extends$1({}, props, {
     notched,
@@ -11536,7 +11536,7 @@ function getOutlinedInputUtilityClass(slot) {
 const outlinedInputClasses = _extends$1({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 var outlinedInputClasses$1 = outlinedInputClasses;
 
-const _excluded$y = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
+const _excluded$z = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "slots", "type"];
 const useUtilityClasses$k = ownerState => {
   const {
     classes
@@ -11655,7 +11655,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
       slots = {},
       type = 'text'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$y);
+    other = _objectWithoutPropertiesLoose(props, _excluded$z);
   const classes = useUtilityClasses$k(props);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -11876,7 +11876,7 @@ function getFormLabelUtilityClasses(slot) {
 const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
 var formLabelClasses$1 = formLabelClasses;
 
-const _excluded$x = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const _excluded$y = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 const useUtilityClasses$j = ownerState => {
   const {
     classes,
@@ -11941,7 +11941,7 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
       className,
       component = 'label'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$x);
+    other = _objectWithoutPropertiesLoose(props, _excluded$y);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12032,7 +12032,7 @@ function getInputLabelUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
 
-const _excluded$w = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const _excluded$x = ["disableAnimation", "margin", "shrink", "variant", "className"];
 const useUtilityClasses$i = ownerState => {
   const {
     classes,
@@ -12134,7 +12134,7 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
       shrink: shrinkProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$w);
+    other = _objectWithoutPropertiesLoose(props, _excluded$x);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -12237,7 +12237,7 @@ function getFormControlUtilityClasses(slot) {
 }
 generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
 
-const _excluded$v = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const _excluded$w = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 const useUtilityClasses$h = ownerState => {
   const {
     classes,
@@ -12323,7 +12323,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       size = 'medium',
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$v);
+    other = _objectWithoutPropertiesLoose(props, _excluded$w);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -12519,7 +12519,7 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 var formHelperTextClasses$1 = formHelperTextClasses;
 
 var _span$1;
-const _excluded$u = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const _excluded$v = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 const useUtilityClasses$g = ownerState => {
   const {
     classes,
@@ -12578,7 +12578,7 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
       className,
       component = 'p'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$u);
+    other = _objectWithoutPropertiesLoose(props, _excluded$v);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
@@ -12684,7 +12684,7 @@ function getListUtilityClass(slot) {
 }
 generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
-const _excluded$t = ["children", "className", "component", "dense", "disablePadding", "subheader"];
+const _excluded$u = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 const useUtilityClasses$f = ownerState => {
   const {
     classes,
@@ -12732,7 +12732,7 @@ const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
       disablePadding = false,
       subheader
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$t);
+    other = _objectWithoutPropertiesLoose(props, _excluded$u);
   const context = React.useMemo(() => ({
     dense
   }), [dense]);
@@ -12799,7 +12799,7 @@ process.env.NODE_ENV !== "production" ? List.propTypes /* remove-proptypes */ =
 } : void 0;
 var List$1 = List;
 
-const _excluded$s = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
+const _excluded$t = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -12881,7 +12881,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
       onKeyDown,
       variant = 'selectedMenu'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$s);
+    other = _objectWithoutPropertiesLoose(props, _excluded$t);
   const listRef = React.useRef(null);
   const textCriteriaRef = React.useRef({
     keys: [],
@@ -14071,7 +14071,7 @@ function getTransitionProps(props, options) {
   };
 }
 
-const _excluded$r = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$s = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 function getScale$1(value) {
   return `scale(${value}, ${value ** 2})`;
 }
@@ -14115,7 +14115,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$r);
+    other = _objectWithoutPropertiesLoose(props, _excluded$s);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -14319,7 +14319,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
 Grow.muiSupportAuto = true;
 var Grow$1 = Grow;
 
-const _excluded$q = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
+const _excluded$r = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 const styles = {
   entering: {
     opacity: 1
@@ -14356,7 +14356,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$q);
+    other = _objectWithoutPropertiesLoose(props, _excluded$r);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -14517,7 +14517,7 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
-const _excluded$p = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
+const _excluded$q = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 const useUtilityClasses$e = ownerState => {
   const {
     classes,
@@ -14572,7 +14572,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
       TransitionComponent = Fade$1,
       transitionDuration
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$p);
+    other = _objectWithoutPropertiesLoose(props, _excluded$q);
   const ownerState = _extends$1({}, props, {
     component,
     invisible
@@ -14693,7 +14693,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
 } : void 0;
 var Backdrop$1 = Backdrop;
 
-const _excluded$o = ["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$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 ModalRoot = styled$1('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -14772,7 +14772,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       // eslint-disable-next-line react/prop-types
       theme
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$o);
+    other = _objectWithoutPropertiesLoose(props, _excluded$p);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
     container,
@@ -14996,7 +14996,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$n = ["className", "component", "elevation", "square", "variant"];
+const _excluded$o = ["className", "component", "elevation", "square", "variant"];
 const useUtilityClasses$d = ownerState => {
   const {
     square,
@@ -15051,7 +15051,7 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
       square = false,
       variant = 'elevation'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$n);
+    other = _objectWithoutPropertiesLoose(props, _excluded$o);
   const ownerState = _extends$1({}, props, {
     component,
     elevation,
@@ -15132,8 +15132,8 @@ function getPopoverUtilityClass(slot) {
 }
 generateUtilityClasses('MuiPopover', ['root', 'paper']);
 
-const _excluded$m = ["onEntering"],
-  _excluded2$2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+const _excluded$n = ["onEntering"],
+  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
   _excluded3 = ["slotProps"];
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -15229,8 +15229,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
         onEntering
       } = {}
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$m),
-    other = _objectWithoutPropertiesLoose(props, _excluded2$2);
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$n),
+    other = _objectWithoutPropertiesLoose(props, _excluded2$1);
   const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React.useRef();
   const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
@@ -15635,8 +15635,8 @@ function getMenuUtilityClass(slot) {
 }
 generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
 
-const _excluded$l = ["onEntering"],
-  _excluded2$1 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
+const _excluded$m = ["onEntering"],
+  _excluded2 = ["autoFocus", "children", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant"];
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -15702,8 +15702,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       } = {},
       variant = 'selectedMenu'
     } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$l),
-    other = _objectWithoutPropertiesLoose(props, _excluded2$1);
+    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded$m),
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
   const ownerState = _extends$1({}, props, {
@@ -15892,7 +15892,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$k = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
+const _excluded$l = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 const useUtilityClasses$a = ownerState => {
   const {
     classes,
@@ -16021,7 +16021,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
       inputRef,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$k);
+    other = _objectWithoutPropertiesLoose(props, _excluded$l);
   const ownerState = _extends$1({}, props, {
     disabled,
     variant,
@@ -16106,7 +16106,7 @@ const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple',
 var selectClasses$1 = selectClasses;
 
 var _span;
-const _excluded$j = ["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$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 SelectSelect = styled$1('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -16228,7 +16228,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       value: valueProp,
       variant = 'standard'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$j);
+    other = _objectWithoutPropertiesLoose(props, _excluded$k);
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -16739,7 +16739,7 @@ function getSvgIconUtilityClass(slot) {
 }
 generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
-const _excluded$i = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
+const _excluded$j = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 const useUtilityClasses$8 = ownerState => {
   const {
     color,
@@ -16805,7 +16805,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
       titleAccess,
       viewBox = '0 0 24 24'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$i);
+    other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const ownerState = _extends$1({}, props, {
     color,
     component,
@@ -16931,7 +16931,7 @@ var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path"
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
-const _excluded$h = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
+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 useUtilityClasses$7 = ownerState => {
   const {
     classes
@@ -16975,7 +16975,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps,
       variant: variantProp = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$h);
+    other = _objectWithoutPropertiesLoose(props, _excluded$i);
   const inputComponent = native ? NativeSelectInput$1 : SelectInput$1;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -17198,7 +17198,7 @@ function getTextFieldUtilityClass(slot) {
 }
 generateUtilityClasses('MuiTextField', ['root']);
 
-const _excluded$g = ["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$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 variantComponent = {
   standard: Input$1,
   filled: FilledInput$1,
@@ -17291,7 +17291,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
       value,
       variant = 'outlined'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$g);
+    other = _objectWithoutPropertiesLoose(props, _excluded$h);
   const ownerState = _extends$1({}, props, {
     autoFocus,
     color,
@@ -18084,7 +18084,7 @@ const listOperators = ['containsAnyOf', 'endsWithAnyOf', 'isAnyOf', 'isNotAnyOf'
 const isValueValid = (value, columnField, columns, operatorValue) => {
   var _column$type;
   // every field accepts undefined as value for default
-  if (value === undefined) {
+  if (value === undefined || value === '') {
     return true;
   }
 
@@ -18128,6 +18128,8 @@ const isValueValid = (value, columnField, columns, operatorValue) => {
   return false;
 };
 
+/** FILTERS */
+
 // example:
 // unicodeDomain[contains]=a&unicodeDomain[contains]=dsa&logicOperator=and&tab=ignored
 const getFilterModelFromString = (searchString, columns) => {
@@ -18140,7 +18142,7 @@ const getFilterModelFromString = (searchString, columns) => {
   let linkOperator = GridLinkOperator.And;
   const searchParams = new URLSearchParams();
   for (const [key, value] of new URLSearchParams(searchString)) {
-    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility'].includes(key)) {
+    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination'].includes(key)) {
       searchParams.set(key, value);
     }
     if (key === '_logicOperator') {
@@ -18166,7 +18168,13 @@ const getFilterModelFromString = (searchString, columns) => {
       isInvalid = true;
       return;
     }
-    const operator = decodeValue(key.split('[')[1].split(']')[0]);
+    const splitRight = key.split('[')[1].split(']')[0].split(',');
+    const type = splitRight[1];
+    if (type !== columnType) {
+      isInvalid = true;
+      return;
+    }
+    const operator = splitRight[0];
     // if the operator is not part of the valid operators invalidate the URL
     if (!isOperatorValueValid(field, operator, columns) || Array.isArray(operator)) {
       isInvalid = true;
@@ -18182,7 +18190,8 @@ const getFilterModelFromString = (searchString, columns) => {
       columnField: field,
       operatorValue: ['number', 'rsNumber'].includes(columnType) && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
       id,
-      value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue
+      value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue,
+      type
     });
   });
 
@@ -18207,12 +18216,13 @@ const getSearchParamsFromFilterModel = filterModel => {
     const {
       columnField,
       operatorValue,
-      value
+      value,
+      type
     } = item;
     if (Object.keys(numberOperatorEncoder).includes(operatorValue)) {
-      searchParams.set(`_${columnField}[${numberOperatorEncoder[operatorValue]}]`, encodeValue(value));
+      searchParams.set(`_${columnField}[${numberOperatorEncoder[operatorValue]},${encodeValue(type)}]`, encodeValue(value));
     } else {
-      searchParams.set(`_${columnField}[${encodeValue(operatorValue)}]`, encodeValue(value));
+      searchParams.set(`_${columnField}[${encodeValue(operatorValue)},${encodeValue(type)}]`, encodeValue(value));
     }
   });
   return searchParams;
@@ -18241,38 +18251,26 @@ const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFil
     linkOperator: GridLinkOperator.And
   };
 };
-const getSortingFromString = (notParsed, columns) => {
-  // If the string is empty return the default model
-  if (!notParsed) {
+
+/** SORT */
+
+const getSortingFromString = (searchString, columns) => {
+  if (!searchString) {
     return null;
   }
-  // remove the initial ? if present
-  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
-  for (const item of parsed.split('&')) {
-    const fieldURL = item.split('=')[0];
-    if (fieldURL !== '_sortColumn') {
-      continue;
-    }
-    const left = item.split(']')[0];
-    if (left.split('[').length < 2) {
-      continue;
-    }
-    const value = item.split('[')[1].split(']')[0];
-    if (value === '') {
-      return [];
-    }
-    const columnFields = columns.map(column => column.field);
-    const [column, order] = value.split(',');
-    if (columnFields.includes(column) && (order === 'asc' || order === 'desc')) {
-      return [{
-        field: column,
-        sort: order
-      }];
-    }
-    continue;
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_sortColumn');
+  if (value === '' || value === null || value === '[]') {
+    return [];
+  }
+  const fields = columns.map(column => column.field);
+  const [column, order] = value.slice(1, value.length - 1).split(',');
+  if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
+    return [{
+      field: column,
+      sort: order
+    }];
   }
-
-  // No information was found about the sorting model in the URL
   return null;
 };
 const getSearchParamsFromSorting = sorting => {
@@ -18289,8 +18287,9 @@ const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorti
   const sorting = getSortingFromString(search, columns);
   if (sorting) {
     const searchFromSortModel = getSearchParamsFromSorting(sorting);
-    if (searchFromSortModel.toString() !== localStorageSorting) {
-      setLocalStorageSorting(searchFromSortModel.toString());
+    const searchString = urlSearchParamsToString(searchFromSortModel);
+    if (searchString !== localStorageSorting) {
+      setLocalStorageSorting(searchString);
     }
     return sorting;
   }
@@ -18300,6 +18299,76 @@ const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorti
   }
   return [];
 };
+
+/** PAGINATION */
+
+const getPaginationFromString = searchString => {
+  if (!searchString) {
+    return {
+      page: 0,
+      pageSize: 25,
+      direction: 'next'
+    };
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_pagination');
+  if (value === '' || value === null || value === '[]') {
+    return {
+      page: 0,
+      pageSize: 25,
+      direction: 'next'
+    };
+  }
+  const pagination = value.slice(1, value.length - 1).split(',');
+  const page = parseFloat(pagination[0]);
+  const pageSize = parseFloat(pagination[1]);
+  const direction = pagination[2];
+  if (!Number.isNaN(page) && !Number.isNaN(pageSize) && direction && ['next', 'back'].includes(direction)) {
+    return {
+      page,
+      pageSize,
+      direction: direction
+    };
+  }
+  return {
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  };
+};
+const getSearchParamsFromPagination = pagination => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_pagination', `[${pagination.page},${pagination.pageSize},${pagination.direction}]`);
+  return searchParams;
+};
+
+// Rules:
+// - if we have something in the URL, use that info
+// - if we don't have that, use the localStorage and update the URL
+// - if we don't have that, return an empty PaginationModel
+const getPaginationModel = (search, localStoragePagination, setLocalStoragePagination) => {
+  const pagination = getPaginationFromString(search);
+  if (pagination) {
+    const searchFromPaginationModel = getSearchParamsFromPagination(pagination);
+    const searchString = urlSearchParamsToString(searchFromPaginationModel);
+    if (searchString !== localStoragePagination) {
+      setLocalStoragePagination(searchString);
+    }
+    return pagination;
+  }
+  const paginationModelFromLocalStorage = getPaginationFromString(localStoragePagination);
+  if (paginationModelFromLocalStorage) {
+    return paginationModelFromLocalStorage;
+  }
+  return {
+    page: 0,
+    pageSize: 25,
+    direction: 'next'
+  };
+};
+
+/** COLUMN VISIBILITY */
+
 const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
   const searchParams = new URLSearchParams();
   const columnFields = columns.map(column => column.field);
@@ -18489,12 +18558,14 @@ const getFinalSearch = _ref3 => {
     search,
     filterModel,
     sortModel,
+    paginationModel,
     columnsVisibilityModel,
     pinnedColumnsModel,
     columns
   } = _ref3;
   const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
   const sortModelSearch = getSearchParamsFromSorting(sortModel);
+  const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
   const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
   const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
   const tabSearch = getSearchParamsFromTab(search);
@@ -18504,7 +18575,7 @@ const getFinalSearch = _ref3 => {
       searchParams.set(key, value);
     }
   }
-  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
+  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
 };
 /** Return the state of the table given the URL and the local storage state */
 const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, localStorage) => {
@@ -18513,6 +18584,8 @@ const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, lo
     setLocalStorageFilters,
     localStorageSorting,
     setLocalStorageSorting,
+    localStoragePagination,
+    setLocalStoragePagination,
     localStorageColumnsVisibility,
     setLocalStorageColumnsVisibility,
     localStoragePinnedColumns,
@@ -18520,12 +18593,14 @@ const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, lo
   } = localStorage;
   const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters);
   const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting);
+  const paginationModel = getPaginationModel(search, localStoragePagination, setLocalStoragePagination);
   const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility);
   const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns);
   const finalSearch = getFinalSearch({
     search,
     filterModel,
     sortModel,
+    paginationModel,
     columnsVisibilityModel: columnVisibilityModel,
     pinnedColumnsModel,
     columns
@@ -18537,6 +18612,7 @@ const getModelsParsedOrUpdateLocalStorage = (search, columns, historyReplace, lo
   return {
     filterModel,
     sortModel,
+    paginationModel,
     columnVisibilityModel,
     pinnedColumnsModel
   };
@@ -18545,6 +18621,7 @@ const updateUrl = (_ref4, search, historyReplace, columns) => {
   let {
     filterModel,
     sortModel,
+    paginationModel,
     columnsModel: columnsVisibilityModel,
     pinnedColumnsModel
   } = _ref4;
@@ -18552,6 +18629,7 @@ const updateUrl = (_ref4, search, historyReplace, columns) => {
     search,
     filterModel,
     sortModel,
+    paginationModel,
     columnsVisibilityModel,
     pinnedColumnsModel,
     columns
@@ -18619,115 +18697,416 @@ const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
   return true;
 };
 
-// Store the license information in a global, so it can be shared
-// when module duplication occurs. The duplication of the modules can happen
-// if using multiple version of MUI X at the same time of the bundler
-// decide to duplicate to improve the size of the chunks.
-// eslint-disable-next-line no-underscore-dangle
-ponyfillGlobal.__MUI_LICENSE_INFO__ = ponyfillGlobal.__MUI_LICENSE_INFO__ || {
-  key: undefined
-};
-class LicenseInfo {
-  static getLicenseInfo() {
-    // eslint-disable-next-line no-underscore-dangle
-    return ponyfillGlobal.__MUI_LICENSE_INFO__;
-  }
-  static getLicenseKey() {
-    return LicenseInfo.getLicenseInfo().key;
-  }
-  static setLicenseKey(key) {
-    const licenseInfo = LicenseInfo.getLicenseInfo();
-    licenseInfo.key = key;
-  }
-}
-
-/**
- * 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;
+const _excluded$g = ["children", "color", "onClick", "startIcon"];
+const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
+  var _props$className;
+  const {
+      children,
+      color: propsColor,
+      onClick,
+      startIcon
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$g);
+  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, {
+      color: color,
+      onClick: onClick,
+      ref: ref,
+      variant: "unstyled",
+      isActive: props['aria-expanded'] === 'true',
+      icon: typeof startIcon !== 'string' ? /*#__PURE__*/React__default.cloneElement(startIcon, {
+        fontSize: 'medium'
+      }) : startIcon,
+      "aria-label": children,
+      size: "medium"
+    }));
   }
+  return /*#__PURE__*/React__default.createElement(Button, _extends$2({}, forwardedProps, {
+    color: color,
+    onClick: onClick,
+    ref: ref,
+    variant: "unstyled",
+    isActive: props['aria-expanded'] === 'true',
+    leftIcon: startIcon
+  }), children);
+});
 
-  .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);
-  }
+const _excluded$f = ["checked", "indeterminate", "disabled", "onChange"];
+const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      checked,
+      indeterminate,
+      disabled,
+      onChange
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+  return /*#__PURE__*/React__default.createElement(Checkbox, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
+    isSelected: checked && !indeterminate,
+    isDisabled: disabled,
+    isIndeterminate: indeterminate,
+    ref: ref,
+    onChange: (isChecked, value, name, event) => onChange(event)
+  }));
+});
 
-  .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);
-  }
+const _excluded$e = ["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$e);
+  return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
+    ref: ref,
+    size: forwardedProps.fontSize,
+    icon: muiIconToDSIcon[displayName]
+  }));
+});
 
-  .MuiDataGrid-columnHeaders {
-    border-bottom-color: var(--redsift-color-primary-n);
-  }
+const _excluded$d = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+const PopperRoot = styled$1(BasePopper$1, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
 
-  .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);
-    }
+/**
+ *
+ * Demos:
+ *
+ * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
+ * - [Menu](https://mui.com/material-ui/react-menu/)
+ * - [Popper](https://mui.com/material-ui/react-popper/)
+ *
+ * API:
+ *
+ * - [Popper API](https://mui.com/material-ui/api/popper/)
+ */
+const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
+  var _slots$root;
+  const theme = useTheme$3();
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPopper'
+  });
+  const {
+      anchorEl,
+      component,
+      components,
+      componentsProps,
+      container,
+      disablePortal,
+      keepMounted,
+      modifiers,
+      open,
+      placement,
+      popperOptions,
+      popperRef,
+      transition,
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$d);
+  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+  const otherProps = _extends$1({
+    anchorEl,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition
+  }, other);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(PopperRoot, _extends$1({
+    as: component,
+    direction: theme == null ? void 0 : theme.direction,
+    slots: {
+      root: RootComponent
+    },
+    slotProps: slotProps != null ? slotProps : componentsProps
+  }, otherProps, {
+    ref: ref
+  }));
+});
+process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+   * or a function that returns either.
+   * It's used to set the position of the popper.
+   * The return value will passed as the reference object of the Popper instance.
+   */
+  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
+  /**
+   * Popper render function or node.
+   */
+  children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.node, PropTypes.func]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Root: PropTypes.elementType
+  }),
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: PropTypes.bool,
+  /**
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Popper.
+   * @default false
+   */
+  keepMounted: PropTypes.bool,
+  /**
+   * Popper.js is based on a "plugin-like" architecture,
+   * most of its features are fully encapsulated "modifiers".
+   *
+   * A modifier is a function that is called each time Popper.js needs to
+   * compute the position of the popper.
+   * For this reason, modifiers should be very performant to avoid bottlenecks.
+   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
+   */
+  modifiers: PropTypes.arrayOf(PropTypes.shape({
+    data: PropTypes.object,
+    effect: PropTypes.func,
+    enabled: PropTypes.bool,
+    fn: PropTypes.func,
+    name: PropTypes.any,
+    options: PropTypes.object,
+    phase: PropTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
+    requires: PropTypes.arrayOf(PropTypes.string),
+    requiresIfExists: PropTypes.arrayOf(PropTypes.string)
+  })),
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired,
+  /**
+   * Popper placement.
+   * @default 'bottom'
+   */
+  placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  /**
+   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+   * @default {}
+   */
+  popperOptions: PropTypes.shape({
+    modifiers: PropTypes.array,
+    onFirstUpdate: PropTypes.func,
+    placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+    strategy: PropTypes.oneOf(['absolute', 'fixed'])
+  }),
+  /**
+   * A ref that points to the used popper instance.
+   */
+  popperRef: refType$1,
+  /**
+   * The props used for each slot inside the Popper.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Help supporting a react-transition-group/Transition component.
+   * @default false
+   */
+  transition: PropTypes.bool
+} : void 0;
+var Popper$1 = Popper;
 
-    .MuiInputBase-root {
-      font-family: var(--redsift-typography-datagrid-cell-font-family);
-    }
-  }
+const BasePopper = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/React__default.createElement(Popper$1, _extends$2({}, props, {
+    ref: ref,
+    container: () => document.getElementById('redsift-app-container')
+  }));
+});
 
-  .Mui-checked {
-    color: var(--redsift-color-primary-n);
-  }
+const BaseTextField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    id,
+    value,
+    onChange,
+    placeholder
+  } = props;
+  return /*#__PURE__*/React__default.createElement(TextField$2, {
+    marginTop: "6px",
+    inputRef: ref,
+    label: label,
+    id: id,
+    value: value,
+    variant: "underline",
+    onChange: (value, name, event) => onChange(event),
+    autoFocus: true,
+    placeholder: placeholder
+  });
+});
 
-  .MuiDataGrid-rowCount {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
+// Store the license information in a global, so it can be shared
+// when module duplication occurs. The duplication of the modules can happen
+// if using multiple version of MUI X at the same time of the bundler
+// decide to duplicate to improve the size of the chunks.
+// eslint-disable-next-line no-underscore-dangle
+ponyfillGlobal.__MUI_LICENSE_INFO__ = ponyfillGlobal.__MUI_LICENSE_INFO__ || {
+  key: undefined
+};
+class LicenseInfo {
+  static getLicenseInfo() {
+    // eslint-disable-next-line no-underscore-dangle
+    return ponyfillGlobal.__MUI_LICENSE_INFO__;
   }
-
-  .MuiTablePagination-displayedRows {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  static getLicenseKey() {
+    return LicenseInfo.getLicenseInfo().key;
   }
-
-  .MuiBadge-standard {
-    font-family: var(--redsift-typography-datagrid-cell-font-family);
+  static setLicenseKey(key) {
+    const licenseInfo = LicenseInfo.getLicenseInfo();
+    licenseInfo.key = key;
   }
-`;
+}
 
 /**
  * Component style.
  */
-const GridToolbarWrapper = styled$3.div`
-  .MuiButtonBase-root-JobBs.MuiButton-root {
-    svg {
-      path {
-        fill: var(--redsift-color-primary-n);
-      }
-    }
-  }
-`;
-
-/*!
-* tabbable 6.1.2
-* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
-*/
+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.
+ */
+const GridToolbarWrapper = styled$3.div`
+  .MuiButtonBase-root-JobBs.MuiButton-root {
+    svg {
+      path {
+        fill: var(--redsift-color-primary-n);
+      }
+    }
+  }
+`;
+
+/*!
+* tabbable 6.1.2
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
 // NOTE: separate `:not()` selectors has broader browser support than the newer
 //  `:not([inert], [inert] *)` (Feb 2023)
 // CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
@@ -22413,8 +22792,8 @@ const StyledTooltipContent = styled$3.div`
 }}
 `;
 
-const COMPONENT_NAME$5 = 'TooltipContent';
-const CLASSNAME$5 = 'redsift-tooltip-content';
+const COMPONENT_NAME$6 = 'TooltipContent';
+const CLASSNAME$6 = 'redsift-tooltip-content';
 
 /**
  * The TooltipContent component.
@@ -22479,11 +22858,11 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${TooltipContent.className}__inner`
   }, children)));
 });
-TooltipContent.className = CLASSNAME$5;
-TooltipContent.displayName = COMPONENT_NAME$5;
+TooltipContent.className = CLASSNAME$6;
+TooltipContent.displayName = COMPONENT_NAME$6;
 
-const COMPONENT_NAME$4 = 'TooltipTrigger';
-const CLASSNAME$4 = 'redsift-tooltip-trigger';
+const COMPONENT_NAME$5 = 'TooltipTrigger';
+const CLASSNAME$5 = 'redsift-tooltip-trigger';
 
 /**
  * The TooltipTrigger component.
@@ -22518,8 +22897,8 @@ const TooltipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
     ref: triggerRef
   }, getReferenceProps(props)), children);
 });
-TooltipTrigger.className = CLASSNAME$4;
-TooltipTrigger.displayName = COMPONENT_NAME$4;
+TooltipTrigger.className = CLASSNAME$5;
+TooltipTrigger.displayName = COMPONENT_NAME$5;
 
 const TooltipContext = /*#__PURE__*/React__default.createContext(null);
 
@@ -22618,8 +22997,8 @@ function useTooltip(_ref) {
 const ThemeContext = /*#__PURE__*/React__default.createContext(null);
 const ThemeProvider = ThemeContext.Provider;
 
-const COMPONENT_NAME$3 = 'Tooltip';
-const CLASSNAME$3 = 'redsift-tooltip';
+const COMPONENT_NAME$4 = 'Tooltip';
+const CLASSNAME$4 = 'redsift-tooltip';
 
 /**
  * The Tooltip component.
@@ -22660,8 +23039,8 @@ const BaseTooltip = props => {
     value: tooltip
   }, trigger && isComponent('TooltipTrigger')(trigger) ? trigger : null, content && isComponent('TooltipContent')(content) ? content : null));
 };
-BaseTooltip.className = CLASSNAME$3;
-BaseTooltip.displayName = COMPONENT_NAME$3;
+BaseTooltip.className = CLASSNAME$4;
+BaseTooltip.displayName = COMPONENT_NAME$4;
 const Tooltip = Object.assign(BaseTooltip, {
   Trigger: TooltipTrigger,
   Content: TooltipContent
@@ -22691,9 +23070,9 @@ const StyledGridToolbarFilterSemanticField = styled$3.form`
   }
 `;
 
-const _excluded$f = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
-const COMPONENT_NAME$2 = 'GridToolbarFilterSemanticField';
-const CLASSNAME$2 = 'redsift-datagrid-toolbar-nlp-filter-field';
+const _excluded$c = ["className", "nlpFilterConfig", "onFilterModelChange", "dateFormat", "defaultModel", "defaultFilter", "disablePower", "localeText"];
+const COMPONENT_NAME$3 = 'GridToolbarFilterSemanticField';
+const CLASSNAME$3 = 'redsift-datagrid-toolbar-nlp-filter-field';
 const DEFAULT_OPERATORS = {
   string: ['contains', 'equals', 'startsWith', 'endsWith', 'isEmpty', 'isNotEmpty', 'isAnyOf'],
   number: ['=', '!=', '>', '>=', '<', '<=', 'isEmpty', 'isNotEmpty', 'isAnyOf'],
@@ -22776,7 +23155,7 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
       disablePower = false,
       localeText
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$c);
   const {
     textLabel,
     textPlaceholder,
@@ -22861,8 +23240,8 @@ const GridToolbarFilterSemanticField = /*#__PURE__*/forwardRef((props, ref) => {
     marginLeft: "8px"
   }, errorText));
 });
-GridToolbarFilterSemanticField.className = CLASSNAME$2;
-GridToolbarFilterSemanticField.displayName = COMPONENT_NAME$2;
+GridToolbarFilterSemanticField.className = CLASSNAME$3;
+GridToolbarFilterSemanticField.displayName = COMPONENT_NAME$3;
 
 /**
  * Temporary workaround for a type mismatch between react 17 and 18
@@ -22924,381 +23303,101 @@ const Toolbar$2 = props => {
   }, semanticFilterProps ? /*#__PURE__*/React__default.createElement(GridToolbarFilterSemanticField, semanticFilterProps) : null)));
 };
 
-const _excluded$e = ["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$e);
-  return /*#__PURE__*/React__default.createElement(Icon, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
-    ref: ref,
-    size: forwardedProps.fontSize,
-    icon: muiIconToDSIcon[displayName]
-  }));
-});
-
-const _excluded$d = ["children", "color", "onClick", "startIcon"];
-const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
-  var _props$className;
+function Ripple(props) {
   const {
-      children,
-      color: propsColor,
-      onClick,
-      startIcon
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$d);
-  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, {
-      color: color,
-      onClick: onClick,
-      ref: ref,
-      variant: "unstyled",
-      isActive: props['aria-expanded'] === 'true',
-      icon: typeof startIcon !== 'string' ? /*#__PURE__*/React__default.cloneElement(startIcon, {
-        fontSize: 'medium'
-      }) : startIcon,
-      "aria-label": children,
-      size: "medium"
-    }));
+    className,
+    classes,
+    pulsate = false,
+    rippleX,
+    rippleY,
+    rippleSize,
+    in: inProp,
+    onExited,
+    timeout
+  } = props;
+  const [leaving, setLeaving] = React.useState(false);
+  const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
+  const rippleStyles = {
+    width: rippleSize,
+    height: rippleSize,
+    top: -(rippleSize / 2) + rippleY,
+    left: -(rippleSize / 2) + rippleX
+  };
+  const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
+  if (!inProp && !leaving) {
+    setLeaving(true);
   }
-  return /*#__PURE__*/React__default.createElement(Button, _extends$2({}, forwardedProps, {
-    color: color,
-    onClick: onClick,
-    ref: ref,
-    variant: "unstyled",
-    isActive: props['aria-expanded'] === 'true',
-    leftIcon: startIcon
-  }), children);
-});
+  React.useEffect(() => {
+    if (!inProp && onExited != null) {
+      // react-transition-group#onExited
+      const timeoutId = setTimeout(onExited, timeout);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    }
+    return undefined;
+  }, [onExited, inProp, timeout]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+    className: rippleClassName,
+    style: rippleStyles,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      className: childClassName
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  onExited: PropTypes.func,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: PropTypes.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: PropTypes.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: PropTypes.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: PropTypes.number,
+  /**
+   * exit delay
+   */
+  timeout: PropTypes.number.isRequired
+} : void 0;
 
-const _excluded$c = ["checked", "indeterminate", "disabled", "onChange"];
-const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      checked,
-      indeterminate,
-      disabled,
-      onChange
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$c);
-  return /*#__PURE__*/React__default.createElement(Checkbox, _extends$2({}, forwardedProps, forwardedProps.inputProps, {
-    isSelected: checked && !indeterminate,
-    isDisabled: disabled,
-    isIndeterminate: indeterminate,
-    ref: ref,
-    onChange: (isChecked, value, name, event) => onChange(event)
-  }));
-});
+const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
+var touchRippleClasses$1 = touchRippleClasses;
 
-const _excluded$b = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
-const PopperRoot = styled$1(BasePopper$1, {
-  name: 'MuiPopper',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({});
-
-/**
- *
- * Demos:
- *
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
- * - [Menu](https://mui.com/material-ui/react-menu/)
- * - [Popper](https://mui.com/material-ui/react-popper/)
- *
- * API:
- *
- * - [Popper API](https://mui.com/material-ui/api/popper/)
- */
-const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
-  var _slots$root;
-  const theme = useTheme$3();
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiPopper'
-  });
-  const {
-      anchorEl,
-      component,
-      components,
-      componentsProps,
-      container,
-      disablePortal,
-      keepMounted,
-      modifiers,
-      open,
-      placement,
-      popperOptions,
-      popperRef,
-      transition,
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$b);
-  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
-  const otherProps = _extends$1({
-    anchorEl,
-    container,
-    disablePortal,
-    keepMounted,
-    modifiers,
-    open,
-    placement,
-    popperOptions,
-    popperRef,
-    transition
-  }, other);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(PopperRoot, _extends$1({
-    as: component,
-    direction: theme == null ? void 0 : theme.direction,
-    slots: {
-      root: RootComponent
-    },
-    slotProps: slotProps != null ? slotProps : componentsProps
-  }, otherProps, {
-    ref: ref
-  }));
-});
-process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
-   * or a function that returns either.
-   * It's used to set the position of the popper.
-   * The return value will passed as the reference object of the Popper instance.
-   */
-  anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
-  /**
-   * Popper render function or node.
-   */
-  children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Root: PropTypes.elementType
-  }),
-  /**
-   * The props used for each slot inside the Popper.
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * An HTML element or function that returns one.
-   * The `container` will have the portal children appended to it.
-   *
-   * By default, it uses the body of the top-level document object,
-   * so it's simply `document.body` most of the time.
-   */
-  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
-  /**
-   * The `children` will be under the DOM hierarchy of the parent component.
-   * @default false
-   */
-  disablePortal: PropTypes.bool,
-  /**
-   * Always keep the children in the DOM.
-   * This prop can be useful in SEO situation or
-   * when you want to maximize the responsiveness of the Popper.
-   * @default false
-   */
-  keepMounted: PropTypes.bool,
-  /**
-   * Popper.js is based on a "plugin-like" architecture,
-   * most of its features are fully encapsulated "modifiers".
-   *
-   * A modifier is a function that is called each time Popper.js needs to
-   * compute the position of the popper.
-   * For this reason, modifiers should be very performant to avoid bottlenecks.
-   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
-   */
-  modifiers: PropTypes.arrayOf(PropTypes.shape({
-    data: PropTypes.object,
-    effect: PropTypes.func,
-    enabled: PropTypes.bool,
-    fn: PropTypes.func,
-    name: PropTypes.any,
-    options: PropTypes.object,
-    phase: PropTypes.oneOf(['afterMain', 'afterRead', 'afterWrite', 'beforeMain', 'beforeRead', 'beforeWrite', 'main', 'read', 'write']),
-    requires: PropTypes.arrayOf(PropTypes.string),
-    requiresIfExists: PropTypes.arrayOf(PropTypes.string)
-  })),
-  /**
-   * If `true`, the component is shown.
-   */
-  open: PropTypes.bool.isRequired,
-  /**
-   * Popper placement.
-   * @default 'bottom'
-   */
-  placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-  /**
-   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
-   * @default {}
-   */
-  popperOptions: PropTypes.shape({
-    modifiers: PropTypes.array,
-    onFirstUpdate: PropTypes.func,
-    placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-    strategy: PropTypes.oneOf(['absolute', 'fixed'])
-  }),
-  /**
-   * A ref that points to the used popper instance.
-   */
-  popperRef: refType$1,
-  /**
-   * The props used for each slot inside the Popper.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    root: PropTypes.elementType
-  }),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Help supporting a react-transition-group/Transition component.
-   * @default false
-   */
-  transition: PropTypes.bool
-} : void 0;
-var Popper$1 = Popper;
-
-const BasePopper = /*#__PURE__*/forwardRef((props, ref) => {
-  return /*#__PURE__*/React__default.createElement(Popper$1, _extends$2({}, props, {
-    ref: ref,
-    container: () => document.getElementById('redsift-app-container')
-  }));
-});
-
-function Ripple(props) {
-  const {
-    className,
-    classes,
-    pulsate = false,
-    rippleX,
-    rippleY,
-    rippleSize,
-    in: inProp,
-    onExited,
-    timeout
-  } = props;
-  const [leaving, setLeaving] = React.useState(false);
-  const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
-  const rippleStyles = {
-    width: rippleSize,
-    height: rippleSize,
-    top: -(rippleSize / 2) + rippleY,
-    left: -(rippleSize / 2) + rippleX
-  };
-  const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
-  if (!inProp && !leaving) {
-    setLeaving(true);
-  }
-  React.useEffect(() => {
-    if (!inProp && onExited != null) {
-      // react-transition-group#onExited
-      const timeoutId = setTimeout(onExited, timeout);
-      return () => {
-        clearTimeout(timeoutId);
-      };
-    }
-    return undefined;
-  }, [onExited, inProp, timeout]);
-  return /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-    className: rippleClassName,
-    style: rippleStyles,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-      className: childClassName
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
-  /**
-   * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
-   */
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  /**
-   * @ignore - injected from TransitionGroup
-   */
-  in: PropTypes.bool,
-  /**
-   * @ignore - injected from TransitionGroup
-   */
-  onExited: PropTypes.func,
-  /**
-   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
-   */
-  pulsate: PropTypes.bool,
-  /**
-   * Diameter of the ripple.
-   */
-  rippleSize: PropTypes.number,
-  /**
-   * Horizontal position of the ripple center.
-   */
-  rippleX: PropTypes.number,
-  /**
-   * Vertical position of the ripple center.
-   */
-  rippleY: PropTypes.number,
-  /**
-   * exit delay
-   */
-  timeout: PropTypes.number.isRequired
-} : void 0;
-
-const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
-var touchRippleClasses$1 = touchRippleClasses;
-
-const _excluded$a = ["center", "classes", "className"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const DURATION = 550;
-const DELAY_RIPPLE = 80;
-const enterKeyframe = keyframes(_t || (_t = _`
-  0% {
-    transform: scale(0);
-    opacity: 0.1;
-  }
+const _excluded$b = ["center", "classes", "className"];
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const DURATION = 550;
+const DELAY_RIPPLE = 80;
+const enterKeyframe = keyframes(_t || (_t = _`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
 
   100% {
     transform: scale(1);
@@ -23415,7 +23514,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       classes = {},
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$a);
+    other = _objectWithoutPropertiesLoose(props, _excluded$b);
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -23616,7 +23715,7 @@ function getButtonBaseUtilityClass(slot) {
 const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 var buttonBaseClasses$1 = buttonBaseClasses;
 
-const _excluded$9 = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
+const _excluded$a = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 const useUtilityClasses$5 = ownerState => {
   const {
     disabled,
@@ -23718,7 +23817,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       touchRippleRef,
       type
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$9);
+    other = _objectWithoutPropertiesLoose(props, _excluded$a);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -24091,7 +24190,7 @@ function getMenuItemUtilityClass(slot) {
 const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 var menuItemClasses$1 = menuItemClasses;
 
-const _excluded$8 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
+const _excluded$9 = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -24213,7 +24312,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       tabIndex: tabIndexProp,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$8);
+    other = _objectWithoutPropertiesLoose(props, _excluded$9);
   const context = React.useContext(ListContext$1);
   const childContext = React.useMemo(() => ({
     dense: dense || context.dense || false,
@@ -24356,7 +24455,7 @@ function getTableCellUtilityClass(slot) {
 const tableCellClasses = generateUtilityClasses('MuiTableCell', ['root', 'head', 'body', 'footer', 'sizeSmall', 'sizeMedium', 'paddingCheckbox', 'paddingNone', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'stickyHeader']);
 var tableCellClasses$1 = tableCellClasses;
 
-const _excluded$7 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
+const _excluded$8 = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
 const useUtilityClasses$3 = ownerState => {
   const {
     classes,
@@ -24453,7 +24552,7 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
       sortDirection,
       variant: variantProp
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
   const table = React.useContext(TableContext$1);
   const tablelvl2 = React.useContext(Tablelvl2Context$1);
   const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
@@ -24560,7 +24659,7 @@ function getToolbarUtilityClass(slot) {
 }
 generateUtilityClasses('MuiToolbar', ['root', 'gutters', 'regular', 'dense']);
 
-const _excluded$6 = ["className", "component", "disableGutters", "variant"];
+const _excluded$7 = ["className", "component", "disableGutters", "variant"];
 const useUtilityClasses$2 = ownerState => {
   const {
     classes,
@@ -24612,7 +24711,7 @@ const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
       disableGutters = false,
       variant = 'regular'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$6);
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   const ownerState = _extends$1({}, props, {
     component,
     disableGutters,
@@ -24680,7 +24779,7 @@ function getIconButtonUtilityClass(slot) {
 const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 var iconButtonClasses$1 = iconButtonClasses;
 
-const _excluded$5 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+const _excluded$6 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 const useUtilityClasses$1 = ownerState => {
   const {
     classes,
@@ -24781,7 +24880,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
       disableFocusRipple = false,
       size = 'medium'
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$5);
+    other = _objectWithoutPropertiesLoose(props, _excluded$6);
   const ownerState = _extends$1({}, props, {
     edge,
     color,
@@ -24879,7 +24978,7 @@ var FirstPageIcon = createSvgIcon( /*#__PURE__*/jsxRuntimeExports.jsx("path", {
 }), 'FirstPage');
 
 var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
-const _excluded$4 = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
+const _excluded$5 = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
 const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
   const {
       backIconButtonProps,
@@ -24892,7 +24991,7 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
       showFirstButton,
       showLastButton
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const theme = useTheme();
   const handleFirstPageButtonClick = event => {
     onPageChange(event, 0);
@@ -24996,7 +25095,7 @@ const tablePaginationClasses = generateUtilityClasses('MuiTablePagination', ['ro
 var tablePaginationClasses$1 = tablePaginationClasses;
 
 var _InputBase;
-const _excluded$3 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
+const _excluded$4 = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
 const TablePaginationRoot = styled$1(TableCell$1, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -25143,7 +25242,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
       showFirstButton = false,
       showLastButton = false
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
@@ -25362,7 +25461,62 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const ServerSideControlledPagination = _ref => {
+const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
+  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
+    let {
+      model
+    } = _ref;
+    return isRowSelectable({
+      row: model
+    });
+  }).map(_ref2 => {
+    let {
+      id
+    } = _ref2;
+    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 ServerSideControlledPagination = _ref3 => {
   let {
     selectionStatus,
     displaySelection,
@@ -25375,7 +25529,7 @@ const ServerSideControlledPagination = _ref => {
     rowsPerPageOptions,
     paginationProps,
     rowCount
-  } = _ref;
+  } = _ref3;
   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)` : ''}.`;
@@ -25446,79 +25600,495 @@ const ControlledPagination = _ref3 => {
     onClick: () => {
       apiRef.current.selectRows(numberOfSelectableRowsInTable ? selectableRowsInTable : apiRef.current.getAllRowIds());
     }
-  }, "Select all ", numberOfSelectableRowsInTable, numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : '', " rows in the table.")) : selectionStatus.type === 'table' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, `All ${selectionStatus.numberOfSelectedRows}${numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : ''} rows in the table are selected. `, /*#__PURE__*/React__default.createElement(LinkButton, {
-    onClick: () => {
-      apiRef.current.selectRows([], false, true);
+  }, "Select all ", numberOfSelectableRowsInTable, numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : '', " rows in the table.")) : selectionStatus.type === 'table' ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, `All ${selectionStatus.numberOfSelectedRows}${numberOfFilteredRowsInTable !== numberOfSelectableRowsInTable ? ' selectable' : ''} rows in the table are selected. `, /*#__PURE__*/React__default.createElement(LinkButton, {
+    onClick: () => {
+      apiRef.current.selectRows([], false, true);
+    }
+  }, "Clear selection.")) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "14px"
+  }, `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
+    component: "div",
+    count: numberOfFilteredRowsInTable,
+    page: page,
+    onPageChange: (event, newPage) => onPageChange(newPage),
+    rowsPerPage: pageSize,
+    onRowsPerPageChange: event => {
+      onPageSizeChange(parseInt(event.target.value, 10));
+    },
+    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
+  }, paginationProps)) : null);
+};
+
+const _excluded$3 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "page", "onPageChange", "pageSize", "onPageSizeChange", "rowsPerPageOptions", "paginationProps", "paginationMode", "rowCount"];
+const ToolbarWrapper = _ref => {
+  let {
+      hideToolbar,
+      RenderedToolbar,
+      filterModel,
+      onFilterModelChange,
+      pagination,
+      paginationPlacement,
+      selectionStatus,
+      apiRef,
+      isRowSelectable,
+      page,
+      onPageChange,
+      pageSize,
+      onPageSizeChange,
+      rowsPerPageOptions,
+      paginationProps,
+      paginationMode = 'client',
+      rowCount
+    } = _ref,
+    forwardedProps = _objectWithoutProperties(_ref, _excluded$3);
+  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(ServerSideControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: false,
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus.current,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    rowsPerPageOptions: rowsPerPageOptions,
+    paginationProps: paginationProps,
+    rowCount: rowCount
+  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: false,
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus.current,
+    apiRef: apiRef,
+    isRowSelectable: isRowSelectable,
+    page: page,
+    onPageChange: onPageChange,
+    pageSize: pageSize,
+    onPageSizeChange: onPageSizeChange,
+    rowsPerPageOptions: rowsPerPageOptions,
+    paginationProps: paginationProps
+  }) : null);
+};
+
+const useControlledDatagridState = _ref => {
+  var _initialState$paginat, _initialState$paginat2;
+  let {
+    initialState,
+    rowsPerPageOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPageChange,
+    propsOnPageSizeChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPage,
+    propsPageSize,
+    propsPinnedColumns,
+    propsSortModel
+  } = _ref;
+  const [filterModel, setFilterModel] = useState(propsFilterModel);
+  useEffect(() => {
+    setFilterModel(propsFilterModel);
+  }, [propsFilterModel]);
+  const onFilterModelChange = (model, details) => {
+    if (propsOnFilterModelChange) {
+      propsOnFilterModelChange(model, details);
+    } else {
+      setFilterModel(model);
+    }
+  };
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState(propsColumnVisibilityModel);
+  useEffect(() => {
+    setColumnVisibilityModel(propsColumnVisibilityModel);
+  }, [propsColumnVisibilityModel]);
+  const onColumnVisibilityModelChange = (model, details) => {
+    if (propsOnColumnVisibilityModelChange) {
+      propsOnColumnVisibilityModelChange(model, details);
+    } else {
+      setColumnVisibilityModel(model);
     }
-  }, "Clear selection.")) : selectionStatus.type === 'other' ? /*#__PURE__*/React__default.createElement(Text, {
-    fontSize: "14px"
-  }, `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, _extends$2({
-    component: "div",
-    count: numberOfFilteredRowsInTable,
-    page: page,
-    onPageChange: (event, newPage) => onPageChange(newPage),
-    rowsPerPage: pageSize,
-    onRowsPerPageChange: event => {
-      onPageSizeChange(parseInt(event.target.value, 10));
-    },
-    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
-  }, paginationProps)) : null);
+  };
+  const [pinnedColumns, setPinnedColumns] = useState(propsPinnedColumns);
+  useEffect(() => {
+    setPinnedColumns(propsPinnedColumns);
+  }, [propsPinnedColumns]);
+  const onPinnedColumnsChange = (model, details) => {
+    if (propsOnPinnedColumnsChange) {
+      propsOnPinnedColumnsChange(model, details);
+    } else {
+      setPinnedColumns(model);
+    }
+  };
+  const [sortModel, setSortModel] = useState(propsSortModel);
+  useEffect(() => {
+    setSortModel(propsSortModel);
+  }, [propsSortModel]);
+  const onSortModelChange = (model, details) => {
+    if (propsOnSortModelChange) {
+      propsOnSortModelChange(model, details);
+    } else {
+      setSortModel(model);
+    }
+  };
+  const [page, setPage] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
+  const [pageSize, setPageSize] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 25);
+  const onPageChange = page => {
+    if (propsOnPageChange) {
+      propsOnPageChange(page, undefined);
+    } else {
+      setPage(page);
+    }
+  };
+  useEffect(() => {
+    if (propsPage || propsPage === 0) {
+      setPage(propsPage);
+    }
+  }, [propsPage]);
+  const onPageSizeChange = pageSize => {
+    onPageChange(0);
+    if (propsOnPageSizeChange) {
+      propsOnPageSizeChange(pageSize, undefined);
+    } else {
+      setPageSize(pageSize);
+    }
+  };
+  useEffect(() => {
+    if (propsPageSize) {
+      setPageSize(propsPageSize);
+    }
+  }, [propsPageSize]);
+  return {
+    filterModel,
+    onFilterModelChange,
+    columnVisibilityModel,
+    onColumnVisibilityModelChange,
+    pinnedColumns,
+    onPinnedColumnsChange,
+    sortModel,
+    onSortModelChange,
+    page,
+    pageSize,
+    onPageChange,
+    onPageSizeChange
+  };
 };
 
-const _excluded$2 = ["hideToolbar", "RenderedToolbar", "filterModel", "onFilterModelChange", "pagination", "paginationPlacement", "selectionStatus", "apiRef", "isRowSelectable", "page", "onPageChange", "pageSize", "onPageSizeChange", "rowsPerPageOptions", "paginationProps", "paginationMode", "rowCount"];
-const ToolbarWrapper = _ref => {
-  let {
+const _excluded$2 = ["apiRef", "autoHeight", "className", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "selectionModel", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx", "theme", "paginationMode", "rowCount"];
+const COMPONENT_NAME$2 = 'DataGrid';
+const CLASSNAME$2 = 'redsift-datagrid';
+const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const datagridRef = ref || useRef();
+  const {
+      apiRef: propsApiRef,
+      autoHeight,
+      className,
+      columnTypes: propsColumnTypes,
+      components,
+      componentsProps,
+      filterModel: propsFilterModel,
+      columnVisibilityModel: propsColumnVisibilityModel,
+      pinnedColumns: propsPinnedColumns,
+      sortModel: propsSortModel,
+      height: propsHeight,
       hideToolbar,
-      RenderedToolbar,
-      filterModel,
-      onFilterModelChange,
-      pagination,
-      paginationPlacement,
-      selectionStatus,
-      apiRef,
+      initialState,
       isRowSelectable,
-      page,
-      onPageChange,
-      pageSize,
-      onPageSizeChange,
-      rowsPerPageOptions,
+      license = process.env.MUI_LICENSE_KEY,
+      onFilterModelChange: propsOnFilterModelChange,
+      onPageChange: propsOnPageChange,
+      onPageSizeChange: propsOnPageSizeChange,
+      onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
+      onPinnedColumnsChange: propsOnPinnedColumnsChange,
+      onSortModelChange: propsOnSortModelChange,
+      selectionModel: propsSelectionModel,
+      onSelectionModelChange,
+      page: propsPage,
+      pageSize: propsPageSize,
+      pagination,
+      paginationPlacement = 'both',
       paginationProps,
+      rows,
+      rowsPerPageOptions,
+      sx,
+      theme: propsTheme,
       paginationMode = 'client',
       rowCount
-    } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends$2({}, forwardedProps, {
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const theme = useTheme$4(propsTheme);
+  const _apiRef = useGridApiRef();
+  const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
+  const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar$2;
+  LicenseInfo.setLicenseKey(license);
+  const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
+  const {
+    columnVisibilityModel,
+    filterModel,
+    onColumnVisibilityModelChange,
+    onFilterModelChange,
+    onPageChange,
+    onPageSizeChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    page,
+    pageSize,
+    pinnedColumns,
+    sortModel
+  } = useControlledDatagridState({
+    initialState,
+    rowsPerPageOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPage,
+    propsPageSize,
+    propsPinnedColumns,
+    propsSortModel,
+    propsOnPageChange,
+    propsOnPageSizeChange
+  });
+  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  useEffect(() => {
+    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  }, [propsSelectionModel]);
+  const selectionStatus = useRef({
+    type: 'none',
+    numberOfSelectedRows: 0,
+    numberOfSelectedRowsInPage: 0,
+    page,
+    pageSize
+  });
+
+  // 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(Array.isArray(selectionModel) ? selectionModel : [selectionModel], apiRef, selectionStatus, isRowSelectable, page, pageSize);
+    }
+  }, [selectionModel, page, pageSize]);
+  if (!Array.isArray(rows)) {
+    return null;
+  }
+  const muiTheme = useMemo(() => createTheme({
+    palette: {
+      mode: theme,
+      primary: {
+        main: RedsiftColorBlueN
+      },
+      background: {
+        default: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite,
+        paper: theme === 'dark' ? RedsiftColorNeutralXDarkGrey : RedsiftColorNeutralWhite
+      }
+    }
+  }), [theme]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider$4, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider$1, {
+    theme: muiTheme
+  }, /*#__PURE__*/React__default.createElement(StyledDataGrid, {
+    ref: datagridRef,
+    className: classNames(DataGrid.className, className),
+    $height: height
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({}, forwardedProps, {
+    rowCount: rowCount,
+    apiRef: apiRef,
+    autoHeight: autoHeight,
+    checkboxSelectionVisibleOnly: Boolean(pagination),
+    columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
+    components: _objectSpread2(_objectSpread2({
+      BaseButton,
+      BaseCheckbox,
+      // BaseTextField,
+      BasePopper,
+      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnFilteredIcon"
+      })),
+      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnSelectorIcon"
+      })),
+      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnSortedAscendingIcon"
+      })),
+      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnSortedDescendingIcon"
+      })),
+      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DensityCompactIcon"
+      })),
+      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DensityStandardIcon"
+      })),
+      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DensityComfortableIcon"
+      })),
+      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DetailPanelCollapseIcon"
+      })),
+      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DetailPanelExpandIcon"
+      })),
+      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ExportIcon"
+      })),
+      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
+        displayName: "OpenFilterButtonIcon"
+      }, props))
+    }, components), {}, {
+      Toolbar: ToolbarWrapper,
+      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),
+        selectionStatus: selectionStatus.current,
+        page: page,
+        onPageChange: onPageChange,
+        pageSize: pageSize,
+        onPageSizeChange: onPageSizeChange,
+        rowsPerPageOptions: rowsPerPageOptions,
+        paginationProps: paginationProps,
+        paginationMode: paginationMode,
+        rowCount: rowCount
+      })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$2({}, props, {
+        displaySelection: false,
+        displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+        displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+        selectionStatus: selectionStatus.current,
+        apiRef: apiRef,
+        isRowSelectable: isRowSelectable,
+        page: page,
+        onPageChange: onPageChange,
+        pageSize: pageSize,
+        onPageSizeChange: onPageSizeChange,
+        rowsPerPageOptions: rowsPerPageOptions,
+        paginationProps: paginationProps,
+        paginationMode: paginationMode
+      })) : null
+    }),
+    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
+      toolbar: _objectSpread2({
+        hideToolbar,
+        RenderedToolbar,
+        filterModel,
+        onFilterModelChange,
+        pagination,
+        paginationPlacement,
+        selectionStatus,
+        apiRef,
+        isRowSelectable,
+        page,
+        onPageChange,
+        pageSize,
+        onPageSizeChange,
+        rowsPerPageOptions,
+        paginationProps,
+        paginationMode,
+        rowCount
+      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
+    }),
     filterModel: filterModel,
-    onFilterModelChange: onFilterModelChange
-  })) : null, pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
-    displaySelection: true,
-    displayRowsPerPage: false,
-    displayPagination: ['top', 'both'].includes(paginationPlacement),
-    selectionStatus: selectionStatus.current,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    rowsPerPageOptions: rowsPerPageOptions,
-    paginationProps: paginationProps,
-    rowCount: rowCount
-  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
-    displaySelection: true,
-    displayRowsPerPage: false,
-    displayPagination: ['top', 'both'].includes(paginationPlacement),
-    selectionStatus: selectionStatus.current,
-    apiRef: apiRef,
+    columnVisibilityModel: columnVisibilityModel,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
+    initialState: initialState,
     isRowSelectable: isRowSelectable,
+    onFilterModelChange: onFilterModelChange,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
+    pagination: pagination,
+    paginationMode: paginationMode,
+    keepNonExistentRowsSelected: paginationMode == 'server',
+    rows: rows,
+    rowsPerPageOptions: rowsPerPageOptions,
     page: page,
     onPageChange: onPageChange,
     pageSize: pageSize,
     onPageSizeChange: onPageSizeChange,
-    rowsPerPageOptions: rowsPerPageOptions,
-    paginationProps: paginationProps
-  }) : null);
-};
+    selectionModel: selectionModel,
+    onSelectionModelChange: (newSelectionModel, details) => {
+      if (pagination && paginationMode != 'server') {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
+          let {
+            model
+          } = _ref;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref2 => {
+          let {
+            id
+          } = _ref2;
+          return id;
+        }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
+          let {
+            model
+          } = _ref3;
+          return isRowSelectable({
+            row: model
+          });
+        }).map(_ref4 => {
+          let {
+            id
+          } = _ref4;
+          return id;
+        }) : gridFilteredSortedRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInTable = selectableRowsInTable.length;
+        const numberOfSelectedRows = newSelectionModel.length;
+        if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatus.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
+          setTimeout(() => {
+            apiRef.current.selectRows([], true, true);
+          }, 0);
+        }
+        if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'page',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
+          selectionStatus.current = {
+            type: 'table',
+            numberOfSelectedRows
+          };
+        } else if (numberOfSelectedRows > 0) {
+          selectionStatus.current = {
+            type: 'other',
+            numberOfSelectedRows
+          };
+        } else {
+          selectionStatus.current = {
+            type: 'none',
+            numberOfSelectedRows
+          };
+        }
+      }
+      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
+    },
+    sx: _objectSpread2(_objectSpread2({}, sx), {}, {
+      '.MuiDataGrid-columnHeaders': {
+        flexDirection: 'column',
+        alignItems: 'normal'
+      },
+      '.MuiDataGrid-selectedRowCount': {
+        margin: 'none'
+      }
+    })
+  })))));
+});
+DataGrid.className = CLASSNAME$2;
+DataGrid.displayName = COMPONENT_NAME$2;
 
 // Get and Set data from LocalStorage WITHOUT useState
 
@@ -25550,35 +26120,12 @@ const useFetchState = (defaultValue, key) => {
   return [parsedValue, updateValue];
 };
 
-function useLocalStorage(key, defaultValue) {
-  const [value, setValue] = useState(() => {
-    let currentValue;
-    try {
-      currentValue = JSON.parse(localStorage.getItem(key) || String(defaultValue));
-    } catch (error) {
-      currentValue = defaultValue;
-    }
-    return currentValue;
-  });
-  useEffect(() => {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch (e) {
-      console.error('local-storage: error setting item into local storage: ', e);
-    }
-  }, [value, key]);
-  return [value, setValue];
-}
-
 const useTableStates = (id, version, customDefaults) => {
-  const [paginationModel, setPaginationModel] = useLocalStorage(buildStorageKey({
+  const [paginationModel, setPaginationModel] = useFetchState('', buildStorageKey({
     id,
     version,
     category: PAGINATION_MODEL_KEY
-  }), {
-    page: 0,
-    pageSize: 10
-  });
+  }));
   const [sortModel, setSortModel] = useFetchState(customDefaults && customDefaults[SORT_MODEL_KEY] ? customDefaults[SORT_MODEL_KEY] : '', buildStorageKey({
     id,
     version,
@@ -25682,6 +26229,7 @@ const useStatefulTable = props => {
   const {
     filterModel: filterParsed,
     sortModel: sortModelParsed,
+    paginationModel: paginationModelParsed,
     columnVisibilityModel: visibilityModel,
     pinnedColumnsModel
   } = getModelsParsedOrUpdateLocalStorage(search || '', propsColumns, historyReplace, {
@@ -25689,6 +26237,8 @@ const useStatefulTable = props => {
     setLocalStorageFilters,
     localStorageSorting: sortModel,
     setLocalStorageSorting: setSortModel,
+    localStoragePagination: paginationModel,
+    setLocalStoragePagination: setPaginationModel,
     localStorageColumnsVisibility: visibilityModelLocalStorage,
     setLocalStorageColumnsVisibility: setVisibilityModelLocalStorage,
     localStoragePinnedColumns: pinnedColumns,
@@ -25702,10 +26252,18 @@ const useStatefulTable = props => {
     apiRef,
     columns,
     onFilterModelChange: (model, details) => {
-      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(model, details);
+      const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        items: model.items.map(item => {
+          const column = apiRef.current.getColumn(item.columnField);
+          item.type = column.type || 'string';
+          return item;
+        })
+      });
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
       updateUrl({
-        filterModel: model,
+        filterModel: filterModel,
         sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
       }, search, historyReplace, columns);
@@ -25716,158 +26274,85 @@ const useStatefulTable = props => {
       updateUrl({
         filterModel: filterParsed,
         sortModel: model,
+        paginationModel: paginationModelParsed,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
       }, search, historyReplace, columns);
     },
     sortModel: sortModelParsed,
     onPinnedColumnsChange: (pinnedColumns, details) => {
-      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
-      updateUrl({
-        filterModel: filterParsed,
-        sortModel: sortModelParsed,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
-        pinnedColumnsModel: pinnedColumns
-      }, search, historyReplace, columns);
-    },
-    pinnedColumns: pinnedColumnsModel,
-    page: paginationModel.page,
-    pageSize: paginationModel.pageSize,
-    onPageChange: (page, details) => {
-      propsOnPageChange === null || propsOnPageChange === void 0 ? void 0 : propsOnPageChange(page, details);
-      setPaginationModel({
-        page,
-        pageSize: paginationModel.pageSize
-      });
-    },
-    onPageSizeChange: (pageSize, details) => {
-      propsOnPageSizeChange === null || propsOnPageSizeChange === void 0 ? void 0 : propsOnPageSizeChange(pageSize, details);
-      setPaginationModel({
-        page: paginationModel.page,
-        pageSize
-      });
-    },
-    columnVisibilityModel: visibilityModel,
-    onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
-      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
-      updateUrl({
-        filterModel: filterParsed,
-        sortModel: sortModelParsed,
-        columnsModel: columnsVisibilityModel,
-        pinnedColumnsModel: pinnedColumnsModel
-      }, search, historyReplace, columns);
-    },
-    onColumnWidthChange: (params, event, details) => {
-      propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
-      onColumnDimensionChange({
-        newWidth: params.width,
-        field: params.colDef.field
-      });
-    }
-  };
-};
-
-const _excluded$1 = ["apiRef", "columns", "onColumnVisibilityModelChange", "onColumnWidthChange", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onPinnedColumnsChange", "onSortModelChange", "pinnedCustomColumns", "rows", "useRouter"],
-  _excluded2 = ["apiRef", "autoHeight", "className", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "height", "hideToolbar", "initialState", "isRowSelectable", "isStateful", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "selectionModel", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "paginationProps", "pinnedCustomColumns", "rows", "rowsPerPageOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
-const COMPONENT_NAME$1 = 'DataGrid';
-const CLASSNAME$1 = 'redsift-datagrid';
-const onServerSideSelectionStatusChange = (newSelectionModel, apiRef, selectionStatus, isRowSelectable, page, pageSize) => {
-  const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
-    let {
-      model
-    } = _ref;
-    return isRowSelectable({
-      row: model
-    });
-  }).map(_ref2 => {
-    let {
-      id
-    } = _ref2;
-    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
-    };
-  }
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumns
+      }, search, historyReplace, columns);
+    },
+    pinnedColumns: pinnedColumnsModel,
+    page: paginationModelParsed.page,
+    pageSize: paginationModelParsed.pageSize,
+    onPageChange: (page, details) => {
+      const direction = paginationModelParsed.page < page ? 'next' : 'back';
+      propsOnPageChange === null || propsOnPageChange === void 0 ? void 0 : propsOnPageChange(page, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: {
+          page,
+          pageSize: paginationModelParsed.pageSize,
+          direction
+        },
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    onPageSizeChange: (pageSize, details) => {
+      propsOnPageSizeChange === null || propsOnPageSizeChange === void 0 ? void 0 : propsOnPageSizeChange(pageSize, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: {
+          page: paginationModelParsed.page,
+          pageSize,
+          direction: paginationModelParsed.direction
+        },
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    columnVisibilityModel: visibilityModel,
+    onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: columnsVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel
+      }, search, historyReplace, columns);
+    },
+    onColumnWidthChange: (params, event, details) => {
+      propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
+      onColumnDimensionChange({
+        newWidth: params.width,
+        field: params.colDef.field
+      });
+    }
+  };
 };
+
+const _excluded$1 = ["apiRef", "autoHeight", "className", "columns", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "page", "pageSize", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "selectionModel", "onColumnWidthChange", "onPageChange", "onPageSizeChange", "onSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "pinnedCustomColumns", "rows", "rowsPerPageOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+const COMPONENT_NAME$1 = 'DataGrid';
+const CLASSNAME$1 = 'redsift-datagrid';
 const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      // density = 'standard',
-      apiRef,
-      columns,
-      onColumnVisibilityModelChange,
-      onColumnWidthChange,
-      onFilterModelChange,
-      onPageChange,
-      onPageSizeChange,
-      onPinnedColumnsChange,
-      onSortModelChange,
-      pinnedCustomColumns,
-      rows,
-      useRouter
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
-  const statefulTableProps = useStatefulTable({
-    apiRef: apiRef,
-    columns,
-    onFilterModelChange,
-    onPinnedColumnsChange,
-    onSortModelChange,
-    onPageChange,
-    onPageSizeChange,
-    onColumnVisibilityModelChange,
-    onColumnWidthChange,
-    pinnedCustomColumns,
-    useRouter: useRouter
-  });
-  return /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({
-    ref: ref,
-    rows: rows
-  }, forwardedProps, statefulTableProps));
-});
-const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _initialState$paginat, _initialState$paginat2;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
       autoHeight,
       className,
+      columns,
       columnTypes: propsColumnTypes,
       components,
       componentsProps,
@@ -25875,22 +26360,22 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       columnVisibilityModel: propsColumnVisibilityModel,
       pinnedColumns: propsPinnedColumns,
       sortModel: propsSortModel,
+      page: propsPage,
+      pageSize: propsPageSize,
       height: propsHeight,
       hideToolbar,
       initialState,
       isRowSelectable,
-      isStateful: propsIsStateful,
       license = process.env.MUI_LICENSE_KEY,
       onFilterModelChange: propsOnFilterModelChange,
+      selectionModel: propsSelectionModel,
+      onColumnWidthChange: propsOnColumnWidthChange,
       onPageChange: propsOnPageChange,
       onPageSizeChange: propsOnPageSizeChange,
+      onSelectionModelChange,
       onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
       onPinnedColumnsChange: propsOnPinnedColumnsChange,
       onSortModelChange: propsOnSortModelChange,
-      selectionModel: propsSelectionModel,
-      onSelectionModelChange,
-      page: propsPage,
-      pageSize: propsPageSize,
       pagination,
       paginationPlacement = 'both',
       paginationProps,
@@ -25903,95 +26388,74 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       paginationMode = 'client',
       rowCount
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded2);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const theme = useTheme$4(propsTheme);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
   const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar$2;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
-  const [filterModel, setFilterModel] = useState(propsFilterModel);
-  useEffect(() => {
-    setFilterModel(propsFilterModel);
-  }, [propsFilterModel]);
-  const onFilterModelChange = (model, details) => {
-    if (propsOnFilterModelChange) {
-      propsOnFilterModelChange(model, details);
-    } else {
-      setFilterModel(model);
-    }
-  };
-  const [columnVisibilityModel, setColumnVisibilityModel] = useState(propsColumnVisibilityModel);
-  useEffect(() => {
-    setColumnVisibilityModel(propsColumnVisibilityModel);
-  }, [propsColumnVisibilityModel]);
-  const onColumnVisibilityModelChange = (model, details) => {
-    if (propsOnColumnVisibilityModelChange) {
-      propsOnColumnVisibilityModelChange(model, details);
-    } else {
-      setColumnVisibilityModel(model);
-    }
-  };
-  const [pinnedColumns, setPinnedColumns] = useState(propsPinnedColumns);
-  useEffect(() => {
-    setPinnedColumns(propsPinnedColumns);
-  }, [propsPinnedColumns]);
-  const onPinnedColumnsChange = (model, details) => {
-    if (propsOnPinnedColumnsChange) {
-      propsOnPinnedColumnsChange(model, details);
-    } else {
-      setPinnedColumns(model);
-    }
-  };
-  const [sortModel, setSortModel] = useState(propsSortModel);
-  useEffect(() => {
-    setSortModel(propsSortModel);
-  }, [propsSortModel]);
-  const onSortModelChange = (model, details) => {
-    if (propsOnSortModelChange) {
-      propsOnSortModelChange(model, details);
-    } else {
-      setSortModel(model);
-    }
-  };
+  const {
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPageChange: controlledOnPageChange,
+    onPageSizeChange: controlledOnPageSizeChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange
+  } = useControlledDatagridState({
+    initialState,
+    rowsPerPageOptions,
+    propsColumnVisibilityModel,
+    propsFilterModel,
+    propsOnColumnVisibilityModelChange,
+    propsOnFilterModelChange,
+    propsOnPinnedColumnsChange,
+    propsOnSortModelChange,
+    propsPage,
+    propsPageSize,
+    propsPinnedColumns,
+    propsSortModel,
+    propsOnPageChange,
+    propsOnPageSizeChange
+  });
+  const {
+    columnVisibilityModel,
+    filterModel,
+    onColumnVisibilityModelChange,
+    onFilterModelChange,
+    onPageChange,
+    onPageSizeChange,
+    onPinnedColumnsChange,
+    onSortModelChange,
+    page,
+    pageSize,
+    pinnedColumns,
+    sortModel,
+    onColumnWidthChange
+  } = useStatefulTable({
+    apiRef: apiRef,
+    columns,
+    onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
+    onColumnWidthChange: propsOnColumnWidthChange,
+    onFilterModelChange: controlledOnFilterModelChange,
+    onPageChange: controlledOnPageChange,
+    onPageSizeChange: controlledOnPageSizeChange,
+    onPinnedColumnsChange: controlledOnPinnedColumnsChange,
+    onSortModelChange: controlledOnSortModelChange,
+    pinnedCustomColumns,
+    useRouter: useRouter
+  });
   const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   useEffect(() => {
     setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
   }, [propsSelectionModel]);
-  const [page, setPage] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
-  const [pageSize, setPageSize] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 100);
   const selectionStatus = useRef({
     type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectedRowsInPage: 0,
     page,
-    pageSize
+    pageSize: pageSize
   });
-  const onPageChange = page => {
-    if (propsOnPageChange) {
-      propsOnPageChange(page, undefined);
-    } else {
-      setPage(page);
-    }
-  };
-  useEffect(() => {
-    if (propsPage || propsPage === 0) {
-      setPage(propsPage);
-    }
-  }, [propsPage]);
-  const onPageSizeChange = pageSize => {
-    onPageChange(0);
-    if (propsOnPageSizeChange) {
-      propsOnPageSizeChange(pageSize, undefined);
-    } else {
-      setPageSize(pageSize);
-    }
-  };
-  useEffect(() => {
-    if (propsPageSize) {
-      setPageSize(propsPageSize);
-    }
-  }, [propsPageSize]);
 
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
@@ -26015,8 +26479,6 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }), [theme]);
-  const isStateful = propsIsStateful && useRouter;
-  const RenderedDataGrid = isStateful ? StatefulDataGrid : DataGridPro;
   return /*#__PURE__*/React__default.createElement(ThemeProvider$4, {
     value: {
       theme
@@ -26025,14 +26487,32 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     theme: muiTheme
   }, /*#__PURE__*/React__default.createElement(StyledDataGrid, {
     ref: datagridRef,
-    className: classNames(DataGrid.className, className),
+    className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(RenderedDataGrid, _extends$2({}, isStateful ? {
-    pinnedCustomColumns,
-    useRouter
-  } : {}, forwardedProps, {
-    rowCount: rowCount,
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({}, forwardedProps, {
     apiRef: apiRef,
+    columns: columns,
+    columnVisibilityModel: columnVisibilityModel,
+    filterModel: filterModel,
+    onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onFilterModelChange: onFilterModelChange,
+    onPageChange: onPageChange,
+    onPageSizeChange: onPageSizeChange,
+    onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
+    page: page,
+    pageSize: pageSize,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
+    rowsPerPageOptions: rowsPerPageOptions,
+    onColumnWidthChange: onColumnWidthChange,
+    initialState: initialState,
+    isRowSelectable: isRowSelectable,
+    pagination: pagination,
+    paginationMode: paginationMode,
+    keepNonExistentRowsSelected: paginationMode == 'server',
+    rows: rows,
+    rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: Boolean(pagination),
     columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
@@ -26076,34 +26556,36 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       }, props))
     }, components), {}, {
       Toolbar: ToolbarWrapper,
-      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),
-        selectionStatus: selectionStatus.current,
-        page: page,
-        onPageChange: onPageChange,
-        pageSize: pageSize,
-        onPageSizeChange: onPageSizeChange,
-        rowsPerPageOptions: rowsPerPageOptions,
-        paginationProps: paginationProps,
-        paginationMode: paginationMode,
-        rowCount: rowCount
-      })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$2({}, props, {
-        displaySelection: false,
-        displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
-        displayPagination: ['bottom', 'both'].includes(paginationPlacement),
-        selectionStatus: selectionStatus.current,
-        apiRef: apiRef,
-        isRowSelectable: isRowSelectable,
-        page: page,
-        onPageChange: onPageChange,
-        pageSize: pageSize,
-        onPageSizeChange: onPageSizeChange,
-        rowsPerPageOptions: rowsPerPageOptions,
-        paginationProps: paginationProps,
-        paginationMode: paginationMode
-      })) : null
+      Pagination: props => {
+        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus.current,
+          page: page,
+          pageSize: pageSize,
+          onPageChange: onPageChange,
+          onPageSizeChange: onPageSizeChange,
+          rowsPerPageOptions: rowsPerPageOptions,
+          paginationProps: paginationProps,
+          paginationMode: paginationMode,
+          rowCount: rowCount
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$2({}, props, {
+          displaySelection: false,
+          displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
+          displayPagination: ['bottom', 'both'].includes(paginationPlacement),
+          selectionStatus: selectionStatus.current,
+          apiRef: apiRef,
+          isRowSelectable: isRowSelectable,
+          page: page,
+          pageSize: pageSize,
+          onPageChange: onPageChange,
+          onPageSizeChange: onPageSizeChange,
+          rowsPerPageOptions: rowsPerPageOptions,
+          paginationProps: paginationProps,
+          paginationMode: paginationMode
+        })) : null;
+      }
     }),
     componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
       toolbar: _objectSpread2({
@@ -26117,8 +26599,8 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         apiRef,
         isRowSelectable,
         page,
-        onPageChange,
         pageSize,
+        onPageChange,
         onPageSizeChange,
         rowsPerPageOptions,
         paginationProps,
@@ -26126,55 +26608,34 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         rowCount
       }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
     }),
-    filterModel: filterModel,
-    columnVisibilityModel: columnVisibilityModel,
-    pinnedColumns: pinnedColumns,
-    sortModel: sortModel,
-    initialState: initialState,
-    isRowSelectable: isRowSelectable,
-    onFilterModelChange: onFilterModelChange,
-    onColumnVisibilityModelChange: onColumnVisibilityModelChange
-    // onColumnWidthChange={onColumnWidthChange}
-    ,
-    onPinnedColumnsChange: onPinnedColumnsChange,
-    onSortModelChange: onSortModelChange,
-    pagination: pagination,
-    paginationMode: paginationMode,
-    keepNonExistentRowsSelected: paginationMode == 'server',
-    rows: rows,
-    rowsPerPageOptions: rowsPerPageOptions,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
     selectionModel: selectionModel,
     onSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref3 => {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
           let {
             model
-          } = _ref3;
+          } = _ref;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref4 => {
+        }).map(_ref2 => {
           let {
             id
-          } = _ref4;
+          } = _ref2;
           return id;
         }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref5 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
           let {
             model
-          } = _ref5;
+          } = _ref3;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref6 => {
+        }).map(_ref4 => {
           let {
             id
-          } = _ref6;
+          } = _ref4;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
@@ -26219,8 +26680,8 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     })
   })))));
 });
-DataGrid.className = CLASSNAME$1;
-DataGrid.displayName = COMPONENT_NAME$1;
+StatefulDataGrid.className = CLASSNAME$1;
+StatefulDataGrid.displayName = COMPONENT_NAME$1;
 
 const StyledTextCell = styled$3.div`
   align-items: center;
@@ -26280,5 +26741,5 @@ const TextCell = /*#__PURE__*/forwardRef((props, ref) => {
 TextCell.className = CLASSNAME;
 TextCell.displayName = COMPONENT_NAME;
 
-export { CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DIMENSION_MODEL_KEY, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, ENDS_WITH_ANY_OF, FILTER_MODEL_KEY, FILTER_SEARCH_KEY, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, PAGINATION_MODEL_KEY, PINNED_COLUMNS, SORT_MODEL_KEY, STARTS_WITH_ANY_OF, TextCell, Toolbar$2 as Toolbar, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, numberOperatorDecoder, numberOperatorEncoder, operatorList, updateUrl, urlSearchParamsToString };
+export { BaseButton, BaseCheckbox, BaseIcon, BasePopper, BaseTextField, CATEGORIES, CONTAINS_ANY_OF, CONTAINS_ANY_OF_I, ControlledPagination, DEFAULT_OPERATORS, DETAIL_PANEL_TOGGLE_COL_DEF, DIMENSION_MODEL_KEY, DOES_NOT_CONTAIN, DOES_NOT_EQUAL, DataGrid, ENDS_WITH_ANY_OF, FILTER_MODEL_KEY, FILTER_SEARCH_KEY, GridToolbarFilterSemanticField, IS_ANY_OF, IS_BETWEEN, IS_NOT_ANY_OF, PAGINATION_MODEL_KEY, PINNED_COLUMNS, SORT_MODEL_KEY, STARTS_WITH_ANY_OF, ServerSideControlledPagination, StatefulDataGrid, TextCell, Toolbar$2 as Toolbar, ToolbarWrapper, VISIBILITY_MODEL_KEY, areFilterModelsEquivalent, buildStorageKey, clearPreviousVersionStorage, customColumnTypes, decodeValue, encodeValue, getColumnVisibilityFromString, getCompletion, getFilterModelFromString, getFinalSearch, getGridNumericOperators, getGridStringArrayOperators, getGridStringOperators, getModelsParsedOrUpdateLocalStorage, getPaginationFromString, getPinnedColumnsFromString, getRsNumberColumnType, getRsStringColumnType, getSearchParamsFromColumnVisibility, getSearchParamsFromFilterModel, getSearchParamsFromPagination, getSearchParamsFromPinnedColumns, getSearchParamsFromSorting, getSearchParamsFromTab, getSortingFromString, muiIconToDSIcon, numberOperatorDecoder, numberOperatorEncoder, onServerSideSelectionStatusChange, operatorList, updateUrl, urlSearchParamsToString };
 //# sourceMappingURL=index.js.map