@redsift/table 12.5.4 → 12.5.5-muiv6

package/_internal/StatefulDataGrid2.js

@@ -1,18 +1,1249 @@
-import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends$2 } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
-import React__default, { useCallback, useEffect, useRef, useMemo, forwardRef, useState } from 'react';
-import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
+import React__default, { useCallback, useEffect, useMemo, useRef, forwardRef, useState } from 'react';
 import classNames from 'classnames';
-import { LicenseInfo } from '@mui/x-license';
-import { Icon, useTheme, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
-import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPremium } from '@mui/x-data-grid-premium';
-import { u as useControlledDatagridState, S as StyledDataGrid } from './useControlledDatagridState.js';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
+import { Icon, useTheme as useTheme$1, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
+import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
+import { L as LicenseInfo, u as useControlledDatagridState, T as ThemeProvider$1, S as StyledDataGrid } from './useControlledDatagridState.js';
 import { mdiSync } from '@redsift/icons';
+import { s as styled, a as styleFunctionSx, e as extendSxProp, _ as _objectWithoutPropertiesLoose, b as _extends, g as generateUtilityClasses, c as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, d as generateUtilityClass, f as styled$1, h as _extends$1, u as useDefaultProps, i as _objectWithoutPropertiesLoose$1, j as capitalize, k as composeClasses, r as rootShouldForwardProp, l as refType } from './Portal.js';
+import { u as useTheme, a as useFormControl, b as formControlState, c as clsx$1, i as isAdornedStart, d as isFilled, F as FormControlContext, e as useId, h as Select, I as Input, j as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
+import { j as jsxRuntimeExports } from './jsx-runtime.js';
 import { decompressFromEncodedURIComponent, compressToEncodedURIComponent } from 'lz-string';
-import { n as normalizeRowSelectionModel, o as onServerSideSelectionStatusChange, g as getSelectionCount, i as isRowSelected, S as ServerSideControlledPagination, C as ControlledPagination } from './ServerSideControlledPagination.js';
-import { B as BaseButton, a as BaseCheckbox, c as BaseIconButton, b as BaseIcon } from './BaseIconButton.js';
+import { T as Toolbar } from './Toolbar2.js';
+import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
+import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
+
+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)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const _excluded$6 = ["className", "component"];
+function createBox(options = {}) {
+  const {
+    themeId,
+    defaultTheme,
+    defaultClassName = 'MuiBox-root',
+    generateClassName
+  } = options;
+  const BoxRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+  })(styleFunctionSx);
+  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
+    const theme = useTheme(defaultTheme);
+    const _extendSxProp = extendSxProp(inProps),
+      {
+        className,
+        component = 'div'
+      } = _extendSxProp,
+      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
+    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
+      as: component,
+      ref: ref,
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+      theme: themeId ? theme[themeId] || theme : theme
+    }, other));
+  });
+  return Box;
+}
+
+function isMuiElement(element, muiNames) {
+  var _muiName, _element$type;
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf( // For server components `muiName` is avaialble in element.type._payload.value.muiName
+  // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+  // eslint-disable-next-line no-underscore-dangle
+  (_muiName = element.type.muiName) != null ? _muiName : (_element$type = element.type) == null || (_element$type = _element$type._payload) == null || (_element$type = _element$type.value) == null ? void 0 : _element$type.muiName) !== -1;
+}
+
+const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+var boxClasses$1 = boxClasses;
+
+const defaultTheme = createTheme();
+const Box = createBox({
+  themeId: THEME_ID,
+  defaultTheme,
+  defaultClassName: boxClasses$1.root,
+  generateClassName: ClassNameGenerator.generate
+});
+process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: 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])
+} : void 0;
+var Box$1 = Box;
+
+function getFormLabelUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormLabel', slot);
+}
+const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
+var formLabelClasses$1 = formLabelClasses;
+
+const _excluded$5 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
+const useUtilityClasses$4 = ownerState => {
+  const {
+    classes,
+    color,
+    focused,
+    disabled,
+    error,
+    filled,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
+    asterisk: ['asterisk', error && 'error']
+  };
+  return composeClasses(slots, getFormLabelUtilityClasses, classes);
+};
+const FormLabelRoot = styled$1('label', {
+  name: 'MuiFormLabel',
+  slot: 'Root',
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends$1({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends$1({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.body1, {
+  lineHeight: '1.4375em',
+  padding: 0,
+  position: 'relative',
+  [`&.${formLabelClasses$1.focused}`]: {
+    color: (theme.vars || theme).palette[ownerState.color].main
+  },
+  [`&.${formLabelClasses$1.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${formLabelClasses$1.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
+const AsteriskComponent = styled$1('span', {
+  name: 'MuiFormLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk
+})(({
+  theme
+}) => ({
+  [`&.${formLabelClasses$1.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
+const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiFormLabel'
+  });
+  const {
+      children,
+      className,
+      component = 'label'
+    } = props,
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$5);
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
+  });
+  const ownerState = _extends$1({}, props, {
+    color: fcs.color || 'primary',
+    component,
+    disabled: fcs.disabled,
+    error: fcs.error,
+    filled: fcs.filled,
+    focused: fcs.focused,
+    required: fcs.required
+  });
+  const classes = useUtilityClasses$4(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends$1({
+    as: component,
+    ownerState: ownerState,
+    className: clsx$1(classes.root, className),
+    ref: ref
+  }, other, {
+    children: [children, fcs.required && /*#__PURE__*/jsxRuntimeExports.jsxs(AsteriskComponent, {
+      ownerState: ownerState,
+      "aria-hidden": true,
+      className: classes.asterisk,
+      children: ["\u2009", '*']
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled: PropTypes.bool,
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * 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])
+} : void 0;
+var FormLabel$1 = FormLabel;
+
+function getInputLabelUtilityClasses(slot) {
+  return generateUtilityClass('MuiInputLabel', slot);
+}
+generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
+
+const _excluded$4 = ["disableAnimation", "margin", "shrink", "variant", "className"];
+const useUtilityClasses$3 = ownerState => {
+  const {
+    classes,
+    formControl,
+    size,
+    shrink,
+    disableAnimation,
+    variant,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
+    asterisk: [required && 'asterisk']
+  };
+  const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
+  return _extends$1({}, classes, composedClasses);
+};
+const InputLabelRoot = styled$1(FormLabel$1, {
+  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiInputLabel',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
+    }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, ownerState.focused && styles.focused, styles[ownerState.variant]];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends$1({
+  display: 'block',
+  transformOrigin: 'top left',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: '100%'
+}, ownerState.formControl && {
+  position: 'absolute',
+  left: 0,
+  top: 0,
+  // slight alteration to spec spacing to match visual spec result
+  transform: 'translate(0, 20px) scale(1)'
+}, ownerState.size === 'small' && {
+  // Compensation for the `Input.inputSizeSmall` style.
+  transform: 'translate(0, 17px) scale(1)'
+}, ownerState.shrink && {
+  transform: 'translate(0, -1.5px) scale(0.75)',
+  transformOrigin: 'top left',
+  maxWidth: '133%'
+}, !ownerState.disableAnimation && {
+  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
+    duration: theme.transitions.duration.shorter,
+    easing: theme.transitions.easing.easeOut
+  })
+}, ownerState.variant === 'filled' && _extends$1({
+  // Chrome's autofill feature gives the input field a yellow background.
+  // Since the input field is behind the label in the HTML tree,
+  // the input field is drawn last and hides the label with an opaque background color.
+  // zIndex: 1 will raise the label above opaque background-colors of input.
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(12px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 13px) scale(1)'
+}, ownerState.shrink && _extends$1({
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  transform: 'translate(12px, 7px) scale(0.75)',
+  maxWidth: 'calc(133% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(12px, 4px) scale(0.75)'
+})), ownerState.variant === 'outlined' && _extends$1({
+  // see comment above on filled.zIndex
+  zIndex: 1,
+  pointerEvents: 'none',
+  transform: 'translate(14px, 16px) scale(1)',
+  maxWidth: 'calc(100% - 24px)'
+}, ownerState.size === 'small' && {
+  transform: 'translate(14px, 9px) scale(1)'
+}, ownerState.shrink && {
+  userSelect: 'none',
+  pointerEvents: 'auto',
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: 'calc(133% - 32px)',
+  transform: 'translate(14px, -9px) scale(0.75)'
+})));
+const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
+  const props = useDefaultProps({
+    name: 'MuiInputLabel',
+    props: inProps
+  });
+  const {
+      disableAnimation = false,
+      shrink: shrinkProp,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$4);
+  const muiFormControl = useFormControl();
+  let shrink = shrinkProp;
+  if (typeof shrink === 'undefined' && muiFormControl) {
+    shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
+  }
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['size', 'variant', 'required', 'focused']
+  });
+  const ownerState = _extends$1({}, props, {
+    disableAnimation,
+    formControl: muiFormControl,
+    shrink,
+    size: fcs.size,
+    variant: fcs.variant,
+    required: fcs.required,
+    focused: fcs.focused
+  });
+  const classes = useUtilityClasses$3(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends$1({
+    "data-shrink": shrink,
+    ownerState: ownerState,
+    ref: ref,
+    className: clsx$1(classes.root, className)
+  }, other, {
+    classes: classes
+  }));
+});
+process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation: PropTypes.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense']),
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink: PropTypes.bool,
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
+  /**
+   * 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]),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+var InputLabel$1 = InputLabel;
+
+function getFormControlUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormControl', slot);
+}
+generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
+
+const _excluded$3 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
+const useUtilityClasses$2 = ownerState => {
+  const {
+    classes,
+    margin,
+    fullWidth
+  } = ownerState;
+  const slots = {
+    root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
+  };
+  return composeClasses(slots, getFormControlUtilityClasses, classes);
+};
+const FormControlRoot = styled$1('div', {
+  name: 'MuiFormControl',
+  slot: 'Root',
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends$1({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+  }
+})(({
+  ownerState
+}) => _extends$1({
+  display: 'inline-flex',
+  flexDirection: 'column',
+  position: 'relative',
+  // Reset fieldset default style.
+  minWidth: 0,
+  padding: 0,
+  margin: 0,
+  border: 0,
+  verticalAlign: 'top'
+}, ownerState.margin === 'normal' && {
+  marginTop: 16,
+  marginBottom: 8
+}, ownerState.margin === 'dense' && {
+  marginTop: 8,
+  marginBottom: 4
+}, ownerState.fullWidth && {
+  width: '100%'
+}));
+
+/**
+ * Provides context such as filled/focused/error/required for form inputs.
+ * Relying on the context provides high flexibility and ensures that the state always stays
+ * consistent across the children of the `FormControl`.
+ * This context is used by the following components:
+ *
+ *  - FormLabel
+ *  - FormHelperText
+ *  - Input
+ *  - InputLabel
+ *
+ * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
+ *
+ * ```jsx
+ * <FormControl>
+ *   <InputLabel htmlFor="my-input">Email address</InputLabel>
+ *   <Input id="my-input" aria-describedby="my-helper-text" />
+ *   <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
+ * </FormControl>
+ * ```
+ *
+ * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
+ * For instance, only one input can be focused at the same time, the state shouldn't be shared.
+ */
+const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiFormControl'
+  });
+  const {
+      children,
+      className,
+      color = 'primary',
+      component = 'div',
+      disabled = false,
+      error = false,
+      focused: visuallyFocused,
+      fullWidth = false,
+      hiddenLabel = false,
+      margin = 'none',
+      required = false,
+      size = 'medium',
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$3);
+  const ownerState = _extends$1({}, props, {
+    color,
+    component,
+    disabled,
+    error,
+    fullWidth,
+    hiddenLabel,
+    margin,
+    required,
+    size,
+    variant
+  });
+  const classes = useUtilityClasses$2(ownerState);
+  const [adornedStart, setAdornedStart] = React.useState(() => {
+    // We need to iterate through the children and find the Input in order
+    // to fully support server-side rendering.
+    let initialAdornedStart = false;
+    if (children) {
+      React.Children.forEach(children, child => {
+        if (!isMuiElement(child, ['Input', 'Select'])) {
+          return;
+        }
+        const input = isMuiElement(child, ['Select']) ? child.props.input : child;
+        if (input && isAdornedStart(input.props)) {
+          initialAdornedStart = true;
+        }
+      });
+    }
+    return initialAdornedStart;
+  });
+  const [filled, setFilled] = React.useState(() => {
+    // We need to iterate through the children and find the Input in order
+    // to fully support server-side rendering.
+    let initialFilled = false;
+    if (children) {
+      React.Children.forEach(children, child => {
+        if (!isMuiElement(child, ['Input', 'Select'])) {
+          return;
+        }
+        if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
+          initialFilled = true;
+        }
+      });
+    }
+    return initialFilled;
+  });
+  const [focusedState, setFocused] = React.useState(false);
+  if (disabled && focusedState) {
+    setFocused(false);
+  }
+  const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
+  let registerEffect;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const registeredInput = React.useRef(false);
+    registerEffect = () => {
+      if (registeredInput.current) {
+        console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
+      }
+      registeredInput.current = true;
+      return () => {
+        registeredInput.current = false;
+      };
+    };
+  }
+  const childContext = React.useMemo(() => {
+    return {
+      adornedStart,
+      setAdornedStart,
+      color,
+      disabled,
+      error,
+      filled,
+      focused,
+      fullWidth,
+      hiddenLabel,
+      size,
+      onBlur: () => {
+        setFocused(false);
+      },
+      onEmpty: () => {
+        setFilled(false);
+      },
+      onFilled: () => {
+        setFilled(true);
+      },
+      onFocus: () => {
+        setFocused(true);
+      },
+      registerEffect,
+      required,
+      variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
+    value: childContext,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends$1({
+      as: component,
+      ownerState: ownerState,
+      className: clsx$1(classes.root, className),
+      ref: ref
+    }, other, {
+      children: children
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: PropTypes.bool,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * 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]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+var FormControl$1 = FormControl;
+
+function getFormHelperTextUtilityClasses(slot) {
+  return generateUtilityClass('MuiFormHelperText', slot);
+}
+const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
+var formHelperTextClasses$1 = formHelperTextClasses;
+
+var _span;
+const _excluded$2 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
+const useUtilityClasses$1 = ownerState => {
+  const {
+    classes,
+    contained,
+    size,
+    disabled,
+    error,
+    filled,
+    focused,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', disabled && 'disabled', error && 'error', size && `size${capitalize(size)}`, contained && 'contained', focused && 'focused', filled && 'filled', required && 'required']
+  };
+  return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
+};
+const FormHelperTextRoot = styled$1('p', {
+  name: 'MuiFormHelperText',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends$1({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.caption, {
+  textAlign: 'left',
+  marginTop: 3,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  [`&.${formHelperTextClasses$1.disabled}`]: {
+    color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${formHelperTextClasses$1.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}, ownerState.size === 'small' && {
+  marginTop: 4
+}, ownerState.contained && {
+  marginLeft: 14,
+  marginRight: 14
+}));
+const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiFormHelperText'
+  });
+  const {
+      children,
+      className,
+      component = 'p'
+    } = props,
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$2);
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
+  });
+  const ownerState = _extends$1({}, props, {
+    component,
+    contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
+    variant: fcs.variant,
+    size: fcs.size,
+    disabled: fcs.disabled,
+    error: fcs.error,
+    filled: fcs.filled,
+    focused: fcs.focused,
+    required: fcs.required
+  });
+  const classes = useUtilityClasses$1(ownerState);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends$1({
+    as: component,
+    ownerState: ownerState,
+    className: clsx$1(classes.root, className),
+    ref: ref
+  }, other, {
+    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
+    _span || (_span = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      className: "notranslate",
+      children: "\u200B"
+    })) : children
+  }));
+});
+process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled: PropTypes.bool,
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused: PropTypes.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: PropTypes.oneOf(['dense']),
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required: PropTypes.bool,
+  /**
+   * 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]),
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
+} : void 0;
+var FormHelperText$1 = FormHelperText;
+
+function getTextFieldUtilityClass(slot) {
+  return generateUtilityClass('MuiTextField', slot);
+}
+generateUtilityClasses('MuiTextField', ['root']);
+
+const _excluded$1 = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
+const variantComponent = {
+  standard: Input,
+  filled: FilledInput,
+  outlined: OutlinedInput
+};
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getTextFieldUtilityClass, classes);
+};
+const TextFieldRoot = styled$1(FormControl$1, {
+  name: 'MuiTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+
+/**
+ * The `TextField` is a convenience wrapper for the most common cases (80%).
+ * It cannot be all things to all people, otherwise the API would grow out of control.
+ *
+ * ## Advanced Configuration
+ *
+ * It's important to understand that the text field is a simple abstraction
+ * on top of the following components:
+ *
+ * - [FormControl](/material-ui/api/form-control/)
+ * - [InputLabel](/material-ui/api/input-label/)
+ * - [FilledInput](/material-ui/api/filled-input/)
+ * - [OutlinedInput](/material-ui/api/outlined-input/)
+ * - [Input](/material-ui/api/input/)
+ * - [FormHelperText](/material-ui/api/form-helper-text/)
+ *
+ * If you wish to alter the props applied to the `input` element, you can do so as follows:
+ *
+ * ```jsx
+ * const inputProps = {
+ *   step: 300,
+ * };
+ *
+ * return <TextField id="time" type="time" inputProps={inputProps} />;
+ * ```
+ *
+ * For advanced cases, please look at the source of TextField by clicking on the
+ * "Edit this page" button above. Consider either:
+ *
+ * - using the upper case props for passing values directly to the components
+ * - using the underlying components directly as shown in the demos
+ */
+const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: 'MuiTextField'
+  });
+  const {
+      autoComplete,
+      autoFocus = false,
+      children,
+      className,
+      color = 'primary',
+      defaultValue,
+      disabled = false,
+      error = false,
+      FormHelperTextProps,
+      fullWidth = false,
+      helperText,
+      id: idOverride,
+      InputLabelProps,
+      inputProps,
+      InputProps,
+      inputRef,
+      label,
+      maxRows,
+      minRows,
+      multiline = false,
+      name,
+      onBlur,
+      onChange,
+      onFocus,
+      placeholder,
+      required = false,
+      rows,
+      select = false,
+      SelectProps,
+      type,
+      value,
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose$1(props, _excluded$1);
+  const ownerState = _extends$1({}, props, {
+    autoFocus,
+    color,
+    disabled,
+    error,
+    fullWidth,
+    multiline,
+    required,
+    select,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  if (process.env.NODE_ENV !== 'production') {
+    if (select && !children) {
+      console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
+    }
+  }
+  const InputMore = {};
+  if (variant === 'outlined') {
+    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
+      InputMore.notched = InputLabelProps.shrink;
+    }
+    InputMore.label = label;
+  }
+  if (select) {
+    // unset defaults from textbox inputs
+    if (!SelectProps || !SelectProps.native) {
+      InputMore.id = undefined;
+    }
+    InputMore['aria-describedby'] = undefined;
+  }
+  const id = useId(idOverride);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const InputComponent = variantComponent[variant];
+  const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputComponent, _extends$1({
+    "aria-describedby": helperTextId,
+    autoComplete: autoComplete,
+    autoFocus: autoFocus,
+    defaultValue: defaultValue,
+    fullWidth: fullWidth,
+    multiline: multiline,
+    name: name,
+    rows: rows,
+    maxRows: maxRows,
+    minRows: minRows,
+    type: type,
+    value: value,
+    id: id,
+    inputRef: inputRef,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    placeholder: placeholder,
+    inputProps: inputProps
+  }, InputMore, InputProps));
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends$1({
+    className: clsx$1(classes.root, className),
+    disabled: disabled,
+    error: error,
+    fullWidth: fullWidth,
+    ref: ref,
+    required: required,
+    color: color,
+    variant: variant,
+    ownerState: ownerState
+  }, other, {
+    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabel$1, _extends$1({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends$1({
+      "aria-describedby": helperTextId,
+      id: id,
+      labelId: inputLabelId,
+      value: value,
+      input: InputElement
+    }, SelectProps, {
+      children: children
+    })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends$1({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: PropTypes.any,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: PropTypes.bool,
+  /**
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   */
+  FormHelperTextProps: PropTypes.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * The id of the `input` element.
+   * Use this prop to make `label` and `helperText` accessible for screen readers.
+   */
+  id: PropTypes.string,
+  /**
+   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   */
+  InputLabelProps: PropTypes.object,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType,
+  /**
+   * The label content.
+   */
+  label: PropTypes.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * If `true`, a `textarea` element is rendered instead of an input.
+   * @default false
+   */
+  multiline: PropTypes.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * @ignore
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onFocus: PropTypes.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * If `true`, the label is displayed as required and the `input` element is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
+   * If this option is set you must pass the options of the select as children.
+   * @default false
+   */
+  select: PropTypes.bool,
+  /**
+   * Props applied to the [`Select`](/material-ui/api/select/) element.
+   */
+  SelectProps: PropTypes.object,
+  /**
+   * The size of the component.
+   */
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
+  /**
+   * 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]),
+  /**
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
+   */
+  type: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: PropTypes.any,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+var TextField$1 = TextField;
 
 const SUBMIT_FILTER_STROKE_TIME = 500;
 const InputNumberInterval = props => {
@@ -54,7 +1285,7 @@ const InputNumberInterval = props => {
     const newLowerBound = event.target.value;
     updateFilterValue(newLowerBound, filterValueState[1]);
   };
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box$1, {
     sx: {
       display: 'inline-flex',
       flexDirection: 'row',
@@ -62,7 +1293,7 @@ const InputNumberInterval = props => {
       height: 48,
       pl: '20px'
     }
-  }, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(TextField$1, {
     name: "lower-bound-input",
     placeholder: "From",
     label: "From",
@@ -74,7 +1305,7 @@ const InputNumberInterval = props => {
     sx: {
       mr: 2
     }
-  }), /*#__PURE__*/React.createElement(TextField, {
+  }), /*#__PURE__*/React.createElement(TextField$1, {
     name: "upper-bound-input",
     placeholder: "To",
     label: "To",
@@ -106,8 +1337,8 @@ const isBetweenOperator = {
     if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
       return null;
     }
-    return value => {
-      return value !== null && value !== undefined && filterItem.value[0] <= value && value <= filterItem.value[1];
+    return params => {
+      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
     };
   },
   InputComponent: InputNumberInterval
@@ -123,14 +1354,14 @@ const doesNotContain = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return true;
       }
-      if (String(value).indexOf(filterItem.value) !== -1) {
+      if (String(params.value).indexOf(filterItem.value) !== -1) {
         return false;
       }
       return true;
@@ -147,11 +1378,11 @@ const doesNotEndWithOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return true;
       }
-      return !String(value).endsWith(filterItem.value);
+      return !String(params.value).endsWith(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -165,11 +1396,11 @@ const doesNotEqual = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return true;
       }
-      if (String(value) === filterItem.value) {
+      if (String(params.value) === filterItem.value) {
         return false;
       }
       return true;
@@ -186,11 +1417,11 @@ const doesNotHaveOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return true;
       }
-      const cellValues = Array.isArray(value) ? value : [value];
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       return !cellValues.map(value => String(value)).includes(filterItem.value);
     };
   },
@@ -208,11 +1439,11 @@ const doesNotStartWithOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return true;
       }
-      return !String(value).startsWith(filterItem.value);
+      return !String(params.value).startsWith(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -226,11 +1457,11 @@ const hasOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return false;
       }
-      const cellValues = Array.isArray(value) ? value : [value];
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       return cellValues.map(value => String(value)).includes(filterItem.value);
     };
   },
@@ -248,11 +1479,11 @@ const hasOnlyOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return false;
       }
-      const cellValues = Array.isArray(value) ? value : [value];
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
     };
   },
@@ -270,14 +1501,14 @@ const isOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return false;
       }
-      if (Array.isArray(value)) {
+      if (Array.isArray(params.value)) {
         return false;
       }
-      return String(value) === filterItem.value;
+      return String(params.value) === filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -294,14 +1525,14 @@ const isNotOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return true;
       }
-      if (Array.isArray(value)) {
+      if (Array.isArray(params.value)) {
         return true;
       }
-      return String(value) !== filterItem.value;
+      return String(params.value) !== filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -318,14 +1549,14 @@ const containsAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return false;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -348,14 +1579,14 @@ const doesNotContainAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const filteredValue of filterItem.value) {
         for (const paramValue of paramValues) {
           if (String(paramValue).indexOf(filteredValue) !== -1) {
@@ -377,14 +1608,14 @@ const doesNotEndWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const filteredValue of filterItem.value) {
         for (const paramValue of paramValues) {
           if (String(paramValue).endsWith(filteredValue)) {
@@ -406,11 +1637,11 @@ const doesNotHaveAnyOf = {
     if (!filterItem.field || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return true;
       }
-      const cellValues = Array.isArray(value) ? value : [value];
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
 
       // Return true only if none of the filter values are in the cell values
       return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
@@ -430,14 +1661,14 @@ const doesNotStartWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const filteredValue of filterItem.value) {
         for (const paramValue of paramValues) {
           if (String(paramValue).startsWith(filteredValue)) {
@@ -459,14 +1690,14 @@ const endsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return false;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -489,14 +1720,14 @@ const hasAllOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return false;
       }
-      const cellValues = Array.isArray(value) ? value : [value];
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       const cellStrings = cellValues.map(value => String(value));
       const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
       return filterItemValues.every(v => cellStrings.includes(v));
@@ -516,14 +1747,14 @@ const hasAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return false;
       }
-      const cellValues = Array.isArray(value) ? value : [value];
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
       return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
     };
@@ -542,14 +1773,14 @@ const isAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return false;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const paramValue of paramValues) {
         if (filterItem.value.includes(String(paramValue))) {
           return true;
@@ -572,14 +1803,14 @@ const isNotAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       for (const paramValue of paramValues) {
         if (filterItem.value.includes(String(paramValue))) {
           return false;
@@ -602,14 +1833,14 @@ const startsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (value == null) {
+      if (params.value == null) {
         return false;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       let match = false;
       filterItem.value.forEach(filteredValue => {
         paramValues.forEach(paramValue => {
@@ -636,15 +1867,15 @@ const isEmptyOperator = {
   value: 'isEmpty',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getApplyFilterFn: _filterItem => {
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return true;
       }
-      if (Array.isArray(value)) {
-        return value.length === 0;
+      if (Array.isArray(params.value)) {
+        return params.value.length === 0;
       }
-      if (typeof value === 'string') {
-        return value.trim() === '';
+      if (typeof params.value === 'string') {
+        return params.value.trim() === '';
       }
       return false;
     };
@@ -656,15 +1887,15 @@ const isNotEmptyOperator = {
   value: 'isNotEmpty',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getApplyFilterFn: _filterItem => {
-    return value => {
-      if (value == null) {
+    return params => {
+      if (params.value == null) {
         return false;
       }
-      if (Array.isArray(value)) {
-        return value.length > 0;
+      if (Array.isArray(params.value)) {
+        return params.value.length > 0;
       }
-      if (typeof value === 'string') {
-        return value.trim() !== '';
+      if (typeof params.value === 'string') {
+        return params.value.trim() !== '';
       }
       return true;
     };
@@ -703,20 +1934,14 @@ const DIMENSION_MODEL_KEY = 'dimension';
 const FILTER_SEARCH_KEY = 'searchModel';
 const DENSITY_MODEL_KEY = 'densityModel';
 const COLUMN_ORDER_MODEL_KEY = 'columnOrderModel';
-const ROW_GROUPING_MODEL_KEY = 'rowGroupingModel';
-const AGGREGATION_MODEL_KEY = 'aggregationModel';
-/** Storage category key for the pivot column/row/value configuration. Consumer interop — use with `buildStorageKey`. */
-const PIVOT_MODEL_KEY = 'pivotModel';
-/** Storage category key for whether pivoting is active. Consumer interop — use with `buildStorageKey`. */
-const PIVOT_ACTIVE_KEY = 'pivotActive';
-const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS, DENSITY_MODEL_KEY, COLUMN_ORDER_MODEL_KEY, ROW_GROUPING_MODEL_KEY, AGGREGATION_MODEL_KEY, PIVOT_MODEL_KEY, PIVOT_ACTIVE_KEY];
+const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS, DENSITY_MODEL_KEY, COLUMN_ORDER_MODEL_KEY];
 /**
  * Build the localStorage key for a specific grid state category.
  * Consumers can use this to read or clear individual state entries directly.
  *
  * @example
  * ```ts
- * const key = buildStorageKey({ id: pathname, version: 2, category: PIVOT_ACTIVE_KEY });
+ * const key = buildStorageKey({ id: pathname, version: 2, category: 'filterModel' });
  * localStorage.removeItem(key);
  * ```
  */
@@ -766,22 +1991,6 @@ const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
       id,
       version,
       category: COLUMN_ORDER_MODEL_KEY
-    }), buildStorageKey({
-      id,
-      version,
-      category: ROW_GROUPING_MODEL_KEY
-    }), buildStorageKey({
-      id,
-      version,
-      category: AGGREGATION_MODEL_KEY
-    }), buildStorageKey({
-      id,
-      version,
-      category: PIVOT_MODEL_KEY
-    }), buildStorageKey({
-      id,
-      version,
-      category: PIVOT_ACTIVE_KEY
     })];
     for (const keyToDelete of keysToDelete) {
       try {
@@ -808,6 +2017,19 @@ const clearAllVersionStorage = (id, maxVersion) => {
  * Fully reset a `StatefulDataGrid` — clear localStorage for the given versions
  * and strip all grid-owned URL params (`_*` and `v=`), preserving any non-grid params.
  *
+ * The function reads `window.location.search` directly so the strip always
+ * operates on the live URL. This matters because consumers typically call this
+ * from a component whose captured `search` snapshot may be stale — for example
+ * when the grid has just written its own keys to the URL via the router adapter
+ * but the parent hasn't re-rendered yet. Falling back to the supplied `search`
+ * is only used in non-browser environments (SSR, unit tests without jsdom).
+ *
+ * The write is performed via `historyReplace(newSearch, { authoritative: true })`.
+ * Adapters with delta/coalescing logic (e.g. `createReactRouterV5Adapter`)
+ * recognise the `authoritative` flag and bypass the delta computation, which
+ * would otherwise drop keys that grew into the URL after the parent's last
+ * captured snapshot. Adapters without delta logic simply ignore the flag.
+ *
  * Call from within a component where the router values are available:
  * ```ts
  * const { search, historyReplace } = useMyRouter();
@@ -822,7 +2044,8 @@ const resetStatefulDataGridState = _ref2 => {
     historyReplace
   } = _ref2;
   clearPreviousVersionStorage(id, versions);
-  const params = new URLSearchParams(search);
+  const liveSearch = typeof window !== 'undefined' && window.location ? window.location.search : search;
+  const params = new URLSearchParams(liveSearch);
   const keysToDelete = [];
   params.forEach((_value, key) => {
     if (key.startsWith('_') || key === 'v') {
@@ -832,7 +2055,59 @@ const resetStatefulDataGridState = _ref2 => {
   for (const key of keysToDelete) {
     params.delete(key);
   }
-  historyReplace(params.toString());
+  historyReplace(params.toString(), {
+    authoritative: true
+  });
+};
+
+/**
+ * Reset only the column-visibility state of a `StatefulDataGrid` back to its
+ * default (all columns visible). Clears the persisted `visibilityModel`
+ * localStorage entry for the given versions and strips the `_columnVisibility`
+ * param from the live URL, leaving every other piece of grid state (filters,
+ * sort, pagination, pinned columns, …) untouched.
+ *
+ * This is the visibility-scoped counterpart to `resetStatefulDataGridState`.
+ * Reach for it at transition points where a stale visibility snapshot would
+ * otherwise re-seed and keep base columns hidden. Because it leaves the other
+ * params alone it will not clobber a filter the caller is writing in the same
+ * transition.
+ *
+ * Like `resetStatefulDataGridState`, the URL strip reads `window.location.search`
+ * directly so it operates on the live URL (the caller's captured snapshot may
+ * be stale), and writes via `historyReplace(newSearch, { authoritative: true })`.
+ *
+ * This clears the *persisted* state only. The caller is responsible for
+ * resetting the *live* grid in the same tick:
+ * ```ts
+ * resetColumnVisibility({ id: pathname, versions: [0, 1], search, historyReplace });
+ * apiRef.current?.setColumnVisibilityModel?.({});
+ * ```
+ */
+const resetColumnVisibility = _ref3 => {
+  let {
+    id,
+    versions,
+    search,
+    historyReplace
+  } = _ref3;
+  for (const version of versions) {
+    try {
+      window.localStorage.removeItem(buildStorageKey({
+        id,
+        version,
+        category: VISIBILITY_MODEL_KEY
+      }));
+    } catch (e) {
+      // Ignore — storage may be unavailable (SSR, Safari private mode).
+    }
+  }
+  const liveSearch = typeof window !== 'undefined' && window.location ? window.location.search : search;
+  const params = new URLSearchParams(liveSearch);
+  params.delete('_columnVisibility');
+  historyReplace(params.toString(), {
+    authoritative: true
+  });
 };
 
 /** Maximum query string length (chars) before compression kicks in. */
@@ -846,7 +2121,7 @@ const COMPRESSED_PREFIX = '~';
  * Params listed first are compressed first (least valuable to read in the URL).
  * The filter aggregate step uses the special key `_filters_aggregate`.
  */
-const COMPRESSION_PRIORITY = ['_columnOrder', '_columnVisibility', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_filters_aggregate', '_aggregation', '_rowGrouping', '_quickFilterValues', '_pivot'];
+const COMPRESSION_PRIORITY = ['_columnOrder', '_columnVisibility', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_filters_aggregate', '_quickFilterValues'];
 
 /** Params that are always short and should never be compressed. */
 const NEVER_COMPRESS = new Set(['_sortColumn', '_pagination', '_density', '_logicOperator', 'v', 'tab']);
@@ -1087,13 +2362,6 @@ const convertToDisplayFormat = search => {
   const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
   const params = cleanSearch.split('&');
   const converted = params.map(param => {
-    const eqIndex = param.indexOf('=');
-    if (eqIndex !== -1) {
-      const value = param.slice(eqIndex + 1);
-      // Skip conversion for compressed values — already URL-safe
-      if (isCompressed(value)) return param;
-    }
-
     // Handle _sortColumn=[field,direction]
     if (param.startsWith('_sortColumn=')) {
       const value = param.slice('_sortColumn='.length);
@@ -1134,7 +2402,8 @@ const convertToDisplayFormat = search => {
       return param;
     }
 
-    // Handle _columnVisibility=[a,b,c]
+    // Handle _columnVisibility=[a,b,!c] → a,b,!c (single comma list; hidden fields
+    // are `!`-prefixed. Only the brackets are structural; `!` and `,` are content.)
     if (param.startsWith('_columnVisibility=')) {
       const value = param.slice('_columnVisibility='.length);
       if (value.startsWith('[') && value.endsWith(']')) {
@@ -1147,6 +2416,7 @@ const convertToDisplayFormat = search => {
     // Handle _columnOrder=[a,b,c]
     if (param.startsWith('_columnOrder=')) {
       const value = param.slice('_columnOrder='.length);
+      if (value.startsWith('~')) return param; // compressed — skip
       if (value.startsWith('[') && value.endsWith(']')) {
         const inner = value.slice(1, -1);
         return `_columnOrder=${inner}`;
@@ -1154,21 +2424,6 @@ const convertToDisplayFormat = search => {
       return param;
     }
 
-    // Handle _rowGrouping=[a,b,c]
-    if (param.startsWith('_rowGrouping=')) {
-      const value = param.slice('_rowGrouping='.length);
-      if (value.startsWith('[') && value.endsWith(']')) {
-        const inner = value.slice(1, -1);
-        return `_rowGrouping=${inner}`;
-      }
-      return param;
-    }
-
-    // _aggregation and _pivot do not use bracket notation — pass through
-    if (param.startsWith('_aggregation=') || param.startsWith('_pivot=')) {
-      return param;
-    }
-
     // Handle _field[operator,type]=value or _field[operator,type]=list[a,b,c]
     const bracketMatch = param.match(/^_([^[]+)\[([^\]]+)\]=(.*)$/);
     if (bracketMatch) {
@@ -1208,13 +2463,6 @@ const convertFromDisplayFormat = (search, columns) => {
   const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
   const params = cleanSearch.split('&');
   const converted = params.map(param => {
-    const eqIndex = param.indexOf('=');
-    if (eqIndex !== -1) {
-      const value = param.slice(eqIndex + 1);
-      // Skip conversion for compressed values — already URL-safe
-      if (isCompressed(value)) return param;
-    }
-
     // Handle _sortColumn=field.direction or _sortColumn=
     if (param.startsWith('_sortColumn=')) {
       const value = param.slice('_sortColumn='.length);
@@ -1263,11 +2511,11 @@ const convertFromDisplayFormat = (search, columns) => {
       return `${key}=[${value}]`;
     }
 
-    // Handle _columnVisibility=a,b,c
+    // Handle _columnVisibility display `a,b,!c` → internal `[a,b,!c]`.
     if (param.startsWith('_columnVisibility=')) {
       const value = param.slice('_columnVisibility='.length);
       // If it already has brackets, leave it alone
-      if (value.startsWith('[')) {
+      if (value.startsWith('[') || value.startsWith('~')) {
         return param;
       }
       return `_columnVisibility=[${value}]`;
@@ -1276,26 +2524,13 @@ const convertFromDisplayFormat = (search, columns) => {
     // Handle _columnOrder=a,b,c
     if (param.startsWith('_columnOrder=')) {
       const value = param.slice('_columnOrder='.length);
-      if (value.startsWith('[')) {
+      // If it already has brackets or is compressed, leave it alone
+      if (value.startsWith('[') || value.startsWith('~')) {
         return param;
       }
       return `_columnOrder=[${value}]`;
     }
 
-    // Handle _rowGrouping=a,b,c
-    if (param.startsWith('_rowGrouping=')) {
-      const value = param.slice('_rowGrouping='.length);
-      if (value.startsWith('[')) {
-        return param;
-      }
-      return `_rowGrouping=[${value}]`;
-    }
-
-    // _aggregation, _pivot, _filters — pass through (no bracket conversion needed)
-    if (param.startsWith('_aggregation=') || param.startsWith('_pivot=') || param.startsWith('_filters=')) {
-      return param;
-    }
-
     // Handle field.operator=value (dot notation for filters)
     const dotMatch = param.match(/^([^.]+)\.([a-zA-Z_]+)=(.*)$/);
     if (dotMatch) {
@@ -1338,10 +2573,9 @@ const getDecodedSearchFromUrl = (search, columns) => {
   const hasPaginationDotNotation = /_pagination=[^&[]+\.[^&]+/.test(searchWithoutLeadingQuestion);
   const hasPinnedWithoutBrackets = /(_pinnedColumnsLeft|_pinnedColumnsRight)=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
   const hasVisibilityWithoutBrackets = /_columnVisibility=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
-  const hasColumnOrderWithoutBrackets = /_columnOrder=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
-  const hasRowGroupingWithoutBrackets = /_rowGrouping=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasColumnOrderWithoutBrackets = /_columnOrder=[^&[~]*(&|$)/.test(searchWithoutLeadingQuestion);
   const hasBracketNotation = /\[.*\]=/.test(searchWithoutLeadingQuestion);
-  const isDisplayFormat = (hasDotNotationFilter || hasEmptySortColumn || hasSortDotNotation || hasPaginationDotNotation || hasPinnedWithoutBrackets || hasVisibilityWithoutBrackets || hasColumnOrderWithoutBrackets || hasRowGroupingWithoutBrackets) && !hasBracketNotation;
+  const isDisplayFormat = (hasDotNotationFilter || hasEmptySortColumn || hasSortDotNotation || hasPaginationDotNotation || hasPinnedWithoutBrackets || hasVisibilityWithoutBrackets || hasColumnOrderWithoutBrackets) && !hasBracketNotation;
   if (isDisplayFormat) {
     return '?' + convertFromDisplayFormat(searchWithoutLeadingQuestion, columns);
   }
@@ -1502,7 +2736,7 @@ const getFilterModelFromString = (searchString, columns) => {
   let quickFilterValues = [];
   const searchParams = new URLSearchParams();
   for (const [key, value] of new URLSearchParams(searchString)) {
-    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination', '_quickFilterValues', '_columnOrder', '_rowGrouping', '_aggregation', '_pivot', '_density', '_filters'].includes(key)) {
+    if (key.startsWith('_') && !['_logicOperator', '_sortColumn', '_pinnedColumnsLeft', '_pinnedColumnsRight', '_columnVisibility', '_pagination', '_quickFilterValues', '_columnOrder', '_density', '_filters'].includes(key)) {
       searchParams.set(key, value);
     }
     if (key === '_logicOperator') {
@@ -1779,13 +3013,75 @@ const getColumnVisibilityFromString = (searchString, columns) => {
   if (value === '' || value === null || value === '[]') {
     return 'invalid';
   }
-  const parsedFields = value.slice(1, value.length - 1).split(',');
   const fields = columns.map(column => column.field);
+
+  // Back-compat READ-ONLY: the short-lived `v:[<visible>];h:[<hidden>]` form written
+  // by 12.5.5-muiv8-alpha.5/alpha.6 (replaced by the URL-safe `!` form below — see
+  // getSearchParamsFromColumnVisibility). Still parsed so any localStorage entry
+  // persisted by those alphas keeps working; never written anymore. The two sets are
+  // split on the fixed `];h:[` separator, so a `[` or `]` inside a field name does
+  // not break parsing.
+  if (value.startsWith('v:[') && value.endsWith(']') && value.includes('];h:[')) {
+    const inner = value.slice('v:['.length, -1);
+    const separatorIndex = inner.indexOf('];h:[');
+    const visibleRaw = inner.slice(0, separatorIndex);
+    const hiddenRaw = inner.slice(separatorIndex + '];h:['.length);
+    const visibleFields = visibleRaw ? visibleRaw.split(',') : [];
+    const hiddenFields = hiddenRaw ? hiddenRaw.split(',') : [];
+    const visibility = {};
+    // Static columns default to visible; only those explicitly hidden are false.
+    // (A column added after the URL was written is absent from both lists and
+    // correctly defaults to visible, matching MUI's behaviour.)
+    for (const field of fields) {
+      visibility[field] = !hiddenFields.includes(field);
+    }
+    // Dynamic keys that are not part of the static `columns` prop — preserve verbatim.
+    for (const field of visibleFields) {
+      if (!fields.includes(field)) {
+        visibility[field] = true;
+      }
+    }
+    for (const field of hiddenFields) {
+      if (!fields.includes(field)) {
+        visibility[field] = false;
+      }
+    }
+    return visibility;
+  }
+
+  // Bracketed token list: new `[a,b,!c]` (hidden fields `!`-prefixed) or legacy
+  // `[a,b,c]` (visible-only). Split on the comma delimiter only, so `[`/`]` inside a
+  // dynamic field name survive.
+  const inner = value.slice(1, value.length - 1);
+  const tokens = inner ? inner.split(',') : [];
+
+  // New form iff at least one `!`-prefixed (explicitly hidden) token is present.
+  if (tokens.some(token => token.startsWith('!'))) {
+    const hiddenFields = tokens.filter(token => token.startsWith('!')).map(token => token.slice(1));
+    const visibility = {};
+    // Static columns default to visible; only those explicitly hidden are false.
+    for (const field of fields) {
+      visibility[field] = !hiddenFields.includes(field);
+    }
+    // Dynamic keys not in the static `columns` prop — insert in TOKEN ORDER (do not
+    // regroup visible/hidden) so the writer re-emits a byte-identical URL and the RR
+    // v5 adapter's idempotency guard stops the URL-sync loop (ODM-3033).
+    for (const token of tokens) {
+      const hidden = token.startsWith('!');
+      const field = hidden ? token.slice(1) : token;
+      if (!fields.includes(field)) {
+        visibility[field] = !hidden;
+      }
+    }
+    return visibility;
+  }
+
+  // Legacy visible-only form: `[<visible>]` (hidden encoded implicitly by absence).
   const visibility = {};
   for (const field of fields) {
     visibility[field] = false;
   }
-  for (const parsedField of parsedFields) {
+  for (const parsedField of tokens) {
     if (fields.includes(parsedField)) {
       visibility[parsedField] = true;
     }
@@ -1812,8 +3108,24 @@ const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
       [colName]: true
     });
   }, columnVisibility);
-  const visibleColumns = fields.filter(column => finalColumnVisibility[column] !== false);
-  searchParams.set('_columnVisibility', `[${visibleColumns.join(',')}]`);
+
+  // Serialise a single comma list over the static columns plus any extra keys present
+  // in the model (dynamically-generated fields, preserved in model order). Hidden
+  // fields are prefixed `!`; visible fields are bare. This URL-safe form round-trips
+  // idempotently through `URLSearchParams.toString()` percent-encoding — the earlier
+  // `v:[..];h:[..]` form did NOT (its `:`/`;` were percent-encoded and mis-parsed on
+  // read-back, driving an unbounded `history.replace` loop, ODM-3033). `!` (not `~`,
+  // the compression sentinel — compression.ts COMPRESSED_PREFIX) is used so a leading
+  // hidden field can't be mistaken for a compressed value. The hidden set is still
+  // explicit, so deselected dynamic columns survive reloads.
+  const allFields = [...fields];
+  for (const field of Object.keys(finalColumnVisibility)) {
+    if (!allFields.includes(field)) {
+      allFields.push(field);
+    }
+  }
+  const tokens = allFields.map(column => finalColumnVisibility[column] === false ? `!${column}` : column);
+  searchParams.set('_columnVisibility', `[${tokens.join(',')}]`);
   return searchParams;
 };
 
@@ -1968,7 +3280,8 @@ const getSearchParamsFromDensity = density => {
   return searchParams;
 };
 const getDensityModel = (search, localStorageDensity, setLocalStorageDensity, initialState, isNewVersion) => {
-  // Default density: honour initialState.density if valid, otherwise fall back to 'compact'
+  // MUI v6 GridInitialStatePro does not expose density on its type, but consumers
+  // can still pass it through. Honour it when provided, otherwise fall back to 'compact'.
   const initialDensity = initialState === null || initialState === void 0 ? void 0 : initialState.density;
   const defaultValue = initialDensity && VALID_DENSITIES.includes(initialDensity) ? initialDensity : 'compact';
 
@@ -2021,6 +3334,29 @@ const getSearchParamsFromColumnOrder = columnOrder => {
   }
   return searchParams;
 };
+
+/**
+ * Builds the `v=<version>` search param the grid uses to detect stale URLs.
+ *
+ * Use this when constructing a deep link or share URL outside the grid (e.g. via
+ * `getSearchParamsFromFilterModel` + `buildQueryParamsString`). The grid itself
+ * always includes `v` in URLs it writes via `getFinalSearch`, but external helpers
+ * do not — include this when you want a stale `localStorageVersion` bump to invalidate
+ * the link. Omitting `v` is also safe: a missing `v` is treated as "current version"
+ * and the URL state is applied as-is.
+ *
+ * @example
+ * const params = new URLSearchParams([
+ *   ...getSearchParamsFromFilterModel(filterModel),
+ *   ...getSearchParamsFromVersion(1),
+ * ]);
+ * const url = `/my-grid${buildQueryParamsString(urlSearchParamsToString(params))}`;
+ */
+const getSearchParamsFromVersion = version => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('v', String(version));
+  return searchParams;
+};
 const getColumnOrder = (search, columns, localStorageColumnOrder, setLocalStorageColumnOrder, initialState, isNewVersion) => {
   var _initialState$columns4, _initialState$columns5;
   const defaultValue = (_initialState$columns4 = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns5 = initialState.columns) === null || _initialState$columns5 === void 0 ? void 0 : _initialState$columns5.orderedFields) !== null && _initialState$columns4 !== void 0 ? _initialState$columns4 : columns.map(c => c.field);
@@ -2051,305 +3387,29 @@ const getColumnOrder = (search, columns, localStorageColumnOrder, setLocalStorag
   persistDefault();
   return defaultValue;
 };
-
-/** ROW GROUPING */
-
-const getRowGroupingFromString = searchString => {
-  if (!searchString) return 'invalid';
-  const searchParams = new URLSearchParams(searchString);
-  const value = searchParams.get('_rowGrouping');
-  if (value === '' || value === null || value === '[]') return 'invalid';
-  const inner = value.startsWith('[') && value.endsWith(']') ? value.slice(1, -1) : value;
-  if (!inner) return 'invalid';
-  return inner.split(',').filter(Boolean);
-};
-const getSearchParamsFromRowGrouping = rowGrouping => {
-  const searchParams = new URLSearchParams();
-  if (rowGrouping.length > 0) {
-    searchParams.set('_rowGrouping', `[${rowGrouping.join(',')}]`);
-  }
-  return searchParams;
-};
-const getRowGroupingModel = (search, localStorageRowGrouping, setLocalStorageRowGrouping, initialState, isNewVersion) => {
-  var _initialState$rowGrou, _initialState$rowGrou2;
-  const defaultValue = (_initialState$rowGrou = initialState === null || initialState === void 0 ? void 0 : (_initialState$rowGrou2 = initialState.rowGrouping) === null || _initialState$rowGrou2 === void 0 ? void 0 : _initialState$rowGrou2.model) !== null && _initialState$rowGrou !== void 0 ? _initialState$rowGrou : [];
-  const persistDefault = () => {
-    const searchFromDefault = getSearchParamsFromRowGrouping(defaultValue);
-    const searchString = urlSearchParamsToString(searchFromDefault);
-    if (searchString !== localStorageRowGrouping) {
-      setLocalStorageRowGrouping(searchString);
-    }
-  };
-  if (isNewVersion) {
-    persistDefault();
-    return defaultValue;
-  }
-  const fromUrl = getRowGroupingFromString(search);
-  if (fromUrl !== 'invalid') {
-    const searchFromModel = getSearchParamsFromRowGrouping(fromUrl);
-    const searchString = urlSearchParamsToString(searchFromModel);
-    if (searchString !== localStorageRowGrouping) {
-      setLocalStorageRowGrouping(searchString);
-    }
-    return fromUrl;
-  }
-  const fromLocalStorage = getRowGroupingFromString(localStorageRowGrouping);
-  if (fromLocalStorage !== 'invalid') {
-    return fromLocalStorage;
-  }
-  persistDefault();
-  return defaultValue;
-};
-
-/** AGGREGATION */
-
-const getAggregationFromString = searchString => {
-  if (!searchString) return 'invalid';
-  const searchParams = new URLSearchParams(searchString);
-  const value = searchParams.get('_aggregation');
-  if (value === '' || value === null) return 'invalid';
-
-  // Format: field1.sum,field2.avg or [field1.sum,field2.avg]
-  const inner = value.startsWith('[') && value.endsWith(']') ? value.slice(1, -1) : value;
-  if (!inner) return 'invalid';
-  const model = {};
-  for (const entry of inner.split(',')) {
-    const dotIndex = entry.lastIndexOf('.');
-    if (dotIndex <= 0) return 'invalid';
-    const field = entry.slice(0, dotIndex);
-    const aggFunc = entry.slice(dotIndex + 1);
-    if (!field || !aggFunc) return 'invalid';
-    model[field] = aggFunc;
-  }
-  return Object.keys(model).length > 0 ? model : 'invalid';
-};
-const getSearchParamsFromAggregation = aggregation => {
-  const searchParams = new URLSearchParams();
-  const entries = Object.entries(aggregation);
-  if (entries.length > 0) {
-    const value = entries.map(_ref => {
-      let [field, aggFunc] = _ref;
-      return `${field}.${aggFunc}`;
-    }).join(',');
-    searchParams.set('_aggregation', value);
-  }
-  return searchParams;
-};
-const getAggregationModel = (search, localStorageAggregation, setLocalStorageAggregation, initialState, isNewVersion) => {
-  var _initialState$aggrega, _initialState$aggrega2;
-  const defaultValue = (_initialState$aggrega = initialState === null || initialState === void 0 ? void 0 : (_initialState$aggrega2 = initialState.aggregation) === null || _initialState$aggrega2 === void 0 ? void 0 : _initialState$aggrega2.model) !== null && _initialState$aggrega !== void 0 ? _initialState$aggrega : {};
-  const persistDefault = () => {
-    const searchFromDefault = getSearchParamsFromAggregation(defaultValue);
-    const searchString = urlSearchParamsToString(searchFromDefault);
-    if (searchString !== localStorageAggregation) {
-      setLocalStorageAggregation(searchString);
-    }
-  };
-  if (isNewVersion) {
-    persistDefault();
-    return defaultValue;
-  }
-  const fromUrl = getAggregationFromString(search);
-  if (fromUrl !== 'invalid') {
-    const searchFromModel = getSearchParamsFromAggregation(fromUrl);
-    const searchString = urlSearchParamsToString(searchFromModel);
-    if (searchString !== localStorageAggregation) {
-      setLocalStorageAggregation(searchString);
-    }
-    return fromUrl;
-  }
-  const fromLocalStorage = getAggregationFromString(localStorageAggregation);
-  if (fromLocalStorage !== 'invalid') {
-    return fromLocalStorage;
-  }
-  persistDefault();
-  return defaultValue;
-};
-
-/** PIVOT */
-
-/** Convert MUI's GridPivotModel → our simplified PivotModel */
-const fromGridPivotModel = model => ({
-  columns: model.columns.map(c => c.field),
-  rows: model.rows.map(r => r.field),
-  values: model.values.map(_ref2 => {
-    let {
-      field,
-      aggFunc
-    } = _ref2;
-    return {
-      field,
-      aggFunc
-    };
-  })
-});
-
-/**
- * Pivot format: `cols:f1,f2;rows:f3;vals:f4.sum,f5.avg`
- */
-const getPivotFromString = searchString => {
-  if (!searchString) return 'invalid';
-  const searchParams = new URLSearchParams(searchString);
-  const value = searchParams.get('_pivot');
-  if (value === '' || value === null) return 'invalid';
-  const model = {
-    columns: [],
-    rows: [],
-    values: []
-  };
-  for (const segment of value.split(';')) {
-    const colonIndex = segment.indexOf(':');
-    if (colonIndex <= 0) return 'invalid';
-    const key = segment.slice(0, colonIndex);
-    const content = segment.slice(colonIndex + 1);
-    if (key === 'cols') {
-      model.columns = content ? content.split(',').filter(Boolean) : [];
-    } else if (key === 'rows') {
-      model.rows = content ? content.split(',').filter(Boolean) : [];
-    } else if (key === 'vals') {
-      if (!content) continue;
-      for (const entry of content.split(',')) {
-        const dotIndex = entry.lastIndexOf('.');
-        if (dotIndex <= 0) return 'invalid';
-        model.values.push({
-          field: entry.slice(0, dotIndex),
-          aggFunc: entry.slice(dotIndex + 1)
-        });
-      }
-    }
-  }
-
-  // At least one section must have content
-  if (model.columns.length === 0 && model.rows.length === 0 && model.values.length === 0) {
-    return 'invalid';
-  }
-  return model;
-};
-const getSearchParamsFromPivot = pivot => {
-  const searchParams = new URLSearchParams();
-  const hasContent = pivot.columns.length > 0 || pivot.rows.length > 0 || pivot.values.length > 0;
-  if (hasContent) {
-    const parts = [];
-    parts.push(`cols:${pivot.columns.join(',')}`);
-    parts.push(`rows:${pivot.rows.join(',')}`);
-    if (pivot.values.length > 0) {
-      parts.push(`vals:${pivot.values.map(v => `${v.field}.${v.aggFunc}`).join(',')}`);
-    }
-    searchParams.set('_pivot', parts.join(';'));
-  }
-  return searchParams;
-};
-const getPivotModel = (search, localStoragePivot, setLocalStoragePivot, initialState, isNewVersion) => {
-  var _initialState$pivotin;
-  const defaultValue = initialState !== null && initialState !== void 0 && (_initialState$pivotin = initialState.pivoting) !== null && _initialState$pivotin !== void 0 && _initialState$pivotin.model ? fromGridPivotModel(initialState.pivoting.model) : {
-    columns: [],
-    rows: [],
-    values: []
-  };
-  const persistDefault = () => {
-    const searchFromDefault = getSearchParamsFromPivot(defaultValue);
-    const searchString = urlSearchParamsToString(searchFromDefault);
-    if (searchString !== localStoragePivot) {
-      setLocalStoragePivot(searchString);
-    }
-  };
-  if (isNewVersion) {
-    persistDefault();
-    return defaultValue;
-  }
-  const fromUrl = getPivotFromString(search);
-  if (fromUrl !== 'invalid') {
-    const searchFromModel = getSearchParamsFromPivot(fromUrl);
-    const searchString = urlSearchParamsToString(searchFromModel);
-    if (searchString !== localStoragePivot) {
-      setLocalStoragePivot(searchString);
-    }
-    return fromUrl;
-  }
-  const fromLocalStorage = getPivotFromString(localStoragePivot);
-  if (fromLocalStorage !== 'invalid') {
-    return fromLocalStorage;
-  }
-  persistDefault();
-  return defaultValue;
-};
-
-/** PIVOT ACTIVE */
-
-const getPivotActiveFromString = searchString => {
-  if (!searchString) return 'invalid';
-  const searchParams = new URLSearchParams(searchString);
-  const value = searchParams.get('_pivotActive');
-  if (value === 'true') return true;
-  if (value === 'false') return false;
-  return 'invalid';
-};
-const getSearchParamsFromPivotActive = active => {
-  const searchParams = new URLSearchParams();
-  searchParams.set('_pivotActive', String(active));
-  return searchParams;
-};
-const getPivotActive = (search, localStoragePivotActive, setLocalStoragePivotActive, initialState, isNewVersion) => {
-  var _initialState$pivotin2, _initialState$pivotin3;
-  const defaultValue = (_initialState$pivotin2 = initialState === null || initialState === void 0 ? void 0 : (_initialState$pivotin3 = initialState.pivoting) === null || _initialState$pivotin3 === void 0 ? void 0 : _initialState$pivotin3.enabled) !== null && _initialState$pivotin2 !== void 0 ? _initialState$pivotin2 : false;
-  const persistDefault = () => {
-    const searchFromDefault = getSearchParamsFromPivotActive(defaultValue);
-    const searchString = urlSearchParamsToString(searchFromDefault);
-    if (searchString !== localStoragePivotActive) {
-      setLocalStoragePivotActive(searchString);
-    }
-  };
-  if (isNewVersion) {
-    persistDefault();
-    return defaultValue;
-  }
-  const fromUrl = getPivotActiveFromString(search);
-  if (fromUrl !== 'invalid') {
-    const searchFromModel = getSearchParamsFromPivotActive(fromUrl);
-    const searchString = urlSearchParamsToString(searchFromModel);
-    if (searchString !== localStoragePivotActive) {
-      setLocalStoragePivotActive(searchString);
-    }
-    return fromUrl;
-  }
-  const fromLocalStorage = getPivotActiveFromString(localStoragePivotActive);
-  if (fromLocalStorage !== 'invalid') {
-    return fromLocalStorage;
-  }
-  persistDefault();
-  return defaultValue;
-};
-const getFinalSearch = _ref3 => {
-  let {
-    search,
-    localStorageVersion,
-    filterModel,
-    sortModel,
-    paginationModel,
-    columnsVisibilityModel,
-    pinnedColumnsModel,
-    density,
-    columnOrderModel,
-    defaultColumnOrder,
-    rowGroupingModel,
-    aggregationModel,
-    pivotModel,
-    pivotActive,
-    columns
-  } = _ref3;
-  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
-  const sortModelSearch = getSearchParamsFromSorting(sortModel);
-  const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
-  const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
-  const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
-  const densitySearch = getSearchParamsFromDensity(density);
-  // Only include _columnOrder in URL when it differs from the default
-  const columnOrderSearch = columnOrderModel.length !== defaultColumnOrder.length || columnOrderModel.some((field, i) => field !== defaultColumnOrder[i]) ? getSearchParamsFromColumnOrder(columnOrderModel) : new URLSearchParams();
-  const rowGroupingSearch = getSearchParamsFromRowGrouping(rowGroupingModel);
-  const aggregationSearch = getSearchParamsFromAggregation(aggregationModel);
-  const pivotSearch = getSearchParamsFromPivot(pivotModel);
-  const pivotActiveSearch = getSearchParamsFromPivotActive(pivotActive);
-  const tabSearch = getSearchParamsFromTab(search);
+const getFinalSearch = _ref => {
+  let {
+    search,
+    localStorageVersion,
+    filterModel,
+    sortModel,
+    paginationModel,
+    columnsVisibilityModel,
+    pinnedColumnsModel,
+    density,
+    columnOrderModel,
+    defaultColumnOrder,
+    columns
+  } = _ref;
+  const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
+  const sortModelSearch = getSearchParamsFromSorting(sortModel);
+  const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
+  const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
+  const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
+  const densitySearch = getSearchParamsFromDensity(density);
+  // Only include _columnOrder in URL when it differs from the default
+  const columnOrderSearch = columnOrderModel.length !== defaultColumnOrder.length || columnOrderModel.some((field, i) => field !== defaultColumnOrder[i]) ? getSearchParamsFromColumnOrder(columnOrderModel) : new URLSearchParams();
+  const tabSearch = getSearchParamsFromTab(search);
   const searchParams = new URLSearchParams();
   for (const [key, value] of new URLSearchParams(search)) {
     if (!key.startsWith('_')) {
@@ -2363,7 +3423,7 @@ const getFinalSearch = _ref3 => {
     // Encode array as JSON string to preserve all values in one param
     searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
   }
-  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch, ...densitySearch, ...columnOrderSearch, ...rowGroupingSearch, ...aggregationSearch, ...pivotSearch, ...pivotActiveSearch]);
+  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch, ...densitySearch, ...columnOrderSearch]);
 };
 /** Return the state of the table given the URL and the local storage state */
 const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, initialState, localStorage) => {
@@ -2374,11 +3434,21 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
   const decodedSearch = getDecodedSearchFromUrl(decompressedSearch, columns);
   const decodedParams = new URLSearchParams(decodedSearch);
   const currentVersion = decodedParams.get('v');
-  // Only treat as "new version reset" when the URL has params with a stale/missing version.
-  // An empty URL should fall through to the localStorage branch of each getter so persisted
-  // state is restored instead of being clobbered by defaults.
+  // Only treat as "new version reset" when the URL carries params AND explicitly declares a
+  // stale version (`v=` present but not matching `localStorageVersion`).
+  //
+  // Two cases that must NOT trigger a reset:
+  //   1. Empty URL — fall through to the localStorage branch of each getter so persisted
+  //      preferences are restored instead of being clobbered by defaults.
+  //   2. URL has params but no `v` — externally-constructed deep links / share links built
+  //      with `getSearchParamsFromFilterModel`, `buildQueryParamsString`, etc. do not include
+  //      `v` by default. Treating a missing `v` as "stale" silently discards the very state
+  //      the integrator just encoded into the URL (and wipes localStorage on the way out).
+  //      A missing `v` is interpreted as "current" so external URLs work out of the box.
+  //      URLs written by the grid itself (`getFinalSearch`) always include `v`, so a stale
+  //      bookmark from a previous `localStorageVersion` still resets correctly.
   const hasUrlState = Array.from(decodedParams.keys()).length > 0;
-  const isNewVersion = hasUrlState && (!currentVersion || Number(currentVersion) !== localStorageVersion);
+  const isNewVersion = hasUrlState && currentVersion != null && Number(currentVersion) !== localStorageVersion;
   const {
     localStorageFilters,
     setLocalStorageFilters,
@@ -2393,15 +3463,7 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     localStorageDensity,
     setLocalStorageDensity,
     localStorageColumnOrder,
-    setLocalStorageColumnOrder,
-    localStorageRowGrouping,
-    setLocalStorageRowGrouping,
-    localStorageAggregation,
-    setLocalStorageAggregation,
-    localStoragePivot,
-    setLocalStoragePivot,
-    localStoragePivotActive,
-    setLocalStoragePivotActive
+    setLocalStorageColumnOrder
   } = localStorage;
   const filterModel = getFilterModel(decodedSearch, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
   const sortModel = getSortModel(decodedSearch, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
@@ -2410,10 +3472,6 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
   const pinnedColumnsModel = getPinnedColumns(decodedSearch, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
   const density = getDensityModel(decodedSearch, localStorageDensity, setLocalStorageDensity, initialState, isNewVersion);
   const columnOrderModel = getColumnOrder(decodedSearch, columns, localStorageColumnOrder, setLocalStorageColumnOrder, initialState, isNewVersion);
-  const rowGroupingModel = getRowGroupingModel(decodedSearch, localStorageRowGrouping, setLocalStorageRowGrouping, initialState, isNewVersion);
-  const aggregationModel = getAggregationModel(decodedSearch, localStorageAggregation, setLocalStorageAggregation, initialState, isNewVersion);
-  const pivotModel = getPivotModel(decodedSearch, localStoragePivot, setLocalStoragePivot, initialState, isNewVersion);
-  const pivotActive = getPivotActive(decodedSearch, localStoragePivotActive, setLocalStoragePivotActive, initialState, isNewVersion);
   const defaultColumnOrder = (_initialState$columns6 = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns7 = initialState.columns) === null || _initialState$columns7 === void 0 ? void 0 : _initialState$columns7.orderedFields) !== null && _initialState$columns6 !== void 0 ? _initialState$columns6 : columns.map(c => c.field);
   const finalSearch = getFinalSearch({
     localStorageVersion,
@@ -2426,10 +3484,6 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     density,
     columnOrderModel,
     defaultColumnOrder,
-    rowGroupingModel,
-    aggregationModel,
-    pivotModel,
-    pivotActive,
     columns
   });
   const internalSearchString = urlSearchParamsToString(finalSearch);
@@ -2450,14 +3504,10 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     pinnedColumnsModel,
     density,
     columnOrderModel,
-    rowGroupingModel,
-    aggregationModel,
-    pivotModel,
-    pivotActive,
     pendingSearch
   };
 };
-const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns) => {
+const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns) => {
   let {
     filterModel,
     sortModel,
@@ -2466,12 +3516,8 @@ const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns)
     pinnedColumnsModel,
     density,
     columnOrderModel,
-    defaultColumnOrder,
-    rowGroupingModel,
-    aggregationModel,
-    pivotModel,
-    pivotActive
-  } = _ref4;
+    defaultColumnOrder
+  } = _ref2;
   // Convert from display format to internal format if needed
   const decodedSearch = getDecodedSearchFromUrl(search, columns);
   const newSearch = getFinalSearch({
@@ -2485,10 +3531,6 @@ const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns)
     density,
     columnOrderModel,
     defaultColumnOrder,
-    rowGroupingModel,
-    aggregationModel,
-    pivotModel,
-    pivotActive,
     columns
   });
   const internalSearchString = urlSearchParamsToString(newSearch);
@@ -2676,26 +3718,6 @@ const useTableStates = (id, version) => {
     version,
     category: COLUMN_ORDER_MODEL_KEY
   }));
-  const [rowGroupingModel, setRowGroupingModel] = useFetchState('', buildStorageKey({
-    id,
-    version,
-    category: ROW_GROUPING_MODEL_KEY
-  }));
-  const [aggregationModel, setAggregationModel] = useFetchState('', buildStorageKey({
-    id,
-    version,
-    category: AGGREGATION_MODEL_KEY
-  }));
-  const [pivotModel, setPivotModel] = useFetchState('', buildStorageKey({
-    id,
-    version,
-    category: PIVOT_MODEL_KEY
-  }));
-  const [pivotActive, setPivotActive] = useFetchState('', buildStorageKey({
-    id,
-    version,
-    category: PIVOT_ACTIVE_KEY
-  }));
   return {
     paginationModel,
     setPaginationModel,
@@ -2712,55 +3734,10 @@ const useTableStates = (id, version) => {
     densityModel,
     setDensityModel,
     columnOrderModel,
-    setColumnOrderModel,
-    rowGroupingModel,
-    setRowGroupingModel,
-    aggregationModel,
-    setAggregationModel,
-    pivotModel,
-    setPivotModel,
-    pivotActive,
-    setPivotActive
+    setColumnOrderModel
   };
 };
 
-/** Convert our simplified PivotModel → MUI's GridPivotModel */
-const toGridPivotModel = model => ({
-  columns: model.columns.map(field => ({
-    field
-  })),
-  rows: model.rows.map(field => ({
-    field
-  })),
-  values: model.values.map(_ref => {
-    let {
-      field,
-      aggFunc
-    } = _ref;
-    return {
-      field,
-      aggFunc
-    };
-  })
-});
-
-/**
- * Deep-equal comparison for plain objects / arrays.
- * Used to stabilise parsed model references so that MUI v8 does not
- * reset pagination on every render.
- */
-function isDeepEqual(a, b) {
-  if (a === b) return true;
-  if (a == null || b == null) return false;
-  if (typeof a !== typeof b) return false;
-  if (typeof a !== 'object') return false;
-  const aObj = a;
-  const bObj = b;
-  const aKeys = Object.keys(aObj);
-  const bKeys = Object.keys(bObj);
-  if (aKeys.length !== bKeys.length) return false;
-  return aKeys.every(key => isDeepEqual(aObj[key], bObj[key]));
-}
 const useStatefulTable = props => {
   var _initialState$columns, _initialState$columns2;
   const {
@@ -2773,9 +3750,6 @@ const useStatefulTable = props => {
     onPaginationModelChange: propsOnPaginationModelChange,
     onPinnedColumnsChange: propsOnPinnedColumnsChange,
     onSortModelChange: propsOnSortModelChange,
-    onRowGroupingModelChange: propsOnRowGroupingModelChange,
-    onAggregationModelChange: propsOnAggregationModelChange,
-    onPivotModelChange: propsOnPivotModelChange,
     useRouter,
     localStorageVersion = 1,
     previousLocalStorageVersions = []
@@ -2804,24 +3778,16 @@ const useStatefulTable = props => {
     densityModel,
     setDensityModel,
     columnOrderModel: localStorageColumnOrder,
-    setColumnOrderModel: setLocalStorageColumnOrder,
-    rowGroupingModel: localStorageRowGrouping,
-    setRowGroupingModel: setLocalStorageRowGrouping,
-    aggregationModel: localStorageAggregation,
-    setAggregationModel: setLocalStorageAggregation,
-    pivotModel: localStoragePivot,
-    setPivotModel: setLocalStoragePivot,
-    pivotActive: localStoragePivotActive,
-    setPivotActive: setLocalStoragePivotActive
+    setColumnOrderModel: setLocalStorageColumnOrder
   } = useTableStates(id, localStorageVersion);
 
   // clearing up old version keys, triggering only on first render
   useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
-  const onColumnDimensionChange = useCallback(_ref2 => {
+  const onColumnDimensionChange = useCallback(_ref => {
     let {
       newWidth,
       field
-    } = _ref2;
+    } = _ref;
     setDimensionModel(_objectSpread2(_objectSpread2({}, dimensionModel), {}, {
       [field]: newWidth
     }));
@@ -2834,10 +3800,6 @@ const useStatefulTable = props => {
     pinnedColumnsModel,
     density: densityParsed,
     columnOrderModel: columnOrderParsed,
-    rowGroupingModel: rowGroupingParsed,
-    aggregationModel: aggregationParsed,
-    pivotModel: pivotParsed,
-    pivotActive: pivotActiveParsed,
     pendingSearch
   } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, initialState, {
     localStorageFilters,
@@ -2853,15 +3815,7 @@ const useStatefulTable = props => {
     localStorageDensity: densityModel,
     setLocalStorageDensity: setDensityModel,
     localStorageColumnOrder,
-    setLocalStorageColumnOrder,
-    localStorageRowGrouping,
-    setLocalStorageRowGrouping,
-    localStorageAggregation,
-    setLocalStorageAggregation,
-    localStoragePivot,
-    setLocalStoragePivot,
-    localStoragePivotActive: localStoragePivotActive,
-    setLocalStoragePivotActive: setLocalStoragePivotActive
+    setLocalStorageColumnOrder
   });
 
   // Sync URL in an effect rather than during render to comply with React rules
@@ -2870,45 +3824,6 @@ const useStatefulTable = props => {
       historyReplace(pendingSearch);
     }
   }, [pendingSearch, historyReplace]);
-
-  // Stabilise parsed model references to prevent MUI v8 from resetting
-  // pagination on every render due to new object identity.
-  const filterParsedRef = useRef(filterParsed);
-  if (!isDeepEqual(filterParsedRef.current, filterParsed)) {
-    filterParsedRef.current = filterParsed;
-  }
-  const sortModelParsedRef = useRef(sortModelParsed);
-  if (!isDeepEqual(sortModelParsedRef.current, sortModelParsed)) {
-    sortModelParsedRef.current = sortModelParsed;
-  }
-  const paginationModelParsedRef = useRef(paginationModelParsed);
-  if (!isDeepEqual(paginationModelParsedRef.current, paginationModelParsed)) {
-    paginationModelParsedRef.current = paginationModelParsed;
-  }
-  const visibilityModelRef = useRef(visibilityModel);
-  if (!isDeepEqual(visibilityModelRef.current, visibilityModel)) {
-    visibilityModelRef.current = visibilityModel;
-  }
-  const pinnedColumnsModelRef = useRef(pinnedColumnsModel);
-  if (!isDeepEqual(pinnedColumnsModelRef.current, pinnedColumnsModel)) {
-    pinnedColumnsModelRef.current = pinnedColumnsModel;
-  }
-  const columnOrderParsedRef = useRef(columnOrderParsed);
-  if (!isDeepEqual(columnOrderParsedRef.current, columnOrderParsed)) {
-    columnOrderParsedRef.current = columnOrderParsed;
-  }
-  const rowGroupingParsedRef = useRef(rowGroupingParsed);
-  if (!isDeepEqual(rowGroupingParsedRef.current, rowGroupingParsed)) {
-    rowGroupingParsedRef.current = rowGroupingParsed;
-  }
-  const aggregationParsedRef = useRef(aggregationParsed);
-  if (!isDeepEqual(aggregationParsedRef.current, aggregationParsed)) {
-    aggregationParsedRef.current = aggregationParsed;
-  }
-  const pivotParsedRef = useRef(pivotParsed);
-  if (!isDeepEqual(pivotParsedRef.current, pivotParsed)) {
-    pivotParsedRef.current = pivotParsed;
-  }
   const columns = useMemo(() => propsColumns.map(column => {
     return _objectSpread2(_objectSpread2({}, column), {}, {
       width: dimensionModel[column.field] || column.width || 100
@@ -2917,61 +3832,56 @@ const useStatefulTable = props => {
   if (apiRef.current) {
     /** Add resetPage method to apiRef. */
     apiRef.current.resetPage = () => {
-      var _apiRef$current;
-      (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPage(0);
+      apiRef.current.setPage(0);
     };
   }
   const defaultColumnOrder = (_initialState$columns = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns2 = initialState.columns) === null || _initialState$columns2 === void 0 ? void 0 : _initialState$columns2.orderedFields) !== null && _initialState$columns !== void 0 ? _initialState$columns : propsColumns.map(c => c.field);
 
+  // Helper to build the current DataGridModel for updateUrl calls
+  const buildModel = function () {
+    var _apiRef$current$state, _apiRef$current;
+    let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return _objectSpread2({
+      filterModel: filterParsed,
+      sortModel: sortModelParsed,
+      paginationModel: paginationModelParsed,
+      columnsModel: (_apiRef$current$state = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
+      pinnedColumnsModel: pinnedColumnsModel,
+      density: densityParsed,
+      columnOrderModel: columnOrderParsed,
+      defaultColumnOrder
+    }, overrides);
+  };
+
   // Subscribe to density changes via stateChange event (MUI v6 has no densityChange event)
   useEffect(() => {
     const api = apiRef.current;
     if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
     let prevDensity = densityParsed;
     const unsub = api.subscribeEvent('stateChange', () => {
-      const currentDensity = api.state.density;
+      const currentDensity = api.state.density.value;
       if (currentDensity !== prevDensity) {
         prevDensity = currentDensity;
-        updateUrl({
-          filterModel: filterParsed,
-          sortModel: sortModelParsed,
-          paginationModel: paginationModelParsed,
+        updateUrl(buildModel({
           columnsModel: api.state.columns.columnVisibilityModel,
-          pinnedColumnsModel: pinnedColumnsModel,
-          density: currentDensity,
-          columnOrderModel: columnOrderParsed,
-          defaultColumnOrder,
-          rowGroupingModel: rowGroupingParsed,
-          aggregationModel: aggregationParsed,
-          pivotModel: pivotParsed,
-          pivotActive: pivotActiveParsed
-        }, search, localStorageVersion, historyReplace, columns);
+          density: currentDensity
+        }), search, localStorageVersion, historyReplace, columns);
       }
     });
     return unsub;
-  }, [apiRef, densityParsed, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, columnOrderParsed, defaultColumnOrder, rowGroupingParsed, aggregationParsed, pivotParsed, pivotActiveParsed, search, localStorageVersion, historyReplace, columns]);
+  }, [apiRef, densityParsed, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, columnOrderParsed, defaultColumnOrder, search, localStorageVersion, historyReplace, columns]);
 
   // Subscribe to column order changes via columnOrderChange (drag-drop) and columnIndexChange (programmatic setColumnIndex)
   useEffect(() => {
     const api = apiRef.current;
     if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
+    const isDeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
     const handleColumnOrderChange = () => {
       const orderedFields = api.state.columns.orderedFields;
       if (orderedFields && !isDeepEqual(orderedFields, columnOrderParsed)) {
-        updateUrl({
-          filterModel: filterParsed,
-          sortModel: sortModelParsed,
-          paginationModel: paginationModelParsed,
-          columnsModel: api.state.columns.columnVisibilityModel,
-          pinnedColumnsModel,
-          density: densityParsed,
-          columnOrderModel: orderedFields,
-          defaultColumnOrder,
-          rowGroupingModel: rowGroupingParsed,
-          aggregationModel: aggregationParsed,
-          pivotModel: pivotParsed,
-          pivotActive: pivotActiveParsed
-        }, search, localStorageVersion, historyReplace, columns);
+        updateUrl(buildModel({
+          columnOrderModel: orderedFields
+        }), search, localStorageVersion, historyReplace, columns);
       }
     };
     const unsub1 = api.subscribeEvent('columnOrderChange', handleColumnOrderChange);
@@ -2980,120 +3890,69 @@ const useStatefulTable = props => {
       unsub1();
       unsub2();
     };
-  }, [apiRef, columnOrderParsed, defaultColumnOrder, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, densityParsed, rowGroupingParsed, aggregationParsed, pivotParsed, pivotActiveParsed, search, localStorageVersion, historyReplace, columns]);
-
-  // Helper to build the current DataGridModel for updateUrl calls
-  const buildModel = function () {
-    var _apiRef$current$state, _apiRef$current2;
-    let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return _objectSpread2({
-      filterModel: filterParsed,
-      sortModel: sortModelParsed,
-      paginationModel: paginationModelParsed,
-      columnsModel: (_apiRef$current$state = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
-      pinnedColumnsModel: pinnedColumnsModel,
-      density: densityParsed,
-      columnOrderModel: columnOrderParsed,
-      defaultColumnOrder,
-      rowGroupingModel: rowGroupingParsed,
-      aggregationModel: aggregationParsed,
-      pivotModel: pivotParsed,
-      pivotActive: pivotActiveParsed
-    }, overrides);
-  };
-
-  // Stable GridPivotModel identity — only recompute when the simplified value changes.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const pivotModelMui = useMemo(() => toGridPivotModel(pivotParsed), [JSON.stringify(pivotParsed)]);
+  }, [apiRef, columnOrderParsed, defaultColumnOrder, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, densityParsed, search, localStorageVersion, historyReplace, columns]);
 
   // Track last emitted values for deep-equal guards to avoid feedback loops.
-  // Initialised from the current parsed values; updated only when we actually fire.
   const lastEmittedFilterRef = useRef(filterParsed);
   const lastEmittedSortRef = useRef(sortModelParsed);
   const lastEmittedPaginationRef = useRef(paginationModelParsed);
-  const lastEmittedPivotRef = useRef(pivotParsed);
+  const isModelDeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
   return {
     apiRef,
     columns,
     density: densityParsed,
-    columnOrderModel: columnOrderParsedRef.current,
-    rowGroupingModel: rowGroupingParsedRef.current,
-    aggregationModel: aggregationParsedRef.current,
-    pivotModel: pivotModelMui,
-    pivotActive: pivotActiveParsed,
+    columnOrderModel: columnOrderParsed,
     onFilterModelChange: (model, details) => {
       const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
         items: model.items.map(item => {
-          var _apiRef$current3;
-          const column = (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.getColumn(item.field);
-          item.type = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+          const column = apiRef.current.getColumn(item.field);
+          item.type = column.type || 'string';
           return item;
         }),
         quickFilterValues: model.quickFilterValues || []
       });
-      if (isDeepEqual(filterModel, lastEmittedFilterRef.current)) return;
+      if (isModelDeepEqual(filterModel, lastEmittedFilterRef.current)) return;
       lastEmittedFilterRef.current = filterModel;
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
       updateUrl(buildModel({
         filterModel
       }), search, localStorageVersion, historyReplace, columns);
-      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
     },
-    filterModel: filterParsedRef.current,
+    filterModel: filterParsed,
     onSortModelChange: (model, details) => {
-      if (isDeepEqual(model, lastEmittedSortRef.current)) return;
+      if (isModelDeepEqual(model, lastEmittedSortRef.current)) return;
       lastEmittedSortRef.current = model;
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
       updateUrl(buildModel({
         sortModel: model
       }), search, localStorageVersion, historyReplace, columns);
-      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
     },
-    sortModel: sortModelParsedRef.current,
+    sortModel: sortModelParsed,
     onPinnedColumnsChange: (pinnedColumns, details) => {
-      var _apiRef$current$state2, _apiRef$current4, _apiRef$current4$stat, _apiRef$current4$stat2;
-      // While pivot mode is active, MUI Premium emits synthetic pinned-column
-      // models (e.g. `__row_group_by_columns_group__` for the grouping column)
-      // that must not be persisted to the URL / localStorage. Read the live
-      // grid state from apiRef rather than the parsed URL value because the
-      // URL lags by a tick during pivot enable/disable transitions. Consumer
-      // callbacks are always forwarded so observers can still react.
-      const pivotActiveLive = (_apiRef$current$state2 = (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : (_apiRef$current4$stat = _apiRef$current4.state) === null || _apiRef$current4$stat === void 0 ? void 0 : (_apiRef$current4$stat2 = _apiRef$current4$stat.pivoting) === null || _apiRef$current4$stat2 === void 0 ? void 0 : _apiRef$current4$stat2.active) !== null && _apiRef$current$state2 !== void 0 ? _apiRef$current$state2 : pivotActiveParsed;
-      if (!pivotActiveLive) {
-        updateUrl(buildModel({
-          pinnedColumnsModel: pinnedColumns
-        }), search, localStorageVersion, historyReplace, columns);
-      }
       propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      updateUrl(buildModel({
+        pinnedColumnsModel: pinnedColumns
+      }), search, localStorageVersion, historyReplace, columns);
     },
-    pinnedColumns: pinnedColumnsModelRef.current,
-    paginationModel: paginationModelParsedRef.current,
+    pinnedColumns: pinnedColumnsModel,
+    paginationModel: paginationModelParsed,
     onPaginationModelChange: (model, details) => {
       const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
         direction: paginationModelParsed.page < model.page ? 'next' : 'back'
       });
-      if (isDeepEqual(paginationModel, lastEmittedPaginationRef.current)) return;
+      if (isModelDeepEqual(paginationModel, lastEmittedPaginationRef.current)) return;
       lastEmittedPaginationRef.current = paginationModel;
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
       updateUrl(buildModel({
         paginationModel
       }), search, localStorageVersion, historyReplace, columns);
-      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
     },
-    columnVisibilityModel: visibilityModelRef.current,
+    columnVisibilityModel: visibilityModel,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
-      var _apiRef$current$state3, _apiRef$current5, _apiRef$current5$stat, _apiRef$current5$stat2;
-      // While pivot mode is active, MUI Premium emits synthetic visibility
-      // models that whitelist only the pivot value fields (hiding every base
-      // column). Persisting that to the URL would re-hide all base columns
-      // on the next load (see getColumnVisibilityFromString whitelist logic).
-      // Read the live grid state rather than the parsed URL value because the
-      // URL lags by a tick during pivot enable/disable transitions. Consumer
-      // callbacks are always forwarded.
-      const pivotActiveLive = (_apiRef$current$state3 = (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : (_apiRef$current5$stat = _apiRef$current5.state) === null || _apiRef$current5$stat === void 0 ? void 0 : (_apiRef$current5$stat2 = _apiRef$current5$stat.pivoting) === null || _apiRef$current5$stat2 === void 0 ? void 0 : _apiRef$current5$stat2.active) !== null && _apiRef$current$state3 !== void 0 ? _apiRef$current$state3 : pivotActiveParsed;
-      if (!pivotActiveLive) {
-        updateUrl(buildModel({
-          columnsModel: columnsVisibilityModel
-        }), search, localStorageVersion, historyReplace, columns);
-      }
       propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      updateUrl(buildModel({
+        columnsModel: columnsVisibilityModel
+      }), search, localStorageVersion, historyReplace, columns);
     },
     onColumnWidthChange: (params, event, details) => {
       propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
@@ -3101,38 +3960,11 @@ const useStatefulTable = props => {
         newWidth: params.width,
         field: params.colDef.field
       });
-    },
-    onRowGroupingModelChange: (model, details) => {
-      updateUrl(buildModel({
-        rowGroupingModel: model
-      }), search, localStorageVersion, historyReplace, columns);
-      propsOnRowGroupingModelChange === null || propsOnRowGroupingModelChange === void 0 ? void 0 : propsOnRowGroupingModelChange(model, details);
-    },
-    onAggregationModelChange: (model, details) => {
-      updateUrl(buildModel({
-        aggregationModel: model
-      }), search, localStorageVersion, historyReplace, columns);
-      propsOnAggregationModelChange === null || propsOnAggregationModelChange === void 0 ? void 0 : propsOnAggregationModelChange(model, details);
-    },
-    onPivotModelChange: model => {
-      const simplified = fromGridPivotModel(model);
-      if (isDeepEqual(simplified, lastEmittedPivotRef.current)) return;
-      lastEmittedPivotRef.current = simplified;
-      updateUrl(buildModel({
-        pivotModel: simplified
-      }), search, localStorageVersion, historyReplace, columns);
-      propsOnPivotModelChange === null || propsOnPivotModelChange === void 0 ? void 0 : propsOnPivotModelChange(model);
-    },
-    onPivotActiveChange: active => {
-      if (active === pivotActiveParsed) return;
-      updateUrl(buildModel({
-        pivotActive: active
-      }), search, localStorageVersion, historyReplace, columns);
     }
   };
 };
 
-const _excluded = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "onRowGroupingModelChange", "onAggregationModelChange", "onPivotModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount", "density", "dataSource", "filterMode", "sortingMode"];
+const _excluded = ["apiRef", "autoHeight", "className", "columns", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "rowSelectionModel", "onColumnWidthChange", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "selectionBannerPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
 const COMPONENT_NAME = 'DataGrid';
 const CLASSNAME = 'redsift-datagrid';
 
@@ -3216,11 +4048,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
       onPinnedColumnsChange: propsOnPinnedColumnsChange,
       onSortModelChange: propsOnSortModelChange,
-      onRowGroupingModelChange: propsOnRowGroupingModelChange,
-      onAggregationModelChange: propsOnAggregationModelChange,
-      onPivotModelChange: propsOnPivotModelChange,
       pagination,
       paginationPlacement = 'both',
+      selectionBannerPlacement = 'top',
       paginationProps,
       rows,
       pageSizeOptions,
@@ -3228,26 +4058,15 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       theme: propsTheme,
       useRouter,
       paginationMode = 'client',
-      rowCount,
-      density: _density,
-      dataSource,
-      filterMode: propsFilterMode,
-      sortingMode: propsSortingMode
+      rowCount
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
-  const theme = useTheme(propsTheme);
+  const theme = useTheme$1(propsTheme);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
+  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
-
-  // When dataSource is present, MUI manages filter/sort/pagination internally.
-  // We must not pass controlled models — only initialState (one-time) and
-  // write-only onChange handlers for URL/localStorage persistence.
-  const isDataSourceMode = Boolean(dataSource);
-  const effectivePaginationMode = isDataSourceMode ? 'server' : paginationMode;
-  const effectiveFilterMode = isDataSourceMode ? 'server' : propsFilterMode;
-  const effectiveSortingMode = isDataSourceMode ? 'server' : propsSortingMode;
   const {
     onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
     onFilterModelChange: controlledOnFilterModelChange,
@@ -3281,15 +4100,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     pinnedColumns,
     sortModel,
     onColumnWidthChange,
-    columnOrderModel,
-    rowGroupingModel,
-    aggregationModel,
-    pivotModel,
-    pivotActive,
-    onRowGroupingModelChange,
-    onAggregationModelChange,
-    onPivotModelChange,
-    onPivotActiveChange
+    columnOrderModel
   } = useStatefulTable({
     apiRef: apiRef,
     initialState,
@@ -3300,68 +4111,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     onPaginationModelChange: controlledOnPaginationModelChange,
     onPinnedColumnsChange: controlledOnPinnedColumnsChange,
     onSortModelChange: controlledOnSortModelChange,
-    onRowGroupingModelChange: propsOnRowGroupingModelChange,
-    onAggregationModelChange: propsOnAggregationModelChange,
-    onPivotModelChange: propsOnPivotModelChange,
     useRouter: useRouter,
     localStorageVersion,
     previousLocalStorageVersions
   });
-
-  // In dataSource mode, track pagination locally for the custom pagination slots
-  // (rendered outside DataGridPremium). MUI owns the actual pagination state internally.
-  const [dataSourcePaginationModel, setDataSourcePaginationModel] = useState(paginationModel);
-
-  // The pagination model to use for display in pagination slots
-  const activePaginationModel = isDataSourceMode ? dataSourcePaginationModel : paginationModel;
-
-  // Wrap onPaginationModelChange to also track state locally in dataSource mode
-  const wrappedOnPaginationModelChange = useCallback((model, details) => {
-    if (isDataSourceMode) {
-      setDataSourcePaginationModel(model);
-    }
-    onPaginationModelChange(model, details);
-  }, [isDataSourceMode, onPaginationModelChange]);
-
-  // In dataSource mode, pagination changes from our custom pagination slots
-  // (rendered outside MUI's pagination state) route through apiRef so MUI's
-  // internal page state updates and dataSource.getRows() refetches with the
-  // new params. The `paginationModelChange` subscription below picks up the
-  // resulting state change and propagates it to URL/localStorage and local
-  // React state via wrappedOnPaginationModelChange.
-  const dataSourcePaginationChange = useCallback(model => {
-    var _apiRef$current;
-    (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPaginationModel(model);
-  }, [apiRef]);
-
-  // In dataSource mode, subscribe to MUI's `paginationModelChange` event so
-  // URL state stays in sync with MUI's internal pagination regardless of how
-  // it changed (slot click, apiRef.setPaginationModel from consumer code,
-  // MUI internal updates, etc.). Relying on MUI's `onPaginationModelChange`
-  // prop callback alone is not sufficient: in pivot/GroupedData strategy mode
-  // and with `paginationModel` seeded via `initialState` (rather than as a
-  // controlled prop), the prop callback can be missed under certain
-  // re-render orderings. The event fires reliably whenever the internal
-  // state changes via `setState('setPaginationModel')`, see
-  // `useGridStateInitialization.setState` → `publishEvent(changeEvent, …)`.
-  // The deep-equal guard inside `useStatefulTable.onPaginationModelChange`
-  // dedupes any duplicate emits, so overlap with the prop callback is safe.
-  useEffect(() => {
-    if (!isDataSourceMode) return;
-    const api = apiRef.current;
-    if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
-    return api.subscribeEvent('paginationModelChange', model => {
-      wrappedOnPaginationModelChange({
-        page: model.page,
-        pageSize: model.pageSize
-      }, {
-        reason: 'paginationModelChange'
-      });
-    });
-  }, [isDataSourceMode, apiRef, wrappedOnPaginationModelChange]);
-  const [rowSelectionModel, setRowSelectionModel] = useState(() => normalizeRowSelectionModel(propsRowSelectionModel));
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
   useEffect(() => {
-    setRowSelectionModel(normalizeRowSelectionModel(propsRowSelectionModel));
+    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
   }, [propsRowSelectionModel]);
   const onRowSelectionModelChange = (selectionModel, details) => {
     setRowSelectionModel(selectionModel);
@@ -3375,41 +4131,25 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     pageSize: paginationModel.pageSize
   });
 
-  // Version counter to force re-renders when selectionStatus ref changes
-  const [, forceSelectionUpdate] = useState(0);
-
   // The checkboxSelectionVisibleOnly should only be applied to client-side pagination,
   // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
-  const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(effectivePaginationMode != 'server');
-
-  // Track when the grid API is ready to ensure top pagination renders correctly
-  const [gridReady, setGridReady] = useState(false);
-
-  // Force re-render when the grid API becomes ready (for top pagination)
-  useEffect(() => {
-    if (apiRef.current && !gridReady) {
-      setGridReady(true);
-    }
-  });
+  const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(paginationMode != 'server');
 
-  // Sync persisted density via apiRef — initialState only applies on mount,
-  // so this handles SPA back/forward navigation where controlledDensity changes after mount
-  useEffect(() => {
-    if (apiRef.current) {
-      apiRef.current.setDensity(controlledDensity);
-    }
-  }, [controlledDensity, apiRef]);
+  // Banner and pager placements are independent. `belowToolbar` (for either) renders
+  // in the toolbar-slot row, and only applies when pagination is on.
+  const bannerAtTop = selectionBannerPlacement === 'top';
+  const bannerAtBottom = selectionBannerPlacement === 'bottom';
+  const bannerBelowToolbar = selectionBannerPlacement === 'belowToolbar' && Boolean(pagination);
+  const pagerBelowToolbar = paginationPlacement === 'belowToolbar' && Boolean(pagination);
 
   // 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 (effectivePaginationMode == 'server') {
-      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, activePaginationModel.page, activePaginationModel.pageSize);
+    if (paginationMode == 'server') {
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatusRef, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
-  }, [rowSelectionModel, activePaginationModel.page, activePaginationModel.pageSize, rows]);
-
-  // In dataSource mode MUI provides rows internally; skip the guard.
-  if (!isDataSourceMode && !Array.isArray(rows)) {
+  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize, rows]);
+  if (!Array.isArray(rows)) {
     return null;
   }
 
@@ -3418,15 +4158,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // receive the fresh value in the same render cycle — no extra re-render needed.
   // The ref is kept in sync for the onRowSelectionModelChange callback's deselect logic.
   let selectionStatus = selectionStatusRef.current;
-  if (pagination && effectivePaginationMode !== 'server' && getSelectionCount(rowSelectionModel) > 0) {
+  if (pagination && paginationMode !== 'server' && Array.isArray(rowSelectionModel) && rowSelectionModel.length > 0) {
     try {
-      // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors.
-      // MUI's paginated selectors use apiRef internal state which may be stale when
-      // paginationModel prop changes — our React state is always up to date.
-      const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
-      const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
-      const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
-      const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref => {
+      const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
         let {
           model
         } = _ref;
@@ -3438,29 +4172,24 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           id
         } = _ref2;
         return id;
-      }) : pageEntries.map(_ref3 => {
-        let {
-          id
-        } = _ref3;
-        return id;
-      });
+      }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
       const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-      const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref4 => {
+      const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
         let {
           model
-        } = _ref4;
+        } = _ref3;
         return isRowSelectable({
           row: model
         });
-      }).map(_ref5 => {
+      }).map(_ref4 => {
         let {
           id
-        } = _ref5;
+        } = _ref4;
         return id;
       }) : gridFilteredSortedRowIdsSelector(apiRef);
       const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-      const numberOfSelectedRows = getSelectionCount(rowSelectionModel);
-      const selectedOnCurrentPage = selectableRowsInPage.filter(id => isRowSelected(rowSelectionModel, id));
+      const numberOfSelectedRows = rowSelectionModel.length;
+      const selectedOnCurrentPage = selectableRowsInPage.filter(id => rowSelectionModel.includes(id));
       if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
         selectionStatus = {
           type: 'table',
@@ -3485,7 +4214,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     } catch {
       // apiRef may not be initialized on first render
     }
-  } else if (pagination && effectivePaginationMode !== 'server') {
+  } else if (pagination && paginationMode !== 'server') {
     selectionStatus = {
       type: 'none',
       numberOfSelectedRows: 0
@@ -3514,227 +4243,158 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, pagination && ['top', 'both'].includes(paginationPlacement) && gridReady ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
-    displaySelection: true,
-    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
-    displayPagination: ['top', 'both'].includes(paginationPlacement),
-    selectionStatus: selectionStatus,
-    paginationModel: activePaginationModel,
-    onPaginationModelChange: isDataSourceMode ? dataSourcePaginationChange : onPaginationModelChange,
-    pageSizeOptions: pageSizeOptions,
-    paginationProps: paginationProps,
-    rowCount: rowCount
-  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
-    displaySelection: true,
-    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
-    displayPagination: ['top', 'both'].includes(paginationPlacement),
-    selectionStatus: selectionStatus,
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$2({}, forwardedProps, {
     apiRef: apiRef,
-    isRowSelectable: isRowSelectable,
-    paginationModel: activePaginationModel,
-    onPaginationModelChange: onPaginationModelChange,
-    pageSizeOptions: pageSizeOptions,
-    paginationProps: paginationProps
-  }) : null, /*#__PURE__*/React__default.createElement(DataGridPremium, _extends({}, forwardedProps, {
-    apiRef: apiRef,
-    dataSource: dataSource,
     columns: columns,
+    columnVisibilityModel: columnVisibilityModel,
+    density: controlledDensity,
+    filterModel: filterModel,
     onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onFilterModelChange: onFilterModelChange,
+    onPaginationModelChange: onPaginationModelChange,
     onPinnedColumnsChange: onPinnedColumnsChange,
+    onSortModelChange: onSortModelChange,
+    paginationModel: paginationModel,
+    pinnedColumns: pinnedColumns,
+    sortModel: sortModel,
     pageSizeOptions: pageSizeOptions,
     onColumnWidthChange: onColumnWidthChange,
-    onRowGroupingModelChange: onRowGroupingModelChange,
-    onAggregationModelChange: onAggregationModelChange,
-    pivotModel: pivotModel,
-    onPivotModelChange: onPivotModelChange,
-    pivotActive: pivotActive,
-    onPivotActiveChange: onPivotActiveChange
-    // In dataSource mode: models are uncontrolled (MUI owns them),
-    // onChange handlers are write-only for URL/localStorage persistence,
-    // and initialState seeds MUI on mount from the persisted URL state.
-    // columnVisibilityModel / pinnedColumns / rowGroupingModel /
-    // aggregationModel are also uncontrolled here to avoid a controlled
-    // re-render race with consumer-side microtask-deferred history
-    // updates (otherwise user toggles flip back when MUI re-emits with
-    // the stale controlled value). Consumers needing programmatic
-    // changes should use the apiRef imperative API.
-  }, isDataSourceMode ? {
-    onFilterModelChange: onFilterModelChange,
-    onSortModelChange: onSortModelChange,
-    onPaginationModelChange: wrappedOnPaginationModelChange,
     initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
-      density: controlledDensity,
-      columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
-        orderedFields: columnOrderModel,
-        columnVisibilityModel
-      }),
-      pinnedColumns,
-      rowGrouping: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.rowGrouping), {}, {
-        model: rowGroupingModel
-      }),
-      aggregation: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.aggregation), {}, {
-        model: aggregationModel
-      }),
-      filter: {
-        filterModel
-      },
-      sorting: {
-        sortModel
-      },
-      pagination: {
-        paginationModel
-      },
-      pivoting: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.pivoting), {}, {
-        enabled: pivotActive
-      })
-    })
-  } : {
-    columnVisibilityModel,
-    pinnedColumns,
-    rowGroupingModel,
-    aggregationModel,
-    filterModel,
-    sortModel,
-    paginationModel,
-    onFilterModelChange: onFilterModelChange,
-    onSortModelChange: onSortModelChange,
-    onPaginationModelChange: wrappedOnPaginationModelChange,
-    initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
-      density: controlledDensity,
       columns: _objectSpread2(_objectSpread2({}, initialState === null || initialState === void 0 ? void 0 : initialState.columns), {}, {
         orderedFields: columnOrderModel
       })
-    })
-  }, {
+    }),
     isRowSelectable: isRowSelectable,
     pagination: pagination,
-    paginationMode: effectivePaginationMode,
-    filterMode: effectiveFilterMode,
-    sortingMode: effectiveSortingMode,
-    keepNonExistentRowsSelected: effectivePaginationMode == 'server',
-    rows: isDataSourceMode ? [] : rows,
+    paginationMode: paginationMode,
+    keepNonExistentRowsSelected: paginationMode == 'server',
+    rows: rows,
     rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
-    disableRowSelectionExcludeModel: true,
-    showToolbar: !hideToolbar,
     slots: _objectSpread2(_objectSpread2({
       baseButton: BaseButton,
       baseCheckbox: BaseCheckbox,
-      baseIconButton: BaseIconButton,
-      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "columnFilteredIcon"
+      // baseTextField,
+      basePopper: BasePopper,
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnFilteredIcon"
       })),
-      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "columnSelectorIcon"
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnSelectorIcon"
       })),
-      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "columnSortedAscendingIcon"
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnSortedAscendingIcon"
       })),
-      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "columnSortedDescendingIcon"
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ColumnSortedDescendingIcon"
       })),
-      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "densityCompactIcon"
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DensityCompactIcon"
       })),
-      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "densityStandardIcon"
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DensityStandardIcon"
       })),
-      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "densityComfortableIcon"
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DensityComfortableIcon"
       })),
-      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "detailPanelCollapseIcon"
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DetailPanelCollapseIcon"
       })),
-      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "detailPanelExpandIcon"
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "DetailPanelExpandIcon"
       })),
-      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "exportIcon"
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+        displayName: "ExportIcon"
       })),
-      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
-        displayName: "openFilterButtonIcon"
-      }))
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
+        displayName: "OpenFilterButtonIcon"
+      }, props))
     }, slots), {}, {
+      toolbar: ToolbarWrapper,
       pagination: props => {
-        return pagination ? effectivePaginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
-          displaySelection: false,
+        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$2({}, props, {
+          displaySelection: bannerAtBottom,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
           selectionStatus: selectionStatus,
-          paginationModel: activePaginationModel
-          // In dataSource mode route through apiRef so MUI's internal pagination
-          // state stays in sync with the displayed model and dataSource.getRows()
-          // re-fetches with the new params. MUI then fires onPaginationModelChange
-          // via the prop, which updates URL/localStorage via useStatefulTable.
-          // Without this the bottom slot only updated local React state + URL,
-          // leaving MUI on its previous internal page (no refetch, stale display).
-          ,
-          onPaginationModelChange: isDataSourceMode ? dataSourcePaginationChange : wrappedOnPaginationModelChange,
+          paginationModel: paginationModel,
+          onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
           paginationProps: paginationProps,
+          paginationMode: paginationMode,
           rowCount: rowCount
-        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
-          displaySelection: false,
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$2({}, props, {
+          displaySelection: bannerAtBottom,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
           selectionStatus: selectionStatus,
           apiRef: apiRef,
           isRowSelectable: isRowSelectable,
-          paginationModel: activePaginationModel,
-          onPaginationModelChange: wrappedOnPaginationModelChange,
+          paginationModel: paginationModel,
+          onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
-          paginationProps: paginationProps
+          paginationProps: paginationProps,
+          paginationMode: paginationMode
         })) : null;
       }
     }),
-    slotProps: _objectSpread2({}, slotProps),
+    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
+      toolbar: _objectSpread2({
+        hideToolbar,
+        RenderedToolbar,
+        filterModel,
+        onFilterModelChange,
+        pagination,
+        displaySelection: bannerAtTop || bannerBelowToolbar,
+        displayPagination: ['top', 'both'].includes(paginationPlacement) || pagerBelowToolbar,
+        displayRowsPerPage: pagerBelowToolbar,
+        selectionStatus,
+        apiRef,
+        isRowSelectable,
+        paginationModel,
+        onPaginationModelChange,
+        pageSizeOptions,
+        paginationProps,
+        paginationMode,
+        rowCount
+      }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
+    }),
     rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
-      if (pagination && effectivePaginationMode != 'server') {
-        // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors
-        // to avoid stale apiRef pagination state.
-        const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
-        const pageStart = activePaginationModel.page * activePaginationModel.pageSize;
-        const pageEntries = allFilteredEntries.slice(pageStart, pageStart + activePaginationModel.pageSize);
-        const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref6 => {
+      if (pagination && paginationMode != 'server') {
+        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref5 => {
           let {
             model
-          } = _ref6;
+          } = _ref5;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref7 => {
+        }).map(_ref6 => {
           let {
             id
-          } = _ref7;
-          return id;
-        }) : pageEntries.map(_ref8 => {
-          let {
-            id
-          } = _ref8;
+          } = _ref6;
           return id;
-        });
+        }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref9 => {
+        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
           let {
             model
-          } = _ref9;
+          } = _ref7;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref10 => {
+        }).map(_ref8 => {
           let {
             id
-          } = _ref10;
+          } = _ref8;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-        const numberOfSelectedRows = getSelectionCount(newSelectionModel);
+        const numberOfSelectedRows = newSelectionModel.length;
         if (selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatusRef.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
           setTimeout(() => {
-            var _apiRef$current2;
-            (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.selectRows([], true, true);
+            apiRef.current.selectRows([], true, true);
           }, 0);
         }
         if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
@@ -3758,7 +4418,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
             numberOfSelectedRows
           };
         }
-        forceSelectionUpdate(v => v + 1);
       }
       onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
@@ -3776,5 +4435,5 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
 StatefulDataGrid.className = CLASSNAME;
 StatefulDataGrid.displayName = COMPONENT_NAME;
 
-export { buildStorageKey as $, ARRAY_IS_EMPTY as A, IS as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, IS_NOT as F, getGridStringOperators as G, HAS_WITH_SELECT as H, IS_ANY_OF as I, getGridStringArrayOperators as J, getGridStringArrayOperatorsWithSelect as K, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as L, FILTER_MODEL_KEY as M, SORT_MODEL_KEY as N, PINNED_COLUMNS as O, PAGINATION_MODEL_KEY as P, DIMENSION_MODEL_KEY as Q, FILTER_SEARCH_KEY as R, STARTS_WITH_ANY_OF as S, DENSITY_MODEL_KEY as T, COLUMN_ORDER_MODEL_KEY as U, VISIBILITY_MODEL_KEY as V, ROW_GROUPING_MODEL_KEY as W, AGGREGATION_MODEL_KEY as X, PIVOT_MODEL_KEY as Y, PIVOT_ACTIVE_KEY as Z, CATEGORIES as _, DOES_NOT_EQUAL as a, clearPreviousVersionStorage as a0, clearAllVersionStorage as a1, resetStatefulDataGridState as a2, convertToDisplayFormat as a3, convertFromDisplayFormat as a4, getDecodedSearchFromUrl as a5, buildQueryParamsString as a6, areSearchStringsEqual as a7, decodeValue as a8, encodeValue as a9, getPivotFromString as aA, getSearchParamsFromPivot as aB, getPivotActiveFromString as aC, getSearchParamsFromPivotActive as aD, getFinalSearch as aE, getModelsParsedOrUpdateLocalStorage as aF, updateUrl as aG, areFilterModelsEquivalent as aH, StatefulDataGrid as aI, urlSearchParamsToString as aa, numberOperatorEncoder as ab, numberOperatorDecoder as ac, isOperatorValueValid as ad, isValueValid as ae, getFilterModelFromString as af, getSearchParamsFromFilterModel as ag, getSortingFromString as ah, getSearchParamsFromSorting as ai, getPaginationFromString as aj, getSearchParamsFromPagination as ak, getColumnVisibilityFromString as al, getSearchParamsFromColumnVisibility as am, getPinnedColumnsFromString as an, getSearchParamsFromPinnedColumns as ao, getSearchParamsFromTab as ap, getDensityFromString as aq, getSearchParamsFromDensity as ar, getDensityModel as as, getColumnOrderFromString as at, getSearchParamsFromColumnOrder as au, getRowGroupingFromString as av, getSearchParamsFromRowGrouping as aw, getAggregationFromString as ax, getSearchParamsFromAggregation as ay, fromGridPivotModel as az, DOES_NOT_START_WITH as b, DOES_NOT_END_WITH as c, IS_NOT_ANY_OF as d, DOES_NOT_CONTAIN_ANY_OF as e, DOES_NOT_START_WITH_ANY_OF as f, DOES_NOT_END_WITH_ANY_OF as g, IS_BETWEEN as h, IS_WITH_SELECT as i, IS_NOT_WITH_SELECT as j, IS_ANY_OF_WITH_SELECT as k, IS_NOT_ANY_OF_WITH_SELECT as l, ARRAY_IS_NOT_EMPTY as m, DOES_NOT_HAVE_WITH_SELECT as n, operatorList as o, HAS_ANY_OF_WITH_SELECT as p, HAS_ALL_OF_WITH_SELECT as q, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as r, HAS_ONLY_WITH_SELECT as s, HAS as t, DOES_NOT_HAVE as u, HAS_ANY_OF as v, HAS_ALL_OF as w, DOES_NOT_HAVE_ANY_OF as x, HAS_ONLY as y, getGridNumericOperators as z };
+export { clearAllVersionStorage as $, ARRAY_IS_EMPTY as A, Box$1 as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, IS as F, IS_NOT as G, HAS_WITH_SELECT as H, IS_ANY_OF as I, getGridStringOperators as J, getGridStringArrayOperators as K, getGridStringArrayOperatorsWithSelect as L, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as M, FILTER_MODEL_KEY as N, SORT_MODEL_KEY as O, PAGINATION_MODEL_KEY as P, PINNED_COLUMNS as Q, DIMENSION_MODEL_KEY as R, STARTS_WITH_ANY_OF as S, TextField$1 as T, FILTER_SEARCH_KEY as U, VISIBILITY_MODEL_KEY as V, DENSITY_MODEL_KEY as W, COLUMN_ORDER_MODEL_KEY as X, CATEGORIES as Y, buildStorageKey as Z, clearPreviousVersionStorage as _, DOES_NOT_EQUAL as a, resetStatefulDataGridState as a0, resetColumnVisibility as a1, convertToDisplayFormat as a2, convertFromDisplayFormat as a3, getDecodedSearchFromUrl as a4, buildQueryParamsString as a5, areSearchStringsEqual as a6, decodeValue as a7, encodeValue as a8, urlSearchParamsToString as a9, numberOperatorEncoder as aa, numberOperatorDecoder as ab, isOperatorValueValid as ac, isValueValid as ad, getFilterModelFromString as ae, getSearchParamsFromFilterModel as af, getSortingFromString as ag, getSearchParamsFromSorting as ah, getPaginationFromString as ai, getSearchParamsFromPagination as aj, getColumnVisibilityFromString as ak, getSearchParamsFromColumnVisibility as al, getPinnedColumnsFromString as am, getSearchParamsFromPinnedColumns as an, getSearchParamsFromTab as ao, getDensityFromString as ap, getSearchParamsFromDensity as aq, getColumnOrderFromString as ar, getSearchParamsFromColumnOrder as as, getSearchParamsFromVersion as at, getFinalSearch as au, getModelsParsedOrUpdateLocalStorage as av, updateUrl as aw, areFilterModelsEquivalent as ax, StatefulDataGrid as ay, DOES_NOT_START_WITH as b, DOES_NOT_END_WITH as c, IS_NOT_ANY_OF as d, DOES_NOT_CONTAIN_ANY_OF as e, DOES_NOT_START_WITH_ANY_OF as f, DOES_NOT_END_WITH_ANY_OF as g, IS_BETWEEN as h, IS_WITH_SELECT as i, IS_NOT_WITH_SELECT as j, IS_ANY_OF_WITH_SELECT as k, IS_NOT_ANY_OF_WITH_SELECT as l, ARRAY_IS_NOT_EMPTY as m, DOES_NOT_HAVE_WITH_SELECT as n, operatorList as o, HAS_ANY_OF_WITH_SELECT as p, HAS_ALL_OF_WITH_SELECT as q, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as r, HAS_ONLY_WITH_SELECT as s, HAS as t, DOES_NOT_HAVE as u, HAS_ANY_OF as v, HAS_ALL_OF as w, DOES_NOT_HAVE_ANY_OF as x, HAS_ONLY as y, getGridNumericOperators as z };
 //# sourceMappingURL=StatefulDataGrid2.js.map