@redsift/table 11.10.0-muiv7 → 11.11.0-muiv6-alpha.0

package/_internal/StatefulDataGrid2.js

@@ -1,24 +1,30 @@
-import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends$1 } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { Icon, useTheme as useTheme$1, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
+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, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } 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 { d as defaultSxConfig, i as isPlainObject, s as styled, a as styleFunctionSx, c as clsx, g as generateUtilityClasses, b as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, e as generateUtilityClass, f as styled$1, u as useDefaultProps, h as composeClasses, r as rootShouldForwardProp, j as refType } from './Portal.js';
+import { _ as _objectWithoutPropertiesLoose, a as _extends, d as defaultSxConfig, i as isPlainObject, s as styled, b as styleFunctionSx, u as useTheme, c as clsx, e as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, g as generateUtilityClasses, f as generateUtilityClass, h as styled$1, j as useThemeProps, k as capitalize, l as composeClasses, r as rootShouldForwardProp, m as refType } from './Portal.js';
 import { j as jsxRuntimeExports } from './jsx-runtime.js';
-import { u as useTheme, m as memoTheme, c as createSimplePaletteValueFilter, a as useFormControl, f as formControlState, b as capitalize, i as isAdornedStart, d as isFilled, F as FormControlContext, e as useId, g as useSlot, 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 { u as useFormControl, f as formControlState, i as isAdornedStart, a as isFilled, F as FormControlContext, b as useId, c as Select, I as Input, d as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.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 isMuiElement(element, muiNames) {
+  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
+}
+
+const _excluded$7 = ["sx"];
 const splitProps = props => {
+  var _props$theme$unstable, _props$theme;
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
+  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -30,9 +36,9 @@ const splitProps = props => {
 };
 function extendSxProp(props) {
   const {
-    sx: inSx,
-    ...other
-  } = props;
+      sx: inSx
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$7);
   const {
     systemProps,
     otherProps
@@ -46,23 +52,17 @@ function extendSxProp(props) {
       if (!isPlainObject(result)) {
         return systemProps;
       }
-      return {
-        ...systemProps,
-        ...result
-      };
+      return _extends({}, systemProps, result);
     };
   } else {
-    finalSx = {
-      ...systemProps,
-      ...inSx
-    };
+    finalSx = _extends({}, systemProps, inSx);
   }
-  return {
-    ...otherProps,
+  return _extends({}, otherProps, {
     sx: finalSx
-  };
+  });
 }
 
+const _excluded$6 = ["className", "component"];
 function createBox(options = {}) {
   const {
     themeId,
@@ -75,45 +75,34 @@ function createBox(options = {}) {
   })(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
-    const {
-      className,
-      component = 'div',
-      ...other
-    } = extendSxProp(inProps);
-    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, {
+    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
-    });
+      theme: themeId ? theme[themeId] || theme : theme
+    }, other));
   });
   return Box;
 }
 
