@redsift/table 11.10.0-muiv5 → 11.10.0-muiv7

package/_internal/useControlledDatagridState.js

@@ -1,95 +1,40 @@
-import { _ as _objectWithoutPropertiesLoose, a as _extends, d as defaultSxConfig, i as isPlainObject, s as styled, b as styleFunctionSx, u as useTheme$1, c as clsx, P as PropTypes, e as exactProp, f as useTheme$2, T as THEME_ID, g as createTheme, C as ClassNameGenerator, h as generateUtilityClasses, j as generateUtilityClass, k as styled$1, l as useThemeProps, m as capitalize, n as composeClasses, r as rootShouldForwardProp, o as refType } from './Portal.js';
 import * as React from 'react';
 import { useState, useEffect } from 'react';
+import { P as PropTypes, R as RtlProvider, O as DefaultPropsProvider, T as THEME_ID, b as createTheme, Q as createTypography, a as styleFunctionSx } from './Portal.js';
 import { j as jsxRuntimeExports } from './jsx-runtime.js';
+import { k as useTheme$1, G as GlobalStyles, l as GlobalStyles$1 } from './ControlledPagination.js';
 import { ThemeContext as ThemeContext$2 } from '@emotion/react';
-import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
-import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import { Icon } from '@redsift/design-system';
-import { mdiSync } from '@redsift/icons';
-import { u as useFormControl, f as formControlState, i as isAdornedStart, a as isFilled, F as FormControlContext, b as useId, c as Select, I as Input, d as FilledInput, O as OutlinedInput } from './ControlledPagination.js';
-import styled$2, { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
-/* eslint-disable */
-// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var ponyfillGlobal = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
+/**
+ * A version of `React.useLayoutEffect` that does not show a warning when server-side rendering.
+ * This is useful for effects that are only needed for client-side rendering but not for SSR.
+ *
+ * Before you use this hook, make sure to read https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * and confirm it doesn't apply to your use-case.
+ */
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useEnhancedEffect$1 = useEnhancedEffect;
 
-function isMuiElement(element, muiNames) {
-  return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
-}
+// This module is based on https://github.com/airbnb/prop-types-exact repository.
+// However, in order to reduce the number of dependencies and to remove some extra safe checks
+// the module was forked.
 
-const _excluded$7 = ["sx"];
-const splitProps = props => {
-  var _props$theme$unstable, _props$theme;
-  const result = {
-    systemProps: {},
-    otherProps: {}
-  };
-  const config = (_props$theme$unstable = props == null ? void 0 : (_props$theme = props.theme) == null ? void 0 : _props$theme.unstable_sxConfig) != null ? _props$theme$unstable : defaultSxConfig;
-  Object.keys(props).forEach(prop => {
-    if (config[prop]) {
-      result.systemProps[prop] = props[prop];
-    } else {
-      result.otherProps[prop] = props[prop];
-    }
-  });
-  return result;
-};
-function extendSxProp(props) {
-  const {
-      sx: inSx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
-  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 _extends({}, systemProps, result);
-    };
-  } else {
-    finalSx = _extends({}, systemProps, inSx);
+const specialProperty$1 = 'exact-prop: \u200b';
+function exactProp$1(propTypes) {
+  if (process.env.NODE_ENV === 'production') {
+    return propTypes;
   }
-  return _extends({}, otherProps, {
-    sx: finalSx
-  });
-}
-
-const _excluded$6 = ["className", "component"];
-function createBox(options = {}) {
-  const {
-    themeId,
-    defaultTheme,
-    defaultClassName = 'MuiBox-root',
-    generateClassName
-  } = options;
-  const BoxRoot = styled('div', {
-    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
-  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
-    const theme = useTheme$1(defaultTheme);
-    const _extendSxProp = extendSxProp(inProps),
-      {
-        className,
-        component = 'div'
-      } = _extendSxProp,
-      other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded$6);
-    return /*#__PURE__*/jsxRuntimeExports.jsx(BoxRoot, _extends({
-      as: component,
-      ref: ref,
-      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme
-    }, other));
-  });
-  return Box;
+  return {
+    ...propTypes,
+    [specialProperty$1]: props => {
+      const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
+      if (unsupportedProps.length > 0) {
+        return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
+      }
+      return null;
+    }
+  };
 }
 
 const ThemeContext = /*#__PURE__*/React.createContext(null);
@@ -101,7 +46,8 @@ var ThemeContext$1 = ThemeContext;
 function useTheme() {
   const theme = React.useContext(ThemeContext$1);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+    // TODO: uncomment once we enable eslint-plugin-react-compiler eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- It's not required to run React.useDebugValue in production
     React.useDebugValue(theme);
   }
   return theme;
@@ -143,7 +89,9 @@ function ThemeProvider$2(props) {
     }
   }
   const theme = React.useMemo(() => {
-    const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);
+    const output = outerTheme === null ? {
+      ...localTheme
+    } : mergeOuterLocalTheme(outerTheme, localTheme);
     if (output != null) {
       output[nested] = outerTheme !== null;
     }
@@ -165,7 +113,113 @@ process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = {
   theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
 } : void 0;
 if (process.env.NODE_ENV !== 'production') {
-  process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp(ThemeProvider$2.propTypes) : void 0;
+  process.env.NODE_ENV !== "production" ? ThemeProvider$2.propTypes = exactProp$1(ThemeProvider$2.propTypes) : void 0;
+}
+
+// This module is based on https://github.com/airbnb/prop-types-exact repository.
+// However, in order to reduce the number of dependencies and to remove some extra safe checks
+// the module was forked.
+
+const specialProperty = 'exact-prop: \u200b';
+function exactProp(propTypes) {
+  if (process.env.NODE_ENV === 'production') {
+    return propTypes;
+  }
+  return {
+    ...propTypes,
+    [specialProperty]: props => {
+      const unsupportedProps = Object.keys(props).filter(prop => !propTypes.hasOwnProperty(prop));
+      if (unsupportedProps.length > 0) {
+        return new Error(`The following props are not supported: ${unsupportedProps.map(prop => `\`${prop}\``).join(', ')}. Please remove them.`);
+      }
+      return null;
+    }
+  };
+}
+
+let globalId = 0;
+
+// TODO React 17: Remove `useGlobalId` once React 17 support is removed
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React.useState(idOverride);
+  const id = idOverride || defaultId;
+  React.useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseId = safeReact.useId;
+
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+function useId(idOverride) {
+  // React.useId() is only available from React 17.0.0.
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? reactId;
+  }
+
+  // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+  return useGlobalId(idOverride);
+}
+
+function useLayerOrder(theme) {
+  const upperTheme = useTheme$1();
+  const id = useId() || '';
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  useEnhancedEffect$1(() => {
+    const head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && firstChild.hasAttribute?.('data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      head.querySelector(`style[data-mui-layer-order="${id}"]`)?.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles, {
+    styles: layerOrder
+  });
 }
 
 const EMPTY_THEME = {};
@@ -174,9 +228,10 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
     const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
     if (typeof localTheme === 'function') {
       const mergedTheme = localTheme(resolvedTheme);
-      const result = themeId ? _extends({}, upperTheme, {
+      const result = themeId ? {
+        ...upperTheme,
         [themeId]: mergedTheme
-      }) : mergedTheme;
+      } : mergedTheme;
       // must return a function for the private theme to NOT merge with the upper theme.
       // see the test case "use provided theme from a callback" in ThemeProvider.test.js
       if (isPrivate) {
@@ -184,9 +239,13 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
       }
       return result;
     }
-    return themeId ? _extends({}, upperTheme, {
+    return themeId ? {
+      ...upperTheme,
       [themeId]: localTheme
-    }) : _extends({}, upperTheme, localTheme);
+    } : {
+      ...upperTheme,
+      ...localTheme
+    };
   }, [themeId, upperTheme, localTheme, isPrivate]);
 }
 
@@ -203,7 +262,7 @@ function ThemeProvider$1(props) {
     theme: localTheme,
     themeId
   } = props;
-  const upperTheme = useTheme$2(EMPTY_THEME);
+  const upperTheme = useTheme$1(EMPTY_THEME);
   const upperPrivateTheme = useTheme() || EMPTY_THEME;
   if (process.env.NODE_ENV !== 'production') {
     if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
@@ -212,19 +271,27 @@ function ThemeProvider$1(props) {
   }
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
+  const layerOrder = useLayerOrder(engineTheme);
   return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$2, {
     theme: privateTheme,
     children: /*#__PURE__*/jsxRuntimeExports.jsx(ThemeContext$2.Provider, {
       value: engineTheme,
-      children: children
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(RtlProvider, {
+        value: rtlValue,
+        children: /*#__PURE__*/jsxRuntimeExports.jsxs(DefaultPropsProvider, {
+          value: themeId ? engineTheme[themeId].components : engineTheme.components,
+          children: [layerOrder, children]
+        })
+      })
     })
   });
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * Your component tree.
    */
@@ -235,1772 +302,794 @@ process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes /* remove-prop
   theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   /**
    * The design system's unique id for getting the corresponded theme when there are multiple design systems.
-   */
-  themeId: PropTypes.string
-} : void 0;
-if (process.env.NODE_ENV !== 'production') {
-  process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
-}
-
-const _excluded$5 = ["theme"];
-function ThemeProvider(_ref) {
-  let {
-      theme: themeInput
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends({}, props, {
-    themeId: scopedTheme ? THEME_ID : undefined,
-    theme: scopedTheme || themeInput
-  }));
-}
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
-  /**
-   * Your component tree.
-   */
-  children: PropTypes.node,
-  /**
-   * A theme object. You can provide a function to extend the outer theme.
-   */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
-} : void 0;
-
-const defaultTheme = createTheme();
-const Box = createBox({
-  themeId: THEME_ID,
-  defaultTheme,
-  defaultClassName: 'MuiBox-root',
-  generateClassName: ClassNameGenerator.generate
-});
-process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-var Box$1 = Box;
-
-function getFormLabelUtilityClasses(slot) {
-  return generateUtilityClass('MuiFormLabel', slot);
-}
-const formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
-var formLabelClasses$1 = formLabelClasses;
-
-const _excluded$4 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
-const useUtilityClasses$4 = ownerState => {
-  const {
-    classes,
-    color,
-    focused,
-    disabled,
-    error,
-    filled,
-    required
-  } = ownerState;
-  const slots = {
-    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'],
-    asterisk: ['asterisk', error && 'error']
-  };
-  return composeClasses(slots, getFormLabelUtilityClasses, classes);
-};
-const FormLabelRoot = styled$1('label', {
-  name: 'MuiFormLabel',
-  slot: 'Root',
-  overridesResolver: ({
-    ownerState
-  }, styles) => {
-    return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
-  }
-})(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.body1, {
-  lineHeight: '1.4375em',
-  padding: 0,
-  position: 'relative',
-  [`&.${formLabelClasses$1.focused}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${formLabelClasses$1.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  },
-  [`&.${formLabelClasses$1.error}`]: {
-    color: (theme.vars || theme).palette.error.main
-  }
-}));
-const AsteriskComponent = styled$1('span', {
-  name: 'MuiFormLabel',
-  slot: 'Asterisk',
-  overridesResolver: (props, styles) => styles.asterisk
-})(({
-  theme
-}) => ({
-  [`&.${formLabelClasses$1.error}`]: {
-    color: (theme.vars || theme).palette.error.main
-  }
-}));
-const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiFormLabel'
-  });
-  const {
-      children,
-      className,
-      component = 'label'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$4);
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
-    props,
-    muiFormControl,
-    states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
-  });
-  const ownerState = _extends({}, props, {
-    color: fcs.color || 'primary',
-    component,
-    disabled: fcs.disabled,
-    error: fcs.error,
-    filled: fcs.filled,
-    focused: fcs.focused,
-    required: fcs.required
-  });
-  const classes = useUtilityClasses$4(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(FormLabelRoot, _extends({
-    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 "yarn 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/#adding-new-colors).
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the label should be displayed in a disabled state.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the label is displayed in an error state.
-   */
-  error: PropTypes.bool,
-  /**
-   * If `true`, the label should use filled classes key.
-   */
-  filled: PropTypes.bool,
-  /**
-   * If `true`, the input of this label is focused (used by `FormGroup` components).
-   */
-  focused: PropTypes.bool,
-  /**
-   * If `true`, the label will indicate that the `input` is required.
-   */
-  required: PropTypes.bool,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-var FormLabel$1 = FormLabel;
-
-function getInputLabelUtilityClasses(slot) {
-  return generateUtilityClass('MuiInputLabel', slot);
-}
-generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
-
-const _excluded$3 = ["disableAnimation", "margin", "shrink", "variant", "className"];
-const useUtilityClasses$3 = ownerState => {
-  const {
-    classes,
-    formControl,
-    size,
-    shrink,
-    disableAnimation,
-    variant,
-    required
-  } = ownerState;
-  const slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
-    asterisk: [required && 'asterisk']
-  };
-  const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
-  return _extends({}, classes, composedClasses);
-};
-const InputLabelRoot = styled$1(FormLabel$1, {
-  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
-  name: 'MuiInputLabel',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [{
-      [`& .${formLabelClasses$1.asterisk}`]: styles.asterisk
-    }, styles.root, ownerState.formControl && styles.formControl, ownerState.size === 'small' && styles.sizeSmall, ownerState.shrink && styles.shrink, !ownerState.disableAnimation && styles.animated, styles[ownerState.variant]];
-  }
-})(({
-  theme,
-  ownerState
-}) => _extends({
-  display: 'block',
-  transformOrigin: 'top left',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  maxWidth: '100%'
-}, ownerState.formControl && {
-  position: 'absolute',
-  left: 0,
-  top: 0,
-  // slight alteration to spec spacing to match visual spec result
-  transform: 'translate(0, 20px) scale(1)'
-}, ownerState.size === 'small' && {
-  // Compensation for the `Input.inputSizeSmall` style.
-  transform: 'translate(0, 17px) scale(1)'
-}, ownerState.shrink && {
-  transform: 'translate(0, -1.5px) scale(0.75)',
-  transformOrigin: 'top left',
-  maxWidth: '133%'
-}, !ownerState.disableAnimation && {
-  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
-    duration: theme.transitions.duration.shorter,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.variant === 'filled' && _extends({
-  // Chrome's autofill feature gives the input field a yellow background.
-  // Since the input field is behind the label in the HTML tree,
-  // the input field is drawn last and hides the label with an opaque background color.
-  // zIndex: 1 will raise the label above opaque background-colors of input.
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(12px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 13px) scale(1)'
-}, ownerState.shrink && _extends({
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  transform: 'translate(12px, 7px) scale(0.75)',
-  maxWidth: 'calc(133% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(12px, 4px) scale(0.75)'
-})), ownerState.variant === 'outlined' && _extends({
-  // see comment above on filled.zIndex
-  zIndex: 1,
-  pointerEvents: 'none',
-  transform: 'translate(14px, 16px) scale(1)',
-  maxWidth: 'calc(100% - 24px)'
-}, ownerState.size === 'small' && {
-  transform: 'translate(14px, 9px) scale(1)'
-}, ownerState.shrink && {
-  userSelect: 'none',
-  pointerEvents: 'auto',
-  // Theoretically, we should have (8+5)*2/0.75 = 34px
-  // but it feels a better when it bleeds a bit on the left, so 32px.
-  maxWidth: 'calc(133% - 32px)',
-  transform: 'translate(14px, -9px) scale(0.75)'
-})));
-const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
-  const props = useThemeProps({
-    name: 'MuiInputLabel',
-    props: inProps
-  });
-  const {
-      disableAnimation = false,
-      shrink: shrinkProp,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$3);
-  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']
-  });
-  const ownerState = _extends({}, props, {
-    disableAnimation,
-    formControl: muiFormControl,
-    shrink,
-    size: fcs.size,
-    variant: fcs.variant,
-    required: fcs.required
-  });
-  const classes = useUtilityClasses$3(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(InputLabelRoot, _extends({
-    "data-shrink": shrink,
-    ownerState: ownerState,
-    ref: ref,
-    className: clsx(classes.root, className)
-  }, other, {
-    classes: classes
-  }));
-});
-process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn 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/#adding-new-colors).
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]),
-  /**
-   * If `true`, the transition animation is disabled.
-   * @default false
-   */
-  disableAnimation: PropTypes.bool,
-  /**
-   * If `true`, the component is disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the label is displayed in an error state.
-   */
-  error: PropTypes.bool,
-  /**
-   * If `true`, the `input` of this label is focused.
-   */
-  focused: PropTypes.bool,
-  /**
-   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
-   * FormControl.
-   */
-  margin: PropTypes.oneOf(['dense']),
-  /**
-   * if `true`, the label will indicate that the `input` is required.
-   */
-  required: PropTypes.bool,
-  /**
-   * If `true`, the label is shrunk.
-   */
-  shrink: PropTypes.bool,
-  /**
-   * The size of the component.
-   * @default 'normal'
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The variant to use.
-   */
-  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
-} : void 0;
-var InputLabel$1 = InputLabel;
-
-function getFormControlUtilityClasses(slot) {
-  return generateUtilityClass('MuiFormControl', slot);
-}
-generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
-
-const _excluded$2 = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
-const useUtilityClasses$2 = ownerState => {
-  const {
-    classes,
-    margin,
-    fullWidth
-  } = ownerState;
-  const slots = {
-    root: ['root', margin !== 'none' && `margin${capitalize(margin)}`, fullWidth && 'fullWidth']
-  };
-  return composeClasses(slots, getFormControlUtilityClasses, classes);
-};
-const FormControlRoot = styled$1('div', {
-  name: 'MuiFormControl',
-  slot: 'Root',
-  overridesResolver: ({
-    ownerState
-  }, styles) => {
-    return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
-  }
-})(({
-  ownerState
-}) => _extends({
-  display: 'inline-flex',
-  flexDirection: 'column',
-  position: 'relative',
-  // Reset fieldset default style.
-  minWidth: 0,
-  padding: 0,
-  margin: 0,
-  border: 0,
-  verticalAlign: 'top'
-}, ownerState.margin === 'normal' && {
-  marginTop: 16,
-  marginBottom: 8
-}, ownerState.margin === 'dense' && {
-  marginTop: 8,
-  marginBottom: 4
-}, ownerState.fullWidth && {
-  width: '100%'
-}));
-
-/**
- * Provides context such as filled/focused/error/required for form inputs.
- * Relying on the context provides high flexibility and ensures that the state always stays
- * consistent across the children of the `FormControl`.
- * This context is used by the following components:
- *
- *  - FormLabel
- *  - FormHelperText
- *  - Input
- *  - InputLabel
- *
- * You can find one composition example below and more going to [the demos](/material-ui/react-text-field/#components).
- *
- * ```jsx
- * <FormControl>
- *   <InputLabel htmlFor="my-input">Email address</InputLabel>
- *   <Input id="my-input" aria-describedby="my-helper-text" />
- *   <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
- * </FormControl>
- * ```
- *
- * ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
- * For instance, only one input can be focused at the same time, the state shouldn't be shared.
- */
-const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiFormControl'
-  });
-  const {
-      children,
-      className,
-      color = 'primary',
-      component = 'div',
-      disabled = false,
-      error = false,
-      focused: visuallyFocused,
-      fullWidth = false,
-      hiddenLabel = false,
-      margin = 'none',
-      required = false,
-      size = 'medium',
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$2);
-  const ownerState = _extends({}, props, {
-    color,
-    component,
-    disabled,
-    error,
-    fullWidth,
-    hiddenLabel,
-    margin,
-    required,
-    size,
-    variant
-  });
-  const classes = useUtilityClasses$2(ownerState);
-  const [adornedStart, setAdornedStart] = React.useState(() => {
-    // We need to iterate through the children and find the Input in order
-    // to fully support server-side rendering.
-    let initialAdornedStart = false;
-    if (children) {
-      React.Children.forEach(children, child => {
-        if (!isMuiElement(child, ['Input', 'Select'])) {
-          return;
-        }
-        const input = isMuiElement(child, ['Select']) ? child.props.input : child;
-        if (input && isAdornedStart(input.props)) {
-          initialAdornedStart = true;
-        }
-      });
-    }
-    return initialAdornedStart;
-  });
-  const [filled, setFilled] = React.useState(() => {
-    // We need to iterate through the children and find the Input in order
-    // to fully support server-side rendering.
-    let initialFilled = false;
-    if (children) {
-      React.Children.forEach(children, child => {
-        if (!isMuiElement(child, ['Input', 'Select'])) {
-          return;
-        }
-        if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
-          initialFilled = true;
-        }
-      });
-    }
-    return initialFilled;
-  });
-  const [focusedState, setFocused] = React.useState(false);
-  if (disabled && focusedState) {
-    setFocused(false);
-  }
-  const focused = visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
-  let registerEffect;
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const registeredInput = React.useRef(false);
-    registerEffect = () => {
-      if (registeredInput.current) {
-        console.error(['MUI: There are multiple `InputBase` components inside a FormControl.', 'This creates visual inconsistencies, only use one `InputBase`.'].join('\n'));
-      }
-      registeredInput.current = true;
-      return () => {
-        registeredInput.current = false;
-      };
-    };
-  }
-  const childContext = React.useMemo(() => {
-    return {
-      adornedStart,
-      setAdornedStart,
-      color,
-      disabled,
-      error,
-      filled,
-      focused,
-      fullWidth,
-      hiddenLabel,
-      size,
-      onBlur: () => {
-        setFocused(false);
-      },
-      onEmpty: () => {
-        setFilled(false);
-      },
-      onFilled: () => {
-        setFilled(true);
-      },
-      onFocus: () => {
-        setFocused(true);
-      },
-      registerEffect,
-      required,
-      variant
-    };
-  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
-    value: childContext,
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(FormControlRoot, _extends({
-      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 "yarn 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/#adding-new-colors).
-   * @default 'primary'
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the label, input and helper text should be displayed in a disabled state.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the label is displayed in an error state.
-   * @default false
-   */
-  error: PropTypes.bool,
-  /**
-   * If `true`, the component is displayed in focused state.
-   */
-  focused: PropTypes.bool,
-  /**
-   * If `true`, the component will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * If `true`, the label is hidden.
-   * This is used to increase density for a `FilledInput`.
-   * Be sure to add `aria-label` to the `input` element.
-   * @default false
-   */
-  hiddenLabel: PropTypes.bool,
-  /**
-   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
-   * @default 'none'
-   */
-  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
-  /**
-   * If `true`, the label will indicate that the `input` is required.
-   * @default false
-   */
-  required: PropTypes.bool,
-  /**
-   * The size of the component.
-   * @default 'medium'
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The variant to use.
-   * @default 'outlined'
-   */
-  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
-} : void 0;
-var FormControl$1 = FormControl;
-
-function getFormHelperTextUtilityClasses(slot) {
-  return generateUtilityClass('MuiFormHelperText', slot);
-}
-const formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
-var formHelperTextClasses$1 = formHelperTextClasses;
-
-var _span;
-const _excluded$1 = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
-const useUtilityClasses$1 = ownerState => {
-  const {
-    classes,
-    contained,
-    size,
-    disabled,
-    error,
-    filled,
-    focused,
-    required
-  } = ownerState;
-  const slots = {
-    root: ['root', disabled && 'disabled', error && 'error', size && `size${capitalize(size)}`, contained && 'contained', focused && 'focused', filled && 'filled', required && 'required']
-  };
-  return composeClasses(slots, getFormHelperTextUtilityClasses, classes);
-};
-const FormHelperTextRoot = styled$1('p', {
-  name: 'MuiFormHelperText',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
-  }
-})(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
-  textAlign: 'left',
-  marginTop: 3,
-  marginRight: 0,
-  marginBottom: 0,
-  marginLeft: 0,
-  [`&.${formHelperTextClasses$1.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  },
-  [`&.${formHelperTextClasses$1.error}`]: {
-    color: (theme.vars || theme).palette.error.main
-  }
-}, ownerState.size === 'small' && {
-  marginTop: 4
-}, ownerState.contained && {
-  marginLeft: 14,
-  marginRight: 14
-}));
-const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiFormHelperText'
-  });
-  const {
-      children,
-      className,
-      component = 'p'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const muiFormControl = useFormControl();
-  const fcs = formControlState({
-    props,
-    muiFormControl,
-    states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
-  });
-  const ownerState = _extends({}, props, {
-    component,
-    contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
-    variant: fcs.variant,
-    size: fcs.size,
-    disabled: fcs.disabled,
-    error: fcs.error,
-    filled: fcs.filled,
-    focused: fcs.focused,
-    required: fcs.required
-  });
-  const classes = useUtilityClasses$1(ownerState);
-  return /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperTextRoot, _extends({
-    as: component,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
-    children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
-    _span || (_span = /*#__PURE__*/jsxRuntimeExports.jsx("span", {
-      className: "notranslate",
-      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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the component.
-   *
-   * If `' '` is provided, the component reserves one line height for displaying a future message.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the helper text should be displayed in a disabled state.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, helper text should be displayed in an error state.
-   */
-  error: PropTypes.bool,
-  /**
-   * If `true`, the helper text should use filled classes key.
-   */
-  filled: PropTypes.bool,
-  /**
-   * If `true`, the helper text should use focused classes key.
-   */
-  focused: PropTypes.bool,
-  /**
-   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
-   * FormControl.
-   */
-  margin: PropTypes.oneOf(['dense']),
-  /**
-   * If `true`, the helper text should use required classes key.
-   */
-  required: PropTypes.bool,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The variant to use.
-   */
-  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['filled', 'outlined', 'standard']), PropTypes.string])
-} : void 0;
-var FormHelperText$1 = FormHelperText;
-
-function getTextFieldUtilityClass(slot) {
-  return generateUtilityClass('MuiTextField', slot);
-}
-generateUtilityClasses('MuiTextField', ['root']);
-
-const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
-const variantComponent = {
-  standard: Input,
-  filled: FilledInput,
-  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 = useThemeProps({
-    props: inProps,
-    name: 'MuiTextField'
-  });
-  const {
-      autoComplete,
-      autoFocus = false,
-      children,
-      className,
-      color = 'primary',
-      defaultValue,
-      disabled = false,
-      error = false,
-      FormHelperTextProps,
-      fullWidth = false,
-      helperText,
-      id: idOverride,
-      InputLabelProps,
-      inputProps,
-      InputProps,
-      inputRef,
-      label,
-      maxRows,
-      minRows,
-      multiline = false,
-      name,
-      onBlur,
-      onChange,
-      onClick,
-      onFocus,
-      placeholder,
-      required = false,
-      rows,
-      select = false,
-      SelectProps,
-      type,
-      value,
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
-    autoFocus,
-    color,
-    disabled,
-    error,
-    fullWidth,
-    multiline,
-    required,
-    select,
-    variant
-  });
-  const classes = useUtilityClasses(ownerState);
-  if (process.env.NODE_ENV !== 'production') {
-    if (select && !children) {
-      console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
-    }
-  }
-  const InputMore = {};
-  if (variant === 'outlined') {
-    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-      InputMore.notched = InputLabelProps.shrink;
-    }
-    InputMore.label = label;
-  }
-  if (select) {
-    // unset defaults from textbox inputs
-    if (!SelectProps || !SelectProps.native) {
-      InputMore.id = undefined;
-    }
-    InputMore['aria-describedby'] = undefined;
-  }
-  const id = useId(idOverride);
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-  const InputComponent = variantComponent[variant];
-  const InputElement = /*#__PURE__*/jsxRuntimeExports.jsx(InputComponent, _extends({
-    "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,
-    onClick: onClick,
-    placeholder: placeholder,
-    inputProps: inputProps
-  }, InputMore, InputProps));
-  return /*#__PURE__*/jsxRuntimeExports.jsxs(TextFieldRoot, _extends({
-    className: clsx(classes.root, className),
-    disabled: disabled,
-    error: error,
-    fullWidth: fullWidth,
-    ref: ref,
-    required: required,
-    color: color,
-    variant: variant,
-    ownerState: ownerState
-  }, other, {
-    children: [label != null && label !== '' && /*#__PURE__*/jsxRuntimeExports.jsx(InputLabel$1, _extends({
-      htmlFor: id,
-      id: inputLabelId
-    }, InputLabelProps, {
-      children: label
-    })), select ? /*#__PURE__*/jsxRuntimeExports.jsx(Select, _extends({
-      "aria-describedby": helperTextId,
-      id: id,
-      labelId: inputLabelId,
-      value: value,
-      input: InputElement
-    }, SelectProps, {
-      children: children
-    })) : InputElement, helperText && /*#__PURE__*/jsxRuntimeExports.jsx(FormHelperText$1, _extends({
-      id: helperTextId
-    }, FormHelperTextProps, {
-      children: helperText
-    }))]
-  }));
-});
-process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * This prop helps users to fill forms faster, especially on mobile devices.
-   * The name can be confusing, as it's more like an autofill.
-   * 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/#adding-new-colors).
-   * @default 'primary'
-   */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue: PropTypes.any,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the label is displayed in an error state.
-   * @default false
-   */
-  error: PropTypes.bool,
-  /**
-   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
-   */
-  FormHelperTextProps: PropTypes.object,
-  /**
-   * If `true`, the input will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * The helper text content.
-   */
-  helperText: PropTypes.node,
-  /**
-   * The id of the `input` element.
-   * Use this prop to make `label` and `helperText` accessible for screen readers.
-   */
-  id: PropTypes.string,
-  /**
-   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
-   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
-   */
-  InputLabelProps: PropTypes.object,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
-   */
-  inputProps: PropTypes.object,
-  /**
-   * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
-   * component depending on the `variant` prop value.
-   */
-  InputProps: PropTypes.object,
-  /**
-   * Pass a ref to the `input` element.
-   */
-  inputRef: refType,
-  /**
-   * The label content.
-   */
-  label: PropTypes.node,
-  /**
-   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
-   * @default 'none'
-   */
-  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
-  /**
-   * Maximum number of rows to display when multiline option is set to true.
-   */
-  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Minimum number of rows to display when multiline option is set to true.
-   */
-  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * If `true`, a `textarea` element is rendered instead of an input.
-   * @default false
-   */
-  multiline: PropTypes.bool,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name: PropTypes.string,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Callback fired when the value is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   */
-  onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocus: PropTypes.func,
-  /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
-  placeholder: PropTypes.string,
-  /**
-   * If `true`, the label is displayed as required and the `input` element is required.
-   * @default false
-   */
-  required: PropTypes.bool,
-  /**
-   * Number of rows to display when multiline option is set to true.
-   */
-  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
-   * If this option is set you must pass the options of the select as children.
-   * @default false
-   */
-  select: PropTypes.bool,
-  /**
-   * Props applied to the [`Select`](/material-ui/api/select/) element.
-   */
-  SelectProps: PropTypes.object,
-  /**
-   * The size of the component.
-   */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
-   */
-  type: PropTypes /* @typescript-to-proptypes-ignore */.string,
-  /**
-   * The value of the `input` element, required for a controlled component.
-   */
-  value: PropTypes.any,
-  /**
-   * The variant to use.
-   * @default 'outlined'
-   */
-  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
-} : void 0;
-var TextField$1 = TextField;
-
-const SUBMIT_FILTER_STROKE_TIME = 500;
-const InputNumberInterval = props => {
-  var _item$value;
-  const {
-    item,
-    applyValue,
-    focusElementRef = null
-  } = props;
-  const filterTimeout = React.useRef();
-  const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : '');
-  const [applying, setIsApplying] = React.useState(false);
-  React.useEffect(() => {
-    return () => {
-      clearTimeout(filterTimeout.current);
-    };
-  }, []);
-  React.useEffect(() => {
-    var _item$value2;
-    const itemValue = (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : [undefined, undefined];
-    setFilterValueState(itemValue);
-  }, [item.value]);
-  const updateFilterValue = (lowerBound, upperBound) => {
-    clearTimeout(filterTimeout.current);
-    setFilterValueState([lowerBound, upperBound]);
-    setIsApplying(true);
-    filterTimeout.current = setTimeout(() => {
-      setIsApplying(false);
-      applyValue(_objectSpread2(_objectSpread2({}, item), {}, {
-        value: [lowerBound, upperBound]
-      }));
-    }, SUBMIT_FILTER_STROKE_TIME);
-  };
-  const handleUpperFilterChange = event => {
-    const newUpperBound = event.target.value;
-    updateFilterValue(filterValueState[0], newUpperBound);
-  };
-  const handleLowerFilterChange = event => {
-    const newLowerBound = event.target.value;
-    updateFilterValue(newLowerBound, filterValueState[1]);
-  };
-  return /*#__PURE__*/React.createElement(Box$1, {
-    sx: {
-      display: 'inline-flex',
-      flexDirection: 'row',
-      alignItems: 'end',
-      height: 48,
-      pl: '20px'
-    }
-  }, /*#__PURE__*/React.createElement(TextField$1, {
-    name: "lower-bound-input",
-    placeholder: "From",
-    label: "From",
-    variant: "standard",
-    value: Number(filterValueState[0]),
-    onChange: handleLowerFilterChange,
-    type: "number",
-    inputRef: focusElementRef,
-    sx: {
-      mr: 2
-    }
-  }), /*#__PURE__*/React.createElement(TextField$1, {
-    name: "upper-bound-input",
-    placeholder: "To",
-    label: "To",
-    variant: "standard",
-    value: Number(filterValueState[1]),
-    onChange: handleUpperFilterChange,
-    type: "number",
-    InputProps: applying ? {
-      endAdornment: /*#__PURE__*/React.createElement(Icon, {
-        icon: mdiSync
-      })
-    } : {}
-  }));
-};
+   */
+  themeId: PropTypes.string
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  process.env.NODE_ENV !== "production" ? ThemeProvider$1.propTypes = exactProp(ThemeProvider$1.propTypes) : void 0;
+}
 
-const isBetweenOperator = {
-  label: 'is between',
-  value: 'isBetween',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
-      return null;
+/**
+ * Split this component for RSC import
+ */
+const DEFAULT_MODE_STORAGE_KEY = 'mode';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+const DEFAULT_ATTRIBUTE = 'data-color-scheme';
+function InitColorSchemeScript(options) {
+  const {
+    defaultMode = 'system',
+    defaultLightColorScheme = 'light',
+    defaultDarkColorScheme = 'dark',
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute: initialAttribute = DEFAULT_ATTRIBUTE,
+    colorSchemeNode = 'document.documentElement',
+    nonce
+  } = options || {};
+  let setter = '';
+  let attribute = initialAttribute;
+  if (initialAttribute === 'class') {
+    attribute = '.%s';
+  }
+  if (initialAttribute === 'data') {
+    attribute = '[data-%s]';
+  }
+  if (attribute.startsWith('.')) {
+    const selector = attribute.substring(1);
+    setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
+      ${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
+  }
+  const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
+  if (matches) {
+    const [attr, value] = matches[1].split('=');
+    if (!value) {
+      setter += `${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', light));
+      ${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', dark));`;
     }
-    if (filterItem.value[0] == null || filterItem.value[1] == null) {
-      return null;
+    setter += `
+      ${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
+  } else {
+    setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsx("script", {
+    suppressHydrationWarning: true,
+    nonce: typeof window === 'undefined' ? nonce : ''
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: `(function() {
+try {
+  let colorScheme = '';
+  const mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
+  const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+  const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+  if (mode === 'system') {
+    // handle system mode
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      colorScheme = dark
+    } else {
+      colorScheme = light
     }
-    if (typeof filterItem.value[0] !== 'number' || typeof filterItem.value[1] !== 'number') {
-      return null;
+  }
+  if (mode === 'light') {
+    colorScheme = light;
+  }
+  if (mode === 'dark') {
+    colorScheme = dark;
+  }
+  if (colorScheme) {
+    ${setter}
+  }
+} catch(e){}})();`
     }
-    return params => {
-      return params.value !== null && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
-    };
-  },
-  InputComponent: InputNumberInterval
-};
-const IS_BETWEEN = isBetweenOperator;
-
-const getGridNumericOperators = () => [...getGridNumericOperators$1(), IS_BETWEEN];
+  }, "mui-color-scheme-init");
+}
 
-const doesNotContain = {
-  label: 'does not contain',
-  value: 'doesNotContain',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
+function noop$1() {}
+const localStorageManager = ({
+  key,
+  storageWindow
+}) => {
+  if (!storageWindow && typeof window !== 'undefined') {
+    storageWindow = window;
+  }
+  return {
+    get(defaultValue) {
+      if (typeof window === 'undefined') {
+        return undefined;
       }
-      if (String(params.value).indexOf(filterItem.value) !== -1) {
-        return false;
+      if (!storageWindow) {
+        return defaultValue;
       }
-      return true;
-    };
-  },
-  InputComponent: GridFilterInputValue
-};
-const DOES_NOT_CONTAIN = doesNotContain;
-
-const doesNotEqual = {
-  label: 'does not equal',
-  value: 'doesNotEqual',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
+      let value;
+      try {
+        value = storageWindow.localStorage.getItem(key);
+      } catch {
+        // Unsupported
+      }
+      return value || defaultValue;
+    },
+    set: value => {
+      if (storageWindow) {
+        try {
+          storageWindow.localStorage.setItem(key, value);
+        } catch {
+          // Unsupported
+        }
       }
-      if (String(params.value) === filterItem.value) {
-        return false;
+    },
+    subscribe: handler => {
+      if (!storageWindow) {
+        return noop$1;
       }
-      return true;
-    };
-  },
-  InputComponent: GridFilterInputValue
-};
-const DOES_NOT_EQUAL = doesNotEqual;
-
-const doesNotHaveOperator = {
-  label: "doesn't have",
-  value: 'doesNotHave',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
+      const listener = event => {
+        const value = event.newValue;
+        if (event.key === key) {
+          handler(value);
+        }
+      };
+      storageWindow.addEventListener('storage', listener);
+      return () => {
+        storageWindow.removeEventListener('storage', listener);
+      };
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
-      return !cellValues.map(value => String(value)).includes(filterItem.value);
-    };
-  },
-  InputComponent: GridFilterInputValue
+  };
 };
-const DOES_NOT_HAVE = doesNotHaveOperator;
-const DOES_NOT_HAVE_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE), {}, {
-  InputComponent: GridFilterInputSingleSelect
-});
-
-const hasOperator = {
-  label: 'has',
-  value: 'has',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
+var localStorageManager$1 = localStorageManager;
+
+function noop() {}
+function getSystemMode(mode) {
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      return 'dark';
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
-      return cellValues.map(value => String(value)).includes(filterItem.value);
-    };
-  },
-  InputComponent: GridFilterInputValue
-};
-const HAS = hasOperator;
-const HAS_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS), {}, {
-  InputComponent: GridFilterInputSingleSelect
-});
-
-const hasOnlyOperator = {
-  label: 'has only',
-  value: 'hasOnly',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
+    return 'light';
+  }
+  return undefined;
+}
+function processState(state, callback) {
+  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
+    return callback('light');
+  }
+  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
+    return callback('dark');
+  }
+  return undefined;
+}
+function getColorScheme(state) {
+  return processState(state, mode => {
+    if (mode === 'light') {
+      return state.lightColorScheme;
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
-      return cellValues.length === 1 && String(cellValues[0]) === filterItem.value;
-    };
-  },
-  InputComponent: GridFilterInputValue
-};
-const HAS_ONLY = hasOnlyOperator;
-const HAS_ONLY_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ONLY), {}, {
-  InputComponent: GridFilterInputSingleSelect
-});
-
-const isOperator = {
-  label: 'is',
-  value: 'is',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
+    if (mode === 'dark') {
+      return state.darkColorScheme;
     }
-    return params => {
-      if (Array.isArray(params.value)) {
-        return false;
-      }
-      return String(params.value) === filterItem.value;
+    return undefined;
+  });
+}
+function useCurrentColorScheme(options) {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    supportedColorSchemes = [],
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    storageWindow = typeof window === 'undefined' ? undefined : window,
+    storageManager = localStorageManager$1,
+    noSsr = false
+  } = options;
+  const joinedColorSchemes = supportedColorSchemes.join(',');
+  const isMultiSchemes = supportedColorSchemes.length > 1;
+  const modeStorage = React.useMemo(() => storageManager?.({
+    key: modeStorageKey,
+    storageWindow
+  }), [storageManager, modeStorageKey, storageWindow]);
+  const lightStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-light`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
+  const darkStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-dark`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
+  const [state, setState] = React.useState(() => {
+    const initialMode = modeStorage?.get(defaultMode) || defaultMode;
+    const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
+    const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
+    return {
+      mode: initialMode,
+      systemMode: getSystemMode(initialMode),
+      lightColorScheme,
+      darkColorScheme
     };
-  },
-  InputComponent: GridFilterInputValue
-};
-const IS = isOperator;
-const IS_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS), {}, {
-  InputComponent: GridFilterInputSingleSelect
-});
-
-const isNotOperator = {
-  label: 'is not',
-  value: 'isNot',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (Array.isArray(params.value)) {
-        return true;
+  });
+  const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
+  React.useEffect(() => {
+    setIsClient(true); // to rerender the component after hydration
+  }, []);
+  const colorScheme = getColorScheme(state);
+  const setMode = React.useCallback(mode => {
+    setState(currentState => {
+      if (mode === currentState.mode) {
+        // do nothing if mode does not change
+        return currentState;
       }
-      return String(params.value) !== filterItem.value;
-    };
-  },
-  InputComponent: GridFilterInputValue
-};
-const IS_NOT = isNotOperator;
-const IS_NOT_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_NOT), {}, {
-  InputComponent: GridFilterInputSingleSelect
-});
-
-const containsAnyOfOperator = {
-  label: 'contains any of',
-  value: 'containsAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
+      const newMode = mode ?? defaultMode;
+      modeStorage?.set(newMode);
+      return {
+        ...currentState,
+        mode: newMode,
+        systemMode: getSystemMode(newMode)
+      };
+    });
+  }, [modeStorage, defaultMode]);
+  const setColorScheme = React.useCallback(value => {
+    if (!value) {
+      setState(currentState => {
+        lightStorage?.set(defaultLightColorScheme);
+        darkStorage?.set(defaultDarkColorScheme);
+        return {
+          ...currentState,
+          lightColorScheme: defaultLightColorScheme,
+          darkColorScheme: defaultDarkColorScheme
+        };
+      });
+    } else if (typeof value === 'string') {
+      if (value && !joinedColorSchemes.includes(value)) {
+        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setState(currentState => {
+          const newState = {
+            ...currentState
+          };
+          processState(currentState, mode => {
+            if (mode === 'light') {
+              lightStorage?.set(value);
+              newState.lightColorScheme = value;
+            }
+            if (mode === 'dark') {
+              darkStorage?.set(value);
+              newState.darkColorScheme = value;
+            }
+          });
+          return newState;
+        });
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      let match = false;
-      filterItem.value.forEach(filteredValue => {
-        paramValues.forEach(paramValue => {
-          if (String(paramValue).indexOf(filteredValue) !== -1) {
-            match = true;
+    } else {
+      setState(currentState => {
+        const newState = {
+          ...currentState
+        };
+        const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+        const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+        if (newLightColorScheme) {
+          if (!joinedColorSchemes.includes(newLightColorScheme)) {
+            console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.lightColorScheme = newLightColorScheme;
+            lightStorage?.set(newLightColorScheme);
           }
-        });
+        }
+        if (newDarkColorScheme) {
+          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+            console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+          } else {
+            newState.darkColorScheme = newDarkColorScheme;
+            darkStorage?.set(newDarkColorScheme);
+          }
+        }
+        return newState;
       });
-      return match;
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const containsAnyOfCIOperator = {
-  label: 'contains any of (case insensitive)',
-  value: 'containsAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
     }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
-      }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      const paramValuesLower = paramValues.map(item => String(item).toLowerCase());
-      let match = false;
-      filterItem.value.forEach(filteredValue => {
-        if (paramValuesLower.indexOf(filteredValue.toLowerCase()) !== -1) {
-          match = true;
+  }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
+  const handleMediaQuery = React.useCallback(event => {
+    if (state.mode === 'system') {
+      setState(currentState => {
+        const systemMode = event?.matches ? 'dark' : 'light';
+
+        // Early exit, nothing changed.
+        if (currentState.systemMode === systemMode) {
+          return currentState;
         }
+        return {
+          ...currentState,
+          systemMode
+        };
       });
-      return match;
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const CONTAINS_ANY_OF = containsAnyOfOperator;
-const CONTAINS_ANY_OF_I = containsAnyOfCIOperator;
+    }
+  }, [state.mode]);
 
-const doesNotHaveAnyOf = {
-  label: "doesn't have any of",
-  value: 'doesNotHaveAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !Array.isArray(filterItem.value) || filterItem.value.length === 0) {
-      return null;
+  // Ref hack to avoid adding handleMediaQuery as a dep
+  const mediaListener = React.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+  React.useEffect(() => {
+    if (typeof window.matchMedia !== 'function' || !isMultiSchemes) {
+      return undefined;
     }
-    return params => {
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
+    const handler = (...args) => mediaListener.current(...args);
 
-      // Return true only if none of the filter values are in the cell values
-      return filterItem.value.every(filterVal => !cellValues.map(value => String(value)).includes(filterVal));
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const DOES_NOT_HAVE_ANY_OF = doesNotHaveAnyOf;
-const DOES_NOT_HAVE_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, DOES_NOT_HAVE_ANY_OF), {}, {
-  InputComponent: GridFilterInputMultipleSingleSelect
-});
+    // Always listen to System preference
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
 
-const endsWithAnyOfOperator = {
-  label: 'ends with any of',
-  value: 'endsWithAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
-      }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      let match = false;
-      filterItem.value.forEach(filteredValue => {
-        paramValues.forEach(paramValue => {
-          if (String(paramValue).endsWith(filteredValue)) {
-            match = true;
-          }
-        });
-      });
-      return match;
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    media.addListener(handler);
+    handler(media);
+    return () => {
+      media.removeListener(handler);
     };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const ENDS_WITH_ANY_OF = endsWithAnyOfOperator;
+  }, [isMultiSchemes]);
 
-const isAnyOfOperator = {
-  label: 'is any of',
-  value: 'isAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
-      }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      for (const paramValue of paramValues) {
-        if (filterItem.value.includes(String(paramValue))) {
-          return true;
+  // Handle when localStorage has changed
+  React.useEffect(() => {
+    if (isMultiSchemes) {
+      const unsubscribeMode = modeStorage?.subscribe(value => {
+        if (!value || ['light', 'dark', 'system'].includes(value)) {
+          setMode(value || defaultMode);
         }
-      }
-      return false;
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const IS_ANY_OF = isAnyOfOperator;
-const IS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF), {}, {
-  InputComponent: GridFilterInputMultipleSingleSelect
-});
-
-const isAnyOfIOperator = {
-  label: 'is any of (case-insensitive)',
-  value: 'isAnyOfI',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    const lowerCaseFilterValues = filterItem.value.map(v => String(v).toLowerCase());
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
-      }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      for (const paramValue of paramValues) {
-        if (lowerCaseFilterValues.includes(String(paramValue).toLowerCase())) {
-          return true;
+      }) || noop;
+      const unsubscribeLight = lightStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            light: value
+          });
         }
-      }
-      return false;
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const IS_ANY_OF_I = isAnyOfIOperator;
-const IS_ANY_OF_I_WITH_SELECT = _objectSpread2(_objectSpread2({}, IS_ANY_OF_I), {}, {
-  InputComponent: GridFilterInputMultipleSingleSelect
-});
+      }) || noop;
+      const unsubscribeDark = darkStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            dark: value
+          });
+        }
+      }) || noop;
+      return () => {
+        unsubscribeMode();
+        unsubscribeLight();
+        unsubscribeDark();
+      };
+    }
+    return undefined;
+  }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
+  return {
+    ...state,
+    mode: isClient ? state.mode : undefined,
+    systemMode: isClient ? state.systemMode : undefined,
+    colorScheme: isClient ? colorScheme : undefined,
+    setMode,
+    setColorScheme
+  };
+}
 
-const hasAnyOfOperator = {
-  label: 'has any of',
-  value: 'hasAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
+const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
+function createCssVarsProvider(options) {
+  const {
+    themeId,
+    /**
+     * This `theme` object needs to follow a certain structure to
+     * be used correctly by the finel `CssVarsProvider`. It should have a
+     * `colorSchemes` key with the light and dark (and any other) palette.
+     * It should also ideally have a vars object created using `prepareCssVars`.
+     */
+    theme: defaultTheme = {},
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    disableTransitionOnChange: designSystemTransitionOnChange = false,
+    defaultColorScheme,
+    resolveTheme
+  } = options;
+  const defaultContext = {
+    allColorSchemes: [],
+    colorScheme: undefined,
+    darkColorScheme: undefined,
+    lightColorScheme: undefined,
+    mode: undefined,
+    setColorScheme: () => {},
+    setMode: () => {},
+    systemMode: undefined
+  };
+  const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    ColorSchemeContext.displayName = 'ColorSchemeContext';
+  }
+  const useColorScheme = () => React.useContext(ColorSchemeContext) || defaultContext;
+  const defaultColorSchemes = {};
+  const defaultComponents = {};
+  function CssVarsProvider(props) {
+    const {
+      children,
+      theme: themeProp,
+      modeStorageKey = defaultModeStorageKey,
+      colorSchemeStorageKey = defaultColorSchemeStorageKey,
+      disableTransitionOnChange = designSystemTransitionOnChange,
+      storageManager,
+      storageWindow = typeof window === 'undefined' ? undefined : window,
+      documentNode = typeof document === 'undefined' ? undefined : document,
+      colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
+      disableNestedContext = false,
+      disableStyleSheetGeneration = false,
+      defaultMode: initialMode = 'system',
+      noSsr
+    } = props;
+    const hasMounted = React.useRef(false);
+    const upperTheme = useTheme();
+    const ctx = React.useContext(ColorSchemeContext);
+    const nested = !!ctx && !disableNestedContext;
+    const initialTheme = React.useMemo(() => {
+      if (themeProp) {
+        return themeProp;
+      }
+      return typeof defaultTheme === 'function' ? defaultTheme() : defaultTheme;
+    }, [themeProp]);
+    const scopedTheme = initialTheme[themeId];
+    const restThemeProp = scopedTheme || initialTheme;
+    const {
+      colorSchemes = defaultColorSchemes,
+      components = defaultComponents,
+      cssVarPrefix
+    } = restThemeProp;
+    const joinedColorSchemes = Object.keys(colorSchemes).filter(k => !!colorSchemes[k]).join(',');
+    const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
+    const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
+
+    // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
+    const {
+      mode: stateMode,
+      setMode,
+      systemMode,
+      lightColorScheme,
+      darkColorScheme,
+      colorScheme: stateColorScheme,
+      setColorScheme
+    } = useCurrentColorScheme({
+      supportedColorSchemes: allColorSchemes,
+      defaultLightColorScheme,
+      defaultDarkColorScheme,
+      modeStorageKey,
+      colorSchemeStorageKey,
+      defaultMode,
+      storageManager,
+      storageWindow,
+      noSsr
+    });
+    let mode = stateMode;
+    let colorScheme = stateColorScheme;
+    if (nested) {
+      mode = ctx.mode;
+      colorScheme = ctx.colorScheme;
     }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
+    const memoTheme = React.useMemo(() => {
+      // `colorScheme` is undefined on the server and hydration phase
+      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
+
+      // 2. get the `vars` object that refers to the CSS custom properties
+      const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
+
+      // 3. Start composing the theme object
+      const theme = {
+        ...restThemeProp,
+        components,
+        colorSchemes,
+        cssVarPrefix,
+        vars: themeVars
+      };
+      if (typeof theme.generateSpacing === 'function') {
+        theme.spacing = theme.generateSpacing();
       }
-      const cellValues = Array.isArray(params.value) ? params.value : [params.value];
-      const filterItemValues = Array.isArray(filterItem.value) ? filterItem.value : [filterItem.value];
-      return filterItemValues.some(v => cellValues.map(value => String(value)).includes(v));
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const HAS_ANY_OF = hasAnyOfOperator;
-const HAS_ANY_OF_WITH_SELECT = _objectSpread2(_objectSpread2({}, HAS_ANY_OF), {}, {
-  InputComponent: GridFilterInputMultipleSingleSelect
-});
 
-const isNotAnyOfOperator = {
-  label: 'is not any of',
-  value: 'isNotAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
+      // 4. Resolve the color scheme and merge it to the theme
+      if (calculatedColorScheme) {
+        const scheme = colorSchemes[calculatedColorScheme];
+        if (scheme && typeof scheme === 'object') {
+          // 4.1 Merge the selected color scheme to the theme
+          Object.keys(scheme).forEach(schemeKey => {
+            if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
+              // shallow merge the 1st level structure of the theme.
+              theme[schemeKey] = {
+                ...theme[schemeKey],
+                ...scheme[schemeKey]
+              };
+            } else {
+              theme[schemeKey] = scheme[schemeKey];
+            }
+          });
+        }
       }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      for (const paramValue of paramValues) {
-        if (filterItem.value.includes(String(paramValue))) {
-          return false;
+      return resolveTheme ? resolveTheme(theme) : theme;
+    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
+
+    // 5. Declaring effects
+    // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
+    const colorSchemeSelector = restThemeProp.colorSchemeSelector;
+    useEnhancedEffect$1(() => {
+      if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
+          colorSchemeNode.classList.remove(...allColorSchemes.map(scheme => rule.substring(1).replace('%s', scheme)));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
+        } else {
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
+          if (matches) {
+            const [attr, value] = matches[1].split('=');
+            if (!value) {
+              // for attributes like `data-theme-dark`, `data-theme-light`
+              // remove all the existing data attributes before setting the new one
+              allColorSchemes.forEach(scheme => {
+                colorSchemeNode.removeAttribute(attr.replace(colorScheme, scheme));
+              });
+            }
+            colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
+          } else {
+            colorSchemeNode.setAttribute(rule, colorScheme);
+          }
         }
       }
-      return true;
-    };
-  },
-  InputComponent: GridFilterInputMultipleValue
+    }, [colorScheme, colorSchemeSelector, colorSchemeNode, allColorSchemes]);
+
+    // 5.2 Remove the CSS transition when color scheme changes to create instant experience.
+    // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+    React.useEffect(() => {
+      let timer;
+      if (disableTransitionOnChange && hasMounted.current && documentNode) {
+        const css = documentNode.createElement('style');
+        css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
+        documentNode.head.appendChild(css);
+
+        // Force browser repaint
+        (() => window.getComputedStyle(documentNode.body))();
+        timer = setTimeout(() => {
+          documentNode.head.removeChild(css);
+        }, 1);
+      }
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme, disableTransitionOnChange, documentNode]);
+    React.useEffect(() => {
+      hasMounted.current = true;
+      return () => {
+        hasMounted.current = false;
+      };
+    }, []);
+    const contextValue = React.useMemo(() => ({
+      allColorSchemes,
+      colorScheme,
+      darkColorScheme,
+      lightColorScheme,
+      mode,
+      setColorScheme,
+      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
+        if (memoTheme.colorSchemeSelector === 'media') {
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+        }
+        setMode(newMode);
+      },
+      systemMode
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, memoTheme.colorSchemeSelector]);
+    let shouldGenerateStyleSheet = true;
+    if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
+      shouldGenerateStyleSheet = false;
+    }
+    const element = /*#__PURE__*/jsxRuntimeExports.jsxs(React.Fragment, {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
+        themeId: scopedTheme ? themeId : undefined,
+        theme: memoTheme,
+        children: children
+      }), shouldGenerateStyleSheet && /*#__PURE__*/jsxRuntimeExports.jsx(GlobalStyles$1, {
+        styles: memoTheme.generateStyleSheets?.() || []
+      })]
+    });
+    if (nested) {
+      return element;
+    }
+    return /*#__PURE__*/jsxRuntimeExports.jsx(ColorSchemeContext.Provider, {
+      value: contextValue,
+      children: element
+    });
+  }
+  process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
+    /**
+     * The component tree.
+     */
+    children: PropTypes.node,
+    /**
+     * The node used to attach the color-scheme attribute
+     */
+    colorSchemeNode: PropTypes.any,
+    /**
+     * localStorage key used to store `colorScheme`
+     */
+    colorSchemeStorageKey: PropTypes.string,
+    /**
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     */
+    defaultMode: PropTypes.string,
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
+     */
+    disableNestedContext: PropTypes.bool,
+    /**
+     * If `true`, the style sheet won't be generated.
+     *
+     * This is useful for controlling nested CssVarsProvider behavior.
+     */
+    disableStyleSheetGeneration: PropTypes.bool,
+    /**
+     * Disable CSS transitions when switching between modes or color schemes.
+     */
+    disableTransitionOnChange: PropTypes.bool,
+    /**
+     * The document to attach the attribute to.
+     */
+    documentNode: PropTypes.any,
+    /**
+     * The key in the local storage used to store current color scheme.
+     */
+    modeStorageKey: PropTypes.string,
+    /**
+     * If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
+     * You should use this option in conjuction with `InitColorSchemeScript` component.
+     */
+    noSsr: PropTypes.bool,
+    /**
+     * The storage manager to be used for storing the mode and color scheme
+     * @default using `window.localStorage`
+     */
+    storageManager: PropTypes.func,
+    /**
+     * The window that attaches the 'storage' event listener.
+     * @default window
+     */
+    storageWindow: PropTypes.any,
+    /**
+     * The calculated theme object that will be passed through context.
+     */
+    theme: PropTypes.object
+  } : void 0;
+  const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+  const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+  const getInitColorSchemeScript = params => InitColorSchemeScript({
+    colorSchemeStorageKey: defaultColorSchemeStorageKey,
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    modeStorageKey: defaultModeStorageKey,
+    ...params
+  });
+  return {
+    CssVarsProvider,
+    useColorScheme,
+    getInitColorSchemeScript
+  };
+}
+
+function ThemeProviderNoVars({
+  theme: themeInput,
+  ...props
+}) {
+  const scopedTheme = THEME_ID in themeInput ? themeInput[THEME_ID] : undefined;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, {
+    ...props,
+    themeId: scopedTheme ? THEME_ID : undefined,
+    theme: scopedTheme || themeInput
+  });
+}
+
+const defaultConfig = {
+  attribute: 'data-mui-color-scheme',
+  colorSchemeStorageKey: 'mui-color-scheme',
+  defaultLightColorScheme: 'light',
+  defaultDarkColorScheme: 'dark',
+  modeStorageKey: 'mui-mode'
 };
-const IS_NOT_ANY_OF = isNotAnyOfOperator;
 
-const startsWithAnyOfOperator = {
-  label: 'starts with any of',
-  value: 'startsWithAnyOf',
-  getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
-      return null;
-    }
-    return params => {
-      if (filterItem.value.length === 0) {
-        return true;
-      }
-      const paramValues = Array.isArray(params.value) ? params.value : [params.value];
-      let match = false;
-      filterItem.value.forEach(filteredValue => {
-        paramValues.forEach(paramValue => {
-          if (String(paramValue).startsWith(filteredValue)) {
-            match = true;
-          }
-        });
+const {
+  CssVarsProvider: InternalCssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
+} = createCssVarsProvider({
+  themeId: THEME_ID,
+  // @ts-ignore ignore module augmentation tests
+  theme: () => createTheme({
+    cssVariables: true
+  }),
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
+  defaultColorScheme: {
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme
+  },
+  resolveTheme: theme => {
+    const newTheme = {
+      ...theme,
+      typography: createTypography(theme.palette, theme.typography)
+    };
+    newTheme.unstable_sx = function sx(props) {
+      return styleFunctionSx({
+        sx: props,
+        theme: this
       });
-      return match;
     };
-  },
-  InputComponent: GridFilterInputMultipleValue
-};
-const STARTS_WITH_ANY_OF = startsWithAnyOfOperator;
-
-const getGridStringArrayOperators = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF, IS_ANY_OF_I, IS_NOT_ANY_OF, STARTS_WITH_ANY_OF];
-const getGridStringArrayOperatorsWithSelect = () => [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_ANY_OF_I_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF];
-const getGridStringArrayOperatorsWithSelectOnStringArrayColumns = () => [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT];
+    return newTheme;
+  }
+});
 
-const getGridStringOperators = () => [...getGridStringOperators$1().filter(operator => !['isAnyOf'].includes(operator.value)), DOES_NOT_CONTAIN, DOES_NOT_EQUAL, ...getGridStringArrayOperators()];
+/**
+ * TODO: remove this export in v7
+ * @deprecated
+ * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
+ *
+ * You should use `ThemeProvider` and `createTheme()` instead:
+ *
+ * ```diff
+ * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
+ * + import { ThemeProvider, createTheme } from '@mui/material/styles';
+ *
+ * - const theme = extendTheme();
+ * + const theme = createTheme({
+ * +   cssVariables: true,
+ * +   colorSchemes: { light: true, dark: true },
+ * + });
+ *
+ * - <CssVarsProvider theme={theme}>
+ * + <ThemeProvider theme={theme}>
+ * ```
+ *
+ * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
+ */
+const CssVarsProvider = InternalCssVarsProvider;
 
-// istanbul ignore file
-const operatorList = {
-  // Default types
-  string: getGridStringOperators$1(),
-  number: getGridNumericOperators$1(),
-  boolean: getGridBooleanOperators(),
-  date: getGridDateOperators(),
-  dateTime: getGridDateOperators(true),
-  singleSelect: getGridSingleSelectOperators(),
-  // Extended types
-  rsString: getGridStringOperators(),
-  rsNumber: getGridNumericOperators(),
-  rsSingleSelect: [CONTAINS_ANY_OF, ENDS_WITH_ANY_OF, IS_ANY_OF_WITH_SELECT, IS_NOT_WITH_SELECT, IS_WITH_SELECT, STARTS_WITH_ANY_OF],
-  rsSingleSelectWithShortOperatorList: [IS_WITH_SELECT, IS_NOT_WITH_SELECT, IS_ANY_OF_WITH_SELECT],
-  rsMultipleSelect: [HAS_WITH_SELECT, HAS_ANY_OF_WITH_SELECT, HAS_ONLY_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, DOES_NOT_HAVE_ANY_OF_WITH_SELECT],
-  rsMultipleSelectWithShortOperatorList: [HAS_WITH_SELECT, DOES_NOT_HAVE_WITH_SELECT, HAS_ANY_OF_WITH_SELECT],
-  // Custom types
-  rsStringArray: getGridStringArrayOperators()
-};
+function ThemeProvider({
+  theme,
+  ...props
+}) {
+  const noVarsTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+    const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
+    if (!('colorSchemes' in muiTheme)) {
+      if (!('vars' in muiTheme)) {
+        // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
+        // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
+        return {
+          ...theme,
+          vars: null
+        };
+      }
+      return theme;
+    }
+    return null;
+  }, [theme]);
+  if (noVarsTheme) {
+    return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProviderNoVars, {
+      theme: noVarsTheme,
+      ...props
+    });
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsx(CssVarsProvider, {
+    theme: theme,
+    ...props
+  });
+}
 
-const getRsStringColumnType = () => {
-  return {
-    extendType: 'string',
-    filterOperators: operatorList.rsString
-  };
-};
-const getRsNumberColumnType = () => {
-  return {
-    extendType: 'number',
-    filterOperators: operatorList.rsNumber
-  };
-};
-const getRsSingleSelectColumnType = () => {
-  return {
-    extendType: 'singleSelect',
-    filterOperators: operatorList.rsSingleSelect
-  };
-};
-const getRsSingleSelectWithShortOperatorListColumnType = () => {
-  return {
-    extendType: 'singleSelect',
-    filterOperators: operatorList.rsSingleSelectWithShortOperatorList
-  };
-};
-const getRsMultipleSelectColumnType = () => {
-  return {
-    extendType: 'singleSelect',
-    filterOperators: operatorList.rsMultipleSelect
-  };
-};
-const getRsMultipleSelectWithShortOperatorListColumnType = () => {
-  return {
-    extendType: 'singleSelect',
-    filterOperators: operatorList.rsMultipleSelectWithShortOperatorList
-  };
-};
-const customColumnTypes = {
-  rsString: getRsStringColumnType(),
-  rsNumber: getRsNumberColumnType(),
-  rsSingleSelect: getRsSingleSelectColumnType(),
-  rsSingleSelectWithShortOperatorList: getRsSingleSelectWithShortOperatorListColumnType(),
-  rsMultipleSelect: getRsMultipleSelectColumnType(),
-  rsMultipleSelectWithShortOperatorList: getRsMultipleSelectWithShortOperatorListColumnType()
-};
+/* eslint-disable */
+// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+var ponyfillGlobal = typeof window != 'undefined' && window.Math == Math ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')();
 
 // Store the license information in a global, so it can be shared
 // when module duplication occurs. The duplication of the modules can happen
@@ -2027,7 +1116,7 @@ class LicenseInfo {
 /**
  * Component style.
  */
-const StyledDataGrid = styled$2.div`
+const StyledDataGrid = styled.div`
   ${_ref => {
   let {
     $height
@@ -2095,20 +1184,18 @@ const StyledDataGrid = styled$2.div`
 `;
 
 const useControlledDatagridState = _ref => {
-  var _initialState$paginat, _initialState$paginat2;
+  var _ref2, _ref3, _propsPaginationModel, _initialState$paginat, _initialState$paginat2, _pageSizeOptions$, _ref4, _propsPaginationModel2, _initialState$paginat3, _initialState$paginat4;
   let {
     initialState,
-    rowsPerPageOptions,
+    pageSizeOptions,
     propsColumnVisibilityModel,
     propsFilterModel,
     propsOnColumnVisibilityModelChange,
     propsOnFilterModelChange,
-    propsOnPageChange,
-    propsOnPageSizeChange,
+    propsOnPaginationModelChange,
     propsOnPinnedColumnsChange,
     propsOnSortModelChange,
-    propsPage,
-    propsPageSize,
+    propsPaginationModel,
     propsPinnedColumns,
     propsSortModel
   } = _ref;
@@ -2138,11 +1225,11 @@ const useControlledDatagridState = _ref => {
   useEffect(() => {
     setPinnedColumns(propsPinnedColumns);
   }, [propsPinnedColumns]);
-  const onPinnedColumnsChange = (model, details) => {
+  const onPinnedColumnsChange = (pinnedColumns, details) => {
     if (propsOnPinnedColumnsChange) {
-      propsOnPinnedColumnsChange(model, details);
+      propsOnPinnedColumnsChange(pinnedColumns, details);
     } else {
-      setPinnedColumns(model);
+      setPinnedColumns(pinnedColumns);
     }
   };
   const [sortModel, setSortModel] = useState(propsSortModel);
@@ -2156,33 +1243,22 @@ const useControlledDatagridState = _ref => {
       setSortModel(model);
     }
   };
-  const [page, setPage] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
-  const [pageSize, setPageSize] = useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 25);
-  const onPageChange = page => {
-    if (propsOnPageChange) {
-      propsOnPageChange(page, undefined);
-    } else {
-      setPage(page);
-    }
-  };
-  useEffect(() => {
-    if (propsPage || propsPage === 0) {
-      setPage(propsPage);
-    }
-  }, [propsPage]);
-  const onPageSizeChange = pageSize => {
-    onPageChange(0);
-    if (propsOnPageSizeChange) {
-      propsOnPageSizeChange(pageSize, undefined);
+  const [paginationModel, setPaginationModel] = useState({
+    pageSize: (_ref2 = (_ref3 = (_propsPaginationModel = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) !== null && _propsPaginationModel !== void 0 ? _propsPaginationModel : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : (_initialState$paginat2 = _initialState$paginat.paginationModel) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) !== null && _ref3 !== void 0 ? _ref3 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref2 !== void 0 ? _ref2 : 25,
+    page: (_ref4 = (_propsPaginationModel2 = propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _propsPaginationModel2 !== void 0 ? _propsPaginationModel2 : initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat3 = initialState.pagination) === null || _initialState$paginat3 === void 0 ? void 0 : (_initialState$paginat4 = _initialState$paginat3.paginationModel) === null || _initialState$paginat4 === void 0 ? void 0 : _initialState$paginat4.page) !== null && _ref4 !== void 0 ? _ref4 : 0
+  });
+  const onPaginationModelChange = (model, details) => {
+    if (propsOnPaginationModelChange) {
+      propsOnPaginationModelChange(model, details);
     } else {
-      setPageSize(pageSize);
+      setPaginationModel(model);
     }
   };
   useEffect(() => {
-    if (propsPageSize) {
-      setPageSize(propsPageSize);
+    if (propsPaginationModel) {
+      setPaginationModel(propsPaginationModel);
     }
-  }, [propsPageSize]);
+  }, [propsPaginationModel]);
   return {
     filterModel,
     onFilterModelChange,
@@ -2192,12 +1268,10 @@ const useControlledDatagridState = _ref => {
     onPinnedColumnsChange,
     sortModel,
     onSortModelChange,
-    page,
-    pageSize,
-    onPageChange,
-    onPageSizeChange
+    paginationModel,
+    onPaginationModelChange
   };
 };
 
-export { IS_ANY_OF_I_WITH_SELECT as A, HAS_ANY_OF as B, CONTAINS_ANY_OF as C, DOES_NOT_CONTAIN as D, ENDS_WITH_ANY_OF as E, HAS_ANY_OF_WITH_SELECT as F, IS_NOT_ANY_OF as G, HAS as H, IS_BETWEEN as I, getGridStringArrayOperators as J, getGridStringArrayOperatorsWithSelect as K, getGridStringArrayOperatorsWithSelectOnStringArrayColumns as L, LicenseInfo as M, useControlledDatagridState as N, StyledDataGrid as O, STARTS_WITH_ANY_OF as S, ThemeProvider as T, getRsNumberColumnType as a, getRsSingleSelectColumnType as b, getRsSingleSelectWithShortOperatorListColumnType as c, getRsMultipleSelectColumnType as d, getRsMultipleSelectWithShortOperatorListColumnType as e, customColumnTypes as f, getRsStringColumnType as g, getGridNumericOperators as h, DOES_NOT_EQUAL as i, DOES_NOT_HAVE as j, DOES_NOT_HAVE_WITH_SELECT as k, HAS_WITH_SELECT as l, HAS_ONLY as m, HAS_ONLY_WITH_SELECT as n, operatorList as o, IS as p, IS_WITH_SELECT as q, IS_NOT as r, IS_NOT_WITH_SELECT as s, getGridStringOperators as t, CONTAINS_ANY_OF_I as u, DOES_NOT_HAVE_ANY_OF as v, DOES_NOT_HAVE_ANY_OF_WITH_SELECT as w, IS_ANY_OF as x, IS_ANY_OF_WITH_SELECT as y, IS_ANY_OF_I as z };
+export { LicenseInfo as L, StyledDataGrid as S, ThemeProvider as T, useControlledDatagridState as u };
 //# sourceMappingURL=useControlledDatagridState.js.map