@mui/material 5.15.4 → 5.15.6

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.4
+ * @mui/material v5.15.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -6159,10 +6159,7 @@
   var ClassNameGenerator = createClassNameGenerator();
   var ClassNameGenerator$1 = ClassNameGenerator;
 
-  // If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
-  // \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
-
-  var globalStateClassesMapping = {
+  var globalStateClasses = {
     active: 'active',
     checked: 'checked',
     completed: 'completed',
@@ -6176,21 +6173,27 @@
     required: 'required',
     selected: 'selected'
   };
-  function generateUtilityClass(componentName, slot) {
+  function generateUtilityClass$1(componentName, slot) {
     var globalStatePrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Mui';
-    var globalStateClass = globalStateClassesMapping[slot];
+    var globalStateClass = globalStateClasses[slot];
     return globalStateClass ? "".concat(globalStatePrefix, "-").concat(globalStateClass) : "".concat(ClassNameGenerator$1.generate(componentName), "-").concat(slot);
   }
 
-  function generateUtilityClasses(componentName, slots) {
+  function generateUtilityClasses$1(componentName, slots) {
     var globalStatePrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'Mui';
     var result = {};
     slots.forEach(function (slot) {
-      result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
+      result[slot] = generateUtilityClass$1(componentName, slot, globalStatePrefix);
     });
     return result;
   }
 
+  function clamp(val) {
+    var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Number.MIN_SAFE_INTEGER;
+    var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Number.MAX_SAFE_INTEGER;
+    return Math.max(min, Math.min(val, max));
+  }
+
   var sortBreakpointsValues = function sortBreakpointsValues(values) {
     var breakpointsAsArray = Object.keys(values).map(function (key) {
       return {
@@ -7932,7 +7935,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
@@ -7940,7 +7942,7 @@
    * @param {number} max The upper boundary of the output range
    * @returns {number} A number in the range [min, max]
    */
-  function clamp$3(value) {
+  function clampWrapper(value) {
     var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
     {
@@ -7948,7 +7950,7 @@
         console.error("MUI: The value provided ".concat(value, " is out of range [").concat(min, ", ").concat(max, "]."));
       }
     }
-    return Math.min(Math.max(min, value), max);
+    return clamp(value, min, max);
   }
 
   /**
@@ -8159,7 +8161,7 @@
    */
   function alpha(color, value) {
     color = decomposeColor(color);
-    value = clamp$3(value);
+    value = clampWrapper(value);
     if (color.type === 'rgb' || color.type === 'hsl') {
       color.type += 'a';
     }
@@ -8189,7 +8191,7 @@
    */
   function darken(color, coefficient) {
     color = decomposeColor(color);
-    coefficient = clamp$3(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) {
@@ -8218,7 +8220,7 @@
    */
   function lighten(color, coefficient) {
     color = decomposeColor(color);
-    coefficient = clamp$3(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) {
@@ -9249,7 +9251,7 @@
   };
   var useUtilityClasses$1P = function useUtilityClasses(ownerState, componentName) {
     var getContainerUtilityClass = function getContainerUtilityClass(slot) {
-      return generateUtilityClass(componentName, slot);
+      return generateUtilityClass$1(componentName, slot);
     };
     var classes = ownerState.classes,
       fixed = ownerState.fixed,
@@ -9654,7 +9656,7 @@
         root: ['root', container && 'container', wrap !== 'wrap' && "wrap-xs-".concat(String(wrap))].concat(_toConsumableArray(generateDirectionClasses(direction)), _toConsumableArray(generateSizeClassNames(gridSize)), _toConsumableArray(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : []))
       };
       return composeClasses(slots, function (slot) {
-        return generateUtilityClass(componentName, slot);
+        return generateUtilityClass$1(componentName, slot);
       }, {});
     };
     var GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
@@ -9903,7 +9905,7 @@
         root: ['root']
       };
       return composeClasses(slots, function (slot) {
-        return generateUtilityClass(componentName, slot);
+        return generateUtilityClass$1(componentName, slot);
       }, {});
     };
     var StackRoot = createStyledComponent(style);
@@ -10563,7 +10565,19 @@
       shadows: shadows$1.slice(),
       typography: createTypography(palette, typographyInput),
       transitions: createTransitions(transitionsInput),
-      zIndex: _extends({}, zIndex$1)
+      zIndex: _extends({}, zIndex$1),
+      applyDarkStyles: function applyDarkStyles(css) {
+        if (this.vars) {
+          // If CssVarsProvider is used as a provider,
+          // returns ':where([data-mui-color-scheme="light|dark"]) &'
+          var selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)');
+          return _defineProperty({}, selector, css);
+        }
+        if (this.palette.mode === 'dark') {
+          return css;
+        }
+        return {};
+      }
     });
     muiTheme = deepmerge(muiTheme, other);
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -10583,7 +10597,7 @@
           var child = node[key];
           if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
             {
-              var stateClass = generateUtilityClass('', key);
+              var stateClass = generateUtilityClass$1('', key);
               console.error(["MUI: The `".concat(component, "` component increases ") + "the CSS specificity of the `".concat(key, "` internal state."), 'You can not override it like this: ', JSON.stringify(node, null, 2), '', "Instead, you need to use the '&.".concat(stateClass, "' syntax:"), JSON.stringify({
                 root: _defineProperty({}, "&.".concat(stateClass), child)
               }, null, 2), '', 'https://mui.com/r/state-classes-guide'].join('\n'));
@@ -11277,9 +11291,9 @@
   }
 
   function getSvgIconUtilityClass(slot) {
-    return generateUtilityClass('MuiSvgIcon', slot);
+    return generateUtilityClass$1('MuiSvgIcon', slot);
   }
-  var svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+  var svgIconClasses = generateUtilityClasses$1('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var svgIconClasses$1 = svgIconClasses;
 
   var useUtilityClasses$1O = function useUtilityClasses(ownerState) {
@@ -12490,9 +12504,9 @@
   }
 
   function getCollapseUtilityClass(slot) {
-    return generateUtilityClass('MuiCollapse', slot);
+    return generateUtilityClass$1('MuiCollapse', slot);
   }
-  var collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
+  var collapseClasses = generateUtilityClasses$1('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);
   var collapseClasses$1 = collapseClasses;
 
   var useUtilityClasses$1N = function useUtilityClasses(ownerState) {
@@ -12863,9 +12877,9 @@
   var Collapse$1 = Collapse;
 
   function getPaperUtilityClass(slot) {
-    return generateUtilityClass('MuiPaper', slot);
+    return generateUtilityClass$1('MuiPaper', slot);
   }
-  var paperClasses = 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']);
+  var paperClasses = 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']);
   var paperClasses$1 = paperClasses;
 
   var useUtilityClasses$1M = function useUtilityClasses(ownerState) {
@@ -13003,10 +13017,281 @@
   }
   var AccordionContext$1 = AccordionContext;
 
+  /**
+   * 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)
+    });
+  }
+
+  function areArraysEqual(array1, array2) {
+    var itemComparer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (a, b) {
+      return a === b;
+    };
+    return array1.length === array2.length && array1.every(function (value, index) {
+      return itemComparer(value, array2[index]);
+    });
+  }
+
+  var defaultContextValue = {
+    disableDefaultClasses: false
+  };
+  var ClassNameConfiguratorContext = /*#__PURE__*/React__namespace.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) {
+    var _React$useContext = React__namespace.useContext(ClassNameConfiguratorContext),
+      disableDefaultClasses = _React$useContext.disableDefaultClasses;
+    return function (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) {
+    var excludeKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    if (object === undefined) {
+      return {};
+    }
+    var result = {};
+    Object.keys(object).filter(function (prop) {
+      return prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop);
+    }).forEach(function (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;
+  }
+
+  /**
+   * 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 {};
+    }
+    var result = {};
+    Object.keys(object).filter(function (prop) {
+      return !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function');
+    }).forEach(function (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) {
+    var getSlotProps = parameters.getSlotProps,
+      additionalProps = parameters.additionalProps,
+      externalSlotProps = parameters.externalSlotProps,
+      externalForwardedProps = parameters.externalForwardedProps,
+      className = parameters.className;
+    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.
+      var _joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
+      var _mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+      var _props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+      if (_joinedClasses.length > 0) {
+        _props.className = _joinedClasses;
+      }
+      if (Object.keys(_mergedStyle).length > 0) {
+        _props.style = _mergedStyle;
+      }
+      return {
+        props: _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.
+
+    var eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
+    var componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
+    var otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
+    var 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.
+    var 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);
+    var 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);
+    var props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
+    }
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
+    }
+    return {
+      props: props,
+      internalRef: internalSlotProps.ref
+    };
+  }
+
+  /**
+   * @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;
+    var elementType = parameters.elementType,
+      externalSlotProps = parameters.externalSlotProps,
+      ownerState = parameters.ownerState,
+      _parameters$skipResol = parameters.skipResolvingSlotProps,
+      skipResolvingSlotProps = _parameters$skipResol === void 0 ? false : _parameters$skipResol,
+      rest = _objectWithoutProperties(parameters, ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"]);
+    var resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
+    var _mergeSlotProps = mergeSlotProps(_extends({}, rest, {
+        externalSlotProps: resolvedComponentsProps
+      })),
+      mergedProps = _mergeSlotProps.props,
+      internalRef = _mergeSlotProps.internalRef;
+    var ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
+    var props = appendOwnerState(elementType, _extends({}, mergedProps, {
+      ref: ref
+    }), ownerState);
+    return props;
+  }
+
+  /**
+   * An internal function to create a Material UI slot.
+   *
+   * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
+   * while Base UI does not need to support leaf component customization.
+   *
+   * @param {string} name: name of the slot
+   * @param {object} parameters
+   * @returns {[Slot, slotProps]} The slot's React component and the slot's props
+   *
+   * Note: the returned slot's props
+   * - will never contain `component` prop.
+   * - might contain `as` prop.
+   */
+  function useSlot(
+  /**
+   * The slot's name. All Material UI components should have `root` slot.
+   *
+   * If the name is `root`, the logic behaves differently from other slots,
+   * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
+   */
+  name, parameters) {
+    var className = parameters.className,
+      initialElementType = parameters.elementType,
+      ownerState = parameters.ownerState,
+      externalForwardedProps = parameters.externalForwardedProps,
+      getSlotOwnerState = parameters.getSlotOwnerState,
+      internalForwardedProps = parameters.internalForwardedProps,
+      useSlotPropsParams = _objectWithoutProperties(parameters, ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"]);
+    var rootComponent = externalForwardedProps.component,
+      _externalForwardedPro = externalForwardedProps.slots,
+      slots = _externalForwardedPro === void 0 ? _defineProperty({}, name, undefined) : _externalForwardedPro,
+      _externalForwardedPro2 = externalForwardedProps.slotProps,
+      slotProps = _externalForwardedPro2 === void 0 ? _defineProperty({}, name, undefined) : _externalForwardedPro2,
+      other = _objectWithoutProperties(externalForwardedProps, ["component", "slots", "slotProps"]);
+    var elementType = slots[name] || initialElementType;
+
+    // `slotProps[name]` can be a callback that receives the component's ownerState.
+    // `resolvedComponentsProps` is always a plain object.
+    var resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+    var _mergeSlotProps = mergeSlotProps(_extends({
+        className: className
+      }, useSlotPropsParams, {
+        externalForwardedProps: name === 'root' ? other : undefined,
+        externalSlotProps: resolvedComponentsProps
+      })),
+      _mergeSlotProps$props = _mergeSlotProps.props,
+      slotComponent = _mergeSlotProps$props.component,
+      mergedProps = _objectWithoutProperties(_mergeSlotProps$props, ["component"]),
+      internalRef = _mergeSlotProps.internalRef;
+    var ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+    var slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
+    var finalOwnerState = _extends({}, ownerState, slotOwnerState);
+    var LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
+    var props = appendOwnerState(elementType, _extends({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
+      as: LeafComponent
+    }, {
+      ref: ref
+    }), finalOwnerState);
+    Object.keys(slotOwnerState).forEach(function (propName) {
+      delete props[propName];
+    });
+    return [elementType, props];
+  }
+
   function getAccordionUtilityClass(slot) {
-    return generateUtilityClass('MuiAccordion', slot);
+    return generateUtilityClass$1('MuiAccordion', slot);
   }
-  var accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
+  var accordionClasses = generateUtilityClasses$1('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);
   var accordionClasses$1 = accordionClasses;
 
   var useUtilityClasses$1L = function useUtilityClasses(ownerState) {
@@ -13111,10 +13396,13 @@
       onChange = props.onChange,
       _props$square = props.square,
       square = _props$square === void 0 ? false : _props$square,
-      _props$TransitionComp = props.TransitionComponent,
-      TransitionComponent = _props$TransitionComp === void 0 ? Collapse$1 : _props$TransitionComp,
-      TransitionProps = props.TransitionProps,
-      other = _objectWithoutProperties(props, ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"]);
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
+      _props$slotProps = props.slotProps,
+      slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+      TransitionComponentProp = props.TransitionComponent,
+      TransitionPropsProp = props.TransitionProps,
+      other = _objectWithoutProperties(props, ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"]);
     var _useControlled = useControlled({
         controlled: expandedProp,
         "default": defaultExpanded,
@@ -13149,6 +13437,24 @@
       expanded: expanded
     });
     var classes = useUtilityClasses$1L(ownerState);
+    var backwardCompatibleSlots = _extends({
+      transition: TransitionComponentProp
+    }, slots);
+    var backwardCompatibleSlotProps = _extends({
+      transition: TransitionPropsProp
+    }, slotProps);
+    var _useSlot = useSlot('transition', {
+        elementType: Collapse$1,
+        externalForwardedProps: {
+          slots: backwardCompatibleSlots,
+          slotProps: backwardCompatibleSlotProps
+        },
+        ownerState: ownerState
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      TransitionSlot = _useSlot2[0],
+      transitionProps = _useSlot2[1];
+    delete transitionProps.ownerState;
     return /*#__PURE__*/jsxRuntime_2(AccordionRoot, _extends({
       className: clsx(classes.root, className),
       ref: ref,
@@ -13158,10 +13464,10 @@
       children: [/*#__PURE__*/jsxRuntime_1(AccordionContext$1.Provider, {
         value: contextValue,
         children: summary
-      }), /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
+      }), /*#__PURE__*/jsxRuntime_1(TransitionSlot, _extends({
         "in": expanded,
         timeout: "auto"
-      }, TransitionProps, {
+      }, transitionProps, {
         children: /*#__PURE__*/jsxRuntime_1("div", {
           "aria-labelledby": summary.props.id,
           id: summary.props['aria-controls'],
@@ -13225,6 +13531,20 @@
      * @param {boolean} expanded The `expanded` state of the accordion.
      */
     onChange: PropTypes.func,
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps: PropTypes.shape({
+      transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      transition: PropTypes.elementType
+    }),
     /**
      * If `true`, rounded corners are disabled.
      * @default false
@@ -13237,21 +13557,22 @@
     /**
      * The component used for the transition.
      * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-     * @default Collapse
+     * @deprecated Use `slots.transition` instead. This prop will be removed in v7.
      */
     TransitionComponent: PropTypes.elementType,
     /**
      * Props applied to the transition element.
      * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+     * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
      */
     TransitionProps: PropTypes.object
   } ;
   var Accordion$1 = Accordion;
 
   function getAccordionActionsUtilityClass(slot) {
-    return generateUtilityClass('MuiAccordionActions', slot);
+    return generateUtilityClass$1('MuiAccordionActions', slot);
   }
-  var accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);
+  var accordionActionsClasses = generateUtilityClasses$1('MuiAccordionActions', ['root', 'spacing']);
   var accordionActionsClasses$1 = accordionActionsClasses;
 
   var useUtilityClasses$1K = function useUtilityClasses(ownerState) {
@@ -13331,9 +13652,9 @@
   var AccordionActions$1 = AccordionActions;
 
   function getAccordionDetailsUtilityClass(slot) {
-    return generateUtilityClass('MuiAccordionDetails', slot);
+    return generateUtilityClass$1('MuiAccordionDetails', slot);
   }
-  var accordionDetailsClasses = generateUtilityClasses('MuiAccordionDetails', ['root']);
+  var accordionDetailsClasses = generateUtilityClasses$1('MuiAccordionDetails', ['root']);
   var accordionDetailsClasses$1 = accordionDetailsClasses;
 
   var useUtilityClasses$1J = function useUtilityClasses(ownerState) {
@@ -13486,9 +13807,9 @@
   } ;
 
   function getTouchRippleUtilityClass(slot) {
-    return generateUtilityClass('MuiTouchRipple', slot);
+    return generateUtilityClass$1('MuiTouchRipple', slot);
   }
-  var touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
+  var touchRippleClasses = generateUtilityClasses$1('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);
   var touchRippleClasses$1 = touchRippleClasses;
 
   var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3;
@@ -13751,9 +14072,9 @@
   var TouchRipple$1 = TouchRipple;
 
   function getButtonBaseUtilityClass(slot) {
-    return generateUtilityClass('MuiButtonBase', slot);
+    return generateUtilityClass$1('MuiButtonBase', slot);
   }
-  var buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
+  var buttonBaseClasses = generateUtilityClasses$1('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
   var useUtilityClasses$1I = function useUtilityClasses(ownerState) {
@@ -14226,9 +14547,9 @@
   var ButtonBase$1 = ButtonBase;
 
   function getAccordionSummaryUtilityClass(slot) {
-    return generateUtilityClass('MuiAccordionSummary', slot);
+    return generateUtilityClass$1('MuiAccordionSummary', slot);
   }
-  var accordionSummaryClasses = generateUtilityClasses('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
+  var accordionSummaryClasses = generateUtilityClasses$1('MuiAccordionSummary', ['root', 'expanded', 'focusVisible', 'disabled', 'gutters', 'contentGutters', 'content', 'expandIconWrapper']);
   var accordionSummaryClasses$1 = accordionSummaryClasses;
 
   var useUtilityClasses$1H = function useUtilityClasses(ownerState) {
@@ -14407,15 +14728,15 @@
   var AccordionSummary$1 = AccordionSummary;
 
   function getAlertUtilityClass(slot) {
-    return generateUtilityClass('MuiAlert', slot);
+    return generateUtilityClass$1('MuiAlert', slot);
   }
-  var alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+  var alertClasses = generateUtilityClasses$1('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
   var alertClasses$1 = alertClasses;
 
   function getIconButtonUtilityClass(slot) {
-    return generateUtilityClass('MuiIconButton', slot);
+    return generateUtilityClass$1('MuiIconButton', slot);
   }
-  var iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+  var iconButtonClasses = generateUtilityClasses$1('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
   var iconButtonClasses$1 = iconButtonClasses;
 
   var useUtilityClasses$1G = function useUtilityClasses(ownerState) {
@@ -14900,7 +15221,7 @@
      * The severity of the alert. This defines the color and icon used.
      * @default 'success'
      */
-    severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+    severity: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
     /**
      * The extra props for the slot components.
      * You can override the existing props or add new ones.
@@ -14937,9 +15258,9 @@
   var Alert$1 = Alert;
 
   function getTypographyUtilityClass(slot) {
-    return generateUtilityClass('MuiTypography', slot);
+    return generateUtilityClass$1('MuiTypography', slot);
   }
-  var typographyClasses = generateUtilityClasses('MuiTypography', ['root', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'inherit', 'button', 'caption', 'overline', 'alignLeft', 'alignRight', 'alignCenter', 'alignJustify', 'noWrap', 'gutterBottom', 'paragraph']);
+  var typographyClasses = 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']);
   var typographyClasses$1 = typographyClasses;
 
   var useUtilityClasses$1E = function useUtilityClasses(ownerState) {
@@ -15128,9 +15449,9 @@
   var Typography$1 = Typography;
 
   function getAlertTitleUtilityClass(slot) {
-    return generateUtilityClass('MuiAlertTitle', slot);
+    return generateUtilityClass$1('MuiAlertTitle', slot);
   }
-  var alertTitleClasses = generateUtilityClasses('MuiAlertTitle', ['root']);
+  var alertTitleClasses = generateUtilityClasses$1('MuiAlertTitle', ['root']);
   var alertTitleClasses$1 = alertTitleClasses;
 
   var useUtilityClasses$1D = function useUtilityClasses(ownerState) {
@@ -15195,9 +15516,9 @@
   var AlertTitle$1 = AlertTitle;
 
   function getAppBarUtilityClass(slot) {
-    return generateUtilityClass('MuiAppBar', slot);
+    return generateUtilityClass$1('MuiAppBar', slot);
   }
-  var appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
+  var appBarClasses = generateUtilityClasses$1('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning']);
   var appBarClasses$1 = appBarClasses;
 
   var useUtilityClasses$1C = function useUtilityClasses(ownerState) {
@@ -15362,212 +15683,6 @@
   } ;
   var AppBar$1 = AppBar;
 
-  /**
-   * 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)
-    });
-  }
-
-  function areArraysEqual(array1, array2) {
-    var itemComparer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (a, b) {
-      return a === b;
-    };
-    return array1.length === array2.length && array1.every(function (value, index) {
-      return itemComparer(value, array2[index]);
-    });
-  }
-
-  var defaultContextValue = {
-    disableDefaultClasses: false
-  };
-  var ClassNameConfiguratorContext = /*#__PURE__*/React__namespace.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) {
-    var _React$useContext = React__namespace.useContext(ClassNameConfiguratorContext),
-      disableDefaultClasses = _React$useContext.disableDefaultClasses;
-    return function (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) {
-    var excludeKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    if (object === undefined) {
-      return {};
-    }
-    var result = {};
-    Object.keys(object).filter(function (prop) {
-      return prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop);
-    }).forEach(function (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;
-  }
-
-  /**
-   * 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 {};
-    }
-    var result = {};
-    Object.keys(object).filter(function (prop) {
-      return !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function');
-    }).forEach(function (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) {
-    var getSlotProps = parameters.getSlotProps,
-      additionalProps = parameters.additionalProps,
-      externalSlotProps = parameters.externalSlotProps,
-      externalForwardedProps = parameters.externalForwardedProps,
-      className = parameters.className;
-    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.
-      var _joinedClasses = clsx(additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);
-      var _mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
-      var _props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
-      if (_joinedClasses.length > 0) {
-        _props.className = _joinedClasses;
-      }
-      if (Object.keys(_mergedStyle).length > 0) {
-        _props.style = _mergedStyle;
-      }
-      return {
-        props: _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.
-
-    var eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));
-    var componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);
-    var otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);
-    var 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.
-    var 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);
-    var 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);
-    var props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
-    if (joinedClasses.length > 0) {
-      props.className = joinedClasses;
-    }
-    if (Object.keys(mergedStyle).length > 0) {
-      props.style = mergedStyle;
-    }
-    return {
-      props: props,
-      internalRef: internalSlotProps.ref
-    };
-  }
-
-  /**
-   * @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;
-    var elementType = parameters.elementType,
-      externalSlotProps = parameters.externalSlotProps,
-      ownerState = parameters.ownerState,
-      _parameters$skipResol = parameters.skipResolvingSlotProps,
-      skipResolvingSlotProps = _parameters$skipResol === void 0 ? false : _parameters$skipResol,
-      rest = _objectWithoutProperties(parameters, ["elementType", "externalSlotProps", "ownerState", "skipResolvingSlotProps"]);
-    var resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);
-    var _mergeSlotProps = mergeSlotProps(_extends({}, rest, {
-        externalSlotProps: resolvedComponentsProps
-      })),
-      mergedProps = _mergeSlotProps.props,
-      internalRef = _mergeSlotProps.internalRef;
-    var ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);
-    var props = appendOwnerState(elementType, _extends({}, mergedProps, {
-      ref: ref
-    }), ownerState);
-    return props;
-  }
-
   /**
    *
    * Demos:
@@ -15607,6 +15722,26 @@
     };
   }
 
+  var GLOBAL_CLASS_PREFIX = 'base';
+  function buildStateClass(state) {
+    return "".concat(GLOBAL_CLASS_PREFIX, "--").concat(state);
+  }
+  function buildSlotClass(componentName, slot) {
+    return "".concat(GLOBAL_CLASS_PREFIX, "-").concat(componentName, "-").concat(slot);
+  }
+  function generateUtilityClass(componentName, slot) {
+    var globalStateClass = globalStateClasses[slot];
+    return globalStateClass ? buildStateClass(globalStateClass) : buildSlotClass(componentName, slot);
+  }
+
+  function generateUtilityClasses(componentName, slots) {
+    var result = {};
+    slots.forEach(function (slot) {
+      result[slot] = generateUtilityClass(componentName, slot);
+    });
+    return result;
+  }
+
   function mapEventPropToEvent(eventProp) {
     return eventProp.substring(2).toLowerCase();
   }
@@ -17996,10 +18131,11 @@
     Portal['propTypes' + ''] = exactProp(Portal.propTypes);
   }
 
+  var COMPONENT_NAME = 'Popper';
   function getPopperUtilityClass(slot) {
-    return generateUtilityClass('MuiPopper', slot);
+    return generateUtilityClass(COMPONENT_NAME, slot);
   }
-  generateUtilityClasses('MuiPopper', ['root']);
+  generateUtilityClasses(COMPONENT_NAME, ['root']);
 
   function flipPlacement(placement, direction) {
     if (direction === 'ltr') {
@@ -18901,12 +19037,6 @@
   function asc(a, b) {
     return a - b;
   }
-  function clamp$2(value, min, max) {
-    if (value == null) {
-      return min;
-    }
-    return Math.min(Math.max(min, value), max);
-  }
   function findClosest(values, currentValue) {
     var _values$reduce;
     var _ref = (_values$reduce = values.reduce(function (acc, value, index) {
@@ -19138,7 +19268,7 @@
     var range = Array.isArray(valueDerived);
     var values = range ? valueDerived.slice().sort(asc) : [valueDerived];
     values = values.map(function (value) {
-      return clamp$2(value, min, max);
+      return value == null ? min : clamp(value, min, max);
     });
     var marks = marksProp === true && step !== null ? _toConsumableArray(Array(Math.floor((max - min) / step) + 1)).map(function (_, index) {
       return {
@@ -19218,11 +19348,11 @@
             newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
           }
         }
-        newValue = clamp$2(newValue, min, max);
+        newValue = clamp(newValue, min, max);
         if (range) {
           // Bound the new value to the thumb's neighbours.
           if (disableSwap) {
-            newValue = clamp$2(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity);
+            newValue = clamp(newValue, values[index - 1] || -Infinity, values[index + 1] || Infinity);
           }
           var previousValue = newValue;
           newValue = setValueIndex({
@@ -19283,7 +19413,7 @@
         var closestIndex = findClosest(marksValues, newValue);
         newValue = marksValues[closestIndex];
       }
-      newValue = clamp$2(newValue, min, max);
+      newValue = clamp(newValue, min, max);
       var activeIndex = 0;
       if (range) {
         if (!move) {
@@ -19294,7 +19424,7 @@
 
         // Bound the new value to the thumb's neighbours.
         if (disableSwap) {
-          newValue = clamp$2(newValue, values[activeIndex - 1] || -Infinity, values[activeIndex + 1] || Infinity);
+          newValue = clamp(newValue, values[activeIndex - 1] || -Infinity, values[activeIndex + 1] || Infinity);
         }
         var previousValue = newValue;
         newValue = setValueIndex({
@@ -21225,9 +21355,9 @@
   var Popper$1 = Popper;
 
   function getListSubheaderUtilityClass(slot) {
-    return generateUtilityClass('MuiListSubheader', slot);
+    return generateUtilityClass$1('MuiListSubheader', slot);
   }
-  var listSubheaderClasses = generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
+  var listSubheaderClasses = generateUtilityClasses$1('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
   var listSubheaderClasses$1 = listSubheaderClasses;
 
   var useUtilityClasses$1A = function useUtilityClasses(ownerState) {
@@ -21362,9 +21492,9 @@
   }), 'Cancel');
 
   function getChipUtilityClass(slot) {
-    return generateUtilityClass('MuiChip', slot);
+    return generateUtilityClass$1('MuiChip', slot);
   }
-  var chipClasses = generateUtilityClasses('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
+  var chipClasses = generateUtilityClasses$1('MuiChip', ['root', 'sizeSmall', 'sizeMedium', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'disabled', 'clickable', 'clickableColorPrimary', 'clickableColorSecondary', 'deletable', 'deletableColorPrimary', 'deletableColorSecondary', 'outlined', 'filled', 'outlinedPrimary', 'outlinedSecondary', 'filledPrimary', 'filledSecondary', 'avatar', 'avatarSmall', 'avatarMedium', 'avatarColorPrimary', 'avatarColorSecondary', 'icon', 'iconSmall', 'iconMedium', 'iconColorPrimary', 'iconColorSecondary', 'label', 'labelSmall', 'labelMedium', 'deleteIcon', 'deleteIconSmall', 'deleteIconMedium', 'deleteIconColorPrimary', 'deleteIconColorSecondary', 'deleteIconOutlinedColorPrimary', 'deleteIconOutlinedColorSecondary', 'deleteIconFilledColorPrimary', 'deleteIconFilledColorSecondary', 'focusVisible']);
   var chipClasses$1 = chipClasses;
 
   var useUtilityClasses$1z = function useUtilityClasses(ownerState) {
@@ -21881,9 +22011,9 @@
   }
 
   function getInputBaseUtilityClass(slot) {
-    return generateUtilityClass('MuiInputBase', slot);
+    return generateUtilityClass$1('MuiInputBase', slot);
   }
-  var inputBaseClasses = generateUtilityClasses('MuiInputBase', ['root', 'formControl', 'focused', 'disabled', 'adornedStart', 'adornedEnd', 'error', 'sizeSmall', 'multiline', 'colorSecondary', 'fullWidth', 'hiddenLabel', 'readOnly', 'input', 'inputSizeSmall', 'inputMultiline', 'inputTypeSearch', 'inputAdornedStart', 'inputAdornedEnd', 'inputHiddenLabel']);
+  var 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;
 
   var rootOverridesResolver = function rootOverridesResolver(props, styles) {
@@ -22575,21 +22705,21 @@
   var InputBase$1 = InputBase;
 
   function getInputUtilityClass(slot) {
-    return generateUtilityClass('MuiInput', slot);
+    return generateUtilityClass$1('MuiInput', slot);
   }
-  var inputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
+  var inputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses$1('MuiInput', ['root', 'underline', 'input']));
   var inputClasses$1 = inputClasses;
 
   function getOutlinedInputUtilityClass(slot) {
-    return generateUtilityClass('MuiOutlinedInput', slot);
+    return generateUtilityClass$1('MuiOutlinedInput', slot);
   }
-  var outlinedInputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+  var outlinedInputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses$1('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
   var outlinedInputClasses$1 = outlinedInputClasses;
 
   function getFilledInputUtilityClass(slot) {
-    return generateUtilityClass('MuiFilledInput', slot);
+    return generateUtilityClass$1('MuiFilledInput', slot);
   }
-  var filledInputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']));
+  var filledInputClasses = _extends({}, inputBaseClasses$1, generateUtilityClasses$1('MuiFilledInput', ['root', 'underline', 'input']));
   var filledInputClasses$1 = filledInputClasses;
 
   var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
@@ -22597,9 +22727,9 @@
   }), 'ArrowDropDown');
 
   function getAutocompleteUtilityClass(slot) {
-    return generateUtilityClass('MuiAutocomplete', slot);
+    return generateUtilityClass$1('MuiAutocomplete', slot);
   }
-  var autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
+  var autocompleteClasses = generateUtilityClasses$1('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);
   var autocompleteClasses$1 = autocompleteClasses;
 
   var _ClearIcon, _ArrowDropDownIcon;
@@ -23662,9 +23792,9 @@
   }), 'Person');
 
   function getAvatarUtilityClass(slot) {
-    return generateUtilityClass('MuiAvatar', slot);
+    return generateUtilityClass$1('MuiAvatar', slot);
   }
-  var avatarClasses = generateUtilityClasses('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
+  var avatarClasses = generateUtilityClasses$1('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);
   var avatarClasses$1 = avatarClasses;
 
   var useUtilityClasses$1w = function useUtilityClasses(ownerState) {
@@ -23686,9 +23816,8 @@
       return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
     }
   })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
-    return _extends({
+    var theme = _ref.theme;
+    return {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
@@ -23701,18 +23830,36 @@
       lineHeight: 1,
       borderRadius: '50%',
       overflow: 'hidden',
-      userSelect: 'none'
-    }, ownerState.variant === 'rounded' && {
-      borderRadius: (theme.vars || theme).shape.borderRadius
-    }, ownerState.variant === 'square' && {
-      borderRadius: 0
-    }, ownerState.colorDefault && _extends({
-      color: (theme.vars || theme).palette.background["default"]
-    }, theme.vars ? {
-      backgroundColor: theme.vars.palette.Avatar.defaultBg
-    } : {
-      backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-    }));
+      userSelect: 'none',
+      variants: [{
+        props: {
+          variant: 'rounded'
+        },
+        style: {
+          borderRadius: (theme.vars || theme).shape.borderRadius
+        }
+      }, {
+        props: {
+          variant: 'square'
+        },
+        style: {
+          borderRadius: 0
+        }
+      }, {
+        props: {
+          colorDefault: true
+        },
+        style: _extends({
+          color: (theme.vars || theme).palette.background["default"]
+        }, theme.vars ? {
+          backgroundColor: theme.vars.palette.Avatar.defaultBg
+        } : _extends({
+          backgroundColor: theme.palette.grey[400]
+        }, theme.applyDarkStyles({
+          backgroundColor: theme.palette.grey[600]
+        })))
+      }]
+    };
   });
   var AvatarImg = styled$1('img', {
     name: 'MuiAvatar',
@@ -23899,9 +24046,9 @@
   var Avatar$1 = Avatar;
 
   function getAvatarGroupUtilityClass(slot) {
-    return generateUtilityClass('MuiAvatarGroup', slot);
+    return generateUtilityClass$1('MuiAvatarGroup', slot);
   }
-  var avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
+  var avatarGroupClasses = generateUtilityClasses$1('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
   var SPACINGS$2 = {
@@ -24305,9 +24452,9 @@
   var Fade$1 = Fade;
 
   function getBackdropUtilityClass(slot) {
-    return generateUtilityClass('MuiBackdrop', slot);
+    return generateUtilityClass$1('MuiBackdrop', slot);
   }
-  var backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+  var backdropClasses = generateUtilityClasses$1('MuiBackdrop', ['root', 'invisible']);
   var backdropClasses$1 = backdropClasses;
 
   var useUtilityClasses$1u = function useUtilityClasses(ownerState) {
@@ -24488,9 +24635,9 @@
   var Backdrop$1 = Backdrop;
 
   function getBadgeUtilityClass(slot) {
-    return generateUtilityClass('MuiBadge', slot);
+    return generateUtilityClass$1('MuiBadge', slot);
   }
-  var badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular',
+  var 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;
@@ -24920,9 +25067,9 @@
   var Badge$1 = Badge;
 
   function getBottomNavigationUtilityClass(slot) {
-    return generateUtilityClass('MuiBottomNavigation', slot);
+    return generateUtilityClass$1('MuiBottomNavigation', slot);
   }
-  var bottomNavigationClasses = generateUtilityClasses('MuiBottomNavigation', ['root']);
+  var bottomNavigationClasses = generateUtilityClasses$1('MuiBottomNavigation', ['root']);
   var bottomNavigationClasses$1 = bottomNavigationClasses;
 
   var useUtilityClasses$1s = function useUtilityClasses(ownerState) {
@@ -25038,9 +25185,9 @@
   var BottomNavigation$1 = BottomNavigation;
 
   function getBottomNavigationActionUtilityClass(slot) {
-    return generateUtilityClass('MuiBottomNavigationAction', slot);
+    return generateUtilityClass$1('MuiBottomNavigationAction', slot);
   }
-  var bottomNavigationActionClasses = generateUtilityClasses('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
+  var bottomNavigationActionClasses = generateUtilityClasses$1('MuiBottomNavigationAction', ['root', 'iconOnly', 'selected', 'label']);
   var bottomNavigationActionClasses$1 = bottomNavigationActionClasses;
 
   var useUtilityClasses$1r = function useUtilityClasses(ownerState) {
@@ -25194,7 +25341,7 @@
   } ;
   var BottomNavigationAction$1 = BottomNavigationAction;
 
-  var boxClasses = generateUtilityClasses('MuiBox', ['root']);
+  var boxClasses = generateUtilityClasses$1('MuiBox', ['root']);
   var boxClasses$1 = boxClasses;
 
   var defaultTheme = createTheme();
@@ -25307,9 +25454,9 @@
   } ;
 
   function getBreadcrumbsUtilityClass(slot) {
-    return generateUtilityClass('MuiBreadcrumbs', slot);
+    return generateUtilityClass$1('MuiBreadcrumbs', slot);
   }
-  var breadcrumbsClasses = generateUtilityClasses('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
+  var breadcrumbsClasses = generateUtilityClasses$1('MuiBreadcrumbs', ['root', 'ol', 'li', 'separator']);
   var breadcrumbsClasses$1 = breadcrumbsClasses;
 
   var useUtilityClasses$1q = function useUtilityClasses(ownerState) {
@@ -25548,9 +25695,9 @@
   var Breadcrumbs$1 = Breadcrumbs;
 
   function getButtonUtilityClass(slot) {
-    return generateUtilityClass('MuiButton', slot);
+    return generateUtilityClass$1('MuiButton', slot);
   }
-  var 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']);
+  var 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;
 
   /**
@@ -25931,9 +26078,9 @@
   var Button$1 = Button;
 
   function getButtonGroupUtilityClass(slot) {
-    return generateUtilityClass('MuiButtonGroup', slot);
+    return generateUtilityClass$1('MuiButtonGroup', slot);
   }
-  var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
+  var buttonGroupClasses = generateUtilityClasses$1('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
   var buttonGroupClasses$1 = buttonGroupClasses;
 
   var overridesResolver$6 = function overridesResolver(props, styles) {
@@ -26196,9 +26343,9 @@
   var ButtonGroup$1 = ButtonGroup;
 
   function getCardUtilityClass(slot) {
-    return generateUtilityClass('MuiCard', slot);
+    return generateUtilityClass$1('MuiCard', slot);
   }
-  var cardClasses = generateUtilityClasses('MuiCard', ['root']);
+  var cardClasses = generateUtilityClasses$1('MuiCard', ['root']);
   var cardClasses$1 = cardClasses;
 
   var useUtilityClasses$1n = function useUtilityClasses(ownerState) {
@@ -26274,9 +26421,9 @@
   var Card$1 = Card;
 
   function getCardActionAreaUtilityClass(slot) {
-    return generateUtilityClass('MuiCardActionArea', slot);
+    return generateUtilityClass$1('MuiCardActionArea', slot);
   }
-  var cardActionAreaClasses = generateUtilityClasses('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
+  var cardActionAreaClasses = generateUtilityClasses$1('MuiCardActionArea', ['root', 'focusVisible', 'focusHighlight']);
   var cardActionAreaClasses$1 = cardActionAreaClasses;
 
   var useUtilityClasses$1m = function useUtilityClasses(ownerState) {
@@ -26386,9 +26533,9 @@
   var CardActionArea$1 = CardActionArea;
 
   function getCardActionsUtilityClass(slot) {
-    return generateUtilityClass('MuiCardActions', slot);
+    return generateUtilityClass$1('MuiCardActions', slot);
   }
-  var cardActionsClasses = generateUtilityClasses('MuiCardActions', ['root', 'spacing']);
+  var cardActionsClasses = generateUtilityClasses$1('MuiCardActions', ['root', 'spacing']);
   var cardActionsClasses$1 = cardActionsClasses;
 
   var useUtilityClasses$1l = function useUtilityClasses(ownerState) {
@@ -26467,9 +26614,9 @@
   var CardActions$1 = CardActions;
 
   function getCardContentUtilityClass(slot) {
-    return generateUtilityClass('MuiCardContent', slot);
+    return generateUtilityClass$1('MuiCardContent', slot);
   }
-  var cardContentClasses = generateUtilityClasses('MuiCardContent', ['root']);
+  var cardContentClasses = generateUtilityClasses$1('MuiCardContent', ['root']);
   var cardContentClasses$1 = cardContentClasses;
 
   var useUtilityClasses$1k = function useUtilityClasses(ownerState) {
@@ -26543,9 +26690,9 @@
   var CardContent$1 = CardContent;
 
   function getCardHeaderUtilityClass(slot) {
-    return generateUtilityClass('MuiCardHeader', slot);
+    return generateUtilityClass$1('MuiCardHeader', slot);
   }
-  var cardHeaderClasses = generateUtilityClasses('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
+  var cardHeaderClasses = generateUtilityClasses$1('MuiCardHeader', ['root', 'avatar', 'action', 'content', 'title', 'subheader']);
   var cardHeaderClasses$1 = cardHeaderClasses;
 
   var useUtilityClasses$1j = function useUtilityClasses(ownerState) {
@@ -26734,9 +26881,9 @@
   var CardHeader$1 = CardHeader;
 
   function getCardMediaUtilityClass(slot) {
-    return generateUtilityClass('MuiCardMedia', slot);
+    return generateUtilityClass$1('MuiCardMedia', slot);
   }
-  var cardMediaClasses = generateUtilityClasses('MuiCardMedia', ['root', 'media', 'img']);
+  var cardMediaClasses = generateUtilityClasses$1('MuiCardMedia', ['root', 'media', 'img']);
   var cardMediaClasses$1 = cardMediaClasses;
 
   var useUtilityClasses$1i = function useUtilityClasses(ownerState) {
@@ -26859,9 +27006,9 @@
   var CardMedia$1 = CardMedia;
 
   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']);
 
   var useUtilityClasses$1h = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
@@ -27136,9 +27283,9 @@
   }), 'IndeterminateCheckBox');
 
   function getCheckboxUtilityClass(slot) {
-    return generateUtilityClass('MuiCheckbox', slot);
+    return generateUtilityClass$1('MuiCheckbox', slot);
   }
-  var checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
+  var checkboxClasses = generateUtilityClasses$1('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);
   var checkboxClasses$1 = checkboxClasses;
 
   var useUtilityClasses$1g = function useUtilityClasses(ownerState) {
@@ -27335,9 +27482,9 @@
   var Checkbox$1 = Checkbox;
 
   function getCircularProgressUtilityClass(slot) {
-    return generateUtilityClass('MuiCircularProgress', slot);
+    return generateUtilityClass$1('MuiCircularProgress', slot);
   }
-  var circularProgressClasses = generateUtilityClasses('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
+  var circularProgressClasses = generateUtilityClasses$1('MuiCircularProgress', ['root', 'determinate', 'indeterminate', 'colorPrimary', 'colorSecondary', 'svg', 'circle', 'circleDeterminate', 'circleIndeterminate', 'circleDisableShrink']);
   var circularProgressClasses$1 = circularProgressClasses;
 
   var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2;
@@ -27611,9 +27758,9 @@
   var Container$1 = Container;
 
   function getContainerUtilityClass(slot) {
-    return generateUtilityClass('MuiContainer', slot);
+    return generateUtilityClass$1('MuiContainer', slot);
   }
-  var containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
+  var containerClasses = generateUtilityClasses$1('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
   var containerClasses$1 = containerClasses;
 
   var html = function html(theme, enableColorScheme) {
@@ -27750,9 +27897,9 @@
   }
 
   function getModalUtilityClass(slot) {
-    return generateUtilityClass('MuiModal', slot);
+    return generateUtilityClass$1('MuiModal', slot);
   }
-  var modalClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+  var modalClasses = generateUtilityClasses$1('MuiModal', ['root', 'hidden', 'backdrop']);
   var modalClasses$1 = modalClasses;
 
   var useUtilityClasses$1e = function useUtilityClasses(ownerState) {
@@ -28130,9 +28277,9 @@
   var Modal$1 = Modal;
 
   function getDialogUtilityClass(slot) {
-    return generateUtilityClass('MuiDialog', slot);
+    return generateUtilityClass$1('MuiDialog', slot);
   }
-  var dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
+  var dialogClasses = generateUtilityClasses$1('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
   var dialogClasses$1 = dialogClasses;
 
   var DialogContext = /*#__PURE__*/React__namespace.createContext({});
@@ -28514,9 +28661,9 @@
   var Dialog$1 = Dialog;
 
   function getDialogActionsUtilityClass(slot) {
-    return generateUtilityClass('MuiDialogActions', slot);
+    return generateUtilityClass$1('MuiDialogActions', slot);
   }
-  var dialogActionsClasses = generateUtilityClasses('MuiDialogActions', ['root', 'spacing']);
+  var dialogActionsClasses = generateUtilityClasses$1('MuiDialogActions', ['root', 'spacing']);
   var dialogActionsClasses$1 = dialogActionsClasses;
 
   var useUtilityClasses$1c = function useUtilityClasses(ownerState) {
@@ -28597,15 +28744,15 @@
   var DialogActions$1 = DialogActions;
 
   function getDialogContentUtilityClass(slot) {
-    return generateUtilityClass('MuiDialogContent', slot);
+    return generateUtilityClass$1('MuiDialogContent', slot);
   }
-  var dialogContentClasses = generateUtilityClasses('MuiDialogContent', ['root', 'dividers']);
+  var dialogContentClasses = generateUtilityClasses$1('MuiDialogContent', ['root', 'dividers']);
   var dialogContentClasses$1 = dialogContentClasses;
 
   function getDialogTitleUtilityClass(slot) {
-    return generateUtilityClass('MuiDialogTitle', slot);
+    return generateUtilityClass$1('MuiDialogTitle', slot);
   }
-  var dialogTitleClasses = generateUtilityClasses('MuiDialogTitle', ['root']);
+  var dialogTitleClasses = generateUtilityClasses$1('MuiDialogTitle', ['root']);
   var dialogTitleClasses$1 = dialogTitleClasses;
 
   var useUtilityClasses$1b = function useUtilityClasses(ownerState) {
@@ -28689,9 +28836,9 @@
   var DialogContent$1 = DialogContent;
 
   function getDialogContentTextUtilityClass(slot) {
-    return generateUtilityClass('MuiDialogContentText', slot);
+    return generateUtilityClass$1('MuiDialogContentText', slot);
   }
-  var dialogContentTextClasses = generateUtilityClasses('MuiDialogContentText', ['root']);
+  var dialogContentTextClasses = generateUtilityClasses$1('MuiDialogContentText', ['root']);
   var dialogContentTextClasses$1 = dialogContentTextClasses;
 
   var useUtilityClasses$1a = function useUtilityClasses(ownerState) {
@@ -28824,9 +28971,9 @@
   var DialogTitle$1 = DialogTitle;
 
   function getDividerUtilityClass(slot) {
-    return generateUtilityClass('MuiDivider', slot);
+    return generateUtilityClass$1('MuiDivider', slot);
   }
-  var dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
+  var dividerClasses = generateUtilityClasses$1('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);
   var dividerClasses$1 = dividerClasses;
 
   var useUtilityClasses$18 = function useUtilityClasses(ownerState) {
@@ -29044,6 +29191,7 @@
     /**
      * If `true`, the divider will have a lighter color.
      * @default false
+     * @deprecated Use <Divider sx={{ bgcolor: '#eee' }} /> (or any color) instead.
      */
     light: PropTypes.bool,
     /**
@@ -29388,9 +29536,9 @@
   var Slide$1 = Slide;
 
   function getDrawerUtilityClass(slot) {
-    return generateUtilityClass('MuiDrawer', slot);
+    return generateUtilityClass$1('MuiDrawer', slot);
   }
-  var drawerClasses = generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+  var drawerClasses = generateUtilityClasses$1('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
   var drawerClasses$1 = drawerClasses;
 
   var overridesResolver$5 = function overridesResolver(props, styles) {
@@ -29688,9 +29836,9 @@
   var Drawer$1 = Drawer;
 
   function getFabUtilityClass(slot) {
-    return generateUtilityClass('MuiFab', slot);
+    return generateUtilityClass$1('MuiFab', slot);
   }
-  var fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
+  var fabClasses = generateUtilityClasses$1('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
   var fabClasses$1 = fabClasses;
 
   var useUtilityClasses$16 = function useUtilityClasses(ownerState) {
@@ -30318,9 +30466,9 @@
   var FilledInput$1 = FilledInput;
 
   function getFormControlUtilityClasses(slot) {
-    return generateUtilityClass('MuiFormControl', slot);
+    return generateUtilityClass$1('MuiFormControl', slot);
   }
-  var formControlClasses = generateUtilityClasses('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
+  var formControlClasses = generateUtilityClasses$1('MuiFormControl', ['root', 'marginNone', 'marginNormal', 'marginDense', 'fullWidth', 'disabled']);
   var formControlClasses$1 = formControlClasses;
 
   var useUtilityClasses$14 = function useUtilityClasses(ownerState) {
@@ -30670,13 +30818,13 @@
   } ;
   var Stack$1 = Stack;
 
-  var stackClasses = generateUtilityClasses('MuiStack', ['root']);
+  var stackClasses = generateUtilityClasses$1('MuiStack', ['root']);
   var stackClasses$1 = stackClasses;
 
   function getFormControlLabelUtilityClasses(slot) {
-    return generateUtilityClass('MuiFormControlLabel', slot);
+    return generateUtilityClass$1('MuiFormControlLabel', slot);
   }
-  var formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
+  var formControlLabelClasses = generateUtilityClasses$1('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
   var formControlLabelClasses$1 = formControlLabelClasses;
 
   var useUtilityClasses$13 = function useUtilityClasses(ownerState) {
@@ -30902,9 +31050,9 @@
   var FormControlLabel$1 = FormControlLabel;
 
   function getFormGroupUtilityClass(slot) {
-    return generateUtilityClass('MuiFormGroup', slot);
+    return generateUtilityClass$1('MuiFormGroup', slot);
   }
-  var formGroupClasses = generateUtilityClasses('MuiFormGroup', ['root', 'row', 'error']);
+  var formGroupClasses = generateUtilityClasses$1('MuiFormGroup', ['root', 'row', 'error']);
   var formGroupClasses$1 = formGroupClasses;
 
   var useUtilityClasses$12 = function useUtilityClasses(ownerState) {
@@ -30995,9 +31143,9 @@
   var FormGroup$1 = FormGroup;
 
   function getFormHelperTextUtilityClasses(slot) {
-    return generateUtilityClass('MuiFormHelperText', slot);
+    return generateUtilityClass$1('MuiFormHelperText', slot);
   }
-  var formHelperTextClasses = generateUtilityClasses('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
+  var formHelperTextClasses = generateUtilityClasses$1('MuiFormHelperText', ['root', 'error', 'disabled', 'sizeSmall', 'sizeMedium', 'contained', 'focused', 'filled', 'required']);
   var formHelperTextClasses$1 = formHelperTextClasses;
 
   var _span$3;
@@ -31153,9 +31301,9 @@
   var FormHelperText$1 = FormHelperText;
 
   function getFormLabelUtilityClasses(slot) {
-    return generateUtilityClass('MuiFormLabel', slot);
+    return generateUtilityClass$1('MuiFormLabel', slot);
   }
-  var formLabelClasses = generateUtilityClasses('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
+  var formLabelClasses = generateUtilityClasses$1('MuiFormLabel', ['root', 'colorSecondary', 'focused', 'disabled', 'error', 'filled', 'required', 'asterisk']);
   var formLabelClasses$1 = formLabelClasses;
 
   var useUtilityClasses$10 = function useUtilityClasses(ownerState) {
@@ -31319,13 +31467,13 @@
   var GridContext$1 = GridContext;
 
   function getGridUtilityClass(slot) {
-    return generateUtilityClass('MuiGrid', slot);
+    return generateUtilityClass$1('MuiGrid', slot);
   }
   var SPACINGS$1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   var DIRECTIONS$1 = ['column-reverse', 'column', 'row-reverse', 'row'];
   var WRAPS$1 = ['nowrap', 'wrap-reverse', 'wrap'];
   var GRID_SIZES$1 = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-  var gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth'].concat(_toConsumableArray(SPACINGS$1.map(function (spacing) {
+  var gridClasses = generateUtilityClasses$1('MuiGrid', ['root', 'container', 'item', 'zeroMinWidth'].concat(_toConsumableArray(SPACINGS$1.map(function (spacing) {
     return "spacing-xs-".concat(spacing);
   })), _toConsumableArray(DIRECTIONS$1.map(function (direction) {
     return "direction-xs-".concat(direction);
@@ -31906,13 +32054,13 @@
   var Grid2$1 = Grid2;
 
   function getGrid2UtilityClass(slot) {
-    return generateUtilityClass('MuiGrid2', slot);
+    return generateUtilityClass$1('MuiGrid2', slot);
   }
   var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
   var DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
   var WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
   var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-  var grid2Classes = generateUtilityClasses('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth'].concat(_toConsumableArray(SPACINGS.map(function (spacing) {
+  var grid2Classes = generateUtilityClasses$1('MuiGrid2', ['root', 'container', 'item', 'zeroMinWidth'].concat(_toConsumableArray(SPACINGS.map(function (spacing) {
     return "spacing-xs-".concat(spacing);
   })), _toConsumableArray(DIRECTIONS.map(function (direction) {
     return "direction-xs-".concat(direction);
@@ -32529,9 +32677,9 @@
   var HiddenJs$1 = withWidth$1()(HiddenJs);
 
   function getHiddenCssUtilityClass(slot) {
-    return generateUtilityClass('PrivateHiddenCss', slot);
+    return generateUtilityClass$1('PrivateHiddenCss', slot);
   }
-  generateUtilityClasses('PrivateHiddenCss', ['root', 'xlDown', 'xlUp', 'onlyXl', 'lgDown', 'lgUp', 'onlyLg', 'mdDown', 'mdUp', 'onlyMd', 'smDown', 'smUp', 'onlySm', 'xsDown', 'xsUp', 'onlyXs']);
+  generateUtilityClasses$1('PrivateHiddenCss', ['root', 'xlDown', 'xlUp', 'onlyXl', 'lgDown', 'lgUp', 'onlyLg', 'mdDown', 'mdUp', 'onlyMd', 'smDown', 'smUp', 'onlySm', 'xsDown', 'xsUp', 'onlyXs']);
 
   var useUtilityClasses$_ = function useUtilityClasses(ownerState) {
     var classes = ownerState.classes,
@@ -32821,9 +32969,9 @@
   } ;
 
   function getIconUtilityClass(slot) {
-    return generateUtilityClass('MuiIcon', slot);
+    return generateUtilityClass$1('MuiIcon', slot);
   }
-  var iconClasses = generateUtilityClasses('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
+  var iconClasses = generateUtilityClasses$1('MuiIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);
   var iconClasses$1 = iconClasses;
 
   var useUtilityClasses$Z = function useUtilityClasses(ownerState) {
@@ -32959,9 +33107,9 @@
   var Icon$1 = Icon;
 
   function getImageListUtilityClass(slot) {
-    return generateUtilityClass('MuiImageList', slot);
+    return generateUtilityClass$1('MuiImageList', slot);
   }
-  var imageListClasses = generateUtilityClasses('MuiImageList', ['root', 'masonry', 'quilted', 'standard', 'woven']);
+  var imageListClasses = generateUtilityClasses$1('MuiImageList', ['root', 'masonry', 'quilted', 'standard', 'woven']);
   var imageListClasses$1 = imageListClasses;
 
   /**
@@ -33117,9 +33265,9 @@
   var ImageList$1 = ImageList;
 
   function getImageListItemUtilityClass(slot) {
-    return generateUtilityClass('MuiImageListItem', slot);
+    return generateUtilityClass$1('MuiImageListItem', slot);
   }
-  var imageListItemClasses = generateUtilityClasses('MuiImageListItem', ['root', 'img', 'standard', 'woven', 'masonry', 'quilted']);
+  var imageListItemClasses = generateUtilityClasses$1('MuiImageListItem', ['root', 'img', 'standard', 'woven', 'masonry', 'quilted']);
   var imageListItemClasses$1 = imageListItemClasses;
 
   var useUtilityClasses$X = function useUtilityClasses(ownerState) {
@@ -33275,9 +33423,9 @@
   var ImageListItem$1 = ImageListItem;
 
   function getImageListItemBarUtilityClass(slot) {
-    return generateUtilityClass('MuiImageListItemBar', slot);
+    return generateUtilityClass$1('MuiImageListItemBar', slot);
   }
-  var imageListItemBarClasses = generateUtilityClasses('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
+  var imageListItemBarClasses = generateUtilityClasses$1('MuiImageListItemBar', ['root', 'positionBottom', 'positionTop', 'positionBelow', 'titleWrap', 'titleWrapBottom', 'titleWrapTop', 'titleWrapBelow', 'titleWrapActionPosLeft', 'titleWrapActionPosRight', 'title', 'subtitle', 'actionIcon', 'actionIconActionPosLeft', 'actionIconActionPosRight']);
   var imageListItemBarClasses$1 = imageListItemBarClasses;
 
   var useUtilityClasses$W = function useUtilityClasses(ownerState) {
@@ -33803,9 +33951,9 @@
   var Input$1 = Input;
 
   function getInputAdornmentUtilityClass(slot) {
-    return generateUtilityClass('MuiInputAdornment', slot);
+    return generateUtilityClass$1('MuiInputAdornment', slot);
   }
-  var inputAdornmentClasses = generateUtilityClasses('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
+  var inputAdornmentClasses = generateUtilityClasses$1('MuiInputAdornment', ['root', 'filled', 'standard', 'outlined', 'positionStart', 'positionEnd', 'disablePointerEvents', 'hiddenLabel', 'sizeSmall']);
   var inputAdornmentClasses$1 = inputAdornmentClasses;
 
   var _span$2;
@@ -33960,9 +34108,9 @@
   var InputAdornment$1 = InputAdornment;
 
   function getInputLabelUtilityClasses(slot) {
-    return generateUtilityClass('MuiInputLabel', slot);
+    return generateUtilityClass$1('MuiInputLabel', slot);
   }
-  var inputLabelClasses = generateUtilityClasses('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
+  var inputLabelClasses = generateUtilityClasses$1('MuiInputLabel', ['root', 'focused', 'disabled', 'error', 'required', 'asterisk', 'formControl', 'sizeSmall', 'shrink', 'animated', 'standard', 'filled', 'outlined']);
   var inputLabelClasses$1 = inputLabelClasses;
 
   var useUtilityClasses$T = function useUtilityClasses(ownerState) {
@@ -34164,9 +34312,9 @@
   var InputLabel$1 = InputLabel;
 
   function getLinearProgressUtilityClass(slot) {
-    return generateUtilityClass('MuiLinearProgress', slot);
+    return generateUtilityClass$1('MuiLinearProgress', slot);
   }
-  var linearProgressClasses = generateUtilityClasses('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+  var linearProgressClasses = generateUtilityClasses$1('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
   var linearProgressClasses$1 = linearProgressClasses;
 
   var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5, _templateObject6;
@@ -34439,9 +34587,9 @@
   var LinearProgress$1 = LinearProgress;
 
   function getLinkUtilityClass(slot) {
-    return generateUtilityClass('MuiLink', slot);
+    return generateUtilityClass$1('MuiLink', slot);
   }
-  var linkClasses = generateUtilityClasses('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
+  var linkClasses = generateUtilityClasses$1('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
   var linkClasses$1 = linkClasses;
 
   var colorTransformations = {
@@ -34667,9 +34815,9 @@
   var ListContext$1 = ListContext;
 
   function getListUtilityClass(slot) {
-    return generateUtilityClass('MuiList', slot);
+    return generateUtilityClass$1('MuiList', slot);
   }
-  var listClasses = generateUtilityClasses('MuiList', ['root', 'padding', 'dense', 'subheader']);
+  var listClasses = generateUtilityClasses$1('MuiList', ['root', 'padding', 'dense', 'subheader']);
   var listClasses$1 = listClasses;
 
   var useUtilityClasses$Q = function useUtilityClasses(ownerState) {
@@ -34787,15 +34935,15 @@
   var List$1 = List;
 
   function getListItemUtilityClass(slot) {
-    return generateUtilityClass('MuiListItem', slot);
+    return generateUtilityClass$1('MuiListItem', slot);
   }
-  var listItemClasses = generateUtilityClasses('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
+  var listItemClasses = generateUtilityClasses$1('MuiListItem', ['root', 'container', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'padding', 'button', 'secondaryAction', 'selected']);
   var listItemClasses$1 = listItemClasses;
 
   function getListItemButtonUtilityClass(slot) {
-    return generateUtilityClass('MuiListItemButton', slot);
+    return generateUtilityClass$1('MuiListItemButton', slot);
   }
-  var listItemButtonClasses = generateUtilityClasses('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
+  var listItemButtonClasses = generateUtilityClasses$1('MuiListItemButton', ['root', 'focusVisible', 'dense', 'alignItemsFlexStart', 'disabled', 'divider', 'gutters', 'selected']);
   var listItemButtonClasses$1 = listItemButtonClasses;
 
   var overridesResolver$3 = function overridesResolver(props, styles) {
@@ -35024,9 +35172,9 @@
   var ListItemButton$1 = ListItemButton;
 
   function getListItemSecondaryActionClassesUtilityClass(slot) {
-    return generateUtilityClass('MuiListItemSecondaryAction', slot);
+    return generateUtilityClass$1('MuiListItemSecondaryAction', slot);
   }
-  var listItemSecondaryActionClasses = generateUtilityClasses('MuiListItemSecondaryAction', ['root', 'disableGutters']);
+  var listItemSecondaryActionClasses = generateUtilityClasses$1('MuiListItemSecondaryAction', ['root', 'disableGutters']);
   var listItemSecondaryActionClasses$1 = listItemSecondaryActionClasses;
 
   var useUtilityClasses$O = function useUtilityClasses(ownerState) {
@@ -35505,9 +35653,9 @@
   var ListItem$1 = ListItem;
 
   function getListItemAvatarUtilityClass(slot) {
-    return generateUtilityClass('MuiListItemAvatar', slot);
+    return generateUtilityClass$1('MuiListItemAvatar', slot);
   }
-  var listItemAvatarClasses = generateUtilityClasses('MuiListItemAvatar', ['root', 'alignItemsFlexStart']);
+  var listItemAvatarClasses = generateUtilityClasses$1('MuiListItemAvatar', ['root', 'alignItemsFlexStart']);
   var listItemAvatarClasses$1 = listItemAvatarClasses;
 
   var useUtilityClasses$M = function useUtilityClasses(ownerState) {
@@ -35581,9 +35729,9 @@
   var ListItemAvatar$1 = ListItemAvatar;
 
   function getListItemIconUtilityClass(slot) {
-    return generateUtilityClass('MuiListItemIcon', slot);
+    return generateUtilityClass$1('MuiListItemIcon', slot);
   }
-  var listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
+  var listItemIconClasses = generateUtilityClasses$1('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
   var listItemIconClasses$1 = listItemIconClasses;
 
   var useUtilityClasses$L = function useUtilityClasses(ownerState) {
@@ -35661,9 +35809,9 @@
   var ListItemIcon$1 = ListItemIcon;
 
   function getListItemTextUtilityClass(slot) {
-    return generateUtilityClass('MuiListItemText', slot);
+    return generateUtilityClass$1('MuiListItemText', slot);
   }
-  var listItemTextClasses = generateUtilityClasses('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
+  var listItemTextClasses = generateUtilityClasses$1('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
   var listItemTextClasses$1 = listItemTextClasses;
 
   var useUtilityClasses$K = function useUtilityClasses(ownerState) {
@@ -36085,9 +36233,9 @@
   var MenuList$1 = MenuList;
 
   function getPopoverUtilityClass(slot) {
-    return generateUtilityClass('MuiPopover', slot);
+    return generateUtilityClass$1('MuiPopover', slot);
   }
-  var popoverClasses = generateUtilityClasses('MuiPopover', ['root', 'paper']);
+  var popoverClasses = generateUtilityClasses$1('MuiPopover', ['root', 'paper']);
   var popoverClasses$1 = popoverClasses;
 
   function getOffsetTop(rect, vertical) {
@@ -36615,9 +36763,9 @@
   var Popover$1 = Popover;
 
   function getMenuUtilityClass(slot) {
-    return generateUtilityClass('MuiMenu', slot);
+    return generateUtilityClass$1('MuiMenu', slot);
   }
-  var menuClasses = generateUtilityClasses('MuiMenu', ['root', 'paper', 'list']);
+  var menuClasses = generateUtilityClasses$1('MuiMenu', ['root', 'paper', 'list']);
   var menuClasses$1 = menuClasses;
 
   var RTL_ORIGIN = {
@@ -36920,9 +37068,9 @@
   var Menu$1 = Menu;
 
   function getMenuItemUtilityClass(slot) {
-    return generateUtilityClass('MuiMenuItem', slot);
+    return generateUtilityClass$1('MuiMenuItem', slot);
   }
-  var menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
+  var menuItemClasses = generateUtilityClasses$1('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
   var menuItemClasses$1 = menuItemClasses;
 
   var overridesResolver$1 = function overridesResolver(props, styles) {
@@ -37157,9 +37305,9 @@
   var MenuItem$1 = MenuItem;
 
   function getMobileStepperUtilityClass(slot) {
-    return generateUtilityClass('MuiMobileStepper', slot);
+    return generateUtilityClass$1('MuiMobileStepper', slot);
   }
-  var mobileStepperClasses = generateUtilityClasses('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
+  var mobileStepperClasses = generateUtilityClasses$1('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
   var mobileStepperClasses$1 = mobileStepperClasses;
 
   var useUtilityClasses$G = function useUtilityClasses(ownerState) {
@@ -37368,9 +37516,9 @@
   var MobileStepper$1 = MobileStepper;
 
   function getNativeSelectUtilityClasses(slot) {
-    return generateUtilityClass('MuiNativeSelect', slot);
+    return generateUtilityClass$1('MuiNativeSelect', slot);
   }
-  var nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
+  var nativeSelectClasses = generateUtilityClasses$1('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
   var nativeSelectClasses$1 = nativeSelectClasses;
 
   var useUtilityClasses$F = function useUtilityClasses(ownerState) {
@@ -38138,9 +38286,9 @@
   var OutlinedInput$1 = OutlinedInput;
 
   function getPaginationUtilityClass(slot) {
-    return generateUtilityClass('MuiPagination', slot);
+    return generateUtilityClass$1('MuiPagination', slot);
   }
-  var paginationClasses = generateUtilityClasses('MuiPagination', ['root', 'ul', 'outlined', 'text']);
+  var paginationClasses = generateUtilityClasses$1('MuiPagination', ['root', 'ul', 'outlined', 'text']);
   var paginationClasses$1 = paginationClasses;
 
   function usePagination() {
@@ -38260,9 +38408,9 @@
   }
 
   function getPaginationItemUtilityClass(slot) {
-    return generateUtilityClass('MuiPaginationItem', slot);
+    return generateUtilityClass$1('MuiPaginationItem', slot);
   }
-  var paginationItemClasses = generateUtilityClasses('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+  var paginationItemClasses = generateUtilityClasses$1('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon', 'colorPrimary', 'colorSecondary']);
   var paginationItemClasses$1 = paginationItemClasses;
 
   var FirstPageIconDefault = createSvgIcon( /*#__PURE__*/jsxRuntime_1("path", {
@@ -38295,7 +38443,7 @@
       type = ownerState.type,
       variant = ownerState.variant;
     var slots = {
-      root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
+      root: ['root', "size".concat(capitalize(size)), variant, shape, color !== 'standard' && "color".concat(capitalize(color)), color !== 'standard' && "".concat(variant).concat(capitalize(color)), disabled && 'disabled', selected && 'selected', {
         page: 'page',
         first: 'firstLast',
         last: 'firstLast',
@@ -38954,9 +39102,9 @@
   }
 
   function getRadioUtilityClass(slot) {
-    return generateUtilityClass('MuiRadio', slot);
+    return generateUtilityClass$1('MuiRadio', slot);
   }
-  var radioClasses = generateUtilityClasses('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
+  var radioClasses = generateUtilityClasses$1('MuiRadio', ['root', 'checked', 'disabled', 'colorPrimary', 'colorSecondary', 'sizeSmall']);
   var radioClasses$1 = radioClasses;
 
   var useUtilityClasses$A = function useUtilityClasses(ownerState) {
@@ -39247,20 +39395,11 @@
   }), 'StarBorder');
 
   function getRatingUtilityClass(slot) {
-    return generateUtilityClass('MuiRating', slot);
+    return generateUtilityClass$1('MuiRating', slot);
   }
-  var ratingClasses = generateUtilityClasses('MuiRating', ['root', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'readOnly', 'disabled', 'focusVisible', 'visuallyHidden', 'pristine', 'label', 'labelEmptyValueActive', 'icon', 'iconEmpty', 'iconFilled', 'iconHover', 'iconFocus', 'iconActive', 'decimal']);
+  var ratingClasses = generateUtilityClasses$1('MuiRating', ['root', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'readOnly', 'disabled', 'focusVisible', 'visuallyHidden', 'pristine', 'label', 'labelEmptyValueActive', 'icon', 'iconEmpty', 'iconFilled', 'iconHover', 'iconFocus', 'iconActive', 'decimal']);
   var ratingClasses$1 = ratingClasses;
 
-  function clamp$1(value, min, max) {
-    if (value < min) {
-      return min;
-    }
-    if (value > max) {
-      return max;
-    }
-    return value;
-  }
   function getDecimalPrecision(num) {
     var decimalPart = num.toString().split('.')[1];
     return decimalPart ? decimalPart.length : 0;
@@ -39312,6 +39451,7 @@
       color: '#faaf00',
       cursor: 'pointer',
       textAlign: 'left',
+      width: 'min-content',
       WebkitTapHighlightColor: 'transparent'
     }, "&.".concat(ratingClasses$1.disabled), {
       opacity: (theme.vars || theme).palette.action.disabledOpacity,
@@ -39588,7 +39728,7 @@
         percent = (event.clientX - left) / containerWidth;
       }
       var newHover = roundValueToPrecision(max * percent + precision / 2, precision);
-      newHover = clamp$1(newHover, precision, max);
+      newHover = clamp(newHover, precision, max);
       setState(function (prev) {
         return prev.hover === newHover && prev.focus === newHover ? prev : {
           hover: newHover,
@@ -39898,9 +40038,9 @@
   var Rating$1 = Rating;
 
   function getScopedCssBaselineUtilityClass(slot) {
-    return generateUtilityClass('MuiScopedCssBaseline', slot);
+    return generateUtilityClass$1('MuiScopedCssBaseline', slot);
   }
-  var scopedCssBaselineClasses = generateUtilityClasses('MuiScopedCssBaseline', ['root']);
+  var scopedCssBaselineClasses = generateUtilityClasses$1('MuiScopedCssBaseline', ['root']);
   var scopedCssBaselineClasses$1 = scopedCssBaselineClasses;
 
   var useUtilityClasses$y = function useUtilityClasses(ownerState) {
@@ -39997,9 +40137,9 @@
   var ScopedCssBaseline$1 = ScopedCssBaseline;
 
   function getSelectUtilityClasses(slot) {
-    return generateUtilityClass('MuiSelect', slot);
+    return generateUtilityClass$1('MuiSelect', slot);
   }
-  var selectClasses = generateUtilityClasses('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
+  var selectClasses = generateUtilityClasses$1('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
   var selectClasses$1 = selectClasses;
 
   var _span;
@@ -40918,9 +41058,9 @@
   var Select$1 = Select;
 
   function getSkeletonUtilityClass(slot) {
-    return generateUtilityClass('MuiSkeleton', slot);
+    return generateUtilityClass$1('MuiSkeleton', slot);
   }
-  var skeletonClasses = generateUtilityClasses('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
+  var skeletonClasses = generateUtilityClasses$1('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
   var skeletonClasses$1 = skeletonClasses;
 
   var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -41081,9 +41221,9 @@
   var shouldSpreadAdditionalProps$1 = shouldSpreadAdditionalProps;
 
   function getSliderUtilityClass(slot) {
-    return generateUtilityClass('MuiSlider', slot);
+    return generateUtilityClass$1('MuiSlider', slot);
   }
-  var sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'thumbColorError', 'thumbColorSuccess', 'thumbColorInfo', 'thumbColorWarning', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
+  var sliderClasses = generateUtilityClasses$1('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'thumbColorError', 'thumbColorSuccess', 'thumbColorInfo', 'thumbColorWarning', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
   var sliderClasses$1 = sliderClasses;
 
   var useValueLabelClasses = function useValueLabelClasses(props) {
@@ -41986,9 +42126,9 @@
   var Slider$1 = Slider;
 
   function getSnackbarContentUtilityClass(slot) {
-    return generateUtilityClass('MuiSnackbarContent', slot);
+    return generateUtilityClass$1('MuiSnackbarContent', slot);
   }
-  var snackbarContentClasses = generateUtilityClasses('MuiSnackbarContent', ['root', 'message', 'action']);
+  var snackbarContentClasses = generateUtilityClasses$1('MuiSnackbarContent', ['root', 'message', 'action']);
   var snackbarContentClasses$1 = snackbarContentClasses;
 
   var useUtilityClasses$t = function useUtilityClasses(ownerState) {
@@ -42112,9 +42252,9 @@
   var SnackbarContent$1 = SnackbarContent;
 
   function getSnackbarUtilityClass(slot) {
-    return generateUtilityClass('MuiSnackbar', slot);
+    return generateUtilityClass$1('MuiSnackbar', slot);
   }
-  var snackbarClasses = generateUtilityClasses('MuiSnackbar', ['root', 'anchorOriginTopCenter', 'anchorOriginBottomCenter', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft']);
+  var snackbarClasses = generateUtilityClasses$1('MuiSnackbar', ['root', 'anchorOriginTopCenter', 'anchorOriginBottomCenter', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft']);
   var snackbarClasses$1 = snackbarClasses;
 
   var useUtilityClasses$s = function useUtilityClasses(ownerState) {
@@ -42607,9 +42747,9 @@
   var Zoom$1 = Zoom;
 
   function getSpeedDialUtilityClass(slot) {
-    return generateUtilityClass('MuiSpeedDial', slot);
+    return generateUtilityClass$1('MuiSpeedDial', slot);
   }
-  var speedDialClasses = generateUtilityClasses('MuiSpeedDial', ['root', 'fab', 'directionUp', 'directionDown', 'directionLeft', 'directionRight', 'actions', 'actionsClosed']);
+  var speedDialClasses = generateUtilityClasses$1('MuiSpeedDial', ['root', 'fab', 'directionUp', 'directionDown', 'directionLeft', 'directionRight', 'actions', 'actionsClosed']);
   var speedDialClasses$1 = speedDialClasses;
 
   var useUtilityClasses$r = function useUtilityClasses(ownerState) {
@@ -42632,15 +42772,6 @@
     }
     return undefined;
   }
-  function clamp(value, min, max) {
-    if (value < min) {
-      return min;
-    }
-    if (value > max) {
-      return max;
-    }
-    return value;
-  }
   var dialRadius = 32;
   var spacingActions = 16;
   var SpeedDialRoot = styled$1('div', {
@@ -43095,9 +43226,9 @@
   var SpeedDial$1 = SpeedDial;
 
   function getTooltipUtilityClass(slot) {
-    return generateUtilityClass('MuiTooltip', slot);
+    return generateUtilityClass$1('MuiTooltip', slot);
   }
-  var tooltipClasses = generateUtilityClasses('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
+  var tooltipClasses = generateUtilityClasses$1('MuiTooltip', ['popper', 'popperInteractive', 'popperArrow', 'popperClose', 'tooltip', 'tooltipArrow', 'touch', 'tooltipPlacementLeft', 'tooltipPlacementRight', 'tooltipPlacementTop', 'tooltipPlacementBottom', 'arrow']);
   var tooltipClasses$1 = tooltipClasses;
 
   function round(value) {
@@ -43865,9 +43996,9 @@
   var Tooltip$1 = Tooltip;
 
   function getSpeedDialActionUtilityClass(slot) {
-    return generateUtilityClass('MuiSpeedDialAction', slot);
+    return generateUtilityClass$1('MuiSpeedDialAction', slot);
   }
-  var speedDialActionClasses = generateUtilityClasses('MuiSpeedDialAction', ['fab', 'fabClosed', 'staticTooltip', 'staticTooltipClosed', 'staticTooltipLabel', 'tooltipPlacementLeft', 'tooltipPlacementRight']);
+  var speedDialActionClasses = generateUtilityClasses$1('MuiSpeedDialAction', ['fab', 'fabClosed', 'staticTooltip', 'staticTooltipClosed', 'staticTooltipLabel', 'tooltipPlacementLeft', 'tooltipPlacementRight']);
   var speedDialActionClasses$1 = speedDialActionClasses;
 
   var useUtilityClasses$p = function useUtilityClasses(ownerState) {
@@ -44105,9 +44236,9 @@
   }), 'Add');
 
   function getSpeedDialIconUtilityClass(slot) {
-    return generateUtilityClass('MuiSpeedDialIcon', slot);
+    return generateUtilityClass$1('MuiSpeedDialIcon', slot);
   }
-  var speedDialIconClasses = generateUtilityClasses('MuiSpeedDialIcon', ['root', 'icon', 'iconOpen', 'iconWithOpenIconOpen', 'openIcon', 'openIconOpen']);
+  var speedDialIconClasses = generateUtilityClasses$1('MuiSpeedDialIcon', ['root', 'icon', 'iconOpen', 'iconWithOpenIconOpen', 'openIcon', 'openIconOpen']);
   var speedDialIconClasses$1 = speedDialIconClasses;
 
   var useUtilityClasses$o = function useUtilityClasses(ownerState) {
@@ -44252,9 +44383,9 @@
   var StepContext$1 = StepContext;
 
   function getStepUtilityClass(slot) {
-    return generateUtilityClass('MuiStep', slot);
+    return generateUtilityClass$1('MuiStep', slot);
   }
-  var stepClasses = generateUtilityClasses('MuiStep', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'completed']);
+  var stepClasses = generateUtilityClasses$1('MuiStep', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'completed']);
   var stepClasses$1 = stepClasses;
 
   var useUtilityClasses$n = function useUtilityClasses(ownerState) {
@@ -44422,9 +44553,9 @@
   }), 'Warning');
 
   function getStepIconUtilityClass(slot) {
-    return generateUtilityClass('MuiStepIcon', slot);
+    return generateUtilityClass$1('MuiStepIcon', slot);
   }
-  var stepIconClasses = generateUtilityClasses('MuiStepIcon', ['root', 'active', 'completed', 'error', 'text']);
+  var stepIconClasses = generateUtilityClasses$1('MuiStepIcon', ['root', 'active', 'completed', 'error', 'text']);
   var stepIconClasses$1 = stepIconClasses;
 
   var _circle;
@@ -44575,9 +44706,9 @@
   var StepIcon$1 = StepIcon;
 
   function getStepLabelUtilityClass(slot) {
-    return generateUtilityClass('MuiStepLabel', slot);
+    return generateUtilityClass$1('MuiStepLabel', slot);
   }
-  var stepLabelClasses = generateUtilityClasses('MuiStepLabel', ['root', 'horizontal', 'vertical', 'label', 'active', 'completed', 'error', 'disabled', 'iconContainer', 'alternativeLabel', 'labelContainer']);
+  var stepLabelClasses = generateUtilityClasses$1('MuiStepLabel', ['root', 'horizontal', 'vertical', 'label', 'active', 'completed', 'error', 'disabled', 'iconContainer', 'alternativeLabel', 'labelContainer']);
   var stepLabelClasses$1 = stepLabelClasses;
 
   var useUtilityClasses$l = function useUtilityClasses(ownerState) {
@@ -44802,9 +44933,9 @@
   var StepLabel$1 = StepLabel;
 
   function getStepButtonUtilityClass(slot) {
-    return generateUtilityClass('MuiStepButton', slot);
+    return generateUtilityClass$1('MuiStepButton', slot);
   }
-  var stepButtonClasses = generateUtilityClasses('MuiStepButton', ['root', 'horizontal', 'vertical', 'touchRipple']);
+  var stepButtonClasses = generateUtilityClasses$1('MuiStepButton', ['root', 'horizontal', 'vertical', 'touchRipple']);
   var stepButtonClasses$1 = stepButtonClasses;
 
   var useUtilityClasses$k = function useUtilityClasses(ownerState) {
@@ -44911,9 +45042,9 @@
   var StepButton$1 = StepButton;
 
   function getStepConnectorUtilityClass(slot) {
-    return generateUtilityClass('MuiStepConnector', slot);
+    return generateUtilityClass$1('MuiStepConnector', slot);
   }
-  var stepConnectorClasses = generateUtilityClasses('MuiStepConnector', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'active', 'completed', 'disabled', 'line', 'lineHorizontal', 'lineVertical']);
+  var stepConnectorClasses = generateUtilityClasses$1('MuiStepConnector', ['root', 'horizontal', 'vertical', 'alternativeLabel', 'active', 'completed', 'disabled', 'line', 'lineHorizontal', 'lineVertical']);
   var stepConnectorClasses$1 = stepConnectorClasses;
 
   var useUtilityClasses$j = function useUtilityClasses(ownerState) {
@@ -45027,9 +45158,9 @@
   var StepConnector$1 = StepConnector;
 
   function getStepContentUtilityClass(slot) {
-    return generateUtilityClass('MuiStepContent', slot);
+    return generateUtilityClass$1('MuiStepContent', slot);
   }
-  var stepContentClasses = generateUtilityClasses('MuiStepContent', ['root', 'last', 'transition']);
+  var stepContentClasses = generateUtilityClasses$1('MuiStepContent', ['root', 'last', 'transition']);
   var stepContentClasses$1 = stepContentClasses;
 
   var useUtilityClasses$i = function useUtilityClasses(ownerState) {
@@ -45166,9 +45297,9 @@
   var StepContent$1 = StepContent;
 
   function getStepperUtilityClass(slot) {
-    return generateUtilityClass('MuiStepper', slot);
+    return generateUtilityClass$1('MuiStepper', slot);
   }
-  var stepperClasses = generateUtilityClasses('MuiStepper', ['root', 'horizontal', 'vertical', 'alternativeLabel']);
+  var stepperClasses = generateUtilityClasses$1('MuiStepper', ['root', 'horizontal', 'vertical', 'alternativeLabel']);
   var stepperClasses$1 = stepperClasses;
 
   var useUtilityClasses$h = function useUtilityClasses(ownerState) {
@@ -45974,9 +46105,9 @@
   var SwipeableDrawer$1 = SwipeableDrawer;
 
   function getSwitchUtilityClass(slot) {
-    return generateUtilityClass('MuiSwitch', slot);
+    return generateUtilityClass$1('MuiSwitch', slot);
   }
-  var switchClasses = generateUtilityClasses('MuiSwitch', ['root', 'edgeStart', 'edgeEnd', 'switchBase', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium', 'checked', 'disabled', 'input', 'thumb', 'track']);
+  var switchClasses = generateUtilityClasses$1('MuiSwitch', ['root', 'edgeStart', 'edgeEnd', 'switchBase', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium', 'checked', 'disabled', 'input', 'thumb', 'track']);
   var switchClasses$1 = switchClasses;
 
   var useUtilityClasses$g = function useUtilityClasses(ownerState) {
@@ -46271,9 +46402,9 @@
   var Switch$1 = Switch;
 
   function getTabUtilityClass(slot) {
-    return generateUtilityClass('MuiTab', slot);
+    return generateUtilityClass$1('MuiTab', slot);
   }
-  var tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
+  var tabClasses = generateUtilityClasses$1('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);
   var tabClasses$1 = tabClasses;
 
   var useUtilityClasses$f = function useUtilityClasses(ownerState) {
@@ -46520,9 +46651,9 @@
   var TableContext$1 = TableContext;
 
   function getTableUtilityClass(slot) {
-    return generateUtilityClass('MuiTable', slot);
+    return generateUtilityClass$1('MuiTable', slot);
   }
-  var tableClasses = generateUtilityClasses('MuiTable', ['root', 'stickyHeader']);
+  var tableClasses = generateUtilityClasses$1('MuiTable', ['root', 'stickyHeader']);
   var tableClasses$1 = tableClasses;
 
   var useUtilityClasses$e = function useUtilityClasses(ownerState) {
@@ -46655,9 +46786,9 @@
   var Tablelvl2Context$1 = Tablelvl2Context;
 
   function getTableBodyUtilityClass(slot) {
-    return generateUtilityClass('MuiTableBody', slot);
+    return generateUtilityClass$1('MuiTableBody', slot);
   }
-  var tableBodyClasses = generateUtilityClasses('MuiTableBody', ['root']);
+  var tableBodyClasses = generateUtilityClasses$1('MuiTableBody', ['root']);
   var tableBodyClasses$1 = tableBodyClasses;
 
   var useUtilityClasses$d = function useUtilityClasses(ownerState) {
@@ -46734,9 +46865,9 @@
   var TableBody$1 = TableBody;
 
   function getTableCellUtilityClass(slot) {
-    return generateUtilityClass('MuiTableCell', slot);
+    return generateUtilityClass$1('MuiTableCell', slot);
   }
-  var tableCellClasses = generateUtilityClasses('MuiTableCell', ['root', 'head', 'body', 'footer', 'sizeSmall', 'sizeMedium', 'paddingCheckbox', 'paddingNone', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'stickyHeader']);
+  var tableCellClasses = generateUtilityClasses$1('MuiTableCell', ['root', 'head', 'body', 'footer', 'sizeSmall', 'sizeMedium', 'paddingCheckbox', 'paddingNone', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'stickyHeader']);
   var tableCellClasses$1 = tableCellClasses;
 
   var useUtilityClasses$c = function useUtilityClasses(ownerState) {
@@ -46932,9 +47063,9 @@
   var TableCell$1 = TableCell;
 
   function getTableContainerUtilityClass(slot) {
-    return generateUtilityClass('MuiTableContainer', slot);
+    return generateUtilityClass$1('MuiTableContainer', slot);
   }
-  var tableContainerClasses = generateUtilityClasses('MuiTableContainer', ['root']);
+  var tableContainerClasses = generateUtilityClasses$1('MuiTableContainer', ['root']);
   var tableContainerClasses$1 = tableContainerClasses;
 
   var useUtilityClasses$b = function useUtilityClasses(ownerState) {
@@ -47004,9 +47135,9 @@
   var TableContainer$1 = TableContainer;
 
   function getTableFooterUtilityClass(slot) {
-    return generateUtilityClass('MuiTableFooter', slot);
+    return generateUtilityClass$1('MuiTableFooter', slot);
   }
-  var tableFooterClasses = generateUtilityClasses('MuiTableFooter', ['root']);
+  var tableFooterClasses = generateUtilityClasses$1('MuiTableFooter', ['root']);
   var tableFooterClasses$1 = tableFooterClasses;
 
   var useUtilityClasses$a = function useUtilityClasses(ownerState) {
@@ -47083,9 +47214,9 @@
   var TableFooter$1 = TableFooter;
 
   function getTableHeadUtilityClass(slot) {
-    return generateUtilityClass('MuiTableHead', slot);
+    return generateUtilityClass$1('MuiTableHead', slot);
   }
-  var tableHeadClasses = generateUtilityClasses('MuiTableHead', ['root']);
+  var tableHeadClasses = generateUtilityClasses$1('MuiTableHead', ['root']);
   var tableHeadClasses$1 = tableHeadClasses;
 
   var useUtilityClasses$9 = function useUtilityClasses(ownerState) {
@@ -47162,9 +47293,9 @@
   var TableHead$1 = TableHead;
 
   function getToolbarUtilityClass(slot) {
-    return generateUtilityClass('MuiToolbar', slot);
+    return generateUtilityClass$1('MuiToolbar', slot);
   }
-  var toolbarClasses = generateUtilityClasses('MuiToolbar', ['root', 'gutters', 'regular', 'dense']);
+  var toolbarClasses = generateUtilityClasses$1('MuiToolbar', ['root', 'gutters', 'regular', 'dense']);
   var toolbarClasses$1 = toolbarClasses;
 
   var useUtilityClasses$8 = function useUtilityClasses(ownerState) {
@@ -47445,9 +47576,9 @@
   var TablePaginationActions$1 = TablePaginationActions;
 
   function getTablePaginationUtilityClass(slot) {
-    return generateUtilityClass('MuiTablePagination', slot);
+    return generateUtilityClass$1('MuiTablePagination', slot);
   }
-  var tablePaginationClasses = generateUtilityClasses('MuiTablePagination', ['root', 'toolbar', 'spacer', 'selectLabel', 'selectRoot', 'select', 'selectIcon', 'input', 'menuItem', 'displayedRows', 'actions']);
+  var tablePaginationClasses = generateUtilityClasses$1('MuiTablePagination', ['root', 'toolbar', 'spacer', 'selectLabel', 'selectRoot', 'select', 'selectIcon', 'input', 'menuItem', 'displayedRows', 'actions']);
   var tablePaginationClasses$1 = tablePaginationClasses;
 
   var _InputBase;
@@ -47889,9 +48020,9 @@
   var TablePagination$1 = TablePagination;
 
   function getTableRowUtilityClass(slot) {
-    return generateUtilityClass('MuiTableRow', slot);
+    return generateUtilityClass$1('MuiTableRow', slot);
   }
-  var tableRowClasses = generateUtilityClasses('MuiTableRow', ['root', 'selected', 'hover', 'head', 'footer']);
+  var tableRowClasses = generateUtilityClasses$1('MuiTableRow', ['root', 'selected', 'hover', 'head', 'footer']);
   var tableRowClasses$1 = tableRowClasses;
 
   var useUtilityClasses$6 = function useUtilityClasses(ownerState) {
@@ -48008,9 +48139,9 @@
   }), 'ArrowDownward');
 
   function getTableSortLabelUtilityClass(slot) {
-    return generateUtilityClass('MuiTableSortLabel', slot);
+    return generateUtilityClass$1('MuiTableSortLabel', slot);
   }
-  var tableSortLabelClasses = generateUtilityClasses('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc']);
+  var tableSortLabelClasses = generateUtilityClasses$1('MuiTableSortLabel', ['root', 'active', 'icon', 'iconDirectionDesc', 'iconDirectionAsc']);
   var tableSortLabelClasses$1 = tableSortLabelClasses;
 
   var useUtilityClasses$5 = function useUtilityClasses(ownerState) {
@@ -48255,9 +48386,9 @@
   } ;
 
   function getTabScrollButtonUtilityClass(slot) {
-    return generateUtilityClass('MuiTabScrollButton', slot);
+    return generateUtilityClass$1('MuiTabScrollButton', slot);
   }
-  var tabScrollButtonClasses = generateUtilityClasses('MuiTabScrollButton', ['root', 'vertical', 'horizontal', 'disabled']);
+  var tabScrollButtonClasses = generateUtilityClasses$1('MuiTabScrollButton', ['root', 'vertical', 'horizontal', 'disabled']);
   var tabScrollButtonClasses$1 = tabScrollButtonClasses;
 
   var useUtilityClasses$4 = function useUtilityClasses(ownerState) {
@@ -48397,9 +48528,9 @@
   var TabScrollButton$1 = TabScrollButton;
 
   function getTabsUtilityClass(slot) {
-    return generateUtilityClass('MuiTabs', slot);
+    return generateUtilityClass$1('MuiTabs', slot);
   }
-  var tabsClasses = generateUtilityClasses('MuiTabs', ['root', 'vertical', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
+  var tabsClasses = generateUtilityClasses$1('MuiTabs', ['root', 'vertical', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);
   var tabsClasses$1 = tabsClasses;
 
   var nextItem = function nextItem(list, item) {
@@ -49225,9 +49356,9 @@
   var Tabs$1 = Tabs;
 
   function getTextFieldUtilityClass(slot) {
-    return generateUtilityClass('MuiTextField', slot);
+    return generateUtilityClass$1('MuiTextField', slot);
   }
-  var textFieldClasses = generateUtilityClasses('MuiTextField', ['root']);
+  var textFieldClasses = generateUtilityClasses$1('MuiTextField', ['root']);
   var textFieldClasses$1 = textFieldClasses;
 
   var variantComponent = {
@@ -49592,9 +49723,9 @@
   var TextField$1 = TextField;
 
   function getToggleButtonUtilityClass(slot) {
-    return generateUtilityClass('MuiToggleButton', slot);
+    return generateUtilityClass$1('MuiToggleButton', slot);
   }
-  var toggleButtonClasses = generateUtilityClasses('MuiToggleButton', ['root', 'disabled', 'selected', 'standard', 'primary', 'secondary', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'fullWidth']);
+  var toggleButtonClasses = generateUtilityClasses$1('MuiToggleButton', ['root', 'disabled', 'selected', 'standard', 'primary', 'secondary', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'fullWidth']);
   var toggleButtonClasses$1 = toggleButtonClasses;
 
   /**
@@ -49838,9 +49969,9 @@
   var ToggleButton$1 = ToggleButton;
 
   function getToggleButtonGroupUtilityClass(slot) {
-    return generateUtilityClass('MuiToggleButtonGroup', slot);
+    return generateUtilityClass$1('MuiToggleButtonGroup', slot);
   }
-  var toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+  var toggleButtonGroupClasses = generateUtilityClasses$1('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
   var toggleButtonGroupClasses$1 = toggleButtonGroupClasses;
 
   var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -50340,8 +50471,8 @@
   exports.formGroupClasses = formGroupClasses$1;
   exports.formHelperTextClasses = formHelperTextClasses$1;
   exports.formLabelClasses = formLabelClasses$1;
-  exports.generateUtilityClass = generateUtilityClass;
-  exports.generateUtilityClasses = generateUtilityClasses;
+  exports.generateUtilityClass = generateUtilityClass$1;
+  exports.generateUtilityClasses = generateUtilityClasses$1;
   exports.getAccordionActionsUtilityClass = getAccordionActionsUtilityClass;
   exports.getAccordionDetailsUtilityClass = getAccordionDetailsUtilityClass;
   exports.getAccordionSummaryUtilityClass = getAccordionSummaryUtilityClass;