@sinco/react 1.2.4 → 1.2.5-rc.0

package/index.esm.js

@@ -452,7 +452,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-function memoize$2(fn) {
+function memoize$1(fn) {
   var cache = Object.create(null);
   return function (arg) {
     if (cache[arg] === undefined) cache[arg] = fn(arg);
@@ -460,9 +460,10 @@ function memoize$2(fn) {
   };
 }
 
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
+// eslint-disable-next-line no-undef
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
-var isPropValid = /* #__PURE__ */memoize$2(function (prop) {
+var isPropValid = /* #__PURE__ */memoize$1(function (prop) {
   return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
   /* o */
   && prop.charCodeAt(1) === 110
@@ -630,14 +631,6 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-function memoize$1(fn) {
-  var cache = Object.create(null);
-  return function (arg) {
-    if (cache[arg] === undefined) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-
 var isDevelopment = false;
 
 var hyphenateRegex = /[A-Z]|^ms/g;
@@ -732,7 +725,6 @@ function handleInterpolation(mergedProps, registered, interpolation) {
           }
 
           var styles = serializedStyles.styles + ";";
-
           return styles;
         }
 
@@ -818,10 +810,9 @@ function createStringFromObject(mergedProps, registered, obj) {
   return string;
 }
 
-var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g;
+var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
 // keyframes are stored on the SerializedStyles object as a linked list
 
-
 var cursor;
 function serializeStyles(args, registered, mergedProps) {
   if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
@@ -851,7 +842,7 @@ function serializeStyles(args, registered, mergedProps) {
 
       styles += templateStringsArr[i];
     }
-  }
+  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
 
 
   labelPattern.lastIndex = 0;
@@ -2262,7 +2253,7 @@ var propTypesExports = propTypes.exports;
 var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
 /**
- * @mui/styled-engine v6.1.6
+ * @mui/styled-engine v6.1.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2311,7 +2302,7 @@ function isPlainObject(item) {
   return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
 }
 function deepClone(source) {
-  if (!isPlainObject(source)) {
+  if (/*#__PURE__*/React.isValidElement(source) || !isPlainObject(source)) {
     return source;
   }
   const output = {};
@@ -2328,7 +2319,9 @@ function deepmerge(target, source, options = {
   } : target;
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach(key => {
-      if (isPlainObject(source[key]) &&
+      if (/*#__PURE__*/React.isValidElement(source[key])) {
+        output[key] = source[key];
+      } else if (isPlainObject(source[key]) &&
       // Avoid prototype pollution
       Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
         // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
@@ -2345,7 +2338,7 @@ function deepmerge(target, source, options = {
 
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-const sortBreakpointsValues$1 = values => {
+const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
@@ -2361,7 +2354,7 @@ const sortBreakpointsValues$1 = values => {
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
-function createBreakpoints$1(breakpoints) {
+function createBreakpoints(breakpoints) {
   const {
     // The breakpoint **start** at this value.
     // For instance with the first breakpoint xs: [xs, sm).
@@ -2380,7 +2373,7 @@ function createBreakpoints$1(breakpoints) {
     step = 5,
     ...other
   } = breakpoints;
-  const sortedValues = sortBreakpointsValues$1(values);
+  const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
   function up(key) {
     const value = typeof values[key] === 'number' ? values[key] : key;
@@ -3639,7 +3632,7 @@ function createTheme$1(options = {}, ...args) {
     shape: shapeInput = {},
     ...other
   } = options;
-  const breakpoints = createBreakpoints$1(breakpointsInput);
+  const breakpoints = createBreakpoints(breakpointsInput);
   const spacing = createSpacing(spacingInput);
   let muiTheme = deepmerge({
     breakpoints,
@@ -4463,7 +4456,7 @@ function getThemeProps$1(params) {
   return resolveProps(theme.components[name].defaultProps, props);
 }
 
-function useThemeProps$1({
+function useThemeProps({
   props,
   name,
   defaultTheme,
@@ -5027,6 +5020,22 @@ function useEventCallback(fn) {
   (0, ref.current)(...args)).current;
 }
 
+/**
+ * Takes an array of refs and returns a new ref which will apply any modification to all of the refs.
+ * This is useful when you want to have the ref used in multiple places.
+ *
+ * ```tsx
+ * const rootRef = React.useRef<Instance>(null);
+ * const refFork = useForkRef(rootRef, props.ref);
+ *
+ * return (
+ *   <Root {...props} ref={refFork} />
+ * );
+ * ```
+ *
+ * @param {Array<React.Ref<Instance> | undefined>} refs The ref array.
+ * @returns {React.RefCallback<Instance> | null} The new ref callback.
+ */
 function useForkRef(...refs) {
   /**
    * This will create a new function if the refs passed to this hook change and are all defined.
@@ -5371,25 +5380,20 @@ function resolveComponentProps(componentProps, ownerState, slotState) {
 }
 
 /**
- * Returns the ref of a React node handling differences between React 19 and older versions.
- * It will return null if the node is not a valid React element.
+ * Returns the ref of a React element handling differences between React 19 and older versions.
+ * It will throw runtime error if the element is not a valid React element.
  *
- * @param element React.ReactNode
+ * @param element React.ReactElement
  * @returns React.Ref<any> | null
- *
- * @deprecated Use getReactElementRef instead
  */
-function getReactNodeRef(element) {
-  if (!element || ! /*#__PURE__*/React.isValidElement(element)) {
-    return null;
-  }
-
+function getReactElementRef(element) {
   // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
-  return element.props.propertyIsEnumerable('ref') ? element.props.ref :
+  if (parseInt(React.version, 10) >= 19) {
+    return element?.props?.ref || null;
+  }
   // @ts-expect-error element.ref is not included in the ReactElement type
-  // We cannot check for it, but isValidElement is true at this point
   // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
-  element.ref;
+  return element?.ref || null;
 }
 
 const RtlContext = /*#__PURE__*/React.createContext();
@@ -5451,6 +5455,33 @@ function useDefaultProps$1({
   });
 }
 
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
+// allocate more objects.
+const arg = {
+  theme: undefined
+};
+
+/**
+ * Memoize style function on theme.
+ * Intended to be used in styled() calls that only need access to the theme.
+ */
+function unstable_memoTheme(styleFn) {
+  let lastValue;
+  let lastTheme;
+  return function styleMemoized(props) {
+    let value = lastValue;
+    if (value === undefined || props.theme !== lastTheme) {
+      arg.theme = props.theme;
+      value = preprocessStyles(styleFn(arg));
+      lastValue = value;
+      lastTheme = props.theme;
+    }
+    return value;
+  };
+}
+
 /**
  * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
  * and they does not need to remember the prefix (defined once).
@@ -5790,7 +5821,7 @@ const defaultCreateStyledComponent = styled$1('div', {
   overridesResolver: (props, styles) => styles.root
 });
 function useThemePropsDefault(props) {
-  return useThemeProps$1({
+  return useThemeProps({
     props,
     name: 'MuiStack',
     defaultTheme: defaultTheme$2
@@ -6065,70 +6096,76 @@ const green = {
   A700: '#00c853'
 };
 
-const light = {
-  // The colors used to style the text.
-  text: {
-    // The most important text.
-    primary: 'rgba(0, 0, 0, 0.87)',
-    // Secondary text.
-    secondary: 'rgba(0, 0, 0, 0.6)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0, 0, 0, 0.38)'
-  },
-  // The color used to divide different elements.
-  divider: 'rgba(0, 0, 0, 0.12)',
-  // The background colors used to style the surfaces.
-  // Consistency between these values is important.
-  background: {
-    paper: common.white,
-    default: common.white
-  },
-  // The colors used to style the action elements.
-  action: {
-    // The color of an active action like an icon button.
-    active: 'rgba(0, 0, 0, 0.54)',
-    // The color of an hovered action.
-    hover: 'rgba(0, 0, 0, 0.04)',
-    hoverOpacity: 0.04,
-    // The color of a selected action.
-    selected: 'rgba(0, 0, 0, 0.08)',
-    selectedOpacity: 0.08,
-    // The color of a disabled action.
-    disabled: 'rgba(0, 0, 0, 0.26)',
-    // The background color of a disabled action.
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.12
-  }
-};
-const dark = {
-  text: {
-    primary: common.white,
-    secondary: 'rgba(255, 255, 255, 0.7)',
-    disabled: 'rgba(255, 255, 255, 0.5)',
-    icon: 'rgba(255, 255, 255, 0.5)'
-  },
-  divider: 'rgba(255, 255, 255, 0.12)',
-  background: {
-    paper: '#121212',
-    default: '#121212'
-  },
-  action: {
-    active: common.white,
-    hover: 'rgba(255, 255, 255, 0.08)',
-    hoverOpacity: 0.08,
-    selected: 'rgba(255, 255, 255, 0.16)',
-    selectedOpacity: 0.16,
-    disabled: 'rgba(255, 255, 255, 0.3)',
-    disabledBackground: 'rgba(255, 255, 255, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(255, 255, 255, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.24
-  }
-};
+function getLight() {
+  return {
+    // The colors used to style the text.
+    text: {
+      // The most important text.
+      primary: 'rgba(0, 0, 0, 0.87)',
+      // Secondary text.
+      secondary: 'rgba(0, 0, 0, 0.6)',
+      // Disabled text have even lower visual prominence.
+      disabled: 'rgba(0, 0, 0, 0.38)'
+    },
+    // The color used to divide different elements.
+    divider: 'rgba(0, 0, 0, 0.12)',
+    // The background colors used to style the surfaces.
+    // Consistency between these values is important.
+    background: {
+      paper: common.white,
+      default: common.white
+    },
+    // The colors used to style the action elements.
+    action: {
+      // The color of an active action like an icon button.
+      active: 'rgba(0, 0, 0, 0.54)',
+      // The color of an hovered action.
+      hover: 'rgba(0, 0, 0, 0.04)',
+      hoverOpacity: 0.04,
+      // The color of a selected action.
+      selected: 'rgba(0, 0, 0, 0.08)',
+      selectedOpacity: 0.08,
+      // The color of a disabled action.
+      disabled: 'rgba(0, 0, 0, 0.26)',
+      // The background color of a disabled action.
+      disabledBackground: 'rgba(0, 0, 0, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(0, 0, 0, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12
+    }
+  };
+}
+const light = getLight();
+function getDark() {
+  return {
+    text: {
+      primary: common.white,
+      secondary: 'rgba(255, 255, 255, 0.7)',
+      disabled: 'rgba(255, 255, 255, 0.5)',
+      icon: 'rgba(255, 255, 255, 0.5)'
+    },
+    divider: 'rgba(255, 255, 255, 0.12)',
+    background: {
+      paper: '#121212',
+      default: '#121212'
+    },
+    action: {
+      active: common.white,
+      hover: 'rgba(255, 255, 255, 0.08)',
+      hoverOpacity: 0.08,
+      selected: 'rgba(255, 255, 255, 0.16)',
+      selectedOpacity: 0.16,
+      disabled: 'rgba(255, 255, 255, 0.3)',
+      disabledBackground: 'rgba(255, 255, 255, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(255, 255, 255, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24
+    }
+  };
+}
+const dark = getDark();
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   const tonalOffsetLight = tonalOffset.light || tonalOffset;
   const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
@@ -6268,24 +6305,10 @@ function createPalette(palette) {
       color.main = color[mainShade];
     }
     if (!color.hasOwnProperty('main')) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
-The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : formatMuiErrorMessage(11, name ? ` (${name})` : '', mainShade));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : formatMuiErrorMessage(11, name ? ` (${name})` : '', mainShade));
     }
     if (typeof color.main !== 'string') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.
-\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.
-
-Did you intend to use one of the following approaches?
-
-import { green } from "@mui/material/colors";
-
-const theme1 = createTheme({ palette: {
-  primary: green,
-} });
-
-const theme2 = createTheme({ palette: {
-  primary: { main: green[500] },
-} });` : formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : formatMuiErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
     addLightOrDark(color, 'light', lightShade, tonalOffset);
     addLightOrDark(color, 'dark', darkShade, tonalOffset);
@@ -6294,12 +6317,14 @@ const theme2 = createTheme({ palette: {
     }
     return color;
   };
-  const modes = {
-    dark,
-    light
-  };
+  let modeHydrated;
+  if (mode === 'light') {
+    modeHydrated = getLight();
+  } else if (mode === 'dark') {
+    modeHydrated = getDark();
+  }
   if (process.env.NODE_ENV !== 'production') {
-    if (!modes[mode]) {
+    if (!modeHydrated) {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
@@ -6358,7 +6383,7 @@ const theme2 = createTheme({ palette: {
     // E.g., shift from Red 500 to Red 300 or Red 700.
     tonalOffset,
     // The light and dark mode object.
-    ...modes[mode]
+    ...modeHydrated
   }, other);
   return paletteOutput;
 }
@@ -6597,6 +6622,60 @@ const zIndex = {
   tooltip: 1500
 };
 
+/* eslint-disable import/prefer-default-export */
+function isSerializable(val) {
+  return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme()` or `extendTheme()`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}
+
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -6609,8 +6688,7 @@ function createThemeNoVars(options = {}, ...args) {
     ...other
   } = options;
   if (options.vars) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
-Please use another name.` : formatMuiErrorMessage(20));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' + 'Please use another name.' : formatMuiErrorMessage(20));
   }
   const palette = createPalette(paletteInput);
   const systemTheme = createTheme$1(options);
@@ -6667,6 +6745,8 @@ Please use another name.` : formatMuiErrorMessage(20));
       theme: this
     });
   };
+  muiTheme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
+
   return muiTheme;
 }
 
@@ -6683,7 +6763,7 @@ function getOverlayAlpha(elevation) {
 
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
-    return undefined;
+    return 'none';
   }
   const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
@@ -6722,7 +6802,7 @@ function createColorScheme(options) {
 }
 
 function shouldSkipGeneratingVar(keys) {
-  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }
@@ -6730,9 +6810,10 @@ function shouldSkipGeneratingVar(keys) {
 /**
  * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
  */
-const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
+const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(25)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
 
-var defaultGetSelector = (theme => (colorScheme, css) => {
+var defaultGetSelector = theme => (colorScheme, css) => {
+  const root = theme.rootSelector || ':root';
   const selector = theme.colorSchemeSelector;
   let rule = selector;
   if (selector === 'class') {
@@ -6754,33 +6835,33 @@ var defaultGetSelector = (theme => (colorScheme, css) => {
       });
       if (rule === 'media') {
         return {
-          ':root': css,
+          [root]: css,
           [`@media (prefers-color-scheme: dark)`]: {
-            ':root': excludedVariables
+            [root]: excludedVariables
           }
         };
       }
       if (rule) {
         return {
           [rule.replace('%s', colorScheme)]: excludedVariables,
-          [`:root, ${rule.replace('%s', colorScheme)}`]: css
+          [`${root}, ${rule.replace('%s', colorScheme)}`]: css
         };
       }
       return {
-        ':root': {
+        [root]: {
           ...css,
           ...excludedVariables
         }
       };
     }
     if (rule && rule !== 'media') {
-      return `:root, ${rule.replace('%s', String(colorScheme))}`;
+      return `${root}, ${rule.replace('%s', String(colorScheme))}`;
     }
   } else if (colorScheme) {
     if (rule === 'media') {
       return {
         [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
-          ':root': css
+          [root]: css
         }
       };
     }
@@ -6788,62 +6869,8 @@ var defaultGetSelector = (theme => (colorScheme, css) => {
       return rule.replace('%s', String(colorScheme));
     }
   }
-  return ':root';
-});
-
-/* eslint-disable import/prefer-default-export */
-function isSerializable(val) {
-  return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
-}
-
-/**
- * `baseTheme` usually comes from `createTheme` or `extendTheme`.
- *
- * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
- * For example, in a Next.js project:
- *
- * ```js
- * // next.config.js
- * const { extendTheme } = require('@mui/material/styles');
- *
- * const theme = extendTheme();
- * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
- * theme.toRuntimeSource = stringifyTheme;
- *
- * module.exports = withPigment({
- *  theme,
- * });
- * ```
- */
-function stringifyTheme(baseTheme = {}) {
-  const serializableTheme = {
-    ...baseTheme
-  };
-  function serializeTheme(object) {
-    const array = Object.entries(object);
-    // eslint-disable-next-line no-plusplus
-    for (let index = 0; index < array.length; index++) {
-      const [key, value] = array[index];
-      if (!isSerializable(value) || key.startsWith('unstable_')) {
-        delete object[key];
-      } else if (isPlainObject(value)) {
-        object[key] = {
-          ...value
-        };
-        serializeTheme(object[key]);
-      }
-    }
-  }
-  serializeTheme(serializableTheme);
-  return `import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
-
-const theme = ${JSON.stringify(serializableTheme, null, 2)};
-
-theme.breakpoints = createBreakpoints(theme.breakpoints || {});
-theme.transitions = createTransitions(theme.transitions || {});
-
-export default theme;`;
-}
+  return root;
+};
 
 function assignNode(obj, keys) {
   keys.forEach(k => {
@@ -6944,6 +6971,7 @@ function createThemeWithVars(options = {}, ...args) {
     cssVarPrefix = 'mui',
     shouldSkipGeneratingVar: shouldSkipGeneratingVar$1 = shouldSkipGeneratingVar,
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
+    rootSelector = ':root',
     ...input
   } = options;
   const firstColorScheme = Object.keys(colorSchemesInput)[0];
@@ -6981,6 +7009,7 @@ function createThemeWithVars(options = {}, ...args) {
     ...muiTheme,
     cssVarPrefix,
     colorSchemeSelector: selector,
+    rootSelector,
     getCssVar,
     colorSchemes,
     font: {
@@ -7319,24 +7348,13 @@ const defaultTheme$1 = createTheme();
 function useTheme() {
   const theme = useTheme$1(defaultTheme$1);
   if (process.env.NODE_ENV !== 'production') {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useDebugValue(theme);
   }
   return theme[THEME_ID] || theme;
 }
 
-function useThemeProps({
-  props,
-  name
-}) {
-  return useThemeProps$1({
-    props,
-    name,
-    defaultTheme: defaultTheme$1,
-    themeId: THEME_ID
-  });
-}
-
 // copied from @mui/system/createStyled
 function slotShouldForwardProp(prop) {
   return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
@@ -8395,9 +8413,6 @@ var components = {
     }
   },
   MuiIconButton: {
-    defaultProps: {
-      color: "primary"
-    },
     styleOverrides: {
       sizeSmall: {
         padding: 3
@@ -8982,94 +8997,6 @@ var paletteADC = _objectSpread2({
   }
 }, BasicPalette);
 
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
-
-const _excluded = ["values", "unit", "step"];
-const sortBreakpointsValues = values => {
-  const breakpointsAsArray = Object.keys(values).map(key => ({
-    key,
-    val: values[key]
-  })) || [];
-  // Sort in ascending order
-  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
-  return breakpointsAsArray.reduce((acc, obj) => {
-    return _extends({}, acc, {
-      [obj.key]: obj.val
-    });
-  }, {});
-};
-
-// Keep in mind that @media is inclusive by the CSS specification.
-function createBreakpoints(breakpoints) {
-  const {
-      // The breakpoint **start** at this value.
-      // For instance with the first breakpoint xs: [xs, sm).
-      values = {
-        xs: 0,
-        // phone
-        sm: 600,
-        // tablet
-        md: 900,
-        // small laptop
-        lg: 1200,
-        // desktop
-        xl: 1536 // large screen
-      },
-      unit = 'px',
-      step = 5
-    } = breakpoints,
-    other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
-  const sortedValues = sortBreakpointsValues(values);
-  const keys = Object.keys(sortedValues);
-  function up(key) {
-    const value = typeof values[key] === 'number' ? values[key] : key;
-    return `@media (min-width:${value}${unit})`;
-  }
-  function down(key) {
-    const value = typeof values[key] === 'number' ? values[key] : key;
-    return `@media (max-width:${value - step / 100}${unit})`;
-  }
-  function between(start, end) {
-    const endIndex = keys.indexOf(end);
-    return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
-  }
-  function only(key) {
-    if (keys.indexOf(key) + 1 < keys.length) {
-      return between(key, keys[keys.indexOf(key) + 1]);
-    }
-    return up(key);
-  }
-  function not(key) {
-    // handle first and last key separately, for better readability
-    const keyIndex = keys.indexOf(key);
-    if (keyIndex === 0) {
-      return up(keys[1]);
-    }
-    if (keyIndex === keys.length - 1) {
-      return down(keys[keyIndex]);
-    }
-    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
-  }
-  return _extends({
-    keys,
-    values: sortedValues,
-    up,
-    down,
-    between,
-    only,
-    not,
-    unit
-  }, other);
-}
-
 var breakpoints = createBreakpoints({
   values: {
     xs: 0,
@@ -9093,30 +9020,7 @@ function internal_createExtendSxProp() {
   return extendSxProp$1;
 }
 
-// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
-// allocate more objects.
-const arg = {
-  theme: undefined
-};
-
-/**
- * Memoize style function on theme.
- * Intended to be used in styled() calls that only need access to the theme.
- */
-function memoTheme(styleFn) {
-  let lastValue;
-  let lastTheme;
-  return props => {
-    let value = lastValue;
-    if (value === undefined || props.theme !== lastTheme) {
-      arg.theme = props.theme;
-      value = styleFn(arg);
-      lastValue = value;
-      lastTheme = props.theme;
-    }
-    return value;
-  };
-}
+const memoTheme = unstable_memoTheme;
 
 process.env.NODE_ENV !== "production" ? {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -9136,6 +9040,48 @@ function useDefaultProps(params) {
   return useDefaultProps$1(params);
 }
 
+/**
+ * Type guard to check if the object has a "main" property of type string.
+ *
+ * @param obj - the object to check
+ * @returns boolean
+ */
+function hasCorrectMainProperty(obj) {
+  return typeof obj.main === 'string';
+}
+/**
+ * Checks if the object conforms to the SimplePaletteColorOptions type.
+ * The minimum requirement is that the object has a "main" property of type string, this is always checked.
+ * Optionally, you can pass additional properties to check.
+ *
+ * @param obj - The object to check
+ * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText"
+ * @returns boolean
+ */
+function checkSimplePaletteColorValues(obj, additionalPropertiesToCheck = []) {
+  if (!hasCorrectMainProperty(obj)) {
+    return false;
+  }
+  for (const value of additionalPropertiesToCheck) {
+    if (!obj.hasOwnProperty(value) || typeof obj[value] !== 'string') {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Creates a filter function used to filter simple palette color options.
+ * The minimum requirement is that the object has a "main" property of type string, this is always checked.
+ * Optionally, you can pass additional properties to check.
+ *
+ * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText"
+ * @returns ([, value]: [any, PaletteColorOptions]) => boolean
+ */
+function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
+  return ([, value]) => value && checkSimplePaletteColorValues(value, additionalPropertiesToCheck);
+}
+
 function getTypographyUtilityClass(slot) {
   return generateUtilityClass('MuiTypography', slot);
 }
@@ -9195,7 +9141,7 @@ const TypographyRoot = styled('span', {
       variant
     },
     style: value
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -9490,6 +9436,16 @@ function createControlledPromise() {
   return p;
 }
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
 function _setPrototypeOf(t, e) {
   return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
     return t.__proto__ = e, t;
@@ -11831,14 +11787,14 @@ function createSvgIcon(path, displayName) {
     Component.displayName = `${displayName}Icon`;
   }
   Component.muiName = SvgIcon.muiName;
-  return /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Component));
+  return /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(Component));
 }
 
-var RadioButtonUncheckedIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+var RadioButtonUncheckedIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
   d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
 }), 'RadioButtonUnchecked');
 
-var RadioButtonCheckedIcon = createSvgIcon( /*#__PURE__*/jsx("path", {
+var RadioButtonCheckedIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
   d: "M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
 }), 'RadioButtonChecked');
 
@@ -11970,6 +11926,7 @@ const RadioRoot = styled(SwitchBase, {
   variants: [{
     props: {
       color: 'default',
+      disabled: false,
       disableRipple: false
     },
     style: {
@@ -11977,9 +11934,10 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color,
+      disabled: false,
       disableRipple: false
     },
     style: {
@@ -11987,9 +11945,10 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
-      color
+      color,
+      disabled: false
     },
     style: {
       [`&.${radioClasses.checked}`]: {
@@ -12037,11 +11996,21 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     onChange: onChangeProp,
     size = 'medium',
     className,
+    disabled: disabledProp,
     disableRipple = false,
     ...other
   } = props;
+  const muiFormControl = useFormControl();
+  let disabled = disabledProp;
+  if (muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = muiFormControl.disabled;
+    }
+  }
+  disabled ??= false;
   const ownerState = {
     ...props,
+    disabled,
     disableRipple,
     color,
     size
@@ -12067,6 +12036,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
       fontSize: defaultCheckedIcon.props.fontSize ?? size
     }),
+    disabled: disabled,
     ownerState: ownerState,
     classes: classes,
     name: name,
@@ -12603,12 +12573,11 @@ const IconButtonRoot = styled(ButtonBase, {
     duration: theme.transitions.duration.shortest
   }),
   variants: [{
-    props: {
-      disableRipple: false
-    },
+    props: props => !props.disableRipple,
     style: {
+      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        backgroundColor: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           backgroundColor: 'transparent'
@@ -12656,7 +12625,7 @@ const IconButtonRoot = styled(ButtonBase, {
     style: {
       color: 'inherit'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
       color
@@ -12664,20 +12633,13 @@ const IconButtonRoot = styled(ButtonBase, {
     style: {
       color: (theme.vars || theme).palette[color].main
     }
-  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
   .map(([color]) => ({
     props: {
-      color,
-      disableRipple: false
+      color
     },
     style: {
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
+      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
     }
   })), {
     props: {
@@ -12718,7 +12680,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color = 'default',
     disabled = false,
     disableFocusRipple = false,
-    disableRipple = false,
     size = 'medium',
     ...other
   } = props;
@@ -12728,7 +12689,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     color,
     disabled,
     disableFocusRipple,
-    disableRipple,
     size
   };
   const classes = useUtilityClasses$8(ownerState);
@@ -12737,7 +12697,6 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
-    disableRipple: disableRipple,
     ref: ref,
     ...other,
     ownerState: ownerState,
@@ -12920,7 +12879,7 @@ const AppBarRoot = styled(Paper, {
         '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
       })
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['contrastText'])).map(([color]) => ({
     props: {
       color
     },
@@ -13053,7 +13012,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  const handleRef = useForkRef(getReactNodeRef(children), forwardedRef);
+  const handleRef = useForkRef(/*#__PURE__*/React.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
   useEnhancedEffect(() => {
     if (!disablePortal) {
       setMountNode(getContainer$1(container) || document.body);
@@ -13069,7 +13028,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     return undefined;
   }, [forwardedRef, mountNode, disablePortal]);
   if (disablePortal) {
-    if ( /*#__PURE__*/React.isValidElement(children)) {
+    if (/*#__PURE__*/React.isValidElement(children)) {
       const newProps = {
         ref: handleRef
       };
@@ -13152,7 +13111,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;
@@ -13314,6 +13273,13 @@ function getBackdropUtilityClass(slot) {
 }
 generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
 
+const removeOwnerState = props => {
+  const {
+    ownerState,
+    ...rest
+  } = props;
+  return rest;
+};
 const useUtilityClasses$6 = ownerState => {
   const {
     classes,
@@ -13402,12 +13368,12 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  delete transitionProps.ownerState;
+  const transitionPropsRemoved = removeOwnerState(transitionProps);
   return /*#__PURE__*/jsx(TransitionSlot, {
     in: open,
     timeout: transitionDuration,
     ...other,
-    ...transitionProps,
+    ...transitionPropsRemoved,
     children: /*#__PURE__*/jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
@@ -13494,6 +13460,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: PropTypes.elementType,
   /**
@@ -13687,7 +13654,7 @@ const ButtonRoot = styled(ButtonBase, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
       props: {
         color
       },
@@ -13711,9 +13678,8 @@ const ButtonRoot = styled(ButtonBase, {
         color: 'inherit'
       },
       style: {
-        '--variant-containedColor': theme.vars ?
-        // this is safe because grey does not change between default light/dark mode
-        theme.vars.palette.text.primary : theme.palette.getContrastText?.(inheritContainedBackgroundColor),
+        color: 'inherit',
+        borderColor: 'currentColor',
         '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
         '@media (hover: hover)': {
           '&:hover': {
@@ -14017,8 +13983,8 @@ function isOverflowing(container) {
   }
   return container.scrollHeight > container.clientHeight;
 }
-function ariaHidden(element, show) {
-  if (show) {
+function ariaHidden(element, hide) {
+  if (hide) {
     element.setAttribute('aria-hidden', 'true');
   } else {
     element.removeAttribute('aria-hidden');
@@ -14032,17 +13998,17 @@ function isAriaHiddenForbiddenOnElement(element) {
   // can be children of body and can't have aria-hidden attribute.
   // cf. https://www.w3.org/TR/html-aria/#docconformance
   const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
-  const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
+  const isForbiddenTagName = forbiddenTagNames.includes(element.tagName);
   const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
   return isForbiddenTagName || isInputHidden;
 }
-function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
+function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, hide) {
   const blacklist = [mountElement, currentElement, ...elementsToExclude];
   [].forEach.call(container.children, element => {
-    const isNotExcludedElement = blacklist.indexOf(element) === -1;
+    const isNotExcludedElement = !blacklist.includes(element);
     const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
     if (isNotExcludedElement && isNotForbiddenElement) {
-      ariaHidden(element, show);
+      ariaHidden(element, hide);
     }
   });
 }
@@ -14063,7 +14029,7 @@ function handleContainer(containerInfo, props) {
   if (!props.disableScrollLock) {
     if (isOverflowing(container)) {
       // Compute the size before applying overflow hidden to avoid any scroll jumps.
-      const scrollbarSize = getScrollbarSize(ownerDocument(container));
+      const scrollbarSize = getScrollbarSize(ownerWindow(container));
       restoreStyle.push({
         value: container.style.paddingRight,
         property: 'padding-right',
@@ -14175,7 +14141,7 @@ class ModalManager {
     return modalIndex;
   }
   mount(modal, props) {
-    const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
+    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     if (!containerInfo.restore) {
       containerInfo.restore = handleContainer(containerInfo, props);
@@ -14186,7 +14152,7 @@ class ModalManager {
     if (modalIndex === -1) {
       return modalIndex;
     }
-    const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
+    const containerIndex = findIndexOf(this.containers, item => item.modals.includes(modal));
     const containerInfo = this.containers[containerIndex];
     containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
     this.modals.splice(modalIndex, 1);
@@ -14229,7 +14195,7 @@ function getTabIndex(node) {
   }
 
   // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=661108&q=contenteditable%20tabindex&can=2
+  // https://issues.chromium.org/issues/41283952
   // so if they don't have a tabindex attribute specifically set, assume it's 0.
   // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
   //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
@@ -14307,7 +14273,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  const handleRef = useForkRef(getReactNodeRef(children), rootRef);
+  const handleRef = useForkRef(getReactElementRef(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.
@@ -14551,7 +14517,7 @@ function getHasTransition(children) {
 
 // A modal manager used to track and manage the state of open Modals.
 // Modals don't open on the server so this won't conflict with concurrent requests.
-const defaultManager = new ModalManager();
+const manager = new ModalManager();
 /**
  *
  * Demos:
@@ -14567,8 +14533,6 @@ function useModal(parameters) {
     container,
     disableEscapeKeyDown = false,
     disableScrollLock = false,
-    // @ts-ignore internal logic - Base UI supports the manager as a prop too
-    manager = defaultManager,
     closeAfterTransition = false,
     onTransitionEnter,
     onTransitionExited,
@@ -14614,7 +14578,7 @@ function useModal(parameters) {
       handleMounted();
     }
   });
-  const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
+  const isTopModal = () => manager.isTopModal(getModal());
   const handlePortalRef = useEventCallback(node => {
     mountNodeRef.current = node;
     if (!node) {
@@ -14628,7 +14592,7 @@ function useModal(parameters) {
   });
   const handleClose = React.useCallback(() => {
     manager.remove(getModal(), ariaHiddenProp);
-  }, [ariaHiddenProp, manager]);
+  }, [ariaHiddenProp]);
   React.useEffect(() => {
     return () => {
       handleClose();
@@ -14683,6 +14647,12 @@ function useModal(parameters) {
       ...otherHandlers
     };
     return {
+      /*
+       * Marking an element with the role presentation indicates to assistive technology
+       * that this element should be ignored; it exists to support the web application and
+       * is not meant for humans to interact with directly.
+       * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
+       */
       role: 'presentation',
       ...externalEventHandlers,
       onKeyDown: createHandleKeyDown(externalEventHandlers),
@@ -14877,6 +14847,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onExited = onExited;
   }
   const externalForwardedProps = {
+    ...other,
     slots: {
       root: components.Root,
       backdrop: components.Backdrop,
@@ -14905,12 +14876,12 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     getSlotProps: otherHandlers => {
       return getBackdropProps({
         ...otherHandlers,
-        onClick: e => {
+        onClick: event => {
           if (onBackdropClick) {
-            onBackdropClick(e);
+            onBackdropClick(event);
           }
           if (otherHandlers?.onClick) {
-            otherHandlers.onClick(e);
+            otherHandlers.onClick(event);
           }
         }
       });
@@ -14928,7 +14899,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disablePortal: disablePortal,
     children: /*#__PURE__*/jsxs(RootSlot, {
       ...rootProps,
-      ...other,
       children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/jsx(BackdropSlot, {
         ...backdropProps,
         ref: backdropRef
@@ -15229,7 +15199,6 @@ const DividerRoot = styled('div', {
     }) => !!ownerState.children,
     style: {
       display: 'flex',
-      whiteSpace: 'nowrap',
       textAlign: 'center',
       border: 0,
       borderTopStyle: 'solid',
@@ -15303,6 +15272,7 @@ const DividerWrapper = styled('span', {
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
   paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
+  whiteSpace: 'nowrap',
   variants: [{
     props: {
       orientation: 'vertical'
@@ -15520,7 +15490,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(getReactNodeRef(children), childrenRef, ref);
+  const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
@@ -16204,7 +16174,7 @@ const LinearProgressRoot = styled('span', {
   '@media print': {
     colorAdjust: 'exact'
   },
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -16269,7 +16239,7 @@ const LinearProgressDashed = styled('span', {
       opacity: 0.3,
       backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => {
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => {
     const backgroundColor = getColorShade(theme, color);
     return {
       props: {
@@ -16310,7 +16280,7 @@ const LinearProgressBar1 = styled('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -16367,7 +16337,7 @@ const LinearProgressBar2 = styled('span', {
   top: 0,
   transition: 'transform 0.2s linear',
   transformOrigin: 'left',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color
     },
@@ -16381,6 +16351,13 @@ const LinearProgressBar2 = styled('span', {
     style: {
       backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
     }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'buffer' && ownerState.color === 'inherit',
+    style: {
+      backgroundColor: 'currentColor'
+    }
   }, {
     props: {
       color: 'inherit'
@@ -16388,7 +16365,7 @@ const LinearProgressBar2 = styled('span', {
     style: {
       opacity: 0.3
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
     props: {
       color,
       variant: 'buffer'
@@ -16540,7 +16517,7 @@ const Stack = createStack({
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
-  useThemeProps: inProps => useThemeProps({
+  useThemeProps: inProps => useDefaultProps({
     props: inProps,
     name: 'MuiStack'
   })
@@ -16838,7 +16815,7 @@ var DrawerComponent = function DrawerComponent(_ref) {
     py: 1.5,
     px: 1,
     sx: _objectSpread2({
-      backgroundColor: "secondary.main" 
+      backgroundColor: "secondary.main"
     }, sxHeader)
   }, React__default.createElement(Typography, {
     color: color || "background.paper",
@@ -24435,7 +24412,7 @@ function customColor(source, color) {
 }
 
 var DynamicColor = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(src) {
     var imageElement, dynamicPalette, extractHctInstance, _dynamicPalette$palet, primary, secondary, _dynamicPalette$schem, dark, light, primaryMain, secondaryMain, primaryLight, primaryDark, secondaryLight, secondaryDark, primaryColor, secondaryColor, backgroundColor;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {