New source found from dndbeyond.com

ddb_main/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js

@@ -8,6 +8,9 @@ import exactProp from '@mui/utils/exactProp';
 import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
 import useThemeWithoutDefault from '../useThemeWithoutDefault';
 import RtlProvider from '../RtlProvider';
+import DefaultPropsProvider from '../DefaultPropsProvider';
+import useLayerOrder from './useLayerOrder';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EMPTY_THEME = {};
 function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
@@ -54,13 +57,17 @@ function ThemeProvider(props) {
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
   const rtlValue = engineTheme.direction === 'rtl';
+  const layerOrder = useLayerOrder(engineTheme);
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
       value: engineTheme,
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
-        children: children
+        children: /*#__PURE__*/_jsxs(DefaultPropsProvider, {
+          value: engineTheme == null ? void 0 : engineTheme.components,
+          children: [layerOrder, children]
+        })
       })
     })
   });

ddb_main/node_modules/@mui/system/esm/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useId from '@mui/utils/useId';
+import GlobalStyles from '../GlobalStyles';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
+
+/**
+ * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
+ * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function useLayerOrder(theme) {
+  const upperTheme = useThemeWithoutDefault();
+  const id = useId() || '';
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
+  if (!modularCssLayers || upperTheme !== null) {
+    // skip this hook if upper theme exists.
+    layerOrder = '';
+  } else if (typeof modularCssLayers === 'string') {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  useEnhancedEffect(() => {
+    const head = document.querySelector('head');
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      var _firstChild$hasAttrib;
+      // Only insert if first child doesn't have data-mui-layer-order attribute
+      if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
+        return;
+      }
+      const styleElement = document.createElement('style');
+      styleElement.setAttribute('data-mui-layer-order', id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      var _head$querySelector;
+      (_head$querySelector = head.querySelector(`style[data-mui-layer-order="${id}"]`)) == null || _head$querySelector.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GlobalStyles, {
+    styles: layerOrder
+  });
+}