-function isMuiElement(element, muiNames) {
-  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
-  element.type.muiName ?? element.type?._payload?.value?.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,
+  defaultClassName: 'MuiBox-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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * @ignore
    */
@@ -136,6 +125,7 @@ function getFormLabelUtilityClasses(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,
@@ -155,77 +145,59 @@ const useUtilityClasses$4 = ownerState => {
 const FormLabelRoot = styled$1('label', {
   name: 'MuiFormLabel',
   slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  color: (theme.vars || theme).palette.text.secondary,
-  ...theme.typography.body1,
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.body1, {
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      [`&.${formLabelClasses$1.focused}`]: {
-        color: (theme.vars || theme).palette[color].main
-      }
-    }
-  })), {
-    props: {},
-    style: {
-      [`&.${formLabelClasses$1.disabled}`]: {
-        color: (theme.vars || theme).palette.text.disabled
-      },
-      [`&.${formLabelClasses$1.error}`]: {
-        color: (theme.vars || theme).palette.error.main
-      }
-    }
-  }]
-})));
+  [`&.${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
-})(memoTheme(({
+})(({
   theme
 }) => ({
   [`&.${formLabelClasses$1.error}`]: {
     color: (theme.vars || theme).palette.error.main
   }
-})));
+}));
 const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFormLabel'
   });
   const {
-    children,
-    className,
-    color,
-    component = 'label',
-    disabled,
-    error,
-    filled,
-    focused,
-    required,
-    ...other
-  } = props;
+      children,
+      className,
+      component = 'label'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$5);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     color: fcs.color || 'primary',
     component,
     disabled: fcs.disabled,
@@ -233,27 +205,27 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  };
+  });
   const classes = useUtilityClasses$4(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends({
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
+    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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -269,7 +241,7 @@ process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
   /**
@@ -309,6 +281,7 @@ function getInputLabelUtilityClasses(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,
@@ -320,15 +293,11 @@ const useUtilityClasses$3 = ownerState => {
     required
   } = ownerState;
   const slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
     asterisk: [required && 'asterisk']
   };
   const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
-  return {
-    ...classes,
-    // forward the focused, disabled, etc. classes to the FormLabel
-    ...composedClasses
-  };
+  return _extends({}, classes, composedClasses);
 };
 const InputLabelRoot = styled$1(FormLabel$1, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -340,144 +309,81 @@ const InputLabelRoot = styled$1(FormLabel$1, {
     } = 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]];
+    }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
   }
-})(memoTheme(({
-  theme
-}) => ({
+})(({
+  theme,
+  ownerState
+}) => _extends({
   display: 'block',
   transformOrigin: 'top left',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: '100%',
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState.formControl,
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      // slight alteration to spec spacing to match visual spec result
-      transform: 'translate(0, 20px) scale(1)'
-    }
-  }, {
-    props: {
-      size: 'small'
-    },
-    style: {
-      // Compensation for the `Input.inputSizeSmall` style.
-      transform: 'translate(0, 17px) scale(1)'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.shrink,
-    style: {
-      transform: 'translate(0, -1.5px) scale(0.75)',
-      transformOrigin: 'top left',
-      maxWidth: '133%'
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => !ownerState.disableAnimation,
-    style: {
-      transition: theme.transitions.create(['color', 'transform', 'max-width'], {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut
-      })
-    }
-  }, {
-    props: {
-      variant: 'filled'
-    },
-    style: {
-      // 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)'
-    }
-  }, {
-    props: {
-      variant: 'filled',
-      size: 'small'
-    },
-    style: {
-      transform: 'translate(12px, 13px) scale(1)'
-    }
-  }, {
-    props: ({
-      variant,
-      ownerState
-    }) => variant === 'filled' && ownerState.shrink,
-    style: {
-      userSelect: 'none',
-      pointerEvents: 'auto',
-      transform: 'translate(12px, 7px) scale(0.75)',
-      maxWidth: 'calc(133% - 24px)'
-    }
-  }, {
-    props: ({
-      variant,
-      ownerState,
-      size
-    }) => variant === 'filled' && ownerState.shrink && size === 'small',
-    style: {
-      transform: 'translate(12px, 4px) scale(0.75)'
-    }
-  }, {
-    props: {
-      variant: 'outlined'
-    },
-    style: {
-      // see comment above on filled.zIndex
-      zIndex: 1,
-      pointerEvents: 'none',
-      transform: 'translate(14px, 16px) scale(1)',
-      maxWidth: 'calc(100% - 24px)'
-    }
-  }, {
-    props: {
-      variant: 'outlined',
-      size: 'small'
-    },
-    style: {
-      transform: 'translate(14px, 9px) scale(1)'
-    }
-  }, {
-    props: ({
-      variant,
-      ownerState
-    }) => variant === 'outlined' && ownerState.shrink,
-    style: {
-      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)'
-    }
-  }]
+  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({
+  // 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({
+  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({
+  // 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({
+  const props = useThemeProps({
     name: 'MuiInputLabel',
     props: inProps
   });
   const {
-    disableAnimation = false,
-    margin,
-    shrink: shrinkProp,
-    variant,
-    className,
-    ...other
-  } = props;
+      disableAnimation = false,
+      shrink: shrinkProp,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$4);
   const muiFormControl = useFormControl();
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
@@ -486,33 +392,31 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
   const fcs = formControlState({
     props,
     muiFormControl,
-    states: ['size', 'variant', 'required', 'focused']
+    states: ['size', 'variant', 'required']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     disableAnimation,
     formControl: muiFormControl,
     shrink,
     size: fcs.size,
     variant: fcs.variant,
-    required: fcs.required,
-    focused: fcs.focused
-  };
+    required: fcs.required
+  });
   const classes = useUtilityClasses$3(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
-    ref: ref,
-    className: clsx(classes.root, className),
-    ...other,
     ownerState: ownerState,
+    ref: ref,
+    className: clsx(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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -528,7 +432,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
   /**
@@ -582,6 +486,7 @@ function getFormControlUtilityClasses(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,
@@ -596,13 +501,14 @@ const useUtilityClasses$2 = ownerState => {
 const FormControlRoot = styled$1('div', {
   name: 'MuiFormControl',
   slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth];
+  overridesResolver: ({
+    ownerState
+  }, styles) => {
+    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
   }
-})({
+})(({
+  ownerState
+}) => _extends({
   display: 'inline-flex',
   flexDirection: 'column',
   position: 'relative',
@@ -611,33 +517,16 @@ const FormControlRoot = styled$1('div', {
   padding: 0,
   margin: 0,
   border: 0,
-  verticalAlign: 'top',
-  // Fix alignment issue on Safari.
-  variants: [{
-    props: {
-      margin: 'normal'
-    },
-    style: {
-      marginTop: 16,
-      marginBottom: 8
-    }
-  }, {
-    props: {
-      margin: 'dense'
-    },
-    style: {
-      marginTop: 8,
-      marginBottom: 4
-    }
-  }, {
-    props: {
-      fullWidth: true
-    },
-    style: {
-      width: '100%'
-    }
-  }]
-});
+  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.
@@ -664,28 +553,27 @@ const FormControlRoot = styled$1('div', {
  * 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({
+  const props = useThemeProps({
     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',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      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(props, _excluded$3);
+  const ownerState = _extends({}, props, {
     color,
     component,
     disabled,
@@ -696,7 +584,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     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
@@ -737,8 +625,9 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }
   const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
   let registerEffect;
-  const registeredInput = React.useRef(false);
   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'));
@@ -749,12 +638,6 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       };
     };
   }
-  const onFilled = React.useCallback(() => {
-    setFilled(true);
-  }, []);
-  const onEmpty = React.useCallback(() => {
-    setFilled(false);
-  }, []);
   const childContext = React.useMemo(() => {
     return {
       adornedStart,
@@ -770,33 +653,37 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       onBlur: () => {
         setFocused(false);
       },
+      onEmpty: () => {
+        setFilled(false);
+      },
+      onFilled: () => {
+        setFilled(true);
+      },
       onFocus: () => {
         setFocused(true);
       },
-      onEmpty,
-      onFilled,
       registerEffect,
       required,
       variant
     };
-  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, onEmpty, onFilled, required, size, 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, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends({
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref,
-      ...other,
+      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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */
@@ -812,7 +699,7 @@ process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptype
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -881,6 +768,7 @@ const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root
 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,
@@ -906,11 +794,12 @@ const FormHelperTextRoot = styled$1('p', {
     } = props;
     return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
   }
-})(memoTheme(({
-  theme
-}) => ({
-  color: (theme.vars || theme).palette.text.secondary,
-  ...theme.typography.caption,
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  color: (theme.vars || theme).palette.text.secondary
+}, theme.typography.caption, {
   textAlign: 'left',
   marginTop: 3,
   marginRight: 0,
@@ -921,50 +810,31 @@ const FormHelperTextRoot = styled$1('p', {
   },
   [`&.${formHelperTextClasses$1.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  },
-  variants: [{
-    props: {
-      size: 'small'
-    },
-    style: {
-      marginTop: 4
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.contained,
-    style: {
-      marginLeft: 14,
-      marginRight: 14
-    }
-  }]
-})));
+  }
+}, ownerState.size === 'small' && {
+  marginTop: 4
+}, ownerState.contained && {
+  marginLeft: 14,
+  marginRight: 14
+}));
 const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFormHelperText'
   });
   const {
-    children,
-    className,
-    component = 'p',
-    disabled,
-    error,
-    filled,
-    focused,
-    margin,
-    required,
-    variant,
-    ...other
-  } = props;
+      children,
+      className,
+      component = 'p'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$2);
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
   });
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     component,
     contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
     variant: fcs.variant,
