@nebula.js/stardust 4.10.0 → 4.11.0

package/dist/stardust.dev.js

@@ -1,5 +1,5 @@
 /*
-* @nebula.js/stardust v4.10.0
+* @nebula.js/stardust v4.11.0
 * Copyright (c) 2024 QlikTech International AB
 * Released under the MIT license.
 */
@@ -1989,6 +1989,26 @@
 			"zh-TW": "不符計算條件"
 		}
 	};
+	var SelectionToolbar_ClickToLock = {
+		id: "SelectionToolbar.ClickToLock",
+		locale: {
+			"de-DE": "Klicken zum Sperren",
+			"en-US": "Click to lock",
+			"es-ES": "Haga clic para bloquearla",
+			"fr-FR": "Cliquez pour verrouiller",
+			"it-IT": "Fare clic per bloccare",
+			"ja-JP": "クリックしてロック",
+			"ko-KR": "잠그려면 클릭하십시오.",
+			"nl-NL": "Klik om te vergrendelen",
+			"pl-PL": "Aby zablokować, kliknij",
+			"pt-BR": "Clique para travar",
+			"ru-RU": "Щелкните, чтобы заблокировать",
+			"sv-SE": "Klicka för att låsa",
+			"tr-TR": "Kilitlemek için tıklayın",
+			"zh-CN": "单击以锁定",
+			"zh-TW": "按一下鎖定"
+		}
+	};
 	var all = {
 		Cancel: Cancel$1,
 		CurrentSelections_All: CurrentSelections_All,
@@ -2041,7 +2061,8 @@
 		Visualization_Invalid_Dimension: Visualization_Invalid_Dimension,
 		Visualization_Invalid_Measure: Visualization_Invalid_Measure,
 		Visualization_LayoutError: Visualization_LayoutError,
-		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition
+		Visualization_UnfulfilledCalculationCondition: Visualization_UnfulfilledCalculationCondition,
+		SelectionToolbar_ClickToLock: SelectionToolbar_ClickToLock
 	};
 
 	function appLocaleFn(language) {
@@ -6662,7 +6683,7 @@
 	}
 
 	/**
-	 * @mui/styled-engine v5.15.4
+	 * @mui/styled-engine v5.15.7
 	 *
 	 * @license MIT
 	 * This source code is licensed under the MIT license found in the
@@ -6966,9 +6987,70 @@
 	  }, refs);
 	}
 
+	const UNINITIALIZED = {};
+
+	/**
+	 * A React.useRef() that is initialized lazily with a function. Note that it accepts an optional
+	 * initialization argument, so the initialization function doesn't need to be an inline closure.
+	 *
+	 * @usage
+	 *   const ref = useLazyRef(sortColumns, columns)
+	 */
+	function useLazyRef(init, initArg) {
+	  const ref = reactExports.useRef(UNINITIALIZED);
+	  if (ref.current === UNINITIALIZED) {
+	    ref.current = init(initArg);
+	  }
+	  return ref;
+	}
+
+	const EMPTY = [];
+
+	/**
+	 * A React.useEffect equivalent that runs once, when the component is mounted.
+	 */
+	function useOnMount(fn) {
+	  /* eslint-disable react-hooks/exhaustive-deps */
+	  reactExports.useEffect(fn, EMPTY);
+	  /* eslint-enable react-hooks/exhaustive-deps */
+	}
+
+	class Timeout {
+	  constructor() {
+	    this.currentId = 0;
+	    this.clear = () => {
+	      if (this.currentId !== 0) {
+	        clearTimeout(this.currentId);
+	        this.currentId = 0;
+	      }
+	    };
+	    this.disposeEffect = () => {
+	      return this.clear;
+	    };
+	  }
+	  static create() {
+	    return new Timeout();
+	  }
+	  /**
+	   * Executes `fn` after `delay`, clearing any previously scheduled call.
+	   */
+	  start(delay, fn) {
+	    this.clear();
+	    this.currentId = setTimeout(() => {
+	      this.currentId = 0;
+	      fn();
+	    }, delay);
+	  }
+	}
+	function useTimeout() {
+	  const timeout = useLazyRef(Timeout.create).current;
+	  useOnMount(timeout.disposeEffect);
+	  return timeout;
+	}
+
 	let hadKeyboardEvent = true;
 	let hadFocusVisibleRecently = false;
-	let hadFocusVisibleRecentlyTimeout;
+	const hadFocusVisibleRecentlyTimeout = new Timeout();
 	const inputTypesWhitelist = {
 	  text: true,
 	  search: true,
@@ -7091,10 +7173,9 @@
 	      // If we don't see a visibility change within 100ms, it's probably a
 	      // regular focus change.
 	      hadFocusVisibleRecently = true;
-	      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
-	      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
+	      hadFocusVisibleRecentlyTimeout.start(100, () => {
 	        hadFocusVisibleRecently = false;
-	      }, 100);
+	      });
 	      isFocusVisibleRef.current = false;
 	      return true;
 	    }
@@ -7208,10 +7289,7 @@
 	};
 	const ClassNameGenerator = createClassNameGenerator();
 
