@redsift/table 12.4.0 → 12.5.0-muiv7

package/_internal/StatefulDataGrid2.js

@@ -1,17 +1,1500 @@
 import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
-import React__default, { useCallback, useEffect, useRef, useMemo, forwardRef, useState } from 'react';
-import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
+import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { LicenseInfo } from '@mui/x-license';
-import { Icon, useTheme, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
-import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPremium } from '@mui/x-data-grid-premium';
-import { u as useControlledDatagridState, S as StyledDataGrid } from './useControlledDatagridState.js';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
+import { Icon, useTheme as useTheme$1, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
+import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
+import { L as LicenseInfo, u as useControlledDatagridState, T as ThemeProvider$1, S as StyledDataGrid } from './useControlledDatagridState.js';
 import { mdiSync } from '@redsift/icons';
-import { n as normalizeRowSelectionModel, o as onServerSideSelectionStatusChange, g as getSelectionCount, i as isRowSelected, S as ServerSideControlledPagination, C as ControlledPagination } from './ServerSideControlledPagination.js';
-import { B as BaseButton, a as BaseCheckbox, c as BaseIconButton, b as BaseIcon } from './BaseIconButton.js';
+import { 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, b as formControlState, d as capitalize, i as isAdornedStart, e as isFilled, F as FormControlContext, h as useId, j as useSlot, k as Select, I as Input, l as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
+import { T as Toolbar } from './Toolbar2.js';
+import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
+import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
+
+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 => {
@@ -53,7 +1536,7 @@ const InputNumberInterval = props => {
     const newLowerBound = event.target.value;
     updateFilterValue(newLowerBound, filterValueState[1]);
   };
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box$1, {
     sx: {
       display: 'inline-flex',
       flexDirection: 'row',
@@ -61,7 +1544,7 @@ const InputNumberInterval = props => {
       height: 48,
       pl: '20px'
     }
-  }, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(TextField$1, {
     name: "lower-bound-input",
     placeholder: "From",
     label: "From",
@@ -73,7 +1556,7 @@ const InputNumberInterval = props => {
     sx: {
       mr: 2
     }
-  }), /*#__PURE__*/React.createElement(TextField, {
+  }), /*#__PURE__*/React.createElement(TextField$1, {
     name: "upper-bound-input",
     placeholder: "To",
     label: "To",
@@ -700,7 +2183,8 @@ const VISIBILITY_MODEL_KEY = 'visibilityModel';
 const PINNED_COLUMNS = 'pinnedColumns';
 const DIMENSION_MODEL_KEY = 'dimension';
 const FILTER_SEARCH_KEY = 'searchModel';
-const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS];
+const DENSITY_MODEL_KEY = 'densityModel';
+const CATEGORIES = [PAGINATION_MODEL_KEY, FILTER_MODEL_KEY, SORT_MODEL_KEY, VISIBILITY_MODEL_KEY, DIMENSION_MODEL_KEY, FILTER_SEARCH_KEY, PINNED_COLUMNS, DENSITY_MODEL_KEY];
 const buildStorageKey = _ref => {
   let {
     id,
@@ -739,6 +2223,10 @@ const clearPreviousVersionStorage = (id, previousLocalStorageVersions) => {
       id,
       version,
       category: DIMENSION_MODEL_KEY
+    }), buildStorageKey({
+      id,
+      version,
+      category: DENSITY_MODEL_KEY
     })];
     for (const keyToDelete of keysToDelete) {
       try {
@@ -1156,16 +2644,11 @@ const isValueValid = (value, field, columns, operator) => {
   }
   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 fails 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
@@ -1291,7 +2774,17 @@ const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFil
     items: [],
     logicOperator: GridLogicOperator.And
   };
+
+  // Persist initialState-derived filters to localStorage so all three sources stay in sync
+  const persistDefaultFilters = () => {
+    const searchFromDefault = getSearchParamsFromFilterModel(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStorageFilters) {
+      setLocalStorageFilters(searchString);
+    }
+  };
   if (isNewVersion) {
+    persistDefaultFilters();
     return defaultValue;
   }
   const filterModelFromSearch = getFilterModelFromString(search, columns);
@@ -1307,6 +2800,7 @@ const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFil
   if (filterModelFromLocalStorage !== 'invalid') {
     return filterModelFromLocalStorage;
   }
+  persistDefaultFilters();
   return defaultValue;
 };
 
@@ -1344,7 +2838,17 @@ const getSearchParamsFromSorting = sorting => {
 const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion) => {
   var _initialState$sorting;
   const defaultValue = initialState !== null && initialState !== void 0 && (_initialState$sorting = initialState.sorting) !== null && _initialState$sorting !== void 0 && _initialState$sorting.sortModel ? initialState.sorting.sortModel : [];
+
+  // Persist initialState-derived sorting to localStorage so all three sources stay in sync
+  const persistDefaultSort = () => {
+    const searchFromDefault = getSearchParamsFromSorting(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStorageSorting) {
+      setLocalStorageSorting(searchString);
+    }
+  };
   if (isNewVersion) {
+    persistDefaultSort();
     return defaultValue;
   }
   const sorting = getSortingFromString(search, columns);
@@ -1360,6 +2864,7 @@ const getSortModel = (search, columns, localStorageSorting, setLocalStorageSorti
   if (sortModelFromLocalStorage !== 'invalid') {
     return sortModelFromLocalStorage;
   }
+  persistDefaultSort();
   return defaultValue;
 };
 
@@ -1398,16 +2903,25 @@ const getSearchParamsFromPagination = pagination => {
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty PaginationModel
 const getPaginationModel = (search, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion) => {
-  const defaultValue = initialState !== null && initialState !== void 0 && initialState.pagination ? _objectSpread2({
+  var _initialState$paginat, _initialState$paginat2, _initialState$paginat3;
+  // Extract pageSize from MUI's nested format: initialState.pagination.paginationModel.pageSize
+  const initialPageSize = (_initialState$paginat = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : (_initialState$paginat3 = _initialState$paginat2.paginationModel) === null || _initialState$paginat3 === void 0 ? void 0 : _initialState$paginat3.pageSize) !== null && _initialState$paginat !== void 0 ? _initialState$paginat : 25;
+  const defaultValue = {
     page: 0,
-    pageSize: 25,
-    direction: 'next'
-  }, initialState.pagination) : {
-    page: 0,
-    pageSize: 25,
+    pageSize: initialPageSize,
     direction: 'next'
   };
+
+  // Persist initialState-derived pagination to localStorage so all three sources stay in sync
+  const persistDefaultPagination = () => {
+    const searchFromDefault = getSearchParamsFromPagination(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStoragePagination) {
+      setLocalStoragePagination(searchString);
+    }
+  };
   if (isNewVersion) {
+    persistDefaultPagination();
     return defaultValue;
   }
   const pagination = getPaginationFromString(search);
@@ -1423,6 +2937,7 @@ const getPaginationModel = (search, localStoragePagination, setLocalStoragePagin
   if (paginationModelFromLocalStorage !== 'invalid') {
     return paginationModelFromLocalStorage;
   }
+  persistDefaultPagination();
   return defaultValue;
 };
 
@@ -1494,7 +3009,15 @@ const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, se
     }
   }
 
+  // Persist initialState-derived column visibility to localStorage so all three sources stay in sync
+  const persistDefaultVisibility = value => {
+    const searchFromDefault = getSearchParamsFromColumnVisibility(value, columns);
+    if (searchFromDefault.toString() !== localStorageColumnsVisibility) {
+      setLocalStorageColumnsVisibility(searchFromDefault.toString());
+    }
+  };
   if (isNewVersion) {
+    persistDefaultVisibility(defaultValue);
     return defaultValue;
   }
   const columnVisibility = getColumnVisibilityFromString(search, columns);
@@ -1510,8 +3033,10 @@ const getColumnsVisibility = (search, columns, localStorageColumnsVisibility, se
     return columnVisibilityFromLocalStorage;
   }
   if (initialState !== null && initialState !== void 0 && (_initialState$columns3 = initialState.columns) !== null && _initialState$columns3 !== void 0 && _initialState$columns3.columnVisibilityModel) {
+    persistDefaultVisibility(initialState.columns.columnVisibilityModel);
     return initialState.columns.columnVisibilityModel;
   }
+  persistDefaultVisibility(defaultValue);
   return defaultValue;
 };
 const getPinnedColumnsFromString = (notParsed, tableColumns) => {
@@ -1595,6 +3120,58 @@ const getSearchParamsFromTab = search => {
   }
   return searchParams;
 };
+
+/** DENSITY */
+
+const VALID_DENSITIES = ['compact', 'standard', 'comfortable'];
+const getDensityFromString = searchString => {
+  if (!searchString) {
+    return 'invalid';
+  }
+  const searchParams = new URLSearchParams(searchString);
+  const value = searchParams.get('_density');
+  if (value && VALID_DENSITIES.includes(value)) {
+    return value;
+  }
+  return 'invalid';
+};
+const getSearchParamsFromDensity = density => {
+  const searchParams = new URLSearchParams();
+  searchParams.set('_density', density);
+  return searchParams;
+};
+const getDensityModel = (search, localStorageDensity, setLocalStorageDensity, _initialState, isNewVersion) => {
+  // Default to 'compact' when no density is provided via URL, localStorage, or initialState
+  const defaultValue = 'compact';
+
+  // Persist initialState-derived density to localStorage so all three sources stay in sync
+  const persistDefaultDensity = () => {
+    const searchFromDefault = getSearchParamsFromDensity(defaultValue);
+    const searchString = urlSearchParamsToString(searchFromDefault);
+    if (searchString !== localStorageDensity) {
+      setLocalStorageDensity(searchString);
+    }
+  };
+  if (isNewVersion) {
+    persistDefaultDensity();
+    return defaultValue;
+  }
+  const density = getDensityFromString(search);
+  if (density !== 'invalid') {
+    const searchFromDensity = getSearchParamsFromDensity(density);
+    const searchString = urlSearchParamsToString(searchFromDensity);
+    if (searchString !== localStorageDensity) {
+      setLocalStorageDensity(searchString);
+    }
+    return density;
+  }
+  const densityFromLocalStorage = getDensityFromString(localStorageDensity);
+  if (densityFromLocalStorage !== 'invalid') {
+    return densityFromLocalStorage;
+  }
+  persistDefaultDensity();
+  return defaultValue;
+};
 const getFinalSearch = _ref => {
   let {
     search,
@@ -1604,6 +3181,7 @@ const getFinalSearch = _ref => {
     paginationModel,
     columnsVisibilityModel,
     pinnedColumnsModel,
+    density,
     columns
   } = _ref;
   const filterModelSearch = getSearchParamsFromFilterModel(filterModel);
@@ -1611,6 +3189,7 @@ const getFinalSearch = _ref => {
   const paginationModelSearch = getSearchParamsFromPagination(paginationModel);
   const columnVisibilityModelSearch = getSearchParamsFromColumnVisibility(columnsVisibilityModel, columns);
   const pinnedColumnsModelSearch = getSearchParamsFromPinnedColumns(pinnedColumnsModel);
+  const densitySearch = getSearchParamsFromDensity(density);
   const tabSearch = getSearchParamsFromTab(search);
   const searchParams = new URLSearchParams();
   for (const [key, value] of new URLSearchParams(search)) {
@@ -1625,7 +3204,7 @@ const getFinalSearch = _ref => {
     // Encode array as JSON string to preserve all values in one param
     searchParams.set('_quickFilterValues', encodeURIComponent(JSON.stringify(filterModel.quickFilterValues)));
   }
-  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch]);
+  return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch, ...densitySearch]);
 };
 /** Return the state of the table given the URL and the local storage state */
 const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, initialState, localStorage) => {
@@ -1643,13 +3222,16 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     localStorageColumnsVisibility,
     setLocalStorageColumnsVisibility,
     localStoragePinnedColumns,
-    setLocalStoragePinnedColumns
+    setLocalStoragePinnedColumns,
+    localStorageDensity,
+    setLocalStorageDensity
   } = localStorage;
   const filterModel = getFilterModel(decodedSearch, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
   const sortModel = getSortModel(decodedSearch, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
   const paginationModel = getPaginationModel(decodedSearch, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
   const columnVisibilityModel = getColumnsVisibility(decodedSearch, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
   const pinnedColumnsModel = getPinnedColumns(decodedSearch, columns, localStoragePinnedColumns, setLocalStoragePinnedColumns, initialState, isNewVersion);
+  const density = getDensityModel(decodedSearch, localStorageDensity, setLocalStorageDensity, initialState, isNewVersion);
   const finalSearch = getFinalSearch({
     localStorageVersion,
     search: decodedSearch,
@@ -1658,6 +3240,7 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     paginationModel,
     columnsVisibilityModel: columnVisibilityModel,
     pinnedColumnsModel,
+    density,
     columns
   });
   const internalSearchString = urlSearchParamsToString(finalSearch);
@@ -1674,6 +3257,7 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     paginationModel,
     columnVisibilityModel,
     pinnedColumnsModel,
+    density,
     pendingSearch
   };
 };
@@ -1683,7 +3267,8 @@ const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns)
     sortModel,
     paginationModel,
     columnsModel: columnsVisibilityModel,
-    pinnedColumnsModel
+    pinnedColumnsModel,
+    density
   } = _ref2;
   // Convert from display format to internal format if needed
   const decodedSearch = getDecodedSearchFromUrl(search, columns);
@@ -1695,6 +3280,7 @@ const updateUrl = (_ref2, search, localStorageVersion, historyReplace, columns)
     paginationModel,
     columnsVisibilityModel,
     pinnedColumnsModel,
+    density,
     columns
   });
   const internalSearchString = urlSearchParamsToString(newSearch);
@@ -1818,6 +3404,11 @@ const useTableStates = (id, version) => {
     version,
     category: DIMENSION_MODEL_KEY
   }));
+  const [densityModel, setDensityModel] = useFetchState('', buildStorageKey({
+    id,
+    version,
+    category: DENSITY_MODEL_KEY
+  }));
   return {
     paginationModel,
     setPaginationModel,
@@ -1830,30 +3421,14 @@ const useTableStates = (id, version) => {
     pinnedColumns,
     setPinnedColumns,
     dimensionModel,
-    setDimensionModel
+    setDimensionModel,
+    densityModel,
+    setDensityModel
   };
 };
 
-/**
- * Deep-equal comparison for plain objects / arrays.
- * Used to stabilise parsed model references so that MUI v8 does not
- * reset pagination on every render.
- */
-function isDeepEqual(a, b) {
-  if (a === b) return true;
-  if (a == null || b == null) return false;
-  if (typeof a !== typeof b) return false;
-  if (typeof a !== 'object') return false;
-  const aObj = a;
-  const bObj = b;
-  const aKeys = Object.keys(aObj);
-  const bKeys = Object.keys(bObj);
-  if (aKeys.length !== bKeys.length) return false;
-  return aKeys.every(key => isDeepEqual(aObj[key], bObj[key]));
-}
 const useStatefulTable = props => {
   const {
-    // density = 'standard',
     apiRef,
     initialState,
     columns: propsColumns,
@@ -1887,7 +3462,9 @@ const useStatefulTable = props => {
     pinnedColumns,
     setPinnedColumns,
     dimensionModel,
-    setDimensionModel
+    setDimensionModel,
+    densityModel,
+    setDensityModel
   } = useTableStates(id, localStorageVersion);
 
   // clearing up old version keys, triggering only on first render
@@ -1907,6 +3484,7 @@ const useStatefulTable = props => {
     paginationModel: paginationModelParsed,
     columnVisibilityModel: visibilityModel,
     pinnedColumnsModel,
+    density: densityParsed,
     pendingSearch
   } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, initialState, {
     localStorageFilters,
@@ -1918,7 +3496,9 @@ const useStatefulTable = props => {
     localStorageColumnsVisibility: visibilityModelLocalStorage,
     setLocalStorageColumnsVisibility: setVisibilityModelLocalStorage,
     localStoragePinnedColumns: pinnedColumns,
-    setLocalStoragePinnedColumns: setPinnedColumns
+    setLocalStoragePinnedColumns: setPinnedColumns,
+    localStorageDensity: densityModel,
+    setLocalStorageDensity: setDensityModel
   });
 
   // Sync URL in an effect rather than during render to comply with React rules
@@ -1927,29 +3507,6 @@ const useStatefulTable = props => {
       historyReplace(pendingSearch);
     }
   }, [pendingSearch, historyReplace]);
-
-  // Stabilise parsed model references to prevent MUI v8 from resetting
-  // pagination on every render due to new object identity.
-  const filterParsedRef = useRef(filterParsed);
-  if (!isDeepEqual(filterParsedRef.current, filterParsed)) {
-    filterParsedRef.current = filterParsed;
-  }
-  const sortModelParsedRef = useRef(sortModelParsed);
-  if (!isDeepEqual(sortModelParsedRef.current, sortModelParsed)) {
-    sortModelParsedRef.current = sortModelParsed;
-  }
-  const paginationModelParsedRef = useRef(paginationModelParsed);
-  if (!isDeepEqual(paginationModelParsedRef.current, paginationModelParsed)) {
-    paginationModelParsedRef.current = paginationModelParsed;
-  }
-  const visibilityModelRef = useRef(visibilityModel);
-  if (!isDeepEqual(visibilityModelRef.current, visibilityModel)) {
-    visibilityModelRef.current = visibilityModel;
-  }
-  const pinnedColumnsModelRef = useRef(pinnedColumnsModel);
-  if (!isDeepEqual(pinnedColumnsModelRef.current, pinnedColumnsModel)) {
-    pinnedColumnsModelRef.current = pinnedColumnsModel;
-  }
   const columns = useMemo(() => propsColumns.map(column => {
     return _objectSpread2(_objectSpread2({}, column), {}, {
       width: dimensionModel[column.field] || column.width || 100
@@ -1958,83 +3515,116 @@ const useStatefulTable = props => {
   if (apiRef.current) {
     /** Add resetPage method to apiRef. */
     apiRef.current.resetPage = () => {
-      var _apiRef$current;
-      (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPage(0);
+      apiRef.current.setPage(0);
     };
   }
+
+  // Subscribe to density changes via stateChange event
+  // (MUI v7 supports onDensityChange, but stateChange works and avoids a larger refactor)
+  useEffect(() => {
+    const api = apiRef.current;
+    if (!(api !== null && api !== void 0 && api.subscribeEvent)) return;
+    let prevDensity = densityParsed;
+    const unsub = api.subscribeEvent('stateChange', () => {
+      const currentDensity = api.state.density;
+      if (currentDensity !== prevDensity) {
+        prevDensity = currentDensity;
+        updateUrl({
+          filterModel: filterParsed,
+          sortModel: sortModelParsed,
+          paginationModel: paginationModelParsed,
+          columnsModel: api.state.columns.columnVisibilityModel,
+          pinnedColumnsModel: pinnedColumnsModel,
+          density: currentDensity
+        }, search, localStorageVersion, historyReplace, columns);
+      }
+    });
+    return unsub;
+  }, [apiRef, densityParsed, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, search, localStorageVersion, historyReplace, columns]);
   return {
     apiRef,
     columns,
+    density: densityParsed,
+    onDensityChange: newDensity => {
+      updateUrl({
+        filterModel: filterParsed,
+        sortModel: sortModelParsed,
+        paginationModel: paginationModelParsed,
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel,
+        density: newDensity
+      }, search, localStorageVersion, historyReplace, columns);
+    },
     onFilterModelChange: (model, details) => {
-      var _apiRef$current$state, _apiRef$current3;
       const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
         items: model.items.map(item => {
-          var _apiRef$current2;
-          const column = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.getColumn(item.field);
-          item.type = (column === null || column === void 0 ? void 0 : column.type) || 'string';
+          const column = apiRef.current.getColumn(item.field);
+          item.type = column.type || 'string';
           return item;
         }),
         quickFilterValues: model.quickFilterValues || []
       });
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
       updateUrl({
         filterModel: filterModel,
         sortModel: sortModelParsed,
         paginationModel: paginationModelParsed,
-        columnsModel: (_apiRef$current$state = (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
-        pinnedColumnsModel: pinnedColumnsModel
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel,
+        density: densityParsed
       }, search, localStorageVersion, historyReplace, columns);
-      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
     },
-    filterModel: filterParsedRef.current,
+    filterModel: filterParsed,
     onSortModelChange: (model, details) => {
-      var _apiRef$current$state2, _apiRef$current4;
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
       updateUrl({
         filterModel: filterParsed,
         sortModel: model,
         paginationModel: paginationModelParsed,
-        columnsModel: (_apiRef$current$state2 = (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.state.columns.columnVisibilityModel) !== null && _apiRef$current$state2 !== void 0 ? _apiRef$current$state2 : {},
-        pinnedColumnsModel: pinnedColumnsModel
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel,
+        density: densityParsed
       }, search, localStorageVersion, historyReplace, columns);
-      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
     },
-    sortModel: sortModelParsedRef.current,
+    sortModel: sortModelParsed,
     onPinnedColumnsChange: (pinnedColumns, details) => {
-      var _apiRef$current$state3, _apiRef$current5;
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
         paginationModel: paginationModelParsed,
-        columnsModel: (_apiRef$current$state3 = (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.state.columns.columnVisibilityModel) !== null && _apiRef$current$state3 !== void 0 ? _apiRef$current$state3 : {},
-        pinnedColumnsModel: pinnedColumns
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumns,
+        density: densityParsed
       }, search, localStorageVersion, historyReplace, columns);
-      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
     },
-    pinnedColumns: pinnedColumnsModelRef.current,
-    paginationModel: paginationModelParsedRef.current,
+    pinnedColumns: pinnedColumnsModel,
+    paginationModel: paginationModelParsed,
     onPaginationModelChange: (model, details) => {
-      var _apiRef$current$state4, _apiRef$current6;
       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: paginationModel,
-        columnsModel: (_apiRef$current$state4 = (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.state.columns.columnVisibilityModel) !== null && _apiRef$current$state4 !== void 0 ? _apiRef$current$state4 : {},
-        pinnedColumnsModel: pinnedColumnsModel
+        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        pinnedColumnsModel: pinnedColumnsModel,
+        density: densityParsed
       }, search, localStorageVersion, historyReplace, columns);
-      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
     },
-    columnVisibilityModel: visibilityModelRef.current,
+    columnVisibilityModel: visibilityModel,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
         paginationModel: paginationModelParsed,
         columnsModel: columnsVisibilityModel,
-        pinnedColumnsModel: pinnedColumnsModel
+        pinnedColumnsModel: pinnedColumnsModel,
+        density: densityParsed
       }, search, localStorageVersion, historyReplace, columns);
-      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
     },
     onColumnWidthChange: (params, event, details) => {
       propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
@@ -2102,7 +3692,6 @@ const CLASSNAME = 'redsift-datagrid';
  */
 
 const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _initialState$density, _forwardedProps$densi;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
@@ -2143,9 +3732,10 @@ 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 = 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 {
@@ -2170,8 +3760,10 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const {
     columnVisibilityModel,
+    density: controlledDensity,
     filterModel,
     onColumnVisibilityModelChange,
+    onDensityChange,
     onFilterModelChange,
     onPaginationModelChange,
     onPinnedColumnsChange,
@@ -2194,18 +3786,15 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     localStorageVersion,
     previousLocalStorageVersions
   });
-  const [rowSelectionModel, setRowSelectionModel] = useState(() => normalizeRowSelectionModel(propsRowSelectionModel));
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
   useEffect(() => {
-    setRowSelectionModel(normalizeRowSelectionModel(propsRowSelectionModel));
+    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
   }, [propsRowSelectionModel]);
   const onRowSelectionModelChange = (selectionModel, details) => {
-    if (propsOnRowSelectionModelChange) {
-      propsOnRowSelectionModelChange(selectionModel, details);
-    } else {
-      setRowSelectionModel(selectionModel);
-    }
+    setRowSelectionModel(selectionModel);
+    propsOnRowSelectionModelChange === null || propsOnRowSelectionModelChange === void 0 ? void 0 : propsOnRowSelectionModelChange(selectionModel, details);
   };
-  const selectionStatus = useRef({
+  const selectionStatusRef = useRef({
     type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectedRowsInPage: 0,
@@ -2220,34 +3809,31 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
   const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(paginationMode != 'server');
 
-  // Track when the grid API is ready to ensure top pagination renders correctly
-  const [gridReady, setGridReady] = useState(false);
-
-  // Force re-render when the grid API becomes ready (for top pagination)
-  useEffect(() => {
-    if (apiRef.current && !gridReady) {
-      setGridReady(true);
-    }
-  });
-
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatus, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
-  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
+  }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize, rows]);
   if (!Array.isArray(rows)) {
     return null;
   }
 
-  // Recalculate selection status for client-side pagination when navigating pages.
-  // The ref is updated in onRowSelectionModelChange but that callback does not fire
-  // on page changes, so the status can become stale (e.g. showing "all rows on this
-  // page are selected" on a page where none are actually selected).
-  if (pagination && paginationMode !== 'server' && getSelectionCount(rowSelectionModel) > 0) {
+  // Compute selection status synchronously during render for client-side pagination.
+  // This value is passed directly to ToolbarWrapper and ControlledPagination, so slots
+  // receive the fresh value in the same render cycle — no extra re-render needed.
+  // The ref is kept in sync for the onRowSelectionModelChange callback's deselect logic.
+  let selectionStatus = selectionStatusRef.current;
+  if (pagination && paginationMode !== 'server' && Array.isArray(rowSelectionModel) && rowSelectionModel.length > 0) {
     try {
-      const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref => {
+      // Use manual page slicing with our React state's paginationModel instead of
+      // gridPaginatedVisibleSortedGridRow*Selector(apiRef). In MUI v7, the apiRef's
+      // internal pagination state can lag behind the React state after a page change,
+      // causing the selection status to be one page behind.
+      const pageStart = paginationModel.page * paginationModel.pageSize;
+      const pageEnd = pageStart + paginationModel.pageSize;
+      const selectableRowsInPage = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).slice(pageStart, pageEnd).filter(_ref => {
         let {
           model
         } = _ref;
@@ -2259,7 +3845,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           id
         } = _ref2;
         return id;
-      }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+      }) : gridFilteredSortedRowIdsSelector(apiRef).slice(pageStart, pageEnd);
       const numberOfSelectableRowsInPage = selectableRowsInPage.length;
       const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
         let {
@@ -2275,25 +3861,25 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         return id;
       }) : gridFilteredSortedRowIdsSelector(apiRef);
       const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-      const numberOfSelectedRows = getSelectionCount(rowSelectionModel);
-      const selectedOnCurrentPage = selectableRowsInPage.filter(id => isRowSelected(rowSelectionModel, id));
+      const numberOfSelectedRows = rowSelectionModel.length;
+      const selectedOnCurrentPage = selectableRowsInPage.filter(id => rowSelectionModel.includes(id));
       if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-        selectionStatus.current = {
+        selectionStatus = {
           type: 'table',
           numberOfSelectedRows
         };
       } else if (selectedOnCurrentPage.length === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage > 0 && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-        selectionStatus.current = {
+        selectionStatus = {
           type: 'page',
           numberOfSelectedRows: selectedOnCurrentPage.length
         };
       } else if (numberOfSelectedRows > 0) {
-        selectionStatus.current = {
+        selectionStatus = {
           type: 'other',
           numberOfSelectedRows
         };
       } else {
-        selectionStatus.current = {
+        selectionStatus = {
           type: 'none',
           numberOfSelectedRows: 0
         };
@@ -2301,7 +3887,13 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     } catch {
       // apiRef may not be initialized on first render
     }
+  } else if (pagination && paginationMode !== 'server') {
+    selectionStatus = {
+      type: 'none',
+      numberOfSelectedRows: 0
+    };
   }
+  selectionStatusRef.current = selectionStatus;
   const muiTheme = useMemo(() => createTheme({
     palette: {
       mode: theme,
@@ -2324,33 +3916,14 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, pagination && ['top', 'both'].includes(paginationPlacement) && gridReady ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
-    displaySelection: true,
-    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
-    displayPagination: ['top', 'both'].includes(paginationPlacement),
-    selectionStatus: selectionStatus.current,
-    paginationModel: paginationModel,
-    onPaginationModelChange: onPaginationModelChange,
-    pageSizeOptions: pageSizeOptions,
-    paginationProps: paginationProps,
-    rowCount: rowCount
-  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
-    displaySelection: true,
-    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
-    displayPagination: ['top', 'both'].includes(paginationPlacement),
-    selectionStatus: selectionStatus.current,
-    apiRef: apiRef,
-    isRowSelectable: isRowSelectable,
-    paginationModel: paginationModel,
-    onPaginationModelChange: onPaginationModelChange,
-    pageSizeOptions: pageSizeOptions,
-    paginationProps: paginationProps
-  }) : null, /*#__PURE__*/React__default.createElement(DataGridPremium, _extends({}, forwardedProps, {
+  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
     apiRef: apiRef,
     columns: columns,
     columnVisibilityModel: columnVisibilityModel,
+    density: controlledDensity,
     filterModel: filterModel,
     onColumnVisibilityModelChange: onColumnVisibilityModelChange,
+    onDensityChange: onDensityChange,
     onFilterModelChange: onFilterModelChange,
     onPaginationModelChange: onPaginationModelChange,
     onPinnedColumnsChange: onPinnedColumnsChange,
@@ -2360,9 +3933,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     sortModel: sortModel,
     pageSizeOptions: pageSizeOptions,
     onColumnWidthChange: onColumnWidthChange,
-    initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
-      density: (_initialState$density = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _initialState$density !== void 0 ? _initialState$density : 'standard'
-    }),
+    initialState: initialState,
     isRowSelectable: isRowSelectable,
     pagination: pagination,
     paginationMode: paginationMode,
@@ -2371,12 +3942,11 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
-    showToolbar: !hideToolbar,
-    density: (_forwardedProps$densi = forwardedProps.density) !== null && _forwardedProps$densi !== void 0 ? _forwardedProps$densi : 'standard',
     slots: _objectSpread2(_objectSpread2({
       baseButton: BaseButton,
       baseCheckbox: BaseCheckbox,
-      baseIconButton: BaseIconButton,
+      // baseTextField,
+      basePopper: BasePopper,
       columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "columnFilteredIcon"
       })),
@@ -2411,12 +3981,29 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         displayName: "openFilterButtonIcon"
       }))
     }, 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,
+          selectionStatus: selectionStatus,
           paginationModel: paginationModel,
           onPaginationModelChange: onPaginationModelChange,
           pageSizeOptions: pageSizeOptions,
@@ -2426,7 +4013,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           displaySelection: false,
           displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
           displayPagination: ['bottom', 'both'].includes(paginationPlacement),
-          selectionStatus: selectionStatus.current,
+          selectionStatus: selectionStatus,
           apiRef: apiRef,
           isRowSelectable: isRowSelectable,
           paginationModel: paginationModel,
@@ -2440,7 +4027,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rowSelectionModel: rowSelectionModel,
     onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination && paginationMode != 'server') {
-        const selectableRowsInPage = isRowSelectable ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref5 => {
+        const cbPageStart = paginationModel.page * paginationModel.pageSize;
+        const cbPageEnd = cbPageStart + paginationModel.pageSize;
+        const selectableRowsInPage = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).slice(cbPageStart, cbPageEnd).filter(_ref5 => {
           let {
             model
           } = _ref5;
@@ -2452,7 +4041,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
             id
           } = _ref6;
           return id;
-        }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+        }) : gridFilteredSortedRowIdsSelector(apiRef).slice(cbPageStart, cbPageEnd);
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
         const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
           let {
@@ -2468,30 +4057,29 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-        const numberOfSelectedRows = getSelectionCount(newSelectionModel);
-        if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatus.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
+        const numberOfSelectedRows = newSelectionModel.length;
+        if (selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatusRef.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
           setTimeout(() => {
-            var _apiRef$current;
-            (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.selectRows([], true, true);
+            apiRef.current.selectRows([], true, true);
           }, 0);
         }
         if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-          selectionStatus.current = {
+          selectionStatusRef.current = {
             type: 'page',
             numberOfSelectedRows
           };
         } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
-          selectionStatus.current = {
+          selectionStatusRef.current = {
             type: 'table',
             numberOfSelectedRows
           };
         } else if (numberOfSelectedRows > 0) {
-          selectionStatus.current = {
+          selectionStatusRef.current = {
             type: 'other',
             numberOfSelectedRows
           };
         } else {
-          selectionStatus.current = {
+          selectionStatusRef.current = {
             type: 'none',
             numberOfSelectedRows
           };
@@ -2514,5 +4102,5 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
 StatefulDataGrid.className = CLASSNAME;
 StatefulDataGrid.displayName = COMPONENT_NAME;
 
-export { areSearchStringsEqual as $, ARRAY_IS_EMPTY as A, IS as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, IS_NOT as F, getGridStringOperators as G, HAS_WITH_SELECT as H, IS_ANY_OF as I, getGridStringArrayOperators as J, getGridStringArrayOperatorsWithSelect as K, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as L, FILTER_MODEL_KEY as M, SORT_MODEL_KEY as N, PINNED_COLUMNS as O, PAGINATION_MODEL_KEY as P, DIMENSION_MODEL_KEY as Q, FILTER_SEARCH_KEY as R, STARTS_WITH_ANY_OF as S, CATEGORIES as T, buildStorageKey as U, VISIBILITY_MODEL_KEY as V, clearPreviousVersionStorage as W, convertToDisplayFormat as X, convertFromDisplayFormat as Y, getDecodedSearchFromUrl as Z, buildQueryParamsString as _, DOES_NOT_EQUAL as a, decodeValue as a0, encodeValue as a1, urlSearchParamsToString as a2, numberOperatorEncoder as a3, numberOperatorDecoder as a4, isOperatorValueValid as a5, isValueValid as a6, getFilterModelFromString as a7, getSearchParamsFromFilterModel as a8, getSortingFromString as a9, getSearchParamsFromSorting as aa, getPaginationFromString as ab, getSearchParamsFromPagination as ac, getColumnVisibilityFromString as ad, getSearchParamsFromColumnVisibility as ae, getPinnedColumnsFromString as af, getSearchParamsFromPinnedColumns as ag, getSearchParamsFromTab as ah, getFinalSearch as ai, getModelsParsedOrUpdateLocalStorage as aj, updateUrl as ak, areFilterModelsEquivalent as al, StatefulDataGrid as am, DOES_NOT_START_WITH as b, DOES_NOT_END_WITH as c, IS_NOT_ANY_OF as d, DOES_NOT_CONTAIN_ANY_OF as e, DOES_NOT_START_WITH_ANY_OF as f, DOES_NOT_END_WITH_ANY_OF as g, IS_BETWEEN as h, IS_WITH_SELECT as i, IS_NOT_WITH_SELECT as j, IS_ANY_OF_WITH_SELECT as k, IS_NOT_ANY_OF_WITH_SELECT as l, ARRAY_IS_NOT_EMPTY as m, DOES_NOT_HAVE_WITH_SELECT as n, operatorList as o, HAS_ANY_OF_WITH_SELECT as p, HAS_ALL_OF_WITH_SELECT as q, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as r, HAS_ONLY_WITH_SELECT as s, HAS as t, DOES_NOT_HAVE as u, HAS_ANY_OF as v, HAS_ALL_OF as w, DOES_NOT_HAVE_ANY_OF as x, HAS_ONLY as y, getGridNumericOperators as z };
+export { convertFromDisplayFormat as $, ARRAY_IS_EMPTY as A, Box$1 as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, IS as F, IS_NOT as G, HAS_WITH_SELECT as H, IS_ANY_OF as I, getGridStringOperators as J, getGridStringArrayOperators as K, getGridStringArrayOperatorsWithSelect as L, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as M, FILTER_MODEL_KEY as N, SORT_MODEL_KEY as O, PAGINATION_MODEL_KEY as P, PINNED_COLUMNS as Q, DIMENSION_MODEL_KEY as R, STARTS_WITH_ANY_OF as S, TextField$1 as T, FILTER_SEARCH_KEY as U, VISIBILITY_MODEL_KEY as V, DENSITY_MODEL_KEY as W, CATEGORIES as X, buildStorageKey as Y, clearPreviousVersionStorage as Z, convertToDisplayFormat as _, DOES_NOT_EQUAL as a, getDecodedSearchFromUrl as a0, buildQueryParamsString as a1, areSearchStringsEqual as a2, decodeValue as a3, encodeValue as a4, urlSearchParamsToString as a5, numberOperatorEncoder as a6, numberOperatorDecoder as a7, isOperatorValueValid as a8, isValueValid as a9, getFilterModelFromString as aa, getSearchParamsFromFilterModel as ab, getSortingFromString as ac, getSearchParamsFromSorting as ad, getPaginationFromString as ae, getSearchParamsFromPagination as af, getColumnVisibilityFromString as ag, getSearchParamsFromColumnVisibility as ah, getPinnedColumnsFromString as ai, getSearchParamsFromPinnedColumns as aj, getSearchParamsFromTab as ak, getDensityFromString as al, getSearchParamsFromDensity as am, getFinalSearch as an, getModelsParsedOrUpdateLocalStorage as ao, updateUrl as ap, areFilterModelsEquivalent as aq, StatefulDataGrid as ar, DOES_NOT_START_WITH as b, DOES_NOT_END_WITH as c, IS_NOT_ANY_OF as d, DOES_NOT_CONTAIN_ANY_OF as e, DOES_NOT_START_WITH_ANY_OF as f, DOES_NOT_END_WITH_ANY_OF as g, IS_BETWEEN as h, IS_WITH_SELECT as i, IS_NOT_WITH_SELECT as j, IS_ANY_OF_WITH_SELECT as k, IS_NOT_ANY_OF_WITH_SELECT as l, ARRAY_IS_NOT_EMPTY as m, DOES_NOT_HAVE_WITH_SELECT as n, operatorList as o, HAS_ANY_OF_WITH_SELECT as p, HAS_ALL_OF_WITH_SELECT as q, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as r, HAS_ONLY_WITH_SELECT as s, HAS as t, DOES_NOT_HAVE as u, HAS_ANY_OF as v, HAS_ALL_OF as w, DOES_NOT_HAVE_ANY_OF as x, HAS_ONLY as y, getGridNumericOperators as z };
 //# sourceMappingURL=StatefulDataGrid2.js.map