@@ -974,30 +844,26 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  };
-
-  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
-  delete ownerState.ownerState;
+  });
   const classes = useUtilityClasses$1(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends({
     as: component,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
     ownerState: ownerState,
+    className: clsx(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",
-      "aria-hidden": true,
       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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    *
@@ -1058,6 +924,7 @@ function getTextFieldUtilityClass(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", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
 const variantComponent = {
   standard: Input,
   filled: FilledInput,
@@ -1111,49 +978,47 @@ const TextFieldRoot = styled$1(FormControl$1, {
  * - using the underlying components directly as shown in the demos
  */
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTextField'
   });
   const {
-    autoComplete,
-    autoFocus = false,
-    children,
-    className,
-    color = 'primary',
-    defaultValue,
-    disabled = false,
-    error = false,
-    FormHelperTextProps: FormHelperTextPropsProp,
-    fullWidth = false,
-    helperText,
-    id: idOverride,
-    InputLabelProps: InputLabelPropsProp,
-    inputProps: inputPropsProp,
-    InputProps: InputPropsProp,
-    inputRef,
-    label,
-    maxRows,
-    minRows,
-    multiline = false,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    placeholder,
-    required = false,
-    rows,
-    select = false,
-    SelectProps: SelectPropsProp,
-    slots = {},
-    slotProps = {},
-    type,
-    value,
-    variant = 'outlined',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      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,
+      onClick,
+      onFocus,
+      placeholder,
+      required = false,
+      rows,
+      select = false,
+      SelectProps,
+      type,
+      value,
+      variant = 'outlined'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const ownerState = _extends({}, props, {
     autoFocus,
     color,
     disabled,
@@ -1163,89 +1028,32 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     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 id = useId(idOverride);
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-  const InputComponent = variantComponent[variant];
-  const externalForwardedProps = {
-    slots,
-    slotProps: {
-      input: InputPropsProp,
-      inputLabel: InputLabelPropsProp,
-      htmlInput: inputPropsProp,
-      formHelperText: FormHelperTextPropsProp,
-      select: SelectPropsProp,
-      ...slotProps
-    }
-  };
-  const inputAdditionalProps = {};
-  const inputLabelSlotProps = externalForwardedProps.slotProps.inputLabel;
+  const InputMore = {};
   if (variant === 'outlined') {
-    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
-      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
+    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
+      InputMore.notched = InputLabelProps.shrink;
     }
-    inputAdditionalProps.label = label;
+    InputMore.label = label;
   }
   if (select) {
     // unset defaults from textbox inputs
-    if (!SelectPropsProp || !SelectPropsProp.native) {
-      inputAdditionalProps.id = undefined;
+    if (!SelectProps || !SelectProps.native) {
+      InputMore.id = undefined;
     }
-    inputAdditionalProps['aria-describedby'] = undefined;
+    InputMore['aria-describedby'] = undefined;
   }
-  const [RootSlot, rootProps] = useSlot('root', {
-    elementType: TextFieldRoot,
-    shouldForwardComponentProp: true,
-    externalForwardedProps: {
-      ...externalForwardedProps,
-      ...other
-    },
-    ownerState,
-    className: clsx(classes.root, className),
-    ref,
-    additionalProps: {
-      disabled,
-      error,
-      fullWidth,
-      required,
-      color,
-      variant
-    }
-  });
-  const [InputSlot, inputProps] = useSlot('input', {
-    elementType: InputComponent,
-    externalForwardedProps,
-    additionalProps: inputAdditionalProps,
-    ownerState
-  });
-  const [InputLabelSlot, inputLabelProps] = useSlot('inputLabel', {
-    elementType: InputLabel$1,
-    externalForwardedProps,
-    ownerState
-  });
-  const [HtmlInputSlot, htmlInputProps] = useSlot('htmlInput', {
-    elementType: 'input',
-    externalForwardedProps,
-    ownerState
-  });
-  const [FormHelperTextSlot, formHelperTextProps] = useSlot('formHelperText', {
-    elementType: FormHelperText$1,
-    externalForwardedProps,
-    ownerState
-  });
-  const [SelectSlot, selectProps] = useSlot('select', {
-    elementType: Select,
-    externalForwardedProps,
-    ownerState
-  });
-  const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputSlot, {
+  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({
     "aria-describedby": helperTextId,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
@@ -1263,40 +1071,46 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
+    onClick: onClick,
     placeholder: placeholder,
-    inputProps: htmlInputProps,
-    slots: {
-      input: slots.htmlInput ? HtmlInputSlot : undefined
-    },
-    ...inputProps
-  });
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, {
-    ...rootProps,
-    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelSlot, {
+    inputProps: inputProps
+  }, InputMore, InputProps));
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends({
+    className: clsx(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({
       htmlFor: id,
-      id: inputLabelId,
-      ...inputLabelProps,
+      id: inputLabelId
+    }, InputLabelProps, {
       children: label
-    }), select ? /*#__PURE__*/jsxRuntimeExports.jsx(SelectSlot, {
+    })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends({
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
       value: value,
-      input: InputElement,
-      ...selectProps,
+      input: InputElement
+    }, SelectProps, {
       children: children
-    }) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextSlot, {
-      id: helperTextId,
-      ...formHelperTextProps,
+    })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends({
+      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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn 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.
@@ -1323,7 +1137,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
@@ -1342,8 +1156,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   error: PropTypes.bool,
   /**
-   * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
-   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -1361,22 +1174,19 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   id: PropTypes.string,
   /**
-   * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
+   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
-   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
    * Props applied to the Input element.
-   * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
-   * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
+   * 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.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -1420,6 +1230,10 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * @ignore
    */
@@ -1438,44 +1252,19 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
-   * Render a [`Select`](https://mui.com/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
+   * 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`](https://mui.com/material-ui/api/select/) element.
-   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * Props applied to the [`Select`](/material-ui/api/select/) element.
    */
   SelectProps: PropTypes.object,
   /**
    * The size of the component.
-   * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
-    formHelperText: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    htmlInput: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    inputLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    select: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    formHelperText: PropTypes.elementType,
-    htmlInput: PropTypes.elementType,
-    input: PropTypes.elementType,
-    inputLabel: PropTypes.elementType,
-    root: PropTypes.elementType,
-    select: PropTypes.elementType
-  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -1588,8 +1377,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
@@ -1605,11 +1394,11 @@ const doesNotContain = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (String(value).indexOf(filterItem.value) !== -1) {
+      if (String(params.value).indexOf(filterItem.value) !== -1) {
         return false;
       }
       return true;
@@ -1626,11 +1415,11 @@ const doesNotEqual = {
     if (!filterItem.field || !filterItem.value || !filterItem.value) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      if (String(value) === filterItem.value) {
+      if (String(params.value) === filterItem.value) {
         return false;
       }
       return true;
@@ -1647,9 +1436,9 @@ const doesNotHaveOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
-      return !cellValues.map(val => String(val)).includes(filterItem.value);
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      return !cellValues.map(value => String(value)).includes(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -1666,9 +1455,9 @@ const hasOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
-      return cellValues.map(val => String(val)).includes(filterItem.value);
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+      return cellValues.map(value => String(value)).includes(filterItem.value);
     };
   },
   InputComponent: GridFilterInputValue
@@ -1685,8 +1474,8 @@ const hasOnlyOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
+    return params => {
+      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
       return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
     };
   },
@@ -1704,11 +1493,11 @@ const isOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (Array.isArray(value)) {
+    return params => {
+      if (Array.isArray(params.value)) {
         return false;
       }
-      return String(value) === filterItem.value;
+      return String(params.value) === filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -1725,11 +1514,11 @@ const isNotOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
-      if (Array.isArray(value)) {
+    return params => {
+      if (Array.isArray(params.value)) {
         return true;
       }
-      return String(value) !== filterItem.value;
+      return String(params.value) !== filterItem.value;
     };
   },
   InputComponent: GridFilterInputValue
@@ -1746,11 +1535,11 @@ const containsAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      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 => {
@@ -1771,11 +1560,11 @@ const containsAnyOfCIOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
       const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
       let match = false;
       filterItem.value.forEach(filteredValue => {
@@ -1798,11 +1587,11 @@ const doesNotHaveAnyOf = {
     if (!filterItem.field || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
       return null;
     }
-    return value => {
-      const cellValues = Array.isArray(value) ? value : [value];
+    return params => {
+      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(val => String(val)).includes(filterVal));
+      return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
     };
   },
   InputComponent: GridFilterInputMultipleValue
@@ -1819,11 +1608,11 @@ const endsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      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 => {
@@ -1846,11 +1635,11 @@ const isAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         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 true;
@@ -1874,11 +1663,11 @@ const isAnyOfIOperator = {
       return null;
     }
     const lowerCaseFilterValues = filterItem.value.map(v => String(v).toLowerCase());
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         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 (lowerCaseFilterValues.includes(String(paramValue).toLowerCase())) {
           return true;
@@ -1901,13 +1690,13 @@ const hasAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      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(val => String(val)).includes(v));
+      return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
     };
   },
   InputComponent: GridFilterInputMultipleValue
@@ -1924,11 +1713,11 @@ const isNotAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         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;
@@ -1951,11 +1740,11 @@ const startsWithAnyOfOperator = {
     if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
-    return value => {
+    return params => {
       if (filterItem.value.length === 0) {
         return true;
       }
-      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 => {
@@ -2054,63 +1843,348 @@ const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
   }
 };
 
-// reference value: https://www.w3schools.com/tags/ref_urlencode.ASP
-const DECODER = {
-  '%20': ' ',
-  '%26': '&',
-  '%3D': '=',
-  '%3F': '?',
-  '%5B': '[',
-  '%5D': ']',
-  '%2C': ',',
-  '%3C': '<',
-  '%3E': '>',
-  '%21': '!',
-  '%22': '"'
-};
-const ENCODER = {
-  ' ': '%20',
-  '&': '%26',
-  '=': '%3D',
-  '?': '%3F',
+// Characters that need URL encoding in display format values
+// These characters could cause CloudFront issues or parsing ambiguity
+const CHARS_TO_ENCODE_IN_VALUES = {
+  ':': '%3A',
+  // Colon - reserved
+  ',': '%2C',
+  // Comma - used as list separator (only in list values)
+  '~': '%7E',
+  // Tilde - reserved
+  ';': '%3B',
+  // Semicolon - reserved
   '[': '%5B',
+  // Square bracket - used in internal format
   ']': '%5D',
-  ',': '%2C',
-  '<': '%3C',
-  '>': '%3E',
-  '!': '%21',
-  '"': '%22'
+  // Square bracket - used in internal format
+  '(': '%28',
+  // Parenthesis - reserved
+  ')': '%29' // Parenthesis - reserved
+};
+
+/**
+ * Encodes special characters in a value for display format URLs.
+ * This ensures values containing colons, commas, etc. don't break parsing.
+ */
+const encodeDisplayValue = value => {
+  let encoded = value;
+  for (const [char, replacement] of Object.entries(CHARS_TO_ENCODE_IN_VALUES)) {
+    encoded = encoded.split(char).join(replacement);
+  }
+  return encoded;
+};
+
+/**
+ * Decodes URL-encoded characters in display format values back to their original form.
+ * Uses decodeURIComponent to handle all standard URL encoding.
+ */
+const decodeDisplayValue = value => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    // If decoding fails, return the original value
+    return value;
+  }
+};
+
+/**
+ * Encodes array values for display format URLs.
+ * Each value is URL-encoded and joined with commas.
+ */
+const encodeDisplayArrayValue = values => {
+  return values.map(v => encodeDisplayValue(v)).join(',');
+};
+
+/**
+ * Decodes comma-separated display format array values.
+ * Handles URL-encoded commas within individual values.
+ */
+const decodeDisplayArrayValue = value => {
+  if (value === '') {
+    return [];
+  }
+
+  // Split by unencoded commas only (not %2C)
+  // First, temporarily replace encoded commas, then split, then restore
+  const TEMP_COMMA_PLACEHOLDER = '\x00COMMA\x00';
+  const withPlaceholder = value.split('%2C').join(TEMP_COMMA_PLACEHOLDER);
+  const parts = withPlaceholder.split(',');
+  return parts.map(part => {
+    const withCommasRestored = part.split(TEMP_COMMA_PLACEHOLDER).join('%2C');
+    return decodeDisplayValue(withCommasRestored);
+  });
+};
+
+/**
+ * Converts internal bracket notation to display-friendly dot notation.
+ *
+ * Display format (CloudFront-safe, no brackets):
+ * - `field[operator]=value` → `field.operator=value` (value URL-encoded if needed)
+ * - `field[isAnyOf]=list[a,b,c]` → `field.isAnyOf=a,b,c` (comma-separated, values URL-encoded)
+ * - `_sortColumn=[field,desc]` → `_sortColumn=field.desc`
+ * - `_pagination=[0,25,next]` → `_pagination=0.25.next`
+ * - `_pinnedColumnsLeft=[a,b,c]` → `_pinnedColumnsLeft=a,b,c` (comma-separated)
+ * - `_columnVisibility=[a,b,c]` → `_columnVisibility=a,b,c` (comma-separated)
+ */
+const convertToDisplayFormat = search => {
+  if (!search) return search;
+  const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
+  const params = cleanSearch.split('&');
+  const converted = params.map(param => {
+    // Handle _sortColumn=[field,direction]
+    if (param.startsWith('_sortColumn=')) {
+      const value = param.slice('_sortColumn='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        if (inner === '') {
+          return '_sortColumn=';
+        }
+        const [field, direction] = inner.split(',');
+        return `_sortColumn=${field}.${direction}`;
+      }
+      return param;
+    }
+
+    // Handle _pagination=[page,pageSize,direction]
+    if (param.startsWith('_pagination=')) {
+      const value = param.slice('_pagination='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        if (inner === '') {
+          return '_pagination=';
+        }
+        const [page, pageSize, direction] = inner.split(',');
+        return `_pagination=${page}.${pageSize}.${direction}`;
+      }
+      return param;
+    }
+
+    // Handle _pinnedColumnsLeft=[a,b,c] and _pinnedColumnsRight=[a,b,c]
+    if (param.startsWith('_pinnedColumnsLeft=') || param.startsWith('_pinnedColumnsRight=')) {
+      const eqIndex = param.indexOf('=');
+      const key = param.slice(0, eqIndex);
+      const value = param.slice(eqIndex + 1);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        return `${key}=${inner}`;
+      }
+      return param;
+    }
+
+    // Handle _columnVisibility=[a,b,c]
+    if (param.startsWith('_columnVisibility=')) {
+      const value = param.slice('_columnVisibility='.length);
+      if (value.startsWith('[') && value.endsWith(']')) {
+        const inner = value.slice(1, -1);
+        return `_columnVisibility=${inner}`;
+      }
+      return param;
+    }
+
+    // Handle _field[operator,type]=value or _field[operator,type]=list[a,b,c]
+    const bracketMatch = param.match(/^_([^[]+)\[([^\]]+)\]=(.*)$/);
+    if (bracketMatch) {
+      const [, field, operatorAndType, value] = bracketMatch;
+      const [operator] = operatorAndType.split(',');
+
+      // Convert list[a,b,c] to comma-separated with URL-encoded values
+      if (value.startsWith('list[') && value.endsWith(']')) {
+        const listContent = value.slice(5, -1);
+        if (listContent === '') {
+          return `${field}.${operator}=`;
+        }
+        const items = listContent.split(',');
+        return `${field}.${operator}=${encodeDisplayArrayValue(items)}`;
+      }
+      // URL-encode special characters in the value
+      return `${field}.${operator}=${encodeDisplayValue(value)}`;
+    }
+    return param;
+  });
+  return converted.join('&');
+};
+
+/**
+ * Converts display-friendly dot notation back to internal bracket notation.
+ *
+ * Internal format (server-side compatible):
+ * - `field.operator=value` → `_field[operator,type]=value`
+ * - `field.isAnyOf=a,b,c` → `_field[isAnyOf,type]=list[a,b,c]`
+ * - `_sortColumn=field.desc` → `_sortColumn=[field,desc]`
+ * - `_pagination=0.25.next` → `_pagination=[0,25,next]`
+ * - `_pinnedColumnsLeft=a,b,c` → `_pinnedColumnsLeft=[a,b,c]`
+ * - `_columnVisibility=a,b,c` → `_columnVisibility=[a,b,c]`
+ */
+const convertFromDisplayFormat = (search, columns) => {
+  if (!search) return search;
+  const cleanSearch = search.startsWith('?') ? search.slice(1) : search;
+  const params = cleanSearch.split('&');
+  const converted = params.map(param => {
+    // Handle _sortColumn=field.direction or _sortColumn=
+    if (param.startsWith('_sortColumn=')) {
+      const value = param.slice('_sortColumn='.length);
+      if (value === '') {
+        return '_sortColumn=[]';
+      }
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      const dotIndex = value.indexOf('.');
+      if (dotIndex !== -1) {
+        const field = value.slice(0, dotIndex);
+        const direction = value.slice(dotIndex + 1);
+        return `_sortColumn=[${field},${direction}]`;
+      }
+      return param;
+    }
+
+    // Handle _pagination=page.pageSize.direction or _pagination=
+    if (param.startsWith('_pagination=')) {
+      const value = param.slice('_pagination='.length);
+      if (value === '') {
+        return '_pagination=[]';
+      }
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      const parts = value.split('.');
+      if (parts.length === 3) {
+        return `_pagination=[${parts.join(',')}]`;
+      }
+      return param;
+    }
+
+    // Handle _pinnedColumnsLeft=a,b,c and _pinnedColumnsRight=a,b,c
+    if (param.startsWith('_pinnedColumnsLeft=') || param.startsWith('_pinnedColumnsRight=')) {
+      const eqIndex = param.indexOf('=');
+      const key = param.slice(0, eqIndex);
+      const value = param.slice(eqIndex + 1);
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      return `${key}=[${value}]`;
+    }
+
+    // Handle _columnVisibility=a,b,c
+    if (param.startsWith('_columnVisibility=')) {
+      const value = param.slice('_columnVisibility='.length);
+      // If it already has brackets, leave it alone
+      if (value.startsWith('[')) {
+        return param;
+      }
+      return `_columnVisibility=[${value}]`;
+    }
+
+    // Handle field.operator=value (dot notation for filters)
+    const dotMatch = param.match(/^([^.]+)\.([a-zA-Z_]+)=(.*)$/);
+    if (dotMatch) {
+      const [, field, operator, rawValue] = dotMatch;
+
+      // Get column type for this field
+      const column = columns.find(c => c.field === field);
+      const columnType = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+
+      // Check if this is a list operator
+      const listOps = ['containsAnyOf', 'doesNotContainAnyOf', 'endsWithAnyOf', 'doesNotEndWithAnyOf', 'hasAnyOf', 'doesNotHaveAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf', 'doesNotStartWithAnyOf'];
+      if (listOps.includes(operator)) {
+        const items = decodeDisplayArrayValue(rawValue);
+        return `_${field}[${operator},${columnType}]=list[${items.join(',')}]`;
+      }
+      // Decode URL-encoded special characters in the value
+      const decodedValue = decodeDisplayValue(rawValue);
+      return `_${field}[${operator},${columnType}]=${decodedValue}`;
+    }
+    return param;
+  });
+  return converted.join('&');
+};
+
+/**
+ * Detects if search string is in display format and converts it to internal format.
+ */
+const getDecodedSearchFromUrl = (search, columns) => {
+  const searchWithoutLeadingQuestion = search.startsWith('?') ? search.slice(1) : search;
+
+  // Check if it's using display format:
+  // 1. Contains dot notation for filters like 'field.operator='
+  // 2. Has empty _sortColumn= (display format) instead of _sortColumn=[] (internal format)
+  // 3. Has _pinnedColumnsLeft=a,b without brackets
+  // 4. Has _sortColumn=field.desc format
+  // 5. Has _pagination=0.25.next format
+  const hasDotNotationFilter = /[a-zA-Z_]+\.[a-zA-Z_]+=/.test(searchWithoutLeadingQuestion);
+  const hasEmptySortColumn = /(_sortColumn)=(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasSortDotNotation = /_sortColumn=[^&[]+\.[^&]+/.test(searchWithoutLeadingQuestion);
+  const hasPaginationDotNotation = /_pagination=[^&[]+\.[^&]+/.test(searchWithoutLeadingQuestion);
+  const hasPinnedWithoutBrackets = /(_pinnedColumnsLeft|_pinnedColumnsRight)=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasVisibilityWithoutBrackets = /_columnVisibility=[^&[]*(&|$)/.test(searchWithoutLeadingQuestion);
+  const hasBracketNotation = /\[.*\]=/.test(searchWithoutLeadingQuestion);
+  const isDisplayFormat = (hasDotNotationFilter || hasEmptySortColumn || hasSortDotNotation || hasPaginationDotNotation || hasPinnedWithoutBrackets || hasVisibilityWithoutBrackets) && !hasBracketNotation;
+  if (isDisplayFormat) {
+    return '?' + convertFromDisplayFormat(searchWithoutLeadingQuestion, columns);
+  }
+
+  // Already in internal bracket format or empty
+  return search;
+};
+
+/**
+ * Builds a display-format query string from internal format.
+ */
+const buildQueryParamsString = search => {
+  const displaySearch = convertToDisplayFormat(search);
+  return displaySearch.startsWith('?') ? displaySearch : `?${displaySearch}`;
+};
+
+/**
+ * Compares two search strings for equality, ignoring parameter order.
+ * This prevents infinite update loops when the same parameters appear in different order.
+ */
+const areSearchStringsEqual = (search1, search2) => {
+  const strippedSearch1 = search1.startsWith('?') ? search1.slice(1) : search1;
+  const strippedSearch2 = search2.startsWith('?') ? search2.slice(1) : search2;
+
+  // Quick check: if strings are identical, no need to parse
+  if (strippedSearch1 === strippedSearch2) {
+    return true;
+  }
+
+  // Parse and sort parameters for order-independent comparison
+  const params1 = strippedSearch1.split('&').filter(Boolean).sort();
+  const params2 = strippedSearch2.split('&').filter(Boolean).sort();
+  if (params1.length !== params2.length) {
+    return false;
+  }
+  return params1.every((param, index) => param === params2[index]);
 };
 const decodeValue = value => {
   if (value === '') {
-    return '';
+    return undefined;
   }
-  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc},${curr}`), 'g');
-  // decodeValue for lists:
+
+  // Handle array values encoded as list[item1,item2,...]
   if (value.startsWith('list[')) {
-    const arrayValues = value.split('[')[1].split(']')[0];
-    const arrayList = arrayValues.split(',').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
-    return arrayList.length > 0 ? arrayList : [];
+    const arrayContent = value.slice(5, -1); // Remove 'list[' and ']'
+    if (arrayContent === '') {
+      return [];
+    }
+    return arrayContent.split(',').filter(item => item);
   }
-  return value.replace(re, encoded => DECODER[encoded]);
+  return value;
 };
 const encodeValue = value => {
-  if (!value) {
+  if (value === undefined || value === null) {
     return '';
   }
 
-  // Array encoding for value:
-  // we are representing it as list[encoded], where encoded is the list comma separated
+  // Handle array values - encode as list[item1,item2,...]
   if (Array.isArray(value)) {
-    const encodedArray = value.map(entry => {
-      return String(entry).replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
-    }).join(',');
-    return `list[${encodedArray}]`;
+    return `list[${value.map(String).join(',')}]`;
   }
-
-  // we might also pass integers
-  const castedValue = String(value);
-  return castedValue.replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
+  return String(value);
 };
 const urlSearchParamsToString = searchParams => {
   let searchString = '';
@@ -2173,11 +2247,16 @@ const isValueValid = (value, field, columns, operator) => {
   }
   const type = (_column$type = column['type']) !== null && _column$type !== void 0 ? _column$type : 'string';
 
-  // Only date fail with 500s, other set themselves as undefined
-  if (type !== 'date') {
+  // Only date and rating fail with 500s, other set themselves as undefined
+  if (type !== 'date' && type !== 'rating') {
     return true;
   }
 
+  // just checking that rating is a number.
+  if (type === 'rating') {
+    return !isNaN(Number(value));
+  }
+
   // format: YYYY-MM-DD
   // just verifying that the 3 values are numbers to avoid 500s,
   // If the value is invalid the form will appear as undefined
@@ -2641,7 +2720,9 @@ const getFinalSearch = _ref => {
 };
 /** Return the state of the table given the URL and the local storage state */
 const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, historyReplace, initialState, localStorage) => {
-  const currentVersion = new URLSearchParams(search).get('v');
+  // Convert from display format (dot notation) to internal format (bracket notation) if needed
+  const decodedSearch = getDecodedSearchFromUrl(search, columns);
+  const currentVersion = new URLSearchParams(decodedSearch).get('v');
   const isNewVersion = !currentVersion || Number(currentVersion) !== localStorageVersion;
   const {
     localStorageFilters,
@@ -2655,14 +2736,14 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     localStoragePinnedColumns,
     setLocalStoragePinnedColumns
   } = localStorage;
-  const filterModel = getFilterModel(search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
-  const sortModel = getSortModel(search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
-  const paginationModel = getPaginationModel(search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
-  const columnVisibilityModel = getColumnsVisibility(search, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
-  const pinnedColumnsModel = getPinnedColumns(search, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
+  const filterModel = getFilterModel(decodedSearch, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
+  const sortModel = getSortModel(decodedSearch, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
+  const paginationModel = getPaginationModel(decodedSearch, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
+  const columnVisibilityModel = getColumnsVisibility(decodedSearch, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
+  const pinnedColumnsModel = getPinnedColumns(decodedSearch, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
   const finalSearch = getFinalSearch({
     localStorageVersion,
-    search,
+    search: decodedSearch,
     filterModel,
     sortModel,
     paginationModel,
@@ -2670,9 +2751,15 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     pinnedColumnsModel,
     columns
   });
-  const searchString = urlSearchParamsToString(finalSearch);
-  if (searchString !== search) {
-    historyReplace(searchString);
+  const internalSearchString = urlSearchParamsToString(finalSearch);
+  // Convert to display format for the URL
+  const displaySearchString = buildQueryParamsString(internalSearchString);
+  const displaySearchWithoutQuestion = displaySearchString.startsWith('?') ? displaySearchString.slice(1) : displaySearchString;
+
+  // Compare with original search (without leading ?)
+  const originalSearchWithoutQuestion = search.startsWith('?') ? search.slice(1) : search;
+  if (!areSearchStringsEqual(displaySearchWithoutQuestion, originalSearchWithoutQuestion)) {
+    historyReplace(displaySearchWithoutQuestion);
   }
   return {
     filterModel,
@@ -2690,8 +2777,10 @@ const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns)
     columnsModel: columnsVisibilityModel,
     pinnedColumnsModel
   } = _ref2;
+  // Convert from display format to internal format if needed
+  const decodedSearch = getDecodedSearchFromUrl(search, columns);
   const newSearch = getFinalSearch({
-    search,
+    search: decodedSearch,
     localStorageVersion,
     filterModel,
     sortModel,
@@ -2700,9 +2789,15 @@ const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns)
     pinnedColumnsModel,
     columns
   });
-  const searchString = urlSearchParamsToString(newSearch);
-  if (searchString !== search) {
-    historyReplace(searchString);
+  const internalSearchString = urlSearchParamsToString(newSearch);
+  // Convert to display format for the URL
+  const displaySearchString = buildQueryParamsString(internalSearchString);
+  const displaySearchWithoutQuestion = displaySearchString.startsWith('?') ? displaySearchString.slice(1) : displaySearchString;
+
+  // Compare with original search (without leading ?)
+  const originalSearchWithoutQuestion = search.startsWith('?') ? search.slice(1) : search;
+  if (!areSearchStringsEqual(displaySearchWithoutQuestion, originalSearchWithoutQuestion)) {
+    historyReplace(displaySearchWithoutQuestion);
   }
 };
 
@@ -3103,18 +3198,11 @@ 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(paginationMode != 'server');
-
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
   if (!Array.isArray(rows)) {
@@ -3142,7 +3230,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends$1({}, forwardedProps, {
     apiRef: apiRef,
     columns: columns,
     columnVisibilityModel: columnVisibilityModel,
@@ -3165,65 +3253,49 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rows: rows,
     rowCount: rowCount,
     autoHeight: autoHeight,
-    checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
+    checkboxSelectionVisibleOnly: Boolean(pagination),
     slots: _objectSpread2(_objectSpread2({
       baseButton: BaseButton,
       baseCheckbox: BaseCheckbox,
       // baseTextField,
       basePopper: BasePopper,
-      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({}, props, {
         displayName: "ExportIcon"
       })),
-      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$1({
         displayName: "OpenFilterButtonIcon"
       }, props))
     }, slots), {}, {
-      toolbar: props => /*#__PURE__*/React__default.createElement(ToolbarWrapper, _extends({}, props, {
-        hideToolbar: hideToolbar,
-        RenderedToolbar: RenderedToolbar,
-        filterModel: filterModel,
-        onFilterModelChange: onFilterModelChange,
-        pagination: pagination,
-        paginationPlacement: paginationPlacement,
-        selectionStatus: selectionStatus,
-        apiRef: apiRef,
-        isRowSelectable: isRowSelectable,
-        paginationModel: paginationModel,
-        onPaginationModelChange: onPaginationModelChange,
-        pageSizeOptions: pageSizeOptions,
-        paginationProps: paginationProps,
-        paginationMode: paginationMode,
-        rowCount: rowCount
-      })),
+      toolbar: ToolbarWrapper,
       pagination: props => {
-        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
+        return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends$1({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -3232,8 +3304,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
           paginationProps: paginationProps,
+          paginationMode: paginationMode,
           rowCount: rowCount
-        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
+        })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends$1({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
@@ -3243,11 +3316,30 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           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,
+        paginationPlacement,
+        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 && paginationMode != 'server') {
@@ -3306,7 +3398,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
             numberOfSelectedRows
           };
         }
-        forceSelectionUpdate(v => v + 1);
       }
       onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
@@ -3324,5 +3415,5 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
 StatefulDataGrid.className = CLASSNAME;
 StatefulDataGrid.displayName = COMPONENT_NAME;
 
-export { getSearchParamsFromSorting as $, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as A, SORT_MODEL_KEY as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, FILTER_MODEL_KEY as F, PINNED_COLUMNS as G, HAS as H, IS_BETWEEN as I, DIMENSION_MODEL_KEY as J, FILTER_SEARCH_KEY as K, CATEGORIES as L, buildStorageKey as M, clearPreviousVersionStorage as N, decodeValue as O, PAGINATION_MODEL_KEY as P, encodeValue as Q, urlSearchParamsToString as R, STARTS_WITH_ANY_OF as S, numberOperatorEncoder as T, numberOperatorDecoder as U, VISIBILITY_MODEL_KEY as V, isOperatorValueValid as W, isValueValid as X, getFilterModelFromString as Y, getSearchParamsFromFilterModel as Z, getSortingFromString as _, DOES_NOT_EQUAL as a, getPaginationFromString as a0, getSearchParamsFromPagination as a1, getColumnVisibilityFromString as a2, getSearchParamsFromColumnVisibility as a3, getPinnedColumnsFromString as a4, getSearchParamsFromPinnedColumns as a5, getSearchParamsFromTab as a6, getFinalSearch as a7, getModelsParsedOrUpdateLocalStorage as a8, updateUrl as a9, areFilterModelsEquivalent as aa, StatefulDataGrid as ab, DOES_NOT_HAVE as b, DOES_NOT_HAVE_WITH_SELECT as c, HAS_WITH_SELECT as d, HAS_ONLY as e, HAS_ONLY_WITH_SELECT as f, getGridNumericOperators as g, IS as h, IS_WITH_SELECT as i, IS_NOT as j, IS_NOT_WITH_SELECT as k, getGridStringOperators as l, CONTAINS_ANY_OF_I as m, DOES_NOT_HAVE_ANY_OF as n, operatorList as o, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as p, IS_ANY_OF as q, IS_ANY_OF_WITH_SELECT as r, IS_ANY_OF_I as s, IS_ANY_OF_I_WITH_SELECT as t, HAS_ANY_OF as u, HAS_ANY_OF_WITH_SELECT as v, IS_NOT_ANY_OF as w, IS_NOT_ANY_OF_WITH_SELECT as x, getGridStringArrayOperators as y, getGridStringArrayOperatorsWithSelect as z };
+export { isOperatorValueValid as $, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as A, SORT_MODEL_KEY as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, FILTER_MODEL_KEY as F, PINNED_COLUMNS as G, HAS as H, IS_BETWEEN as I, DIMENSION_MODEL_KEY as J, FILTER_SEARCH_KEY as K, CATEGORIES as L, buildStorageKey as M, clearPreviousVersionStorage as N, convertToDisplayFormat as O, PAGINATION_MODEL_KEY as P, convertFromDisplayFormat as Q, getDecodedSearchFromUrl as R, STARTS_WITH_ANY_OF as S, buildQueryParamsString as T, areSearchStringsEqual as U, VISIBILITY_MODEL_KEY as V, decodeValue as W, encodeValue as X, urlSearchParamsToString as Y, numberOperatorEncoder as Z, numberOperatorDecoder as _, DOES_NOT_EQUAL as a, isValueValid as a0, getFilterModelFromString as a1, getSearchParamsFromFilterModel as a2, getSortingFromString as a3, getSearchParamsFromSorting as a4, getPaginationFromString as a5, getSearchParamsFromPagination as a6, getColumnVisibilityFromString as a7, getSearchParamsFromColumnVisibility as a8, getPinnedColumnsFromString as a9, getSearchParamsFromPinnedColumns as aa, getSearchParamsFromTab as ab, getFinalSearch as ac, getModelsParsedOrUpdateLocalStorage as ad, updateUrl as ae, areFilterModelsEquivalent as af, StatefulDataGrid as ag, DOES_NOT_HAVE as b, DOES_NOT_HAVE_WITH_SELECT as c, HAS_WITH_SELECT as d, HAS_ONLY as e, HAS_ONLY_WITH_SELECT as f, getGridNumericOperators as g, IS as h, IS_WITH_SELECT as i, IS_NOT as j, IS_NOT_WITH_SELECT as k, getGridStringOperators as l, CONTAINS_ANY_OF_I as m, DOES_NOT_HAVE_ANY_OF as n, operatorList as o, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as p, IS_ANY_OF as q, IS_ANY_OF_WITH_SELECT as r, IS_ANY_OF_I as s, IS_ANY_OF_I_WITH_SELECT as t, HAS_ANY_OF as u, HAS_ANY_OF_WITH_SELECT as v, IS_NOT_ANY_OF as w, IS_NOT_ANY_OF_WITH_SELECT as x, getGridStringArrayOperators as y, getGridStringArrayOperatorsWithSelect as z };
 //# sourceMappingURL=StatefulDataGrid2.js.map