@redsift/table 11.10.0-muiv5 → 11.10.0-muiv7

package/_internal/StatefulDataGrid2.js

@@ -1,15 +1,2002 @@
-import { _ as _objectSpread2, b as _objectWithoutProperties, a as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import * as React from 'react';
 import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useTheme, ThemeProvider, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite } from '@redsift/design-system';
-import { GridLinkOperator, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
-import { o as operatorList, M as LicenseInfo, N as useControlledDatagridState, T as ThemeProvider$1, O as StyledDataGrid, f as customColumnTypes } from './useControlledDatagridState.js';
-import { g as createTheme } from './Portal.js';
+import { Icon, useTheme as useTheme$1, 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, 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 { 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 { T as Toolbar } from './Toolbar2.js';
-import { o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
 import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
 import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
 
+const splitProps = props => {
+  const result = {
+    systemProps: {},
+    otherProps: {}
+  };
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
+  Object.keys(props).forEach(prop => {
+    if (config[prop]) {
+      result.systemProps[prop] = props[prop];
+    } else {
+      result.otherProps[prop] = props[prop];
+    }
+  });
+  return result;
+};
+function extendSxProp(props) {
+  const {
+    sx: inSx,
+    ...other
+  } = props;
+  const {
+    systemProps,
+    otherProps
+  } = splitProps(other);
+  let finalSx;
+  if (Array.isArray(inSx)) {
+    finalSx = [systemProps, ...inSx];
+  } else if (typeof inSx === 'function') {
+    finalSx = (...args) => {
+      const result = inSx(...args);
+      if (!isPlainObject(result)) {
+        return systemProps;
+      }
+      return {
+        ...systemProps,
+        ...result
+      };
+    };
+  } else {
+    finalSx = {
+      ...systemProps,
+      ...inSx
+    };
+  }
+  return {
+    ...otherProps,
+    sx: finalSx
+  };
+}
+
+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 {
+      className,
+      component = 'div',
+      ...other
+    } = extendSxProp(inProps);
+    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, {
+      as: component,
+      ref: ref,
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+      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,
+  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 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: (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,
+  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
+      }
+    }
+  }]
+})));
+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({
+    props: inProps,
+    name: 'MuiFormLabel'
+  });
+  const {
+    children,
+    className,
+    color,
+    component = 'label',
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    ...other
+  } = props;
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
+  });
+  const ownerState = {
+    ...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, {
+    as: component,
+    ownerState: ownerState,
+    className: clsx(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 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 {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the FormLabel
+    ...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]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  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)'
+    }
+  }]
+})));
+const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
+  const props = useDefaultProps({
+    name: 'MuiInputLabel',
+    props: inProps
+  });
+  const {
+    disableAnimation = false,
+    margin,
+    shrink: shrinkProp,
+    variant,
+    className,
+    ...other
+  } = props;
+  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 = {
+    ...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, {
+    "data-shrink": shrink,
+    ref: ref,
+    className: clsx(classes.root, className),
+    ...other,
+    ownerState: ownerState,
+    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 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: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth];
+  }
+})({
+  display: 'inline-flex',
+  flexDirection: 'column',
+  position: 'relative',
+  // Reset fieldset default style.
+  minWidth: 0,
+  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%'
+    }
+  }]
+});
+
+/**
+ * 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',
+    ...other
+  } = props;
+  const ownerState = {
+    ...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;
+  const registeredInput = React.useRef(false);
+  if (process.env.NODE_ENV !== 'production') {
+    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 onFilled = React.useCallback(() => {
+    setFilled(true);
+  }, []);
+  const onEmpty = React.useCallback(() => {
+    setFilled(false);
+  }, []);
+  const childContext = React.useMemo(() => {
+    return {
+      adornedStart,
+      setAdornedStart,
+      color,
+      disabled,
+      error,
+      filled,
+      focused,
+      fullWidth,
+      hiddenLabel,
+      size,
+      onBlur: () => {
+        setFocused(false);
+      },
+      onFocus: () => {
+        setFocused(true);
+      },
+      onEmpty,
+      onFilled,
+      registerEffect,
+      required,
+      variant
+    };
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, onEmpty, onFilled, required, size, variant]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
+    value: childContext,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, {
+      as: component,
+      ownerState: ownerState,
+      className: clsx(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 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];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  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
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.contained,
+    style: {
+      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',
+    disabled,
+    error,
+    filled,
+    focused,
+    margin,
+    required,
+    variant,
+    ...other
+  } = props;
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
+  });
+  const ownerState = {
+    ...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
+  };
+
+  // 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, {
+    as: component,
+    className: clsx(classes.root, className),
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
+    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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * 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 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: 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,
+    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 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;
+  if (variant === 'outlined') {
+    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
+      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
+    }
+    inputAdditionalProps.label = label;
+  }
+  if (select) {
+    // unset defaults from textbox inputs
+    if (!SelectPropsProp || !SelectPropsProp.native) {
+      inputAdditionalProps.id = undefined;
+    }
+    inputAdditionalProps['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, {
+    "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: htmlInputProps,
+    slots: {
+      input: slots.htmlInput ? HtmlInputSlot : undefined
+    },
+    ...inputProps
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootProps,
+    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelSlot, {
+      htmlFor: id,
+      id: inputLabelId,
+      ...inputLabelProps,
+      children: label
+    }), select ? /*#__PURE__*/jsxRuntimeExports.jsx(SelectSlot, {
+      "aria-describedby": helperTextId,
+      id: id,
+      labelId: inputLabelId,
+      value: value,
+      input: InputElement,
+      ...selectProps,
+      children: children
+    }) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextSlot, {
+      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`](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.
+   */
+  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`](https://mui.com/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/)
+   * 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,
+  /**
+   * 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`](https://mui.com/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.
+   */
+  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.
+   */
+  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 => {
+  var _item$value;
+  const {
+    item,
+    applyValue,
+    focusElementRef = null
+  } = props;
+  const filterTimeout = React.useRef();
+  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : '');
+  const [applying, setIsApplying] = React.useState(false);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(filterTimeout.current);
+    };
+  }, []);
+  React.useEffect(() => {
+    var _item$value2;
+    const itemValue = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : [undefined, undefined];
+    setFilterValueState(itemValue);
+  }, [item.value]);
+  const updateFilterValue = (lowerBound, upperBound) => {
+    clearTimeout(filterTimeout.current);
+    setFilterValueState([lowerBound, upperBound]);
+    setIsApplying(true);
+    filterTimeout.current = setTimeout(() => {
+      setIsApplying(false);
+      applyValue(_objectSpread2(_objectSpread2({}, item), {}, {
+        value: [lowerBound, upperBound]
+      }));
+    }, SUBMIT_FILTER_STROKE_TIME);
+  };
+  const handleUpperFilterChange = event => {
+    const newUpperBound = event.target.value;
+    updateFilterValue(filterValueState[0], newUpperBound);
+  };
+  const handleLowerFilterChange = event => {
+    const newLowerBound = event.target.value;
+    updateFilterValue(newLowerBound, filterValueState[1]);
+  };
+  return /*#__PURE__*/React.createElement(Box$1, {
+    sx: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'end',
+      height: 48,
+      pl: '20px'
+    }
+  }, /*#__PURE__*/React.createElement(TextField$1, {
+    name: "lower-bound-input",
+    placeholder: "From",
+    label: "From",
+    variant: "standard",
+    value: Number(filterValueState[0]),
+    onChange: handleLowerFilterChange,
+    type: "number",
+    inputRef: focusElementRef,
+    sx: {
+      mr: 2
+    }
+  }), /*#__PURE__*/React.createElement(TextField$1, {
+    name: "upper-bound-input",
+    placeholder: "To",
+    label: "To",
+    variant: "standard",
+    value: Number(filterValueState[1]),
+    onChange: handleUpperFilterChange,
+    type: "number",
+    InputProps: applying ? {
+      endAdornment: /*#__PURE__*/React.createElement(Icon, {
+        icon: mdiSync
+      })
+    } : {}
+  }));
+};
+
+const isBetweenOperator = {
+  label: 'is between',
+  value: 'isBetween',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
+      return null;
+    }
+    if (filterItem.value[0] == null || filterItem.value[1] == null) {
+      return null;
+    }
+    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];
+    };
+  },
+  InputComponent: InputNumberInterval
+};
+const IS_BETWEEN = isBetweenOperator;
+
+const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
+
+const doesNotContain = {
+  label: 'does not contain',
+  value: 'doesNotContain',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (String(value).indexOf(filterItem.value) !== -1) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_CONTAIN = doesNotContain;
+
+const doesNotEqual = {
+  label: 'does not equal',
+  value: 'doesNotEqual',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.value) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      if (String(value) === filterItem.value) {
+        return false;
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_EQUAL = doesNotEqual;
+
+const doesNotHaveOperator = {
+  label: "doesn't have",
+  value: 'doesNotHave',
+  getApplyFilterFn: filterItem => {
+    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);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const DOES_NOT_HAVE = doesNotHaveOperator;
+const DOES_NOT_HAVE_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const hasOperator = {
+  label: 'has',
+  value: 'has',
+  getApplyFilterFn: filterItem => {
+    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);
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const HAS = hasOperator;
+const HAS_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const hasOnlyOperator = {
+  label: 'has only',
+  value: 'hasOnly',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      const cellValues = Array.isArray(value) ? value : [value];
+      return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const HAS_ONLY = hasOnlyOperator;
+const HAS_ONLY_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ONLY), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const isOperator = {
+  label: 'is',
+  value: 'is',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (Array.isArray(value)) {
+        return false;
+      }
+      return String(value) === filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const IS = isOperator;
+const IS_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const isNotOperator = {
+  label: 'is not',
+  value: 'isNot',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (Array.isArray(value)) {
+        return true;
+      }
+      return String(value) !== filterItem.value;
+    };
+  },
+  InputComponent: GridFilterInputValue
+};
+const IS_NOT = isNotOperator;
+const IS_NOT_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT), {}, {
+  InputComponent: GridFilterInputSingleSelect
+});
+
+const containsAnyOfOperator = {
+  label: 'contains any of',
+  value: 'containsAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).indexOf(filteredValue) !== -1) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const containsAnyOfCIOperator = {
+  label: 'contains any of (case insensitive)',
+  value: 'containsAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        if (paramValuesLower.indexOf(filteredValue.toLowerCase()) !== -1) {
+          match = true;
+        }
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const CONTAINS_ANY_OF = containsAnyOfOperator;
+const CONTAINS_ANY_OF_I = containsAnyOfCIOperator;
+
+const doesNotHaveAnyOf = {
+  label: "doesn't have any of",
+  value: 'doesNotHaveAnyOf',
+  getApplyFilterFn: filterItem => {
+    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 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));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const DOES_NOT_HAVE_ANY_OF = doesNotHaveAnyOf;
+const DOES_NOT_HAVE_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const endsWithAnyOfOperator = {
+  label: 'ends with any of',
+  value: 'endsWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).endsWith(filteredValue)) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
+
+const isAnyOfOperator = {
+  label: 'is any of',
+  value: 'isAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(String(paramValue))) {
+          return true;
+        }
+      }
+      return false;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_ANY_OF = isAnyOfOperator;
+const IS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const isAnyOfIOperator = {
+  label: 'is any of (case-insensitive)',
+  value: 'isAnyOfI',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    const lowerCaseFilterValues = filterItem.value.map(v => String(v).toLowerCase());
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const paramValue of paramValues) {
+        if (lowerCaseFilterValues.includes(String(paramValue).toLowerCase())) {
+          return true;
+        }
+      }
+      return false;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_ANY_OF_I = isAnyOfIOperator;
+const IS_ANY_OF_I_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF_I), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const hasAnyOfOperator = {
+  label: 'has any of',
+  value: 'hasAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const cellValues = Array.isArray(value) ? value : [value];
+      const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
+      return filterItemValues.some(v => cellValues.map(val => String(val)).includes(v));
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const HAS_ANY_OF = hasAnyOfOperator;
+const HAS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const isNotAnyOfOperator = {
+  label: 'is not any of',
+  value: 'isNotAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      for (const paramValue of paramValues) {
+        if (filterItem.value.includes(String(paramValue))) {
+          return false;
+        }
+      }
+      return true;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const IS_NOT_ANY_OF = isNotAnyOfOperator;
+const IS_NOT_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT_ANY_OF), {}, {
+  InputComponent: GridFilterInputMultipleSingleSelect
+});
+
+const startsWithAnyOfOperator = {
+  label: 'starts with any of',
+  value: 'startsWithAnyOf',
+  getApplyFilterFn: filterItem => {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
+      return null;
+    }
+    return value => {
+      if (filterItem.value.length === 0) {
+        return true;
+      }
+      const paramValues = Array.isArray(value) ? value : [value];
+      let match = false;
+      filterItem.value.forEach(filteredValue => {
+        paramValues.forEach(paramValue => {
+          if (String(paramValue).startsWith(filteredValue)) {
+            match = true;
+          }
+        });
+      });
+      return match;
+    };
+  },
+  InputComponent: GridFilterInputMultipleValue
+};
+const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
+
+const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_ANY_OF_I, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
+const getGridStringArrayOperatorsWithSelect = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_ANY_OF_I_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF];
+const getGridStringArrayOperatorsWithSelectOnStringArrayColumns = () => [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT];
+
+const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, ...getGridStringArrayOperators()];
+
+// istanbul ignore file
+const operatorList = {
+  // Default types
+  string: getGridStringOperators$1(),
+  number: getGridNumericOperators$1(),
+  boolean: getGridBooleanOperators(),
+  date: getGridDateOperators(),
+  dateTime: getGridDateOperators(true),
+  singleSelect: getGridSingleSelectOperators(),
+  // Extended types
+  rsString: getGridStringOperators(),
+  rsNumber: getGridNumericOperators(),
+  rsSingleSelect: [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF],
+  rsSingleSelectWithShortOperatorList: [IS_WITH_SELECT, IS_NOT_WITH_SELECT, IS_ANY_OF_WITH_SELECT],
+  rsMultipleSelect: [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT],
+  rsMultipleSelectWithShortOperatorList: [HAS_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, HAS_ANY_OF_WITH_SELECT],
+  // Custom types
+  rsStringArray: getGridStringArrayOperators()
+};
+
 const PAGINATION_MODEL_KEY = 'paginationModel';
 const FILTER_MODEL_KEY = 'filterModel';
 const SORT_MODEL_KEY = 'sortModel';
@@ -98,11 +2085,11 @@ const decodeValue = value => {
   if (value === '') {
     return '';
   }
-  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc}|${curr}`), 'g');
+  const re = new RegExp(Object.keys(DECODER).reduce((acc, curr) => `${acc},${curr}`), 'g');
   // decodeValue for lists:
   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);
+    const arrayList = arrayValues.split(',').map(v => v.replace(re, encoded => DECODER[encoded])).filter(item => item);
     return arrayList.length > 0 ? arrayList : [];
   }
   return value.replace(re, encoded => DECODER[encoded]);
@@ -117,7 +2104,7 @@ const encodeValue = value => {
   if (Array.isArray(value)) {
     const encodedArray = value.map(entry => {
       return String(entry).replace(/\s|&|=|\?|\[|\]/g, encoded => ENCODER[encoded]);
-    }).join('|');
+    }).join(',');
     return `list[${encodedArray}]`;
   }
 
@@ -148,57 +2135,49 @@ const numberOperatorDecoder = {
   lt: '<',
   lte: '<='
 };
-const isOperatorValueValid = (columnField, operatorValue, columns) => {
-  const column = columns.find(column => column.field === columnField);
+const isOperatorValueValid = (field, operator, columns) => {
+  const column = columns.find(column => column.field === field);
   if (!column) {
     return false;
   }
   const columnType = (column === null || column === void 0 ? void 0 : column.type) || 'string';
-  const operators = operatorList[columnType];
+  const operators = column.filterOperators || operatorList[columnType];
   if (!operators) {
     return false;
   }
-  if ('filterOperators' in operators) {
-    return !!operators.filterOperators.find(op => columnType === 'number' && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operatorValue : op['value'] === operatorValue);
-  }
-  return !!operators.find(op => ['number', 'rsNumber'].includes(columnType) && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operatorValue : op['value'] === operatorValue);
+  return !!operators.find(op => columnType === 'number' && Object.keys(numberOperatorEncoder).includes(op.value) ? numberOperatorEncoder[op.value] === operator : op.value === operator);
 };
 const listOperators = ['containsAnyOf', 'doesNotContainAnyOf', 'endsWithAnyOf', 'doesNotEndWithAnyOf', 'hasAnyOf', 'doesNotHaveAnyOf', 'isAnyOf', 'isNotAnyOf', 'startsWithAnyOf', 'doesNotStartWithAnyOf'];
 
 // Check if the value doesn't break
-const isValueValid = (value, columnField, columns, operatorValue) => {
+const isValueValid = (value, field, columns, operator) => {
   var _column$type;
   // every field accepts undefined as value for default
   if (value === undefined || value === '') {
     return true;
   }
 
-  // xxxAnyOf accepts as value only lists, and we are declearing them in the
+  // xxxAnyOf accepts as value only lists, and we are declaring them in the
   // URL as `list=[...]`
-  if (listOperators.includes(operatorValue)) {
+  if (listOperators.includes(operator)) {
     return Array.isArray(value) || value === '';
   }
 
   // We are accepting arrays only if they are of the 'xxxAnyOf' type
-  if (Array.isArray(value) && !listOperators.includes(operatorValue)) {
+  if (Array.isArray(value) && !listOperators.includes(operator)) {
     return false;
   }
-  const column = columns.find(column => column.field === columnField);
+  const column = columns.find(column => column.field === field);
   if (!column) {
     return false;
   }
   const type = (_column$type = column['type']) !== null && _column$type !== void 0 ? _column$type : 'string';
 
-  // Only date and rating fail with 500s, other set themselves as undefined
-  if (type !== 'date' && type !== 'rating') {
+  // Only date fail with 500s, other set themselves as undefined
+  if (type !== 'date') {
     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
@@ -221,7 +2200,7 @@ const getFilterModelFromString = (searchString, columns) => {
   if (!searchString) {
     return 'invalid';
   }
-  let linkOperator = GridLinkOperator.And;
+  let logicOperator = GridLogicOperator.And;
   let quickFilterValues = [];
   const searchParams = new URLSearchParams();
   for (const [key, value] of new URLSearchParams(searchString)) {
@@ -229,7 +2208,7 @@ const getFilterModelFromString = (searchString, columns) => {
       searchParams.set(key, value);
     }
     if (key === '_logicOperator') {
-      linkOperator = value;
+      logicOperator = value === GridLogicOperator.And || value === GridLogicOperator.Or ? value : GridLogicOperator.And;
     }
     if (key === '_quickFilterValues') {
       try {
@@ -248,7 +2227,7 @@ const getFilterModelFromString = (searchString, columns) => {
     if (isInvalid) {
       return;
     }
-    const field = key.split('[')[0].slice(1); // Slice to remove the _ at the beginning
+    const field = key.split('[')[0].slice(1);
     if (!fields.includes(field)) {
       return;
     }
@@ -258,14 +2237,13 @@ const getFilterModelFromString = (searchString, columns) => {
       isInvalid = true;
       return;
     }
-    const splitRight = key.split('[')[1].split(']')[0].split('|');
+    const splitRight = key.split('[')[1].split(']')[0].split(',');
     const type = splitRight[1];
     if (type !== columnType) {
       isInvalid = true;
       return;
     }
     const operator = splitRight[0];
-    // if the operator is not part of the valid operators invalidate the URL
     if (!isOperatorValueValid(field, operator, columns) || Array.isArray(operator)) {
       isInvalid = true;
       return;
@@ -277,41 +2255,37 @@ const getFilterModelFromString = (searchString, columns) => {
       return;
     }
     items.push({
-      columnField: field,
-      operatorValue: ['number', 'rsNumber'].includes(columnType) && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
+      field,
+      operator: columnType === 'number' && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
       id,
       value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue,
       type
     });
   });
-
-  // If we found some condition that results in an invalid URL,
-  // return the empty filterModel (this will trigger the localStorage)
-  // and will pick up the last valid search
   if (isInvalid) {
     return 'invalid';
   }
   return {
     items,
-    linkOperator,
+    logicOperator,
     quickFilterValues
   };
 };
 const getSearchParamsFromFilterModel = filterModel => {
   var _filterModel$quickFil;
   const searchParams = new URLSearchParams();
-  searchParams.set('_logicOperator', filterModel['linkOperator'] || '');
+  searchParams.set('_logicOperator', filterModel['logicOperator'] || '');
   filterModel['items'].forEach(item => {
     const {
-      columnField,
-      operatorValue,
+      field,
+      operator,
       value,
       type
     } = item;
-    if (Object.keys(numberOperatorEncoder).includes(operatorValue)) {
-      searchParams.set(`_${columnField}[${numberOperatorEncoder[operatorValue]}|${encodeValue(type)}]`, encodeValue(value));
+    if (Object.keys(numberOperatorEncoder).includes(operator)) {
+      searchParams.set(`_${field}[${numberOperatorEncoder[operator]},${encodeValue(type)}]`, encodeValue(value));
     } else {
-      searchParams.set(`_${columnField}[${encodeValue(operatorValue)}|${encodeValue(type)}]`, encodeValue(value));
+      searchParams.set(`_${field}[${encodeValue(operator)},${encodeValue(type)}]`, encodeValue(value));
     }
   });
   if ((_filterModel$quickFil = filterModel.quickFilterValues) !== null && _filterModel$quickFil !== void 0 && _filterModel$quickFil.length) {
@@ -327,7 +2301,7 @@ const getSearchParamsFromFilterModel = filterModel => {
 const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion) => {
   const defaultValue = initialState && initialState.filter && initialState.filter.filterModel ? initialState.filter.filterModel : {
     items: [],
-    linkOperator: GridLinkOperator.And
+    logicOperator: GridLogicOperator.And
   };
   if (isNewVersion) {
     return defaultValue;
@@ -360,7 +2334,7 @@ const getSortingFromString = (searchString, columns) => {
     return [];
   }
   const fields = columns.map(column => column.field);
-  const [column, order] = value.slice(1, value.length - 1).split('|');
+  const [column, order] = value.slice(1, value.length - 1).split(',');
   if (fields.includes(column) && (order === 'asc' || order === 'desc')) {
     return [{
       field: column,
@@ -371,7 +2345,7 @@ const getSortingFromString = (searchString, columns) => {
 };
 const getSearchParamsFromSorting = sorting => {
   const searchParams = new URLSearchParams();
-  searchParams.set('_sortColumn', sorting.length > 0 && sorting[0].sort ? `[${encodeValue(sorting[0].field)}|${encodeValue(sorting[0].sort)}]` : '[]');
+  searchParams.set('_sortColumn', sorting.length > 0 && sorting[0].sort ? `[${encodeValue(sorting[0].field)},${encodeValue(sorting[0].sort)}]` : '[]');
   return searchParams;
 };
 
@@ -412,7 +2386,7 @@ const getPaginationFromString = searchString => {
   if (value === '' || value === null || value === '[]') {
     return 'invalid';
   }
-  const pagination = value.slice(1, value.length - 1).split('|');
+  const pagination = value.slice(1, value.length - 1).split(',');
   const page = parseFloat(pagination[0]);
   const pageSize = parseFloat(pagination[1]);
   const direction = pagination[2];
@@ -427,7 +2401,7 @@ const getPaginationFromString = searchString => {
 };
 const getSearchParamsFromPagination = pagination => {
   const searchParams = new URLSearchParams();
-  searchParams.set('_pagination', `[${pagination.page}|${pagination.pageSize}|${pagination.direction}]`);
+  searchParams.set('_pagination', `[${pagination.page},${pagination.pageSize},${pagination.direction}]`);
   return searchParams;
 };
 
@@ -466,13 +2440,38 @@ const getPaginationModel = (search, localStoragePagination, setLocalStoragePagin
 
 /** COLUMN VISIBILITY */
 
+const getColumnVisibilityFromString = (searchString, columns) => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_columnVisibility');
+  if (value === '' || value === null || value === '[]') {
+    return 'invalid';
+  }
+  const parsedFields = value.slice(1, value.length - 1).split(',');
+  const fields = columns.map(column => column.field);
+  const visibility = {};
+  for (const field of fields) {
+    visibility[field] = false;
+  }
+  for (const parsedField of parsedFields) {
+    if (fields.includes(parsedField)) {
+      visibility[parsedField] = true;
+    }
+  }
+  if (Object.values(visibility).filter(v => v === true).length === 0) {
+    return 'invalid';
+  }
+  return visibility;
+};
 const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
   const searchParams = new URLSearchParams();
-  const columnFields = columns.map(column => column.field);
+  const fields = columns.map(column => column.field);
 
   // if column visibility model is empty, show all columns
   if (Object.keys(columnVisibility).length == 0) {
-    searchParams.set('_columnVisibility', `[${columnFields.join('|')}]`);
+    searchParams.set('_columnVisibility', `[${fields.join(',')}]`);
     return searchParams;
   }
   const finalColumnVisibility = columns.filter(c => {
@@ -483,63 +2482,10 @@ const getSearchParamsFromColumnVisibility = (columnVisibility, columns) => {
       [colName]: true
     });
   }, columnVisibility);
-  const visibleColumns = Object.entries(finalColumnVisibility)
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  .filter(_ref => {
-    let [_, visible] = _ref;
-    return visible;
-  })
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  .map(_ref2 => {
-    let [column, _] = _ref2;
-    return encodeValue(column);
-  });
-  searchParams.set('_columnVisibility', `[${visibleColumns.join('|')}]`);
+  const visibleColumns = fields.filter(column => finalColumnVisibility[column] !== false);
+  searchParams.set('_columnVisibility', `[${visibleColumns.join(',')}]`);
   return searchParams;
 };
-const getColumnVisibilityFromString = (notParsed, tableColumns) => {
-  if (!notParsed || notParsed.length === 1 && notParsed[0] === '?') {
-    return 'invalid';
-  }
-  // remove the initial ? if present
-  const parsed = notParsed[0] === '?' ? notParsed.slice(1) : notParsed;
-  const visibility = {};
-  let exist = false;
-  let visibleColumnsCount = 0;
-  for (const item of parsed.split('&')) {
-    // if it's not column visibility field, skip
-    const fieldURL = item.split('=')[0];
-    if (fieldURL !== '_columnVisibility') {
-      continue;
-    }
-    // e.g. item = _columnVisibility[abc,def]
-    const left = item.split(']')[0];
-    if (left.split('[').length < 2) {
-      continue;
-    }
-    const encodedValues = item.split('[')[1].split(']')[0];
-    if (typeof encodedValues !== 'string') {
-      continue;
-    }
-    exist = true;
-    const columnFields = tableColumns.map(column => column.field);
-    // TODO: Add validation that | is present
-    const columns = encodedValues.split('|').map(value => decodeValue(value));
-
-    // for each column, check if it's visible and add it to visibility model
-    for (const column of columnFields) {
-      const isColumnVisible = columns.includes(column);
-      visibility[column] = isColumnVisible;
-      if (isColumnVisible) {
-        visibleColumnsCount += 1;
-      }
-    }
-  }
-  if (visibleColumnsCount === 0 && !exist) {
-    return 'invalid';
-  }
-  return visibility;
-};
 
 // Rules:
 // - if we have something in the URL, use that info
@@ -600,8 +2546,8 @@ const getPinnedColumnsFromString = (notParsed, tableColumns) => {
     if (typeof encodedValues !== 'string') {
       continue;
     }
-    const columnFields = [...tableColumns.map(column => column.field), '__check__'];
-    const columns = encodedValues.split('|').map(value => decodeValue(value)).filter(val => typeof val === 'string' && columnFields.includes(val));
+    const fields = [...tableColumns.map(column => column.field), '__check__'];
+    const columns = encodedValues.split(',').map(value => decodeValue(value)).filter(val => typeof val === 'string' && fields.includes(val));
     if (fieldURL === '_pinnedColumnsLeft') {
       pinnedColumns['left'] = columns;
     }
@@ -609,9 +2555,9 @@ const getPinnedColumnsFromString = (notParsed, tableColumns) => {
       pinnedColumns['right'] = columns;
     }
   }
-  return pinnedColumns['left'] || pinnedColumns['right'] ? {
-    left: pinnedColumns['left'] || [],
-    right: pinnedColumns['right'] || []
+  return pinnedColumns.left && pinnedColumns.left.length > 0 || pinnedColumns.right && pinnedColumns.right.length > 0 ? {
+    left: pinnedColumns.left || [],
+    right: pinnedColumns.right || []
   } : 'invalid';
 };
 const getSearchParamsFromPinnedColumns = pinnedColumns => {
@@ -619,8 +2565,8 @@ const getSearchParamsFromPinnedColumns = pinnedColumns => {
   const searchParams = new URLSearchParams();
   const pinnedColumnLeft = ((_pinnedColumns$left = pinnedColumns.left) === null || _pinnedColumns$left === void 0 ? void 0 : _pinnedColumns$left.map(val => encodeValue(val))) || [];
   const pinnedColumnRight = ((_pinnedColumns$right = pinnedColumns.right) === null || _pinnedColumns$right === void 0 ? void 0 : _pinnedColumns$right.map(val => encodeValue(val))) || [];
-  searchParams.set('_pinnedColumnsLeft', `[${pinnedColumnLeft.join('|')}]`);
-  searchParams.set('_pinnedColumnsRight', `[${pinnedColumnRight.join('|')}]`);
+  searchParams.set('_pinnedColumnsLeft', `[${pinnedColumnLeft.join(',')}]`);
+  searchParams.set('_pinnedColumnsRight', `[${pinnedColumnRight.join(',')}]`);
   return searchParams;
 };
 
@@ -661,7 +2607,7 @@ const getSearchParamsFromTab = search => {
   }
   return searchParams;
 };
-const getFinalSearch = _ref3 => {
+const getFinalSearch = _ref => {
   let {
     search,
     localStorageVersion,
@@ -671,7 +2617,7 @@ const getFinalSearch = _ref3 => {
     columnsVisibilityModel,
     pinnedColumnsModel,
     columns
-  } = _ref3;
+  } = _ref;
   const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
   const sortModelSearch = getSearchParamsFromSorting(sortModel);
   const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
@@ -736,14 +2682,14 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     pinnedColumnsModel
   };
 };
-const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns) => {
+const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns) => {
   let {
     filterModel,
     sortModel,
     paginationModel,
     columnsModel: columnsVisibilityModel,
     pinnedColumnsModel
-  } = _ref4;
+  } = _ref2;
   const newSearch = getFinalSearch({
     search,
     localStorageVersion,
@@ -764,17 +2710,17 @@ const updateUrl = (_ref4, search, localStorageVersion, historyReplace, columns)
 // do not use it for equivalence (e.g. with value `3` and undefined we
 // will get 0).
 const compareFilters = (firstFilter, secondFilter) => {
-  if (firstFilter.columnField < secondFilter.columnField) {
+  if (firstFilter.field < secondFilter.field) {
     return -1;
-  } else if (firstFilter.columnField > secondFilter.columnField) {
+  } else if (firstFilter.field > secondFilter.field) {
     return 1;
   }
-  if (firstFilter.operatorValue === undefined || secondFilter.operatorValue === undefined) {
+  if (firstFilter.operator === undefined || secondFilter.operator === undefined) {
     return 0;
   }
-  if (firstFilter.operatorValue < secondFilter.operatorValue) {
+  if (firstFilter.operator < secondFilter.operator) {
     return -1;
-  } else if (firstFilter.operatorValue > secondFilter.operatorValue) {
+  } else if (firstFilter.operator > secondFilter.operator) {
     return 1;
   }
   if (firstFilter.value < secondFilter.value) {
@@ -785,18 +2731,18 @@ const compareFilters = (firstFilter, secondFilter) => {
   return 0;
 };
 const areFiltersEquivalent = (firstFilter, secondFilter) => {
-  return firstFilter.columnField === secondFilter.columnField && firstFilter.operatorValue === secondFilter.operatorValue && firstFilter.value === secondFilter.value;
+  return firstFilter.field === secondFilter.field && firstFilter.operator === secondFilter.operator && firstFilter.value === secondFilter.value;
 };
 const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
   const {
     items,
-    linkOperator
+    logicOperator
   } = filterModel;
   const {
     items: itemsToMatch,
-    linkOperator: linkOperatorToMatch
+    logicOperator: logicOperatorToMatch
   } = filterModelToMatch;
-  if (linkOperator !== linkOperatorToMatch) {
+  if (logicOperator !== logicOperatorToMatch) {
     return false;
   }
   if (items.length !== itemsToMatch.length) {
@@ -809,7 +2755,7 @@ const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
     const filterToCompare = itemsToMatch[i];
 
     // compareFilters return 0 if and only if the filters have the same
-    // columnField, operatorValue, and value
+    // field, operator, and value
     if (!areFiltersEquivalent(filter, filterToCompare)) {
       return false;
     }
@@ -818,8 +2764,6 @@ const areFilterModelsEquivalent = (filterModel, filterModelToMatch) => {
 };
 
 // Get and Set data from LocalStorage WITHOUT useState
-
-// triggering a state update and consecutive re-render
 const useFetchState = (defaultValue, key) => {
   let stickyValue = null;
   try {
@@ -827,16 +2771,7 @@ const useFetchState = (defaultValue, key) => {
   } catch (e) {
     console.error('StatefulDataGrid: error getting item from local storage: ', e);
   }
-  let parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
-
-  // TODO: temporary workaround to avoid clashes when someone had sorting on the now-removed screenshot field (renamed to num_annotations)
-  // Consider upgrading the Datagrid component library as the exception handling was added in this PR: https://github.com/mui-org/material-ui-x/pull/3224
-  if (parsedValue instanceof Array) {
-    const fields = (parsedValue || []).map(item => item.field);
-    if (fields.includes('screenshot') || fields.includes('diffs')) {
-      parsedValue = defaultValue;
-    }
-  }
+  const parsedValue = stickyValue !== null && stickyValue !== undefined && stickyValue !== 'undefined' ? JSON.parse(stickyValue) : defaultValue;
   const updateValue = useCallback(value => {
     try {
       window.localStorage.setItem(key, JSON.stringify(value));
@@ -847,6 +2782,8 @@ const useFetchState = (defaultValue, key) => {
   return [parsedValue, updateValue];
 };
 
+// import useLocalStorage from './useLocalStorage';
+
 const useTableStates = (id, version) => {
   const [paginationModel, setPaginationModel] = useFetchState('', buildStorageKey({
     id,
@@ -903,8 +2840,7 @@ const useStatefulTable = props => {
     onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
     onColumnWidthChange: propsOnColumnWidthChange,
     onFilterModelChange: propsOnFilterModelChange,
-    onPageChange: propsOnPageChange,
-    onPageSizeChange: propsOnPageSizeChange,
+    onPaginationModelChange: propsOnPaginationModelChange,
     onPinnedColumnsChange: propsOnPinnedColumnsChange,
     onSortModelChange: propsOnSortModelChange,
     useRouter,
@@ -934,7 +2870,7 @@ const useStatefulTable = props => {
     setDimensionModel
   } = useTableStates(id, localStorageVersion);
 
-  // clearing up old version keys
+  // clearing up old version keys, triggering only on first render
   useEffect(() => clearPreviousVersionStorage(id, previousLocalStorageVersions), [id, previousLocalStorageVersions]);
   const onColumnDimensionChange = useCallback(_ref => {
     let {
@@ -979,7 +2915,7 @@ const useStatefulTable = props => {
     onFilterModelChange: (model, details) => {
       const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
         items: model.items.map(item => {
-          const column = apiRef.current.getColumn(item.columnField);
+          const column = apiRef.current.getColumn(item.field);
           item.type = column.type || 'string';
           return item;
         }),
@@ -1017,34 +2953,16 @@ const useStatefulTable = props => {
       }, search, localStorageVersion, historyReplace, columns);
     },
     pinnedColumns: pinnedColumnsModel,
-    page: paginationModelParsed.page,
-    pageSize: paginationModelParsed.pageSize,
-    onPageChange: (page, details) => {
-      console.log('page change', page);
-      const direction = paginationModelParsed.page < page ? 'next' : 'back';
-      propsOnPageChange === null || propsOnPageChange === void 0 ? void 0 : propsOnPageChange(page, details);
-      updateUrl({
-        filterModel: filterParsed,
-        sortModel: sortModelParsed,
-        paginationModel: {
-          page,
-          pageSize: paginationModelParsed.pageSize,
-          direction
-        },
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
-        pinnedColumnsModel: pinnedColumnsModel
-      }, search, localStorageVersion, historyReplace, columns);
-    },
-    onPageSizeChange: (pageSize, details) => {
-      propsOnPageSizeChange === null || propsOnPageSizeChange === void 0 ? void 0 : propsOnPageSizeChange(pageSize, details);
+    paginationModel: paginationModelParsed,
+    onPaginationModelChange: (model, details) => {
+      const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
+        direction: paginationModelParsed.page < model.page ? 'next' : 'back'
+      });
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
-        paginationModel: {
-          page: paginationModelParsed.page,
-          pageSize,
-          direction: paginationModelParsed.direction
-        },
+        paginationModel: paginationModel,
         columnsModel: apiRef.current.state.columns.columnVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
@@ -1070,7 +2988,7 @@ const useStatefulTable = props => {
   };
 };
 
-const _excluded = ["apiRef", "autoHeight", "className", "columns", "columnTypes", "components", "componentsProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "page", "pageSize", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "localStorageVersion", "previousLocalStorageVersions", "onFilterModelChange", "selectionModel", "onColumnWidthChange", "onPageChange", "onPageSizeChange", "onSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "paginationProps", "rows", "rowsPerPageOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
+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", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "useRouter", "paginationMode", "rowCount"];
 const COMPONENT_NAME = 'DataGrid';
 const CLASSNAME = 'redsift-datagrid';
 const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
@@ -1080,15 +2998,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       autoHeight,
       className,
       columns,
-      columnTypes: propsColumnTypes,
-      components,
-      componentsProps,
+      slots,
+      slotProps,
       filterModel: propsFilterModel,
       columnVisibilityModel: propsColumnVisibilityModel,
       pinnedColumns: propsPinnedColumns,
       sortModel: propsSortModel,
-      page: propsPage,
-      pageSize: propsPageSize,
+      paginationModel: propsPaginationModel,
       height: propsHeight,
       hideToolbar,
       initialState,
@@ -1097,11 +3013,10 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       localStorageVersion,
       previousLocalStorageVersions,
       onFilterModelChange: propsOnFilterModelChange,
-      selectionModel: propsSelectionModel,
+      rowSelectionModel: propsRowSelectionModel,
       onColumnWidthChange: propsOnColumnWidthChange,
-      onPageChange: propsOnPageChange,
-      onPageSizeChange: propsOnPageSizeChange,
-      onSelectionModelChange: propsOnSelectionModelChange,
+      onPaginationModelChange: propsOnPaginationModelChange,
+      onRowSelectionModelChange: propsOnRowSelectionModelChange,
       onColumnVisibilityModelChange: propsOnColumnVisibilityModelChange,
       onPinnedColumnsChange: propsOnPinnedColumnsChange,
       onSortModelChange: propsOnSortModelChange,
@@ -1109,7 +3024,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       paginationPlacement = 'both',
       paginationProps,
       rows,
-      rowsPerPageOptions,
+      pageSizeOptions,
       sx,
       theme: propsTheme,
       useRouter,
@@ -1117,46 +3032,41 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       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 = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar;
+  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';
   const {
     onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
     onFilterModelChange: controlledOnFilterModelChange,
-    onPageChange: controlledOnPageChange,
-    onPageSizeChange: controlledOnPageSizeChange,
+    onPaginationModelChange: controlledOnPaginationModelChange,
     onPinnedColumnsChange: controlledOnPinnedColumnsChange,
     onSortModelChange: controlledOnSortModelChange
   } = useControlledDatagridState({
     initialState,
-    rowsPerPageOptions,
+    pageSizeOptions,
     propsColumnVisibilityModel,
     propsFilterModel,
     propsOnColumnVisibilityModelChange,
     propsOnFilterModelChange,
     propsOnPinnedColumnsChange,
     propsOnSortModelChange,
-    propsPage,
-    propsPageSize,
+    propsPaginationModel,
     propsPinnedColumns,
     propsSortModel,
-    propsOnPageChange,
-    propsOnPageSizeChange
+    propsOnPaginationModelChange
   });
   const {
     columnVisibilityModel,
     filterModel,
     onColumnVisibilityModelChange,
     onFilterModelChange,
-    onPageChange,
-    onPageSizeChange,
+    onPaginationModelChange,
     onPinnedColumnsChange,
     onSortModelChange,
-    page,
-    pageSize,
+    paginationModel,
     pinnedColumns,
     sortModel,
     onColumnWidthChange
@@ -1167,33 +3077,35 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
     onColumnWidthChange: propsOnColumnWidthChange,
     onFilterModelChange: controlledOnFilterModelChange,
-    onPageChange: controlledOnPageChange,
-    onPageSizeChange: controlledOnPageSizeChange,
+    onPaginationModelChange: controlledOnPaginationModelChange,
     onPinnedColumnsChange: controlledOnPinnedColumnsChange,
     onSortModelChange: controlledOnSortModelChange,
     useRouter: useRouter,
     localStorageVersion,
     previousLocalStorageVersions
   });
-  const [selectionModel, setSelectionModel] = useState(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
   useEffect(() => {
-    setSelectionModel(propsSelectionModel !== null && propsSelectionModel !== void 0 ? propsSelectionModel : []);
-  }, [propsSelectionModel]);
-  const onSelectionModelChange = (selectionModel, details) => {
-    if (propsOnSelectionModelChange) {
-      propsOnSelectionModelChange(selectionModel, details);
+    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  }, [propsRowSelectionModel]);
+  const onRowSelectionModelChange = (selectionModel, details) => {
+    if (propsOnRowSelectionModelChange) {
+      propsOnRowSelectionModelChange(selectionModel, details);
     } else {
-      setSelectionModel(selectionModel);
+      setRowSelectionModel(selectionModel);
     }
   };
   const selectionStatus = useRef({
     type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectedRowsInPage: 0,
-    page,
-    pageSize: pageSize
+    page: paginationModel.page,
+    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');
@@ -1202,9 +3114,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(Array.isArray(selectionModel) ? selectionModel : [selectionModel], apiRef, selectionStatus, isRowSelectable, page, pageSize);
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatus, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
-  }, [selectionModel, page, pageSize]);
+  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
   if (!Array.isArray(rows)) {
     return null;
   }
@@ -1237,15 +3149,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     filterModel: filterModel,
     onColumnVisibilityModelChange: onColumnVisibilityModelChange,
     onFilterModelChange: onFilterModelChange,
-    onPageChange: onPageChange,
-    onPageSizeChange: onPageSizeChange,
+    onPaginationModelChange: onPaginationModelChange,
     onPinnedColumnsChange: onPinnedColumnsChange,
     onSortModelChange: onSortModelChange,
-    page: page,
-    pageSize: pageSize,
+    paginationModel: paginationModel,
     pinnedColumns: pinnedColumns,
     sortModel: sortModel,
-    rowsPerPageOptions: rowsPerPageOptions,
+    pageSizeOptions: pageSizeOptions,
     onColumnWidthChange: onColumnWidthChange,
     initialState: initialState,
     isRowSelectable: isRowSelectable,
@@ -1256,60 +3166,72 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
-    columnTypes: _objectSpread2(_objectSpread2({}, customColumnTypes), propsColumnTypes),
-    components: _objectSpread2(_objectSpread2({
-      BaseButton,
-      BaseCheckbox,
-      // BaseTextField,
-      BasePopper,
-      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+    slots: _objectSpread2(_objectSpread2({
+      baseButton: BaseButton,
+      baseCheckbox: BaseCheckbox,
+      // baseTextField,
+      basePopper: BasePopper,
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "ExportIcon"
       })),
-      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({
         displayName: "OpenFilterButtonIcon"
       }, props))
-    }, components), {}, {
-      Toolbar: ToolbarWrapper,
-      Pagination: 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
+      })),
+      pagination: props => {
         return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
           selectionStatus: selectionStatus.current,
-          page: page,
-          pageSize: pageSize,
-          onPageChange: onPageChange,
-          onPageSizeChange: onPageSizeChange,
-          rowsPerPageOptions: rowsPerPageOptions,
+          paginationModel: paginationModel,
+          onPaginationModelChange: onPaginationModelChange,
+          pageSizeOptions: pageSizeOptions,
           paginationProps: paginationProps,
-          paginationMode: paginationMode,
           rowCount: rowCount
         })) : /*#__PURE__*/React__default.createElement(ControlledPagination, _extends({}, props, {
           displaySelection: false,
@@ -1318,39 +3240,16 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           selectionStatus: selectionStatus.current,
           apiRef: apiRef,
           isRowSelectable: isRowSelectable,
-          page: page,
-          pageSize: pageSize,
-          onPageChange: onPageChange,
-          onPageSizeChange: onPageSizeChange,
-          rowsPerPageOptions: rowsPerPageOptions,
-          paginationProps: paginationProps,
-          paginationMode: paginationMode
+          paginationModel: paginationModel,
+          onPaginationModelChange: onPaginationModelChange,
+          pageSizeOptions: pageSizeOptions,
+          paginationProps: paginationProps
         })) : null;
       }
     }),
-    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
-      toolbar: _objectSpread2({
-        hideToolbar,
-        RenderedToolbar,
-        filterModel,
-        onFilterModelChange,
-        pagination,
-        paginationPlacement,
-        selectionStatus,
-        apiRef,
-        isRowSelectable,
-        page,
-        pageSize,
-        onPageChange,
-        onPageSizeChange,
-        rowsPerPageOptions,
-        paginationProps,
-        paginationMode,
-        rowCount
-      }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
-    }),
-    selectionModel: selectionModel,
-    onSelectionModelChange: (newSelectionModel, details) => {
+    slotProps: _objectSpread2({}, slotProps),
+    rowSelectionModel: rowSelectionModel,
+    onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
         const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
           let {
@@ -1407,8 +3306,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
             numberOfSelectedRows
           };
         }
+        forceSelectionUpdate(v => v + 1);
       }
-      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
+      onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
     sx: _objectSpread2(_objectSpread2({}, sx), {}, {
       '.MuiDataGrid-columnHeaders': {
@@ -1424,5 +3324,5 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
 StatefulDataGrid.className = CLASSNAME;
 StatefulDataGrid.displayName = COMPONENT_NAME;
 
-export { CATEGORIES as C, DIMENSION_MODEL_KEY as D, FILTER_MODEL_KEY as F, PAGINATION_MODEL_KEY as P, SORT_MODEL_KEY as S, VISIBILITY_MODEL_KEY as V, PINNED_COLUMNS as a, FILTER_SEARCH_KEY as b, buildStorageKey as c, clearPreviousVersionStorage as d, decodeValue as e, encodeValue as f, numberOperatorDecoder as g, getFilterModelFromString as h, getSearchParamsFromFilterModel as i, getSortingFromString as j, getSearchParamsFromSorting as k, getPaginationFromString as l, getSearchParamsFromPagination as m, numberOperatorEncoder as n, getSearchParamsFromColumnVisibility as o, getColumnVisibilityFromString as p, getPinnedColumnsFromString as q, getSearchParamsFromPinnedColumns as r, getSearchParamsFromTab as s, getFinalSearch as t, urlSearchParamsToString as u, getModelsParsedOrUpdateLocalStorage as v, updateUrl as w, areFilterModelsEquivalent as x, StatefulDataGrid as y };
+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 };
 //# sourceMappingURL=StatefulDataGrid2.js.map