-	// If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
-	// \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
-
-	const globalStateClassesMapping = {
+	const globalStateClasses = {
 	  active: 'active',
 	  checked: 'checked',
 	  completed: 'completed',
@@ -7225,19 +7303,23 @@
 	  required: 'required',
 	  selected: 'selected'
 	};
-	function generateUtilityClass(componentName, slot, globalStatePrefix = 'Mui') {
-	  const globalStateClass = globalStateClassesMapping[slot];
+	function generateUtilityClass$1(componentName, slot, globalStatePrefix = 'Mui') {
+	  const globalStateClass = globalStateClasses[slot];
 	  return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
 	}
 
-	function generateUtilityClasses(componentName, slots, globalStatePrefix = 'Mui') {
+	function generateUtilityClasses$1(componentName, slots, globalStatePrefix = 'Mui') {
 	  const result = {};
 	  slots.forEach(slot => {
-	    result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+	    result[slot] = generateUtilityClass$1(componentName, slot, globalStatePrefix);
 	  });
 	  return result;
 	}
 
+	function clamp(val, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) {
+	  return Math.max(min, Math.min(val, max));
+	}
+
 	const _excluded$S = ["values", "unit", "step"];
 	const sortBreakpointsValues = values => {
 	  const breakpointsAsArray = Object.keys(values).map(key => ({
@@ -8301,6 +8383,81 @@
 	const styleFunctionSx = unstable_createStyleFunctionSx();
 	styleFunctionSx.filterProps = ['sx'];
 
+	/**
+	 * A universal utility to style components with multiple color modes. Always use it from the theme object.
+	 * It works with:
+	 *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
+	 *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+	 *  - Zero-runtime engine
+	 *
+	 * Tips: Use an array over object spread and place `theme.applyStyles()` last.
+	 *
+	 * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
+	 *
+	 * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
+	 *
+	 * @example
+	 * 1. using with `styled`:
+	 * ```jsx
+	 *   const Component = styled('div')(({ theme }) => [
+	 *     { background: '#e5e5e5' },
+	 *     theme.applyStyles('dark', {
+	 *       background: '#1c1c1c',
+	 *       color: '#fff',
+	 *     }),
+	 *   ]);
+	 * ```
+	 *
+	 * @example
+	 * 2. using with `sx` prop:
+	 * ```jsx
+	 *   <Box sx={theme => [
+	 *     { background: '#e5e5e5' },
+	 *     theme.applyStyles('dark', {
+	 *        background: '#1c1c1c',
+	 *        color: '#fff',
+	 *      }),
+	 *     ]}
+	 *   />
+	 * ```
+	 *
+	 * @example
+	 * 3. theming a component:
+	 * ```jsx
+	 *   extendTheme({
+	 *     components: {
+	 *       MuiButton: {
+	 *         styleOverrides: {
+	 *           root: ({ theme }) => [
+	 *             { background: '#e5e5e5' },
+	 *             theme.applyStyles('dark', {
+	 *               background: '#1c1c1c',
+	 *               color: '#fff',
+	 *             }),
+	 *           ],
+	 *         },
+	 *       }
+	 *     }
+	 *   })
+	 *```
+	 */
+	function applyStyles$2(key, styles) {
+	  // @ts-expect-error this is 'any' type
+	  const theme = this;
+	  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
+	    // If CssVarsProvider is used as a provider,
+	    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
+	    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
+	    return {
+	      [selector]: styles
+	    };
+	  }
+	  if (theme.palette.mode === key) {
+	    return styles;
+	  }
+	  return {};
+	}
+
 	const _excluded$R = ["breakpoints", "palette", "spacing", "shape"];
 	function createTheme$1(options = {}, ...args) {
 	  const {
@@ -8323,6 +8480,7 @@
 	    spacing,
 	    shape: _extends$4({}, shape$1, shapeInput)
 	  }, other);
+	  muiTheme.applyStyles = applyStyles$2;
 	  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
 	  muiTheme.unstable_sxConfig = _extends$4({}, defaultSxConfig$1, other == null ? void 0 : other.unstable_sxConfig);
 	  muiTheme.unstable_sx = function sx(props) {
@@ -8769,7 +8927,7 @@
 	  return resolveProps(theme.components[name].defaultProps, props);
 	}
 
-	function useThemeProps$1({
+	function useThemeProps$2({
 	  props,
 	  name,
 	  defaultTheme,
@@ -8787,7 +8945,6 @@
 	  return mergedProps;
 	}
 
-	/* eslint-disable @typescript-eslint/naming-convention */
 	/**
 	 * Returns a number whose value is limited to the given range.
 	 * @param {number} value The value to be clamped
@@ -8795,8 +8952,8 @@
 	 * @param {number} max The upper boundary of the output range
 	 * @returns {number} A number in the range [min, max]
 	 */
-	function clamp(value, min = 0, max = 1) {
-	  return Math.min(Math.max(min, value), max);
+	function clampWrapper(value, min = 0, max = 1) {
+	  return clamp(value, min, max);
 	}
 
 	/**
@@ -8959,7 +9116,7 @@
 	 */
 	function alpha(color, value) {
 	  color = decomposeColor(color);
-	  value = clamp(value);
+	  value = clampWrapper(value);
 	  if (color.type === 'rgb' || color.type === 'hsl') {
 	    color.type += 'a';
 	  }
@@ -8979,7 +9136,7 @@
 	 */
 	function darken(color, coefficient) {
 	  color = decomposeColor(color);
-	  coefficient = clamp(coefficient);
+	  coefficient = clampWrapper(coefficient);
 	  if (color.type.indexOf('hsl') !== -1) {
 	    color.values[2] *= 1 - coefficient;
 	  } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
@@ -8998,7 +9155,7 @@
 	 */
 	function lighten(color, coefficient) {
 	  color = decomposeColor(color);
-	  coefficient = clamp(coefficient);
+	  coefficient = clampWrapper(coefficient);
 	  if (color.type.indexOf('hsl') !== -1) {
 	    color.values[2] += (100 - color.values[2]) * coefficient;
 	  } else if (color.type.indexOf('rgb') !== -1) {
@@ -9128,7 +9285,7 @@
 	  overridesResolver: (props, styles) => styles.root
 	});
 	function useThemePropsDefault(props) {
-	  return useThemeProps$1({
+	  return useThemeProps$2({
 	    props,
 	    name: 'MuiStack',
 	    defaultTheme: defaultTheme$3
@@ -9237,7 +9394,7 @@
 	    const slots = {
 	      root: ['root']
 	    };
-	    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+	    return composeClasses(slots, slot => generateUtilityClass$1(componentName, slot), {});
 	  };
 	  const StackRoot = createStyledComponent(style);
 	  const Stack = /*#__PURE__*/reactExports.forwardRef(function Grid(inProps, ref) {
@@ -9973,11 +10130,11 @@
 	  return theme[THEME_ID] || theme;
 	}
 
-	function useThemeProps({
+	function useThemeProps$1({
 	  props,
 	  name
 	}) {
-	  return useThemeProps$1({
+	  return useThemeProps$2({
 	    props,
 	    name,
 	    defaultTheme: defaultTheme$2,
@@ -10819,7 +10976,7 @@
 	  });
 	}
 
-	const touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
+	const touchRippleClasses = generateUtilityClasses$1('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
 
 	const _excluded$F = ["center", "classes", "className"];
 	let _$1 = t => t,
@@ -10941,7 +11098,7 @@
 	 * TODO v5: Make private
 	 */
 	const TouchRipple = /*#__PURE__*/reactExports.forwardRef(function TouchRipple(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiTouchRipple'
 	  });
@@ -10965,18 +11122,11 @@
 	  const ignoringMouseDown = reactExports.useRef(false);
 	  // We use a timer in order to only show the ripples for touch "click" like events.
 	  // We don't want to display the ripple for touch scroll events.
-	  const startTimer = reactExports.useRef(0);
+	  const startTimer = useTimeout();
 
 	  // This is the hook called once the previous timeout is ready.
 	  const startTimerCommit = reactExports.useRef(null);
 	  const container = reactExports.useRef(null);
-	  reactExports.useEffect(() => {
-	    return () => {
-	      if (startTimer.current) {
-	        clearTimeout(startTimer.current);
-	      }
-	    };
-	  }, []);
 	  const startCommit = reactExports.useCallback(params => {
 	    const {
 	      pulsate,
@@ -11069,12 +11219,13 @@
 	          });
 	        };
 	        // Delay the execution of the ripple effect.
-	        startTimer.current = setTimeout(() => {
+	        // We have to make a tradeoff with this delay value.
+	        startTimer.start(DELAY_RIPPLE, () => {
 	          if (startTimerCommit.current) {
 	            startTimerCommit.current();
 	            startTimerCommit.current = null;
 	          }
-	        }, DELAY_RIPPLE); // We have to make a tradeoff with this value.
+	        });
 	      }
 	    } else {
 	      startCommit({
@@ -11085,21 +11236,21 @@
 	        cb
 	      });
 	    }
-	  }, [centerProp, startCommit]);
+	  }, [centerProp, startCommit, startTimer]);
 	  const pulsate = reactExports.useCallback(() => {
 	    start({}, {
 	      pulsate: true
 	    });
 	  }, [start]);
 	  const stop = reactExports.useCallback((event, cb) => {
-	    clearTimeout(startTimer.current);
+	    startTimer.clear();
 
 	    // The touch interaction occurs too quickly.
 	    // We still want to show ripple effect.
 	    if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {
 	      startTimerCommit.current();
 	      startTimerCommit.current = null;
-	      startTimer.current = setTimeout(() => {
+	      startTimer.start(0, () => {
 	        stop(event, cb);
 	      });
 	      return;
@@ -11112,7 +11263,7 @@
 	      return oldRipples;
 	    });
 	    rippleCallback.current = cb;
-	  }, []);
+	  }, [startTimer]);
 	  reactExports.useImperativeHandle(ref, () => ({
 	    pulsate,
 	    start,
@@ -11132,9 +11283,9 @@
 	var TouchRipple$1 = TouchRipple;
 
 	function getButtonBaseUtilityClass(slot) {
-	  return generateUtilityClass('MuiButtonBase', slot);
+	  return generateUtilityClass$1('MuiButtonBase', slot);
 	}
-	const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
+	const buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
 
 	const _excluded$E = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 	const useUtilityClasses$r = ownerState => {
@@ -11203,7 +11354,7 @@
 	 * It contains a load of style reset and some focus/ripple logic.
 	 */
 	const ButtonBase = /*#__PURE__*/reactExports.forwardRef(function ButtonBase(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiButtonBase'
 	  });
@@ -11430,9 +11581,9 @@
 	var ButtonBase$1 = ButtonBase;
 
 	function getButtonUtilityClass(slot) {
-	  return generateUtilityClass('MuiButton', slot);
+	  return generateUtilityClass$1('MuiButton', slot);
 	}
-	const buttonClasses = generateUtilityClasses('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
+	const buttonClasses = generateUtilityClasses$1('MuiButton', ['root', 'text', 'textInherit', 'textPrimary', 'textSecondary', 'textSuccess', 'textError', 'textInfo', 'textWarning', 'outlined', 'outlinedInherit', 'outlinedPrimary', 'outlinedSecondary', 'outlinedSuccess', 'outlinedError', 'outlinedInfo', 'outlinedWarning', 'contained', 'containedInherit', 'containedPrimary', 'containedSecondary', 'containedSuccess', 'containedError', 'containedInfo', 'containedWarning', 'disableElevation', 'focusVisible', 'disabled', 'colorInherit', 'textSizeSmall', 'textSizeMedium', 'textSizeLarge', 'outlinedSizeSmall', 'outlinedSizeMedium', 'outlinedSizeLarge', 'containedSizeSmall', 'containedSizeMedium', 'containedSizeLarge', 'sizeMedium', 'sizeSmall', 'sizeLarge', 'fullWidth', 'startIcon', 'endIcon', 'iconSizeSmall', 'iconSizeMedium', 'iconSizeLarge']);
 	var buttonClasses$1 = buttonClasses;
 
 	/**
@@ -11654,7 +11805,7 @@
 	  const contextProps = reactExports.useContext(ButtonGroupContext$1);
 	  const buttonGroupButtonContextPositionClassName = reactExports.useContext(ButtonGroupButtonContext$1);
 	  const resolvedProps = resolveProps(contextProps, inProps);
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: resolvedProps,
 	    name: 'MuiButton'
 	  });
@@ -12051,7 +12202,7 @@
 	  return cache[key];
 	}
 
-	const NEBULA_VERSION_HASH = "c1b9" ;
+	const NEBULA_VERSION_HASH = "339b" ;
 	ClassNameGenerator.configure(componentName => {
 	  return "njs-".concat(NEBULA_VERSION_HASH, "-").concat(componentName.replace('Mui', ''));
 	});
@@ -12311,7 +12462,7 @@
 	  const appRef = React.createRef();
 	  const element = document.createElement('div');
 	  element.style.display = 'none';
-	  element.setAttribute('data-nebulajs-version', "4.10.0" );
+	  element.setAttribute('data-nebulajs-version', "4.11.0" );
 	  element.setAttribute('data-app-id', app.id);
 	  document.body.appendChild(element);
 	  if (context) {
@@ -12380,9 +12531,9 @@
 	}
 
 	function getSvgIconUtilityClass(slot) {
-	  return generateUtilityClass('MuiSvgIcon', slot);
+	  return generateUtilityClass$1('MuiSvgIcon', slot);
 	}
-	generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+	generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
 	const _excluded$C = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 	const useUtilityClasses$p = ownerState => {
@@ -12437,7 +12588,7 @@
 	  };
 	});
 	const SvgIcon$1 = /*#__PURE__*/reactExports.forwardRef(function SvgIcon(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiSvgIcon'
 	  });
@@ -12544,9 +12695,9 @@
 	}
 
 	function getPaperUtilityClass(slot) {
-	  return generateUtilityClass('MuiPaper', slot);
+	  return generateUtilityClass$1('MuiPaper', slot);
 	}
-	generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
+	generateUtilityClasses$1('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 
 	const _excluded$B = ["className", "component", "elevation", "square", "variant"];
 	const useUtilityClasses$o = ownerState => {
@@ -12592,7 +12743,7 @@
 	  }));
 	});
 	const Paper = /*#__PURE__*/reactExports.forwardRef(function Paper(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiPaper'
 	  });
@@ -12620,12 +12771,238 @@
 	});
 	var Paper$1 = Paper;
 
+	function _extends() {
+	  _extends = Object.assign ? Object.assign.bind() : function (target) {
+	    for (var i = 1; i < arguments.length; i++) {
+	      var source = arguments[i];
+	      for (var key in source) {
+	        if (Object.prototype.hasOwnProperty.call(source, key)) {
+	          target[key] = source[key];
+	        }
+	      }
+	    }
+	    return target;
+	  };
+	  return _extends.apply(this, arguments);
+	}
+
+	/**
+	 * Determines if a given element is a DOM element name (i.e. not a React component).
+	 */
+	function isHostComponent(element) {
+	  return typeof element === 'string';
+	}
+
+	/**
+	 * Type of the ownerState based on the type of an element it applies to.
+	 * This resolves to the provided OwnerState for React components and `undefined` for host components.
+	 * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+	 */
+
+	/**
+	 * Appends the ownerState object to the props, merging with the existing one if necessary.
+	 *
+	 * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
+	 * @param otherProps Props of the element.
+	 * @param ownerState
+	 */
+	function appendOwnerState(elementType, otherProps, ownerState) {
+	  if (elementType === undefined || isHostComponent(elementType)) {
+	    return otherProps;
+	  }
+	  return _extends({}, otherProps, {
+	    ownerState: _extends({}, otherProps.ownerState, ownerState)
+	  });
+	}
+
+	const defaultContextValue = {
+	  disableDefaultClasses: false
+	};
+	const ClassNameConfiguratorContext = /*#__PURE__*/reactExports.createContext(defaultContextValue);
+	/**
+	 * @ignore - internal hook.
+	 *
+	 * Wraps the `generateUtilityClass` function and controls how the classes are generated.
+	 * Currently it only affects whether the classes are applied or not.
+	 *
+	 * @returns Function to be called with the `generateUtilityClass` function specific to a component to generate the classes.
+	 */
+	function useClassNamesOverride(generateUtilityClass) {
+	  const {
+	    disableDefaultClasses
+	  } = reactExports.useContext(ClassNameConfiguratorContext);
+	  return slot => {
+	    if (disableDefaultClasses) {
+	      return '';
+	    }
+	    return generateUtilityClass(slot);
+	  };
+	}
+
+	/**
+	 * Extracts event handlers from a given object.
+	 * A prop is considered an event handler if it is a function and its name starts with `on`.
+	 *
+	 * @param object An object to extract event handlers from.
+	 * @param excludeKeys An array of keys to exclude from the returned object.
+	 */
+	function extractEventHandlers(object, excludeKeys = []) {
+	  if (object === undefined) {
+	    return {};
+	  }
+	  const result = {};
+	  Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
+	    result[prop] = object[prop];
+	  });
+	  return result;
+	}
+
+	/**
+	 * If `componentProps` is a function, calls it with the provided `ownerState`.
+	 * Otherwise, just returns `componentProps`.
+	 */
+	function resolveComponentProps(componentProps, ownerState, slotState) {
+	  if (typeof componentProps === 'function') {
+	    return componentProps(ownerState, slotState);
+	  }
+	  return componentProps;
+	}
+
+	function _objectWithoutPropertiesLoose(source, excluded) {
+	  if (source == null) return {};
+	  var target = {};
+	  var sourceKeys = Object.keys(source);
+	  var key, i;
+	  for (i = 0; i < sourceKeys.length; i++) {
+	    key = sourceKeys[i];
+	    if (excluded.indexOf(key) >= 0) continue;
+	    target[key] = source[key];
+	  }
+	  return target;
+	}
+
+	/**
+	 * Removes event handlers from the given object.
+	 * A field is considered an event handler if it is a function with a name beginning with `on`.
+	 *
+	 * @param object Object to remove event handlers from.
+	 * @returns Object with event handlers removed.
+	 */
+	function omitEventHandlers(object) {
+	  if (object === undefined) {
+	    return {};
+	  }
+	  const result = {};
+	  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
+	    result[prop] = object[prop];
+	  });
+	  return result;
+	}
+
+	/**
+	 * Merges the slot component internal props (usually coming from a hook)
+	 * with the externally provided ones.
+	 *
+	 * The merge order is (the latter overrides the former):
+	 * 1. The internal props (specified as a getter function to work with get*Props hook result)
+	 * 2. Additional props (specified internally on a Base UI component)
+	 * 3. External props specified on the owner component. These should only be used on a root slot.
+	 * 4. External props specified in the `slotProps.*` prop.
+	 * 5. The `className` prop - combined from all the above.
+	 * @param parameters
+	 * @returns
+	 */
+	function mergeSlotProps(parameters) {
+	  const {
+	    getSlotProps,
+	    additionalProps,
+	    externalSlotProps,
+	    externalForwardedProps,
+	    className
+	  } = parameters;
+	  if (!getSlotProps) {
+	    // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
+	    // so we can simply merge all the props without having to worry about extracting event handlers.
+	    const joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+	    const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+	    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+	    if (joinedClasses.length > 0) {
+	      props.className = joinedClasses;
+	    }
+	    if (Object.keys(mergedStyle).length > 0) {
+	      props.style = mergedStyle;
+	    }
+	    return {
+	      props,
+	      internalRef: undefined
+	    };
+	  }
+
+	  // In this case, getSlotProps is responsible for calling the external event handlers.
+	  // We don't need to include them in the merged props because of this.
+
+	  const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
+	  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
+	  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
+	  const internalSlotProps = getSlotProps(eventHandlers);
+
+	  // The order of classes is important here.
+	  // Emotion (that we use in libraries consuming Base UI) depends on this order
+	  // to properly override style. It requires the most important classes to be last
+	  // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
+	  const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+	  const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+	  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
+	  if (joinedClasses.length > 0) {
+	    props.className = joinedClasses;
+	  }
+	  if (Object.keys(mergedStyle).length > 0) {
+	    props.style = mergedStyle;
+	  }
+	  return {
+	    props,
+	    internalRef: internalSlotProps.ref
+	  };
+	}
+
+	const _excluded$A = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
+	/**
+	 * @ignore - do not document.
+	 * Builds the props to be passed into the slot of an unstyled component.
+	 * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
+	 * If the slot component is not a host component, it also merges in the `ownerState`.
+	 *
+	 * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
+	 */
+	function useSlotProps(parameters) {
+	  var _parameters$additiona;
+	  const {
+	      elementType,
+	      externalSlotProps,
+	      ownerState,
+	      skipResolvingSlotProps = false
+	    } = parameters,
+	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$A);
+	  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
+	  const {
+	    props: mergedProps,
+	    internalRef
+	  } = mergeSlotProps(_extends({}, rest, {
+	    externalSlotProps: resolvedComponentsProps
+	  }));
+	  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
+	  const props = appendOwnerState(elementType, _extends({}, mergedProps, {
+	    ref
+	  }), ownerState);
+	  return props;
+	}
+
 	function getIconButtonUtilityClass(slot) {
-	  return generateUtilityClass('MuiIconButton', slot);
+	  return generateUtilityClass$1('MuiIconButton', slot);
 	}
-	const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+	const iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
 
-	const _excluded$A = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
+	const _excluded$z = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 	const useUtilityClasses$n = ownerState => {
 	  const {
 	    classes,
@@ -12713,7 +13090,7 @@
 	 * regarding the available icon options.
 	 */
 	const IconButton = /*#__PURE__*/reactExports.forwardRef(function IconButton(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiIconButton'
 	  });
@@ -12726,7 +13103,7 @@
 	      disableFocusRipple = false,
 	      size = 'medium'
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$A);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
 	  const ownerState = _extends$6({}, props, {
 	    edge,
 	    color,
@@ -12749,11 +13126,11 @@
 	var IconButton$1 = IconButton;
 
 	function getTypographyUtilityClass(slot) {
-	  return generateUtilityClass('MuiTypography', slot);
+	  return generateUtilityClass$1('MuiTypography', slot);
 	}
-	generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+	generateUtilityClasses$1('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
 
-	const _excluded$z = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
+	const _excluded$y = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 	const useUtilityClasses$m = ownerState => {
 	  const {
 	    align,
@@ -12822,7 +13199,7 @@
 	  return colorTransformations[color] || color;
 	};
 	const Typography = /*#__PURE__*/reactExports.forwardRef(function Typography(inProps, ref) {
-	  const themeProps = useThemeProps({
+	  const themeProps = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiTypography'
 	  });
@@ -12840,7 +13217,7 @@
 	      variant = 'body1',
 	      variantMapping = defaultVariantMapping
 	    } = props,
-	    other = _objectWithoutPropertiesLoose$3(props, _excluded$z);
+	    other = _objectWithoutPropertiesLoose$3(props, _excluded$y);
 	  const ownerState = _extends$6({}, props, {
 	    align,
 	    color,
@@ -12863,232 +13240,6 @@
 	});
 	var Typography$1 = Typography;
 
-	function _extends() {
-	  _extends = Object.assign ? Object.assign.bind() : function (target) {
-	    for (var i = 1; i < arguments.length; i++) {
-	      var source = arguments[i];
-	      for (var key in source) {
-	        if (Object.prototype.hasOwnProperty.call(source, key)) {
-	          target[key] = source[key];
-	        }
-	      }
-	    }
-	    return target;
-	  };
-	  return _extends.apply(this, arguments);
-	}
-
-	/**
-	 * Determines if a given element is a DOM element name (i.e. not a React component).
-	 */
-	function isHostComponent(element) {
-	  return typeof element === 'string';
-	}
-
-	/**
-	 * Type of the ownerState based on the type of an element it applies to.
-	 * This resolves to the provided OwnerState for React components and `undefined` for host components.
-	 * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
-	 */
-
-	/**
-	 * Appends the ownerState object to the props, merging with the existing one if necessary.
-	 *
-	 * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
-	 * @param otherProps Props of the element.
-	 * @param ownerState
-	 */
-	function appendOwnerState(elementType, otherProps, ownerState) {
-	  if (elementType === undefined || isHostComponent(elementType)) {
-	    return otherProps;
-	  }
-	  return _extends({}, otherProps, {
-	    ownerState: _extends({}, otherProps.ownerState, ownerState)
-	  });
-	}
-
-	const defaultContextValue = {
-	  disableDefaultClasses: false
-	};
-	const ClassNameConfiguratorContext = /*#__PURE__*/reactExports.createContext(defaultContextValue);
-	/**
-	 * @ignore - internal hook.
-	 *
-	 * Wraps the `generateUtilityClass` function and controls how the classes are generated.
-	 * Currently it only affects whether the classes are applied or not.
-	 *
-	 * @returns Function to be called with the `generateUtilityClass` function specific to a component to generate the classes.
-	 */
-	function useClassNamesOverride(generateUtilityClass) {
-	  const {
-	    disableDefaultClasses
-	  } = reactExports.useContext(ClassNameConfiguratorContext);
-	  return slot => {
-	    if (disableDefaultClasses) {
-	      return '';
-	    }
-	    return generateUtilityClass(slot);
-	  };
-	}
-
-	/**
-	 * Extracts event handlers from a given object.
-	 * A prop is considered an event handler if it is a function and its name starts with `on`.
-	 *
-	 * @param object An object to extract event handlers from.
-	 * @param excludeKeys An array of keys to exclude from the returned object.
-	 */
-	function extractEventHandlers(object, excludeKeys = []) {
-	  if (object === undefined) {
-	    return {};
-	  }
-	  const result = {};
-	  Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {
-	    result[prop] = object[prop];
-	  });
-	  return result;
-	}
-
-	/**
-	 * If `componentProps` is a function, calls it with the provided `ownerState`.
-	 * Otherwise, just returns `componentProps`.
-	 */
-	function resolveComponentProps(componentProps, ownerState, slotState) {
-	  if (typeof componentProps === 'function') {
-	    return componentProps(ownerState, slotState);
-	  }
-	  return componentProps;
-	}
-
-	function _objectWithoutPropertiesLoose(source, excluded) {
-	  if (source == null) return {};
-	  var target = {};
-	  var sourceKeys = Object.keys(source);
-	  var key, i;
-	  for (i = 0; i < sourceKeys.length; i++) {
-	    key = sourceKeys[i];
-	    if (excluded.indexOf(key) >= 0) continue;
-	    target[key] = source[key];
-	  }
-	  return target;
-	}
-
-	/**
-	 * Removes event handlers from the given object.
-	 * A field is considered an event handler if it is a function with a name beginning with `on`.
-	 *
-	 * @param object Object to remove event handlers from.
-	 * @returns Object with event handlers removed.
-	 */
-	function omitEventHandlers(object) {
-	  if (object === undefined) {
-	    return {};
-	  }
-	  const result = {};
-	  Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {
-	    result[prop] = object[prop];
-	  });
-	  return result;
-	}
-
-	/**
-	 * Merges the slot component internal props (usually coming from a hook)
-	 * with the externally provided ones.
-	 *
-	 * The merge order is (the latter overrides the former):
-	 * 1. The internal props (specified as a getter function to work with get*Props hook result)
-	 * 2. Additional props (specified internally on a Base UI component)
-	 * 3. External props specified on the owner component. These should only be used on a root slot.
-	 * 4. External props specified in the `slotProps.*` prop.
-	 * 5. The `className` prop - combined from all the above.
-	 * @param parameters
-	 * @returns
-	 */
-	function mergeSlotProps(parameters) {
-	  const {
-	    getSlotProps,
-	    additionalProps,
-	    externalSlotProps,
-	    externalForwardedProps,
-	    className
-	  } = parameters;
-	  if (!getSlotProps) {
-	    // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,
-	    // so we can simply merge all the props without having to worry about extracting event handlers.
-	    const joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
-	    const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
-	    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
-	    if (joinedClasses.length > 0) {
-	      props.className = joinedClasses;
-	    }
-	    if (Object.keys(mergedStyle).length > 0) {
-	      props.style = mergedStyle;
-	    }
-	    return {
-	      props,
-	      internalRef: undefined
-	    };
-	  }
-
-	  // In this case, getSlotProps is responsible for calling the external event handlers.
-	  // We don't need to include them in the merged props because of this.
-
-	  const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
-	  const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
-	  const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
-	  const internalSlotProps = getSlotProps(eventHandlers);
-
-	  // The order of classes is important here.
-	  // Emotion (that we use in libraries consuming Base UI) depends on this order
-	  // to properly override style. It requires the most important classes to be last
-	  // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.
-	  const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
-	  const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
-	  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
-	  if (joinedClasses.length > 0) {
-	    props.className = joinedClasses;
-	  }
-	  if (Object.keys(mergedStyle).length > 0) {
-	    props.style = mergedStyle;
-	  }
-	  return {
-	    props,
-	    internalRef: internalSlotProps.ref
-	  };
-	}
-
-	const _excluded$y = ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"];
-	/**
-	 * @ignore - do not document.
-	 * Builds the props to be passed into the slot of an unstyled component.
-	 * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.
-	 * If the slot component is not a host component, it also merges in the `ownerState`.
-	 *
-	 * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.
-	 */
-	function useSlotProps(parameters) {
-	  var _parameters$additiona;
-	  const {
-	      elementType,
-	      externalSlotProps,
-	      ownerState,
-	      skipResolvingSlotProps = false
-	    } = parameters,
-	    rest = _objectWithoutPropertiesLoose(parameters, _excluded$y);
-	  const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
-	  const {
-	    props: mergedProps,
-	    internalRef
-	  } = mergeSlotProps(_extends({}, rest, {
-	    externalSlotProps: resolvedComponentsProps
-	  }));
-	  const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
-	  const props = appendOwnerState(elementType, _extends({}, mergedProps, {
-	    ref
-	  }), ownerState);
-	  return props;
-	}
-
 	/**
 	 *
 	 * Demos:
@@ -13127,6 +13278,26 @@
 	  };
 	}
 
+	const GLOBAL_CLASS_PREFIX = 'base';
+	function buildStateClass(state) {
+	  return `${GLOBAL_CLASS_PREFIX}--${state}`;
+	}
+	function buildSlotClass(componentName, slot) {
+	  return `${GLOBAL_CLASS_PREFIX}-${componentName}-${slot}`;
+	}
+	function generateUtilityClass(componentName, slot) {
+	  const globalStateClass = globalStateClasses[slot];
+	  return globalStateClass ? buildStateClass(globalStateClass) : buildSlotClass(componentName, slot);
+	}
+
+	function generateUtilityClasses(componentName, slots) {
+	  const result = {};
+	  slots.forEach(slot => {
+	    result[slot] = generateUtilityClass(componentName, slot);
+	  });
+	  return result;
+	}
+
 	// Inspired by https://github.com/focus-trap/tabbable
 	const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
 	function getTabIndex(node) {
@@ -15244,10 +15415,11 @@
 	  });
 	});
 
+	const COMPONENT_NAME = 'Popper';
 	function getPopperUtilityClass(slot) {
-	  return generateUtilityClass('MuiPopper', slot);
+	  return generateUtilityClass(COMPONENT_NAME, slot);
 	}
-	generateUtilityClasses('MuiPopper', ['root']);
+	generateUtilityClasses(COMPONENT_NAME, ['root']);
 
 	const _excluded$x = ["anchorEl", "children", "direction", "disablePortal", "modifiers", "open", "placement", "popperOptions", "popperRef", "slotProps", "slots", "TransitionProps", "ownerState"],
 	  _excluded2$3 = ["anchorEl", "children", "container", "direction", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "style", "transition", "slotProps", "slots"];
@@ -16115,7 +16287,7 @@
 	const Popper = /*#__PURE__*/reactExports.forwardRef(function Popper(inProps, ref) {
 	  var _slots$root;
 	  const theme = useTheme$4();
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiPopper'
 	  });
@@ -16218,9 +16390,9 @@
 	}
 
 	function getInputBaseUtilityClass(slot) {
-	  return generateUtilityClass('MuiInputBase', slot);
+	  return generateUtilityClass$1('MuiInputBase', slot);
 	}
-	const inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
+	const inputBaseClasses = generateUtilityClasses$1('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
 	var inputBaseClasses$1 = inputBaseClasses;
 
 	const _excluded$u = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
@@ -16412,7 +16584,7 @@
 	 */
 	const InputBase = /*#__PURE__*/reactExports.forwardRef(function InputBase(inProps, ref) {
 	  var _slotProps$input;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiInputBase'
 	  });
@@ -16660,9 +16832,9 @@
 	var InputBase$1 = InputBase;
 
 	function getOutlinedInputUtilityClass(slot) {
-	  return generateUtilityClass('MuiOutlinedInput', slot);
+	  return generateUtilityClass$1('MuiOutlinedInput', slot);
 	}
-	const outlinedInputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+	const outlinedInputClasses = _extends$6({}, inputBaseClasses$1, generateUtilityClasses$1('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 	var outlinedInputClasses$1 = outlinedInputClasses;
 
 	const _excluded$t = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
@@ -16784,9 +16956,9 @@
 	var Fade$1 = Fade;
 
 	function getBackdropUtilityClass(slot) {
-	  return generateUtilityClass('MuiBackdrop', slot);
+	  return generateUtilityClass$1('MuiBackdrop', slot);
 	}
-	generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+	generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
 
 	const _excluded$s = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 	const useUtilityClasses$j = ownerState => {
@@ -16826,7 +16998,7 @@
 	}));
 	const Backdrop = /*#__PURE__*/reactExports.forwardRef(function Backdrop(inProps, ref) {
 	  var _slotProps$root, _ref, _slots$root;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiBackdrop'
 	  });
@@ -16868,10 +17040,15 @@
 	});
 	var Backdrop$1 = Backdrop;
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	function createUseThemeProps(name) {
+	  return useThemeProps$1;
+	}
+
 	function getBadgeUtilityClass(slot) {
-	  return generateUtilityClass('MuiBadge', slot);
+	  return generateUtilityClass$1('MuiBadge', slot);
 	}
-	const badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular',
+	const badgeClasses = generateUtilityClasses$1('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular',
 	// TODO: v6 remove the overlap value from these class keys
 	'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
 	var badgeClasses$1 = badgeClasses;
@@ -16879,6 +17056,7 @@
 	const _excluded$r = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 	const RADIUS_STANDARD = 10;
 	const RADIUS_DOT = 4;
+	const useThemeProps = createUseThemeProps();
 	const useUtilityClasses$i = ownerState => {
 	  const {
 	    color,
@@ -17175,7 +17353,7 @@
 	});
 	var Badge$1 = Badge;
 
-	const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+	const boxClasses = generateUtilityClasses$1('MuiBox', ['root']);
 	var boxClasses$1 = boxClasses;
 
 	const defaultTheme = createTheme();
@@ -17188,9 +17366,9 @@
 	var Box$1 = Box;
 
 	function getSwitchBaseUtilityClass(slot) {
-	  return generateUtilityClass('PrivateSwitchBase', slot);
+	  return generateUtilityClass$1('PrivateSwitchBase', slot);
 	}
-	generateUtilityClasses('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
+	generateUtilityClasses$1('PrivateSwitchBase', ['root', 'checked', 'disabled', 'input', 'edgeStart', 'edgeEnd']);
 
 	const _excluded$q = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 	const useUtilityClasses$h = ownerState => {
@@ -17356,9 +17534,9 @@
 	}), 'IndeterminateCheckBox');
 
 	function getCheckboxUtilityClass(slot) {
-	  return generateUtilityClass('MuiCheckbox', slot);
+	  return generateUtilityClass$1('MuiCheckbox', slot);
 	}
-	const checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
+	const checkboxClasses = generateUtilityClasses$1('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
 	var checkboxClasses$1 = checkboxClasses;
 
 	const _excluded$p = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
@@ -17411,7 +17589,7 @@
 	const defaultIndeterminateIcon = /*#__PURE__*/jsxRuntimeExports.jsx(IndeterminateCheckBoxIcon, {});
 	const Checkbox = /*#__PURE__*/reactExports.forwardRef(function Checkbox(inProps, ref) {
 	  var _icon$props$fontSize, _indeterminateIcon$pr;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiCheckbox'
 	  });
@@ -17455,9 +17633,9 @@
 	var Checkbox$1 = Checkbox;
 
 	function getCircularProgressUtilityClass(slot) {
-	  return generateUtilityClass('MuiCircularProgress', slot);
+	  return generateUtilityClass$1('MuiCircularProgress', slot);
 	}
-	generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+	generateUtilityClasses$1('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
 
 	const _excluded$o = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 	let _ = t => t,
@@ -17569,7 +17747,7 @@
 	 * attribute to `true` on that region until it has finished loading.
 	 */
 	const CircularProgress = /*#__PURE__*/reactExports.forwardRef(function CircularProgress(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiCircularProgress'
 	  });
@@ -17633,9 +17811,9 @@
 	var CircularProgress$1 = CircularProgress;
 
 	function getModalUtilityClass(slot) {
-	  return generateUtilityClass('MuiModal', slot);
+	  return generateUtilityClass$1('MuiModal', slot);
 	}
-	generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+	generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
 
 	const _excluded$n = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 	const useUtilityClasses$e = ownerState => {
@@ -17697,7 +17875,7 @@
 	 */
 	const Modal = /*#__PURE__*/reactExports.forwardRef(function Modal(inProps, ref) {
 	  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    name: 'MuiModal',
 	    props: inProps
 	  });
@@ -17823,9 +18001,9 @@
 	var Modal$1 = Modal;
 
 	function getDividerUtilityClass(slot) {
-	  return generateUtilityClass('MuiDivider', slot);
+	  return generateUtilityClass$1('MuiDivider', slot);
 	}
-	const dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
+	const dividerClasses = generateUtilityClasses$1('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
 	var dividerClasses$1 = dividerClasses;
 
 	const _excluded$m = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
@@ -17954,7 +18132,7 @@
 	  paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
 	}));
 	const Divider = /*#__PURE__*/reactExports.forwardRef(function Divider(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiDivider'
 	  });
@@ -18010,7 +18188,7 @@
 	    slot: 'Root',
 	    overridesResolver: (props, styles) => styles.root
 	  }),
-	  useThemeProps: inProps => useThemeProps({
+	  useThemeProps: inProps => useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiStack'
 	  })
@@ -18018,9 +18196,9 @@
 	var Stack$1 = Stack;
 
 	function getFormControlLabelUtilityClasses(slot) {
-	  return generateUtilityClass('MuiFormControlLabel', slot);
+	  return generateUtilityClass$1('MuiFormControlLabel', slot);
 	}
-	const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
+	const formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 	var formControlLabelClasses$1 = formControlLabelClasses;
 
 	const _excluded$l = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
@@ -18102,7 +18280,7 @@
 	 */
 	const FormControlLabel = /*#__PURE__*/reactExports.forwardRef(function FormControlLabel(inProps, ref) {
 	  var _ref, _slotProps$typography;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiFormControlLabel'
 	  });
@@ -18177,13 +18355,13 @@
 	var GridContext$1 = GridContext;
 
 	function getGridUtilityClass(slot) {
-	  return generateUtilityClass('MuiGrid', slot);
+	  return generateUtilityClass$1('MuiGrid', slot);
 	}
 	const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 	const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
 	const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 	const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-	const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth',
+	const gridClasses = generateUtilityClasses$1('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth',
 	// spacings
 	...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
 	// direction values
@@ -18532,7 +18710,7 @@
 	  return composeClasses(slots, getGridUtilityClass, classes);
 	};
 	const Grid = /*#__PURE__*/reactExports.forwardRef(function Grid(inProps, ref) {
-	  const themeProps = useThemeProps({
+	  const themeProps = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiGrid'
 	  });
@@ -18639,7 +18817,7 @@
 	      TransitionComponent = Transition$1
 	    } = props,
 	    other = _objectWithoutPropertiesLoose$3(props, _excluded$j);
-	  const timer = reactExports.useRef();
+	  const timer = useTimeout();
 	  const autoTimeout = reactExports.useRef();
 	  const theme = useTheme$1();
 	  const nodeRef = reactExports.useRef(null);
@@ -18728,18 +18906,13 @@
 	  const handleExited = normalizedTransitionCallback(onExited);
 	  const handleAddEndListener = next => {
 	    if (timeout === 'auto') {
-	      timer.current = setTimeout(next, autoTimeout.current || 0);
+	      timer.start(autoTimeout.current || 0, next);
 	    }
 	    if (addEndListener) {
 	      // Old call signature before `react-transition-group` implemented `nodeRef`
 	      addEndListener(nodeRef.current, next);
 	    }
 	  };
-	  reactExports.useEffect(() => {
-	    return () => {
-	      clearTimeout(timer.current);
-	    };
-	  }, []);
 	  return /*#__PURE__*/jsxRuntimeExports.jsx(TransitionComponent, _extends$6({
 	    appear: appear,
 	    in: inProp,
@@ -18769,9 +18942,9 @@
 	var Grow$1 = Grow;
 
 	function getIconUtilityClass(slot) {
-	  return generateUtilityClass('MuiIcon', slot);
+	  return generateUtilityClass$1('MuiIcon', slot);
 	}
-	generateUtilityClasses('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+	generateUtilityClasses$1('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
 
 	const _excluded$i = ["baseClassName", "className", "color", "component", "fontSize"];
 	const useUtilityClasses$a = ownerState => {
@@ -18829,7 +19002,7 @@
 	  }[ownerState.color]
 	}));
 	const Icon = /*#__PURE__*/reactExports.forwardRef(function Icon(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiIcon'
 	  });
@@ -18863,9 +19036,9 @@
 	var Icon$1 = Icon;
 
 	function getInputAdornmentUtilityClass(slot) {
-	  return generateUtilityClass('MuiInputAdornment', slot);
+	  return generateUtilityClass$1('MuiInputAdornment', slot);
 	}
-	const inputAdornmentClasses = generateUtilityClasses('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
+	const inputAdornmentClasses = generateUtilityClasses$1('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
 	var inputAdornmentClasses$1 = inputAdornmentClasses;
 
 	var _span$1;
@@ -18921,7 +19094,7 @@
 	  pointerEvents: 'none'
 	}));
 	const InputAdornment = /*#__PURE__*/reactExports.forwardRef(function InputAdornment(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiInputAdornment'
 	  });
@@ -18978,9 +19151,9 @@
 	var ListContext$1 = ListContext;
 
 	function getListUtilityClass(slot) {
-	  return generateUtilityClass('MuiList', slot);
+	  return generateUtilityClass$1('MuiList', slot);
 	}
-	generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
+	generateUtilityClasses$1('MuiList', ['root', 'padding', 'dense', 'subheader']);
 
 	const _excluded$g = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 	const useUtilityClasses$8 = ownerState => {
@@ -19018,7 +19191,7 @@
 	  paddingTop: 0
 	}));
 	const List = /*#__PURE__*/reactExports.forwardRef(function List(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiList'
 	  });
@@ -19055,18 +19228,18 @@
 	var List$1 = List;
 
 	function getListItemUtilityClass(slot) {
-	  return generateUtilityClass('MuiListItem', slot);
+	  return generateUtilityClass$1('MuiListItem', slot);
 	}
-	const listItemClasses = generateUtilityClasses('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
+	const listItemClasses = generateUtilityClasses$1('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
 	var listItemClasses$1 = listItemClasses;
 
-	const listItemButtonClasses = generateUtilityClasses('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
+	const listItemButtonClasses = generateUtilityClasses$1('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
 	var listItemButtonClasses$1 = listItemButtonClasses;
 
 	function getListItemSecondaryActionClassesUtilityClass(slot) {
-	  return generateUtilityClass('MuiListItemSecondaryAction', slot);
+	  return generateUtilityClass$1('MuiListItemSecondaryAction', slot);
 	}
-	generateUtilityClasses('MuiListItemSecondaryAction', ['root', 'disableGutters']);
+	generateUtilityClasses$1('MuiListItemSecondaryAction', ['root', 'disableGutters']);
 
 	const _excluded$f = ["className"];
 	const useUtilityClasses$7 = ownerState => {
@@ -19103,7 +19276,7 @@
 	 * Must be used as the last child of ListItem to function properly.
 	 */
 	const ListItemSecondaryAction = /*#__PURE__*/reactExports.forwardRef(function ListItemSecondaryAction(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiListItemSecondaryAction'
 	  });
@@ -19239,7 +19412,7 @@
 	 * Uses an additional container component if `ListItemSecondaryAction` is the last child.
 	 */
 	const ListItem = /*#__PURE__*/reactExports.forwardRef(function ListItem(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiListItem'
 	  });
@@ -19361,9 +19534,9 @@
 	var ListItem$1 = ListItem;
 
 	function getListItemIconUtilityClass(slot) {
-	  return generateUtilityClass('MuiListItemIcon', slot);
+	  return generateUtilityClass$1('MuiListItemIcon', slot);
 	}
-	const listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
+	const listItemIconClasses = generateUtilityClasses$1('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
 	var listItemIconClasses$1 = listItemIconClasses;
 
 	const _excluded$d = ["className"];
@@ -19402,7 +19575,7 @@
 	 * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
 	 */
 	const ListItemIcon = /*#__PURE__*/reactExports.forwardRef(function ListItemIcon(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiListItemIcon'
 	  });
@@ -19423,7 +19596,7 @@
 	});
 	var ListItemIcon$1 = ListItemIcon;
 
-	const listItemTextClasses = generateUtilityClasses('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
+	const listItemTextClasses = generateUtilityClasses$1('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
 	var listItemTextClasses$1 = listItemTextClasses;
 
 	const _excluded$c = ["actions", "autoFocus", "autoFocusItem", "children", "className", "disabledItemsFocusable", "disableListWrap", "onKeyDown", "variant"];
@@ -19647,9 +19820,9 @@
 	var MenuList$1 = MenuList;
 
 	function getPopoverUtilityClass(slot) {
-	  return generateUtilityClass('MuiPopover', slot);
+	  return generateUtilityClass$1('MuiPopover', slot);
 	}
-	generateUtilityClasses('MuiPopover', ['root', 'paper']);
+	generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
 
 	const _excluded$b = ["onEntering"],
 	  _excluded2$1 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
@@ -19716,7 +19889,7 @@
 	});
 	const Popover = /*#__PURE__*/reactExports.forwardRef(function Popover(inProps, ref) {
 	  var _slotProps$paper, _slots$root, _slots$paper;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiPopover'
 	  });
@@ -19971,9 +20144,9 @@
 	var Popover$1 = Popover;
 
 	function getMenuItemUtilityClass(slot) {
-	  return generateUtilityClass('MuiMenuItem', slot);
+	  return generateUtilityClass$1('MuiMenuItem', slot);
 	}
-	const menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
+	const menuItemClasses = generateUtilityClasses$1('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 	var menuItemClasses$1 = menuItemClasses;
 
 	const _excluded$a = ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"];
@@ -20083,7 +20256,7 @@
 	  }
 	})));
 	const MenuItem = /*#__PURE__*/reactExports.forwardRef(function MenuItem(inProps, ref) {
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiMenuItem'
 	  });
@@ -20347,7 +20520,7 @@
 	}));
 	const OutlinedInput = /*#__PURE__*/reactExports.forwardRef(function OutlinedInput(inProps, ref) {
 	  var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiOutlinedInput'
 	  });
@@ -20485,9 +20658,9 @@
 	}
 
 	function getRadioUtilityClass(slot) {
-	  return generateUtilityClass('MuiRadio', slot);
+	  return generateUtilityClass$1('MuiRadio', slot);
 	}
-	const radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
+	const radioClasses = generateUtilityClasses$1('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
 
 	const _excluded$7 = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 	const useUtilityClasses$1 = ownerState => {
@@ -20547,7 +20720,7 @@
 	const defaultIcon = /*#__PURE__*/jsxRuntimeExports.jsx(RadioButtonIcon, {});
 	const Radio = /*#__PURE__*/reactExports.forwardRef(function Radio(inProps, ref) {
 	  var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiRadio'
 	  });
@@ -20599,9 +20772,9 @@
 	var Radio$1 = Radio;
 
 	function getTooltipUtilityClass(slot) {
-	  return generateUtilityClass('MuiTooltip', slot);
+	  return generateUtilityClass$1('MuiTooltip', slot);
 	}
-	const tooltipClasses = generateUtilityClasses('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
+	const tooltipClasses = generateUtilityClasses$1('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
 	var tooltipClasses$1 = tooltipClasses;
 
 	const _excluded$6 = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
@@ -20776,7 +20949,7 @@
 	  }
 	}));
 	let hystersisOpen = false;
-	let hystersisTimer = null;
+	const hystersisTimer = new Timeout();
 	let cursorPosition = {
 	  x: 0,
 	  y: 0
@@ -20793,7 +20966,7 @@
 	// TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
 	const Tooltip = /*#__PURE__*/reactExports.forwardRef(function Tooltip(inProps, ref) {
 	  var _ref, _slots$popper, _ref2, _ref3, _slots$transition, _ref4, _slots$tooltip, _ref5, _slots$arrow, _slotProps$popper, _ref6, _slotProps$popper2, _slotProps$transition, _slotProps$tooltip, _ref7, _slotProps$tooltip2, _slotProps$arrow, _ref8, _slotProps$arrow2;
-	  const props = useThemeProps({
+	  const props = useThemeProps$1({
 	    props: inProps,
 	    name: 'MuiTooltip'
 	  });
@@ -20838,10 +21011,10 @@
 	  const [arrowRef, setArrowRef] = reactExports.useState(null);
 	  const ignoreNonTouchEvents = reactExports.useRef(false);
 	  const disableInteractive = disableInteractiveProp || followCursor;
-	  const closeTimer = reactExports.useRef();
-	  const enterTimer = reactExports.useRef();
-	  const leaveTimer = reactExports.useRef();
-	  const touchTimer = reactExports.useRef();
+	  const closeTimer = useTimeout();
+	  const enterTimer = useTimeout();
+	  const leaveTimer = useTimeout();
+	  const touchTimer = useTimeout();
 	  const [openState, setOpenState] = useControlled({
 	    controlled: openProp,
 	    default: false,
@@ -20851,23 +21024,16 @@
 	  let open = openState;
 	  const id = useId(idProp);
 	  const prevUserSelect = reactExports.useRef();
-	  const stopTouchInteraction = reactExports.useCallback(() => {
+	  const stopTouchInteraction = useEventCallback(() => {
 	    if (prevUserSelect.current !== undefined) {
 	      document.body.style.WebkitUserSelect = prevUserSelect.current;
 	      prevUserSelect.current = undefined;
 	    }
-	    clearTimeout(touchTimer.current);
-	  }, []);
-	  reactExports.useEffect(() => {
-	    return () => {
-	      clearTimeout(closeTimer.current);
-	      clearTimeout(enterTimer.current);
-	      clearTimeout(leaveTimer.current);
-	      stopTouchInteraction();
-	    };
-	  }, [stopTouchInteraction]);
+	    touchTimer.clear();
+	  });
+	  reactExports.useEffect(() => stopTouchInteraction, [stopTouchInteraction]);
 	  const handleOpen = event => {
-	    clearTimeout(hystersisTimer);
+	    hystersisTimer.clear();
 	    hystersisOpen = true;
 
 	    // The mouseover event will trigger for every nested element in the tooltip.
@@ -20883,18 +21049,16 @@
 	   * @param {React.SyntheticEvent | Event} event
 	   */
 	  event => {
-	    clearTimeout(hystersisTimer);
-	    hystersisTimer = setTimeout(() => {
+	    hystersisTimer.start(800 + leaveDelay, () => {
 	      hystersisOpen = false;
-	    }, 800 + leaveDelay);
+	    });
 	    setOpenState(false);
 	    if (onClose && open) {
 	      onClose(event);
 	    }
-	    clearTimeout(closeTimer.current);
-	    closeTimer.current = setTimeout(() => {
+	    closeTimer.start(theme.transitions.duration.shortest, () => {
 	      ignoreNonTouchEvents.current = false;
-	    }, theme.transitions.duration.shortest);
+	    });
 	  });
 	  const handleEnter = event => {
 	    if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {
@@ -20907,22 +21071,21 @@
 	    if (childNode) {
 	      childNode.removeAttribute('title');
 	    }
-	    clearTimeout(enterTimer.current);
-	    clearTimeout(leaveTimer.current);
+	    enterTimer.clear();
+	    leaveTimer.clear();
 	    if (enterDelay || hystersisOpen && enterNextDelay) {
-	      enterTimer.current = setTimeout(() => {
+	      enterTimer.start(hystersisOpen ? enterNextDelay : enterDelay, () => {
 	        handleOpen(event);
-	      }, hystersisOpen ? enterNextDelay : enterDelay);
+	      });
 	    } else {
 	      handleOpen(event);
 	    }
 	  };
 	  const handleLeave = event => {
-	    clearTimeout(enterTimer.current);
-	    clearTimeout(leaveTimer.current);
-	    leaveTimer.current = setTimeout(() => {
+	    enterTimer.clear();
+	    leaveTimer.start(leaveDelay, () => {
 	      handleClose(event);
-	    }, leaveDelay);
+	    });
 	  };
 	  const {
 	    isFocusVisibleRef,
@@ -20964,26 +21127,25 @@
 	  const handleMouseLeave = handleLeave;
 	  const handleTouchStart = event => {
 	    detectTouchStart(event);
-	    clearTimeout(leaveTimer.current);
-	    clearTimeout(closeTimer.current);
+	    leaveTimer.clear();
+	    closeTimer.clear();
 	    stopTouchInteraction();
 	    prevUserSelect.current = document.body.style.WebkitUserSelect;
 	    // Prevent iOS text selection on long-tap.
 	    document.body.style.WebkitUserSelect = 'none';
-	    touchTimer.current = setTimeout(() => {
+	    touchTimer.start(enterTouchDelay, () => {
 	      document.body.style.WebkitUserSelect = prevUserSelect.current;
 	      handleEnter(event);
-	    }, enterTouchDelay);
+	    });
 	  };
 	  const handleTouchEnd = event => {
 	    if (children.props.onTouchEnd) {
 	      children.props.onTouchEnd(event);
 	    }
 	    stopTouchInteraction();
-	    clearTimeout(leaveTimer.current);
-	    leaveTimer.current = setTimeout(() => {
+	    leaveTimer.start(leaveTouchDelay, () => {
 	      handleClose(event);
-	    }, leaveTouchDelay);
+	    });
 	  };
 	  reactExports.useEffect(() => {
 	    if (!open) {
@@ -30847,16 +31009,15 @@
 	        onResize
 	      } = this.props;
 	      if (this._parentNode) {
-	        var _style$paddingLeft, _style$paddingRight, _style$paddingTop, _style$paddingBottom;
 	        // Guard against AutoSizer component being removed from the DOM immediately after being added.
 	        // This can result in invalid style values which can result in NaN values if we don't handle them.
 	        // See issue #150 for more context.
 
 	        const style = window.getComputedStyle(this._parentNode) || {};
-	        const paddingLeft = parseFloat((_style$paddingLeft = style.paddingLeft) !== null && _style$paddingLeft !== void 0 ? _style$paddingLeft : "0");
-	        const paddingRight = parseFloat((_style$paddingRight = style.paddingRight) !== null && _style$paddingRight !== void 0 ? _style$paddingRight : "0");
-	        const paddingTop = parseFloat((_style$paddingTop = style.paddingTop) !== null && _style$paddingTop !== void 0 ? _style$paddingTop : "0");
-	        const paddingBottom = parseFloat((_style$paddingBottom = style.paddingBottom) !== null && _style$paddingBottom !== void 0 ? _style$paddingBottom : "0");
+	        const paddingLeft = parseFloat(style.paddingLeft || "0");
+	        const paddingRight = parseFloat(style.paddingRight || "0");
+	        const paddingTop = parseFloat(style.paddingTop || "0");
+	        const paddingBottom = parseFloat(style.paddingBottom || "0");
 	        const rect = this._parentNode.getBoundingClientRect();
 	        const scaledHeight = rect.height - paddingTop - paddingBottom;
 	        const scaledWidth = rect.width - paddingLeft - paddingRight;
@@ -35617,7 +35778,8 @@
 	    },
 	    accessibility: {
 	      setter: null
-	    }
+	    },
+	    contraintsWarning: true
 	  };
 	}
 	function teardown(component) {
@@ -36437,8 +36599,11 @@
 	 */
 	function useConstraints() {
 	  {
-	    // eslint-disable-next-line no-console
-	    console.warn('useContraints has been deprecated, please change to useInteractions instead. Note that interactions uses inverted values compared to contraints.');
+	    if (currentComponent.__hooks.contraintsWarning) {
+	      // eslint-disable-next-line no-console
+	      console.warn('useContraints has been deprecated, please change to useInteractions instead. Note that interactions uses inverted values compared to contraints.');
+	      currentComponent.__hooks.contraintsWarning = false;
+	    }
 	  }
 	  return useInternalContext('constraints');
 	}