@vitessce/spatial-accelerated 4.0.10 → 4.1.1

package/dist/index.js

@@ -733,7 +733,7 @@ function rulesheet(callback) {
     }
   };
 }
-function memoize$1(fn) {
+function memoize(fn) {
   var cache = /* @__PURE__ */ Object.create(null);
   return function(arg2) {
     if (cache[arg2] === void 0) cache[arg2] = fn(arg2);
@@ -1021,10 +1021,10 @@ var createCache = function createCache2(options) {
   }
   var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
   var inserted = {};
-  var container;
+  var container2;
   var nodesToHydrate = [];
   {
-    container = options.container || document.head;
+    container2 = options.container || document.head;
     Array.prototype.forEach.call(
       // this means we will ignore elements which don't have a space in them which
       // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
@@ -1061,7 +1061,7 @@ var createCache = function createCache2(options) {
     key,
     sheet: new StyleSheet({
       key,
-      container,
+      container: container2,
       nonce: options.nonce,
       speedy: options.speedy,
       prepend: options.prepend,
@@ -1382,7 +1382,7 @@ var isCustomProperty = function isCustomProperty2(property) {
 var isProcessableValue = function isProcessableValue2(value) {
   return value != null && typeof value !== "boolean";
 };
-var processStyleName = /* @__PURE__ */ memoize$1(function(styleName) {
+var processStyleName = /* @__PURE__ */ memoize(function(styleName) {
   return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
 });
 var processStyleValue = function processStyleValue2(key, value) {
@@ -1646,7 +1646,7 @@ function matchCSSObject(arg2) {
   return arg2 instanceof Object && !("styles" in arg2) && !("length" in arg2) && !("__emotion_styles" in arg2);
 }
 const { createCssAndCx } = /* @__PURE__ */ (() => {
-  function merge2(registered, css, className) {
+  function merge(registered, css, className) {
     const registeredStyles = [];
     const rawClassName = getRegisteredStyles(registered, registeredStyles, className);
     if (registeredStyles.length < 2) {
@@ -1672,7 +1672,7 @@ const { createCssAndCx } = /* @__PURE__ */ (() => {
     const cx = (...args) => {
       const className = classnames(args);
       const feat27FixedClassnames = increaseSpecificityToTakePrecedenceOverMediaQueries.fixClassName(cache, className, css);
-      return merge2(cache.registered, css, feat27FixedClassnames);
+      return merge(cache.registered, css, feat27FixedClassnames);
     };
     return { css, cx };
   }
@@ -2279,7 +2279,7 @@ const { tss: tss$1 } = createTss({
 tss$1.create({});
 const THEME_ID = "$$material";
 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)-.*))$/;
-var isPropValid = /* @__PURE__ */ memoize$1(
+var isPropValid = /* @__PURE__ */ memoize(
   function(prop) {
     return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
   }
@@ -3229,8 +3229,7 @@ function requireReactIs_development() {
         }
       }
     }
-    var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
-    var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
+    var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_VIEW_TRANSITION_TYPE = Symbol.for("react.view_transition"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference");
     reactIs_development.ContextConsumer = REACT_CONSUMER_TYPE;
     reactIs_development.ContextProvider = REACT_CONTEXT_TYPE;
     reactIs_development.Element = REACT_ELEMENT_TYPE;
@@ -3280,7 +3279,7 @@ function requireReactIs_development() {
       return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
     };
     reactIs_development.isValidElementType = function(type) {
-      return "string" === typeof type || "function" === typeof type || type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || "object" === typeof type && null !== type && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_CONSUMER_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_CLIENT_REFERENCE || void 0 !== type.getModuleId) ? true : false;
+      return "string" === typeof type || "function" === typeof type || type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_VIEW_TRANSITION_TYPE || "object" === typeof type && null !== type && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_CONSUMER_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_CLIENT_REFERENCE || void 0 !== type.getModuleId) ? true : false;
     };
     reactIs_development.typeOf = typeOf;
   })();
@@ -3350,19 +3349,12 @@ const sortBreakpointsValues = (values2) => {
 };
 function createBreakpoints(breakpoints) {
   const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
     values: values2 = {
       xs: 0,
-      // phone
       sm: 600,
-      // tablet
       md: 900,
-      // small laptop
       lg: 1200,
-      // desktop
       xl: 1536
-      // large screen
     },
     unit = "px",
     step = 5,
@@ -3398,6 +3390,10 @@ function createBreakpoints(breakpoints) {
     }
     return between(key, keys2[keys2.indexOf(key) + 1]).replace("@media", "@media not all and");
   }
+  const mediaKeys = [];
+  for (let i = 0; i < keys2.length; i += 1) {
+    mediaKeys.push(up(keys2[i]));
+  }
   return {
     keys: keys2,
     values: sortedValues,
@@ -3407,28 +3403,40 @@ function createBreakpoints(breakpoints) {
     only,
     not,
     unit,
+    internal_mediaKeys: mediaKeys,
     ...other
   };
 }
+const MIN_WIDTH_PATTERN = /min-width:\s*([0-9.]+)/;
 function sortContainerQueries(theme, css) {
-  if (!theme.containerQueries) {
+  if (!theme.containerQueries || !hasContainerQuery(css)) {
     return css;
   }
-  const sorted = Object.keys(css).filter((key) => key.startsWith("@container")).sort((a, b) => {
-    const regex = /min-width:\s*([0-9.]+)/;
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css;
+  const keys2 = [];
+  for (const key in css) {
+    if (key.startsWith("@container")) {
+      keys2.push(key);
+    }
   }
-  return sorted.reduce((acc, key) => {
-    const value = css[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css
+  keys2.sort((a, b) => {
+    return +(a.match(MIN_WIDTH_PATTERN)?.[1] || 0) - +(b.match(MIN_WIDTH_PATTERN)?.[1] || 0);
   });
+  const result = css;
+  for (let i = 0; i < keys2.length; i += 1) {
+    const key = keys2[i];
+    const value = result[key];
+    delete result[key];
+    result[key] = value;
+  }
+  return result;
+}
+function hasContainerQuery(css) {
+  for (const key in css) {
+    if (key.startsWith("@container")) {
+      return true;
+    }
+  }
+  return false;
 }
 function isCqShorthand(breakpointKeys, value) {
   return value === "@" || value.startsWith("@") && (breakpointKeys.some((key) => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
@@ -3437,8 +3445,11 @@ function getContainerQuery(theme, shorthand) {
   const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
   if (!matches) {
     {
-      throw new Error(`MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
-For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.`);
+      throw (
+        /* minify-error */
+        new Error(`MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.
+For example, \`@sm\` or \`@600\` or \`@40rem/sidebar\`.`)
+      );
     }
   }
   const [, containerQuery, containerName] = matches;
@@ -3475,15 +3486,82 @@ const shape = {
   borderRadius: 4
 };
 const responsivePropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]);
-function merge(acc, item) {
-  if (!item) {
-    return acc;
+function isObjectEmpty$1(object) {
+  if (object == null) {
+    return true;
   }
-  return deepmerge(acc, item, {
-    clone: false
-    // No need to clone deep, it's way faster.
-  });
+  for (const _ in object) {
+    return false;
+  }
+  return true;
 }
+function fastDeepAssign(target, source) {
+  const sourceIsArray = Array.isArray(source);
+  const targetIsArray = Array.isArray(target);
+  if (isPrimitive(source)) {
+    return source;
+  } else if (isPrimitiveOrBuiltIn(target)) {
+    return clone(source);
+  } else if (sourceIsArray && targetIsArray) {
+    return mergeArray(target, source);
+  } else if (sourceIsArray !== targetIsArray) {
+    return clone(source);
+  } else {
+    return mergeObject(target, source);
+  }
+}
+function cloneArray(value) {
+  let i = 0;
+  const il = value.length;
+  const result = new Array(il);
+  for (i = 0; i < il; i += 1) {
+    result[i] = clone(value[i]);
+  }
+  return result;
+}
+function cloneObject(target) {
+  const result = {};
+  for (const key in target) {
+    if (key === "__proto__" || key === "constructor" || key === "prototype") {
+      continue;
+    }
+    result[key] = clone(target[key]);
+  }
+  return result;
+}
+function mergeArray(target, source) {
+  const tl = target.length;
+  for (let i = 0; i < source.length; i += 1) {
+    target[tl + i] = clone(source[i]);
+  }
+  return target;
+}
+function isMergeableObject(value) {
+  return typeof value === "object" && value !== null && !(value instanceof RegExp) && !(value instanceof Date);
+}
+function isPrimitive(value) {
+  return typeof value !== "object" || value === null;
+}
+function isPrimitiveOrBuiltIn(value) {
+  return typeof value !== "object" || value === null || value instanceof RegExp || value instanceof Date;
+}
+function clone(entry) {
+  return isMergeableObject(entry) ? Array.isArray(entry) ? cloneArray(entry) : cloneObject(entry) : entry;
+}
+function mergeObject(target, source) {
+  for (const key in source) {
+    if (key === "__proto__" || key === "constructor" || key === "prototype") {
+      continue;
+    }
+    if (key in target) {
+      target[key] = fastDeepAssign(target[key], source[key]);
+    } else {
+      target[key] = clone(source[key]);
+    }
+  }
+  return target;
+}
+const EMPTY_THEME$2 = {};
 const values = {
   xs: 0,
   // phone
@@ -3496,12 +3574,9 @@ const values = {
   xl: 1536
   // large screen
 };
-const defaultBreakpoints = {
-  // Sorted ASC by size. That's important.
-  // It can't be configured as it's used statically for propTypes.
-  keys: ["xs", "sm", "md", "lg", "xl"],
-  up: (key) => `@media (min-width:${values[key]}px)`
-};
+const DEFAULT_BREAKPOINTS = createBreakpoints({
+  values
+});
 const defaultContainerQueries = {
   containerQueries: (containerName) => ({
     up: (key) => {
@@ -3514,52 +3589,89 @@ const defaultContainerQueries = {
   })
 };
 function handleBreakpoints(props, propValue, styleFromPropValue) {
-  const theme = props.theme || {};
+  const result = {};
+  return iterateBreakpoints(result, props.theme, propValue, (mediaKey, value, initialKey) => {
+    const finalValue = styleFromPropValue(value, initialKey);
+    if (mediaKey) {
+      result[mediaKey] = finalValue;
+    } else {
+      fastDeepAssign(result, finalValue);
+    }
+  });
+}
+function iterateBreakpoints(target, theme, propValue, callback) {
+  theme ??= EMPTY_THEME$2;
   if (Array.isArray(propValue)) {
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-    return propValue.reduce((acc, item, index) => {
-      acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);
-      return acc;
-    }, {});
+    const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+    for (let i = 0; i < propValue.length; i += 1) {
+      buildBreakpoint(target, breakpoints.up(breakpoints.keys[i]), propValue[i], void 0, callback);
+    }
+    return target;
   }
   if (typeof propValue === "object") {
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-    return Object.keys(propValue).reduce((acc, breakpoint) => {
-      if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
-        const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
+    const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+    const breakpointValues = breakpoints.values ?? values;
+    for (const key in propValue) {
+      if (isCqShorthand(breakpoints.keys, key)) {
+        const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, key);
         if (containerKey) {
-          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+          buildBreakpoint(target, containerKey, propValue[key], key, callback);
         }
-      } else if (Object.keys(themeBreakpoints.values || values).includes(breakpoint)) {
-        const mediaKey = themeBreakpoints.up(breakpoint);
-        acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+      } else if (key in breakpointValues) {
+        const mediaKey = breakpoints.up(key);
+        buildBreakpoint(target, mediaKey, propValue[key], key, callback);
       } else {
-        const cssKey = breakpoint;
-        acc[cssKey] = propValue[cssKey];
+        const cssKey = key;
+        target[cssKey] = propValue[cssKey];
       }
-      return acc;
-    }, {});
+    }
+    return target;
   }
-  const output = styleFromPropValue(propValue);
-  return output;
+  callback(void 0, propValue);
+  return target;
 }
-function createEmptyBreakpointObject(breakpointsInput = {}) {
-  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
-    const breakpointStyleKey = breakpointsInput.up(key);
-    acc[breakpointStyleKey] = {};
-    return acc;
-  }, {});
-  return breakpointsInOrder || {};
+function buildBreakpoint(target, mediaKey, value, initialKey, callback) {
+  target[mediaKey] ??= {};
+  callback(mediaKey, value, initialKey);
+}
+function createEmptyBreakpointObject(breakpoints = DEFAULT_BREAKPOINTS) {
+  const {
+    internal_mediaKeys: mediaKeys
+  } = breakpoints;
+  const result = {};
+  for (let i = 0; i < mediaKeys.length; i += 1) {
+    result[mediaKeys[i]] = {};
+  }
+  return result;
 }
-function removeUnusedBreakpoints(breakpointKeys, style2) {
-  return breakpointKeys.reduce((acc, key) => {
-    const breakpointOutput = acc[key];
-    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-    if (isBreakpointUnused) {
-      delete acc[key];
+function removeUnusedBreakpoints(breakpoints, style2) {
+  const breakpointKeys = breakpoints.internal_mediaKeys;
+  for (let i = 0; i < breakpointKeys.length; i += 1) {
+    const key = breakpointKeys[i];
+    if (isObjectEmpty$1(style2[key])) {
+      delete style2[key];
     }
-    return acc;
-  }, style2);
+  }
+  return style2;
+}
+function hasBreakpoint(breakpoints, value) {
+  if (Array.isArray(value)) {
+    return true;
+  }
+  if (typeof value === "object" && value !== null) {
+    for (let i = 0; i < breakpoints.keys.length; i += 1) {
+      if (breakpoints.keys[i] in value) {
+        return true;
+      }
+    }
+    const valueKeys = Object.keys(value);
+    for (let i = 0; i < valueKeys.length; i += 1) {
+      if (isCqShorthand(breakpoints.keys, valueKeys[i])) {
+        return true;
+      }
+    }
+  }
+  return false;
 }
 function capitalize(string) {
   if (typeof string !== "string") {
@@ -3567,37 +3679,54 @@ function capitalize(string) {
   }
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
-function getPath(obj, path, checkVars = true) {
-  if (!path || typeof path !== "string") {
-    return null;
-  }
-  if (obj && obj.vars && checkVars) {
-    const val = `vars.${path}`.split(".").reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
-    if (val != null) {
-      return val;
-    }
-  }
-  return path.split(".").reduce((acc, item) => {
-    if (acc && acc[item] != null) {
-      return acc[item];
-    }
-    return null;
-  }, obj);
-}
-function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+function getStyleValue2(themeMapping, transform, userValue, alternateProp) {
   let value;
   if (typeof themeMapping === "function") {
-    value = themeMapping(propValueFinal);
+    value = themeMapping(userValue);
   } else if (Array.isArray(themeMapping)) {
-    value = themeMapping[propValueFinal] || userValue;
+    value = themeMapping[userValue] || userValue;
+  } else if (typeof userValue === "string") {
+    value = getPath(themeMapping, userValue, true, alternateProp) || userValue;
   } else {
-    value = getPath(themeMapping, propValueFinal) || userValue;
+    value = userValue;
   }
   if (transform) {
     value = transform(value, userValue, themeMapping);
   }
   return value;
 }
+function getPath(obj, pathInput, checkVars = true, alternateProp = void 0) {
+  if (!obj || !pathInput) {
+    return null;
+  }
+  const path = pathInput.split(".");
+  if (obj.vars && checkVars) {
+    const val = getPathImpl(obj.vars, path, alternateProp);
+    if (val != null) {
+      return val;
+    }
+  }
+  return getPathImpl(obj, path, alternateProp);
+}
+function getPathImpl(object, path, alternateProp = void 0) {
+  let lastResult = void 0;
+  let result = object;
+  let index = 0;
+  while (index < path.length) {
+    if (result === null || result === void 0) {
+      return result;
+    }
+    lastResult = result;
+    result = result[path[index]];
+    index += 1;
+  }
+  if (alternateProp && result === void 0) {
+    const lastKey = path[path.length - 1];
+    const alternateKey = `${alternateProp}${lastKey === "default" ? "" : capitalize(lastKey)}`;
+    return lastResult?.[alternateKey];
+  }
+  return result;
+}
 function style$1(options) {
   const {
     prop,
@@ -3612,15 +3741,9 @@ function style$1(options) {
     const propValue = props[prop];
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
-    const styleFromPropValue = (propValueFinal) => {
-      let value = getStyleValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
+    const styleFromPropValue = (valueFinal) => {
+      const value = getStyleValue2(themeMapping, transform, valueFinal, prop);
+      return cssProperty === false ? value : {
         [cssProperty]: value
       };
     };
@@ -3632,15 +3755,9 @@ function style$1(options) {
   fn.filterProps = [prop];
   return fn;
 }
-function memoize(fn) {
-  const cache = {};
-  return (arg2) => {
-    if (cache[arg2] === void 0) {
-      cache[arg2] = fn(arg2);
-    }
-    return cache[arg2];
-  };
-}
+const EMPTY_THEME$1 = {
+  internal_cache: {}
+};
 const properties = {
   m: "margin",
   p: "padding"
@@ -3659,22 +3776,24 @@ const aliases = {
   paddingX: "px",
   paddingY: "py"
 };
-const getCssProperties = memoize((prop) => {
-  if (prop.length > 2) {
-    if (aliases[prop]) {
-      prop = aliases[prop];
-    } else {
-      return [prop];
-    }
+const CSS_PROPERTIES = {};
+for (const key in properties) {
+  CSS_PROPERTIES[key] = [properties[key]];
+}
+for (const keyProperty in properties) {
+  for (const keyDirection in directions) {
+    const property = properties[keyProperty];
+    const direction = directions[keyDirection];
+    const value = Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction];
+    CSS_PROPERTIES[keyProperty + keyDirection] = value;
   }
-  const [a, b] = prop.split("");
-  const property = properties[a];
-  const direction = directions[b] || "";
-  return Array.isArray(direction) ? direction.map((dir) => property + dir) : [property + direction];
-});
-const marginKeys = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"];
-const paddingKeys = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"];
-const spacingKeys = [...marginKeys, ...paddingKeys];
+}
+for (const key in aliases) {
+  CSS_PROPERTIES[key] = CSS_PROPERTIES[aliases[key]];
+}
+const marginKeys = /* @__PURE__ */ new Set(["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"]);
+const paddingKeys = /* @__PURE__ */ new Set(["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"]);
+const spacingKeys = /* @__PURE__ */ new Set([...marginKeys, ...paddingKeys]);
 function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === "number" || typeof themeSpacing === "string") {
@@ -3742,42 +3861,45 @@ function getValue$1(transformer, propValue) {
   }
   return transformer(propValue);
 }
-function getStyleFromPropValue(cssProperties, transformer) {
-  return (propValue) => cssProperties.reduce((acc, cssProperty) => {
-    acc[cssProperty] = getValue$1(transformer, propValue);
-    return acc;
-  }, {});
-}
-function resolveCssProperty(props, keys2, prop, transformer) {
-  if (!keys2.includes(prop)) {
-    return null;
-  }
-  const cssProperties = getCssProperties(prop);
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
-  const propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
+const container = [""];
 function style(props, keys2) {
-  const transformer = createUnarySpacing(props.theme);
-  return Object.keys(props).map((prop) => resolveCssProperty(props, keys2, prop, transformer)).reduce(merge, {});
+  const theme = props.theme ?? EMPTY_THEME$1;
+  const transformer = theme?.internal_cache?.unarySpacing ?? createUnarySpacing(theme);
+  const result = {};
+  for (const prop in props) {
+    if (!keys2.has(prop)) {
+      continue;
+    }
+    const cssProperties = CSS_PROPERTIES[prop] ?? (container[0] = prop, container);
+    const propValue = props[prop];
+    iterateBreakpoints(result, props.theme, propValue, (mediaKey, value) => {
+      const target = mediaKey ? result[mediaKey] : result;
+      for (let i = 0; i < cssProperties.length; i += 1) {
+        target[cssProperties[i]] = getValue$1(transformer, value);
+      }
+    });
+  }
+  return result;
 }
-function margin(props) {
+function marginFn(props) {
   return style(props, marginKeys);
 }
-margin.propTypes = marginKeys.reduce((obj, key) => {
+marginFn.propTypes = Array.from(marginKeys).reduce((obj, key) => {
   obj[key] = responsivePropType;
   return obj;
 }, {});
-margin.filterProps = marginKeys;
-function padding(props) {
+marginFn.filterProps = marginKeys;
+const margin = marginFn;
+function paddingFn(props) {
   return style(props, paddingKeys);
 }
-padding.propTypes = paddingKeys.reduce((obj, key) => {
+paddingFn.propTypes = Array.from(paddingKeys).reduce((obj, key) => {
   obj[key] = responsivePropType;
   return obj;
 }, {});
-padding.filterProps = paddingKeys;
-spacingKeys.reduce((obj, key) => {
+paddingFn.filterProps = paddingKeys;
+const padding = paddingFn;
+Array.from(spacingKeys).reduce((obj, key) => {
   obj[key] = responsivePropType;
   return obj;
 }, {});
@@ -3810,12 +3932,13 @@ function compose(...styles) {
     return acc;
   }, {});
   const fn = (props) => {
-    return Object.keys(props).reduce((acc, prop) => {
+    const result = {};
+    for (const prop in props) {
       if (handlers[prop]) {
-        return merge(acc, handlers[prop](props));
+        fastDeepAssign(result, handlers[prop](props));
       }
-      return acc;
-    }, {});
+    }
+    return result;
   };
   fn.propTypes = styles.reduce((acc, style2) => Object.assign(acc, style2.propTypes), {});
   fn.filterProps = styles.reduce((acc, style2) => acc.concat(style2.filterProps), []);
@@ -3954,6 +4077,7 @@ const backgroundColor = style$1({
   transform: paletteTransform
 });
 compose(color, bgcolor, backgroundColor);
+const breakpointsValues = values;
 function sizingTransform(value) {
   return value <= 1 && value !== 0 ? `${value * 100}%` : value;
 }
@@ -3964,7 +4088,7 @@ const width = style$1({
 const maxWidth = (props) => {
   if (props.maxWidth !== void 0 && props.maxWidth !== null) {
     const styleFromPropValue = (propValue) => {
-      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || values[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue];
       if (!breakpoint) {
         return {
           maxWidth: sizingTransform(propValue)
@@ -4302,68 +4426,24 @@ const defaultSxConfig = {
     themeKey: "typography"
   }
 };
-function objectsHaveSameKeys(...objects) {
-  const allKeys = objects.reduce((keys2, object) => keys2.concat(Object.keys(object)), []);
-  const union = new Set(allKeys);
-  return objects.every((object) => union.size === Object.keys(object).length);
-}
-function callIfFn(maybeFn, arg2) {
-  return typeof maybeFn === "function" ? maybeFn(arg2) : maybeFn;
-}
+const EMPTY_THEME = {};
 function unstable_createStyleFunctionSx() {
-  function getThemeValue(prop, val, theme, config) {
-    const props = {
-      [prop]: val,
-      theme
-    };
-    const options = config[prop];
-    if (!options) {
-      return {
-        [prop]: val
-      };
-    }
-    const {
-      cssProperty = prop,
-      themeKey,
-      transform,
-      style: style2
-    } = options;
-    if (val == null) {
+  function styleFunctionSx2(props) {
+    if (!props.sx) {
       return null;
     }
-    if (themeKey === "typography" && val === "inherit") {
-      return {
-        [prop]: val
-      };
-    }
-    const themeMapping = getPath(theme, themeKey) || {};
-    if (style2) {
-      return style2(props);
-    }
-    const styleFromPropValue = (propValueFinal) => {
-      let value = getStyleValue(themeMapping, transform, propValueFinal);
-      if (propValueFinal === value && typeof propValueFinal === "string") {
-        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === "default" ? "" : capitalize(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value;
-      }
-      return {
-        [cssProperty]: value
-      };
-    };
-    return handleBreakpoints(props, val, styleFromPropValue);
-  }
-  function styleFunctionSx2(props) {
     const {
       sx,
-      theme = {}
-    } = props || {};
-    if (!sx) {
-      return null;
-    }
+      theme = EMPTY_THEME,
+      nested
+    } = props;
     const config = theme.unstable_sxConfig ?? defaultSxConfig;
-    function traverse(sxInput) {
+    const wrapper2 = {
+      sx: null,
+      theme,
+      nested: true
+    };
+    function process(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === "function") {
         sxObject = sxInput(theme);
@@ -4373,43 +4453,94 @@ function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-      const breakpointsKeys = Object.keys(emptyBreakpoints);
-      let css = emptyBreakpoints;
-      Object.keys(sxObject).forEach((styleKey) => {
+      const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+      const css = createEmptyBreakpointObject(breakpoints);
+      for (const styleKey in sxObject) {
         const value = callIfFn(sxObject[styleKey], theme);
-        if (value !== null && value !== void 0) {
-          if (typeof value === "object") {
-            if (config[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme, config));
-            } else {
-              const breakpointsValues = handleBreakpoints({
-                theme
-              }, value, (x) => ({
-                [styleKey]: x
-              }));
-              if (objectsHaveSameKeys(breakpointsValues, value)) {
-                css[styleKey] = styleFunctionSx2({
-                  sx: value,
-                  theme
-                });
-              } else {
-                css = merge(css, breakpointsValues);
-              }
-            }
-          } else {
-            css = merge(css, getThemeValue(styleKey, value, theme, config));
-          }
+        if (value === null || value === void 0) {
+          continue;
         }
-      });
-      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
+        if (typeof value !== "object") {
+          setThemeValue(css, styleKey, value, theme, config);
+          continue;
+        }
+        if (config[styleKey]) {
+          setThemeValue(css, styleKey, value, theme, config);
+          continue;
+        }
+        if (hasBreakpoint(breakpoints, value)) {
+          iterateBreakpoints(css, props.theme, value, (mediaKey, finalValue) => {
+            css[mediaKey][styleKey] = finalValue;
+          });
+        } else {
+          wrapper2.sx = value;
+          css[styleKey] = styleFunctionSx2(wrapper2);
+        }
+      }
+      if (!nested && theme.modularCssLayers) {
+        return {
+          "@layer sx": sortContainerQueries(theme, removeUnusedBreakpoints(breakpoints, css))
+        };
+      }
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpoints, css));
     }
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+    return Array.isArray(sx) ? sx.map(process) : process(sx);
   }
+  styleFunctionSx2.filterProps = ["sx"];
   return styleFunctionSx2;
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
-styleFunctionSx.filterProps = ["sx"];
+function setThemeValue(css, prop, value, theme, config) {
+  const options = config[prop];
+  if (!options) {
+    css[prop] = value;
+    return;
+  }
+  if (value == null) {
+    return;
+  }
+  const {
+    themeKey
+  } = options;
+  if (themeKey === "typography" && value === "inherit") {
+    css[prop] = value;
+    return;
+  }
+  const {
+    style: style2
+  } = options;
+  if (style2) {
+    fastDeepAssign(css, style2({
+      [prop]: value,
+      theme
+    }));
+    return;
+  }
+  const {
+    cssProperty = prop,
+    transform
+  } = options;
+  const themeMapping = getPath(theme, themeKey);
+  iterateBreakpoints(css, theme, value, (mediaKey, valueFinal) => {
+    const finalValue = getStyleValue2(themeMapping, transform, valueFinal, prop);
+    if (cssProperty === false) {
+      if (mediaKey) {
+        fastDeepAssign(css[mediaKey], finalValue);
+      } else {
+        fastDeepAssign(css, finalValue);
+      }
+    } else {
+      if (mediaKey) {
+        css[mediaKey][cssProperty] = finalValue;
+      } else {
+        css[cssProperty] = finalValue;
+      }
+    }
+  });
+}
+function callIfFn(maybeFn, arg2) {
+  return typeof maybeFn === "function" ? maybeFn(arg2) : maybeFn;
+}
 function applyStyles(key, styles) {
   const theme = this;
   if (theme.vars) {
@@ -4470,67 +4601,19 @@ function createTheme$1(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.internal_cache = {};
   return muiTheme;
 }
-function isObjectEmpty$1(obj) {
+function isObjectEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
-function useTheme$2(defaultTheme2 = null) {
+function useThemeWithoutDefault(defaultTheme2 = null) {
   const contextTheme = React.useContext(ThemeContext);
-  return !contextTheme || isObjectEmpty$1(contextTheme) ? defaultTheme2 : contextTheme;
+  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme2 : contextTheme;
 }
 const systemDefaultTheme$1 = createTheme$1();
 function useTheme$1(defaultTheme2 = systemDefaultTheme$1) {
-  return useTheme$2(defaultTheme2);
-}
-const splitProps = (props) => {
-  const result = {
-    systemProps: {},
-    otherProps: {}
-  };
-  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
-  Object.keys(props).forEach((prop) => {
-    if (config[prop]) {
-      result.systemProps[prop] = props[prop];
-    } else {
-      result.otherProps[prop] = props[prop];
-    }
-  });
-  return result;
-};
-function extendSxProp$1(props) {
-  const {
-    sx: inSx,
-    ...other
-  } = props;
-  const {
-    systemProps,
-    otherProps
-  } = splitProps(other);
-  let finalSx;
-  if (Array.isArray(inSx)) {
-    finalSx = [systemProps, ...inSx];
-  } else if (typeof inSx === "function") {
-    finalSx = (...args) => {
-      const result = inSx(...args);
-      if (!isPlainObject(result)) {
-        return systemProps;
-      }
-      return {
-        ...systemProps,
-        ...result
-      };
-    };
-  } else {
-    finalSx = {
-      ...systemProps,
-      ...inSx
-    };
-  }
-  return {
-    ...otherProps,
-    sx: finalSx
-  };
+  return useThemeWithoutDefault(defaultTheme2);
 }
 const defaultGenerator = (componentName) => componentName;
 const createClassNameGenerator = () => {
@@ -4641,6 +4724,12 @@ const systemDefaultTheme = createTheme$1();
 function shouldForwardProp(prop) {
   return prop !== "ownerState" && prop !== "theme" && prop !== "sx" && prop !== "as";
 }
+function shallowLayer(serialized, layerName) {
+  if (layerName && serialized && typeof serialized === "object" && serialized.styles && !serialized.styles.startsWith("@layer")) {
+    serialized.styles = `@layer ${layerName}{${String(serialized.styles)}}`;
+  }
+  return serialized;
+}
 function defaultOverridesResolver(slot) {
   if (!slot) {
     return null;
@@ -4648,32 +4737,32 @@ function defaultOverridesResolver(slot) {
   return (_props, styles) => styles[slot];
 }
 function attachTheme(props, themeId, defaultTheme2) {
-  props.theme = isObjectEmpty(props.theme) ? defaultTheme2 : props.theme[themeId] || props.theme;
+  props.theme = isObjectEmpty$1(props.theme) ? defaultTheme2 : props.theme[themeId] || props.theme;
 }
-function processStyle(props, style2) {
+function processStyle(props, style2, layerName) {
   const resolvedStyle = typeof style2 === "function" ? style2(props) : style2;
   if (Array.isArray(resolvedStyle)) {
-    return resolvedStyle.flatMap((subStyle) => processStyle(props, subStyle));
+    return resolvedStyle.flatMap((subStyle) => processStyle(props, subStyle, layerName));
   }
   if (Array.isArray(resolvedStyle?.variants)) {
     let rootStyle;
     if (resolvedStyle.isProcessed) {
-      rootStyle = resolvedStyle.style;
+      rootStyle = layerName ? shallowLayer(resolvedStyle.style, layerName) : resolvedStyle.style;
     } else {
       const {
         variants,
         ...otherStyles
       } = resolvedStyle;
-      rootStyle = otherStyles;
+      rootStyle = layerName ? shallowLayer(internal_serializeStyles(otherStyles), layerName) : otherStyles;
     }
-    return processStyleVariants(props, resolvedStyle.variants, [rootStyle]);
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle], layerName);
   }
   if (resolvedStyle?.isProcessed) {
-    return resolvedStyle.style;
+    return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle.style), layerName) : resolvedStyle.style;
   }
-  return resolvedStyle;
+  return layerName ? shallowLayer(internal_serializeStyles(resolvedStyle), layerName) : resolvedStyle;
 }
-function processStyleVariants(props, variants, results = []) {
+function processStyleVariants(props, variants, results = [], layerName = void 0) {
   let mergedState;
   variantLoop: for (let i = 0; i < variants.length; i += 1) {
     const variant = variants[i];
@@ -4699,9 +4788,9 @@ function processStyleVariants(props, variants, results = []) {
         ...props.ownerState,
         ownerState: props.ownerState
       };
-      results.push(variant.style(mergedState));
+      results.push(layerName ? shallowLayer(internal_serializeStyles(variant.style(mergedState)), layerName) : variant.style(mergedState));
     } else {
-      results.push(variant.style);
+      results.push(layerName ? shallowLayer(internal_serializeStyles(variant.style), layerName) : variant.style);
     }
   }
   return results;
@@ -4728,6 +4817,7 @@ function createStyled2(input = {}) {
       overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
       ...options
     } = inputOptions;
+    const layerName = componentName && componentName.startsWith("Mui") || !!componentSlot ? "components" : "custom";
     const skipVariantsResolver = inputSkipVariantsResolver !== void 0 ? inputSkipVariantsResolver : (
       // TODO v6: remove `Root` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
@@ -4748,18 +4838,21 @@ function createStyled2(input = {}) {
       ...options
     });
     const transformStyle = (style2) => {
-      if (typeof style2 === "function" && style2.__emotion_real !== style2) {
+      if (style2.__emotion_real === style2) {
+        return style2;
+      }
+      if (typeof style2 === "function") {
         return function styleFunctionProcessor(props) {
-          return processStyle(props, style2);
+          return processStyle(props, style2, props.theme.modularCssLayers ? layerName : void 0);
         };
       }
       if (isPlainObject(style2)) {
         const serialized = preprocessStyles(style2);
-        if (!serialized.variants) {
-          return serialized.style;
-        }
         return function styleObjectProcessor(props) {
-          return processStyle(props, serialized);
+          if (!serialized.variants) {
+            return props.theme.modularCssLayers ? shallowLayer(serialized.style, layerName) : serialized.style;
+          }
+          return processStyle(props, serialized, props.theme.modularCssLayers ? layerName : void 0);
         };
       }
       return style2;
@@ -4778,7 +4871,7 @@ function createStyled2(input = {}) {
           }
           const resolvedStyleOverrides = {};
           for (const slotKey in styleOverrides) {
-            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey]);
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey], props.theme.modularCssLayers ? "theme" : void 0);
           }
           return overridesResolver(props, resolvedStyleOverrides);
         });
@@ -4790,7 +4883,7 @@ function createStyled2(input = {}) {
           if (!themeVariants) {
             return null;
           }
-          return processStyleVariants(props, themeVariants);
+          return processStyleVariants(props, themeVariants, [], props.theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
@@ -4839,12 +4932,6 @@ function generateStyledLabel(componentName, componentSlot) {
   }
   return label;
 }
-function isObjectEmpty(object) {
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
 function isStringTag(tag) {
   return typeof tag === "string" && // 96 is one less than the char code
   // for "a" so this is checking that
@@ -4857,7 +4944,7 @@ function lowercaseFirstLetter(string) {
   }
   return string.charAt(0).toLowerCase() + string.slice(1);
 }
-function resolveProps(defaultProps, props) {
+function resolveProps(defaultProps, props, mergeClassNameAndStyle = false) {
   const output = {
     ...props
   };
@@ -4883,10 +4970,23 @@ function resolveProps(defaultProps, props) {
           for (const slotKey in defaultSlotProps) {
             if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
               const slotPropName = slotKey;
-              output[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+              const defaultSlotPropValue = defaultSlotProps[slotPropName];
+              const slotPropValue = slotProps[slotPropName];
+              if (typeof defaultSlotPropValue === "function" || typeof slotPropValue === "function") {
+                output[propName][slotPropName] = (...args) => resolveProps((typeof defaultSlotPropValue === "function" ? defaultSlotPropValue(...args) : defaultSlotPropValue) ?? {}, (typeof slotPropValue === "function" ? slotPropValue(...args) : slotPropValue) ?? {}, mergeClassNameAndStyle);
+              } else {
+                output[propName][slotPropName] = resolveProps(defaultSlotPropValue ?? {}, slotPropValue ?? {}, mergeClassNameAndStyle);
+              }
             }
           }
         }
+      } else if (propName === "className" && mergeClassNameAndStyle && props.className !== void 0) {
+        output.className = clsx(defaultProps?.className, props?.className);
+      } else if (propName === "style" && mergeClassNameAndStyle && props.style) {
+        output.style = {
+          ...defaultProps?.style,
+          ...props?.style
+        };
       } else if (output[propName] === void 0) {
         output[propName] = defaultProps[propName];
       }
@@ -5046,6 +5146,9 @@ function private_safeAlpha(color2, value, warning) {
   try {
     return alpha(color2, value);
   } catch (error) {
+    if (warning && true) {
+      console.warn(warning);
+    }
     return color2;
   }
 }
@@ -5065,6 +5168,9 @@ function private_safeDarken(color2, coefficient, warning) {
   try {
     return darken(color2, coefficient);
   } catch (error) {
+    if (warning && true) {
+      console.warn(warning);
+    }
     return color2;
   }
 }
@@ -5088,6 +5194,9 @@ function private_safeLighten(color2, coefficient, warning) {
   try {
     return lighten(color2, coefficient);
   } catch (error) {
+    if (warning && true) {
+      console.warn(warning);
+    }
     return color2;
   }
 }
@@ -5140,10 +5249,10 @@ function getThemeProps(params) {
   }
   const config = theme.components[name];
   if (config.defaultProps) {
-    return resolveProps(config.defaultProps, props);
+    return resolveProps(config.defaultProps, props, theme.components.mergeClassNameAndStyle);
   }
   if (!config.styleOverrides && !config.variants) {
-    return resolveProps(config, props);
+    return resolveProps(config, props, theme.components.mergeClassNameAndStyle);
   }
   return props;
 }
@@ -5193,9 +5302,14 @@ function createGetCssVar$1(prefix2 = "") {
   };
   return getCssVar;
 }
+const prototypePollutingKeys = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 const assignNestedKeys = (obj, keys2, value, arrayKeys = []) => {
   let temp = obj;
-  keys2.forEach((k, index) => {
+  for (let index = 0; index < keys2.length; index += 1) {
+    const k = keys2[index];
+    if (prototypePollutingKeys.has(k)) {
+      break;
+    }
     if (index === keys2.length - 1) {
       if (Array.isArray(temp)) {
         temp[Number(k)] = value;
@@ -5208,7 +5322,7 @@ const assignNestedKeys = (obj, keys2, value, arrayKeys = []) => {
       }
       temp = temp[k];
     }
-  });
+  }
 };
 const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = [], arrayKeys = []) {
@@ -5275,7 +5389,8 @@ function prepareCssVars(theme, parserConfig = {}) {
   const {
     getSelector = defaultGetSelector2,
     disableCssColorScheme,
-    colorSchemeSelector: selector
+    colorSchemeSelector: selector,
+    enableContrastVars
   } = parserConfig;
   const {
     colorSchemes = {},
@@ -5409,6 +5524,17 @@ function prepareCssVars(theme, parserConfig = {}) {
         ...finalCss
       }), finalCss);
     });
+    if (enableContrastVars) {
+      stylesheets.push({
+        ":root": {
+          // use double underscore to indicate that these are private variables
+          "--__l-threshold": "0.7",
+          "--__l": "clamp(0, (l / var(--__l-threshold) - 1) * -infinity, 1)",
+          "--__a": "clamp(0.87, (l / var(--__l-threshold) - 1) * -infinity, 1)"
+          // 0.87 is the default alpha value for black text.
+        }
+      });
+    }
     return stylesheets;
   };
   return {
@@ -5609,6 +5735,19 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     }
   }
 }
+function mixLightOrDark(colorSpace, intent, direction, shade, tonalOffset) {
+  const tonalOffsetLight = tonalOffset.light || tonalOffset;
+  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
+  if (!intent[direction]) {
+    if (intent.hasOwnProperty(shade)) {
+      intent[direction] = intent[shade];
+    } else if (direction === "light") {
+      intent.light = `color-mix(in ${colorSpace}, ${intent.main}, #fff ${(tonalOffsetLight * 100).toFixed(0)}%)`;
+    } else if (direction === "dark") {
+      intent.dark = `color-mix(in ${colorSpace}, ${intent.main}, #000 ${(tonalOffsetDark * 100).toFixed(0)}%)`;
+    }
+  }
+}
 function getDefaultPrimary(mode = "light") {
   if (mode === "dark") {
     return {
@@ -5694,11 +5833,15 @@ function getDefaultWarning(mode = "light") {
     dark: orange[900]
   };
 }
+function contrastColor(background) {
+  return `oklch(from ${background} var(--__l) 0 h / var(--__a))`;
+}
 function createPalette(palette) {
   const {
     mode = "light",
     contrastThreshold = 3,
     tonalOffset = 0.2,
+    colorSpace,
     ...other
   } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
@@ -5708,6 +5851,9 @@ function createPalette(palette) {
   const success = palette.success || getDefaultSuccess(mode);
   const warning = palette.warning || getDefaultWarning(mode);
   function getContrastText(background) {
+    if (colorSpace) {
+      return contrastColor(background);
+    }
     const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
     {
       const contrast = getContrastRatio(background, contrastText);
@@ -5750,8 +5896,13 @@ const theme2 = createTheme({ palette: {
   primary: { main: green[500] },
 } });`);
     }
-    addLightOrDark(color2, "light", lightShade, tonalOffset);
-    addLightOrDark(color2, "dark", darkShade, tonalOffset);
+    if (colorSpace) {
+      mixLightOrDark(colorSpace, color2, "light", lightShade, tonalOffset);
+      mixLightOrDark(colorSpace, color2, "dark", darkShade, tonalOffset);
+    } else {
+      addLightOrDark(color2, "light", lightShade, tonalOffset);
+      addLightOrDark(color2, "dark", darkShade, tonalOffset);
+    }
     if (!color2.contrastText) {
       color2.contrastText = getContrastText(color2.main);
     }
@@ -5827,6 +5978,44 @@ const theme2 = createTheme({ palette: {
   }, other);
   return paletteOutput;
 }
+const focusVisibleOffsetVar = "--_focusVisible-offset";
+const focusVisibleBehaviorVar = "--_focusVisible-behavior";
+const focusVisibleShadowVar = "--_focusVisible-shadow";
+const offsetValue = `var(${focusVisibleOffsetVar}, 1)`;
+const behaviorValue = `var(${focusVisibleBehaviorVar}, )`;
+function mergeFocusVisibleInput(optionsFocusVisible, args) {
+  return args.reduce((acc, arg2) => arg2 && "focusVisible" in arg2 ? deepmerge(acc, {
+    focusVisible: arg2.focusVisible
+  }) : acc, {
+    focusVisible: optionsFocusVisible
+  }).focusVisible;
+}
+function isResolvedFocusVisible(input) {
+  return input != null && typeof input === "object" && typeof input.outlineOffset === "string" && input.outlineOffset.includes(focusVisibleOffsetVar);
+}
+function resolveFocusVisible(input, outlineColor2) {
+  return wireFocusVisibleVars({
+    outlineStyle: "solid",
+    outlineColor: outlineColor2,
+    outlineWidth: 2,
+    outlineOffset: 2,
+    // invisible shadow for parent component with solid background (AppBar, Snackbar, Alert) can control the ring color.
+    boxShadow: `var(${focusVisibleShadowVar}, 0 0)`,
+    ...input === true ? null : input
+  });
+}
+function wireFocusVisibleVars(resolved) {
+  const offset2 = resolved.outlineOffset ?? 0;
+  if (typeof offset2 !== "string" || !offset2.includes(focusVisibleOffsetVar)) {
+    const offsetPx = typeof offset2 === "number" ? `${offset2}px` : offset2;
+    resolved.outlineOffset = `calc(${offsetValue} * ${offsetPx})`;
+  }
+  const standaloneBoxShadows = /* @__PURE__ */ new Set(["none", "initial", "inherit", "unset", "revert", "revert-layer"]);
+  if (typeof resolved.boxShadow === "string" && !standaloneBoxShadows.has(resolved.boxShadow.trim().toLowerCase()) && !/\binset\b/.test(resolved.boxShadow) && !resolved.boxShadow.includes(focusVisibleBehaviorVar)) {
+    resolved.boxShadow = `${behaviorValue} ${resolved.boxShadow}`;
+  }
+  return resolved;
+}
 function prepareTypographyVars(typography) {
   const vars = {};
   const entries = Object.entries(typography);
@@ -5948,6 +6137,8 @@ function createShadow(...px) {
   return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(",");
 }
 const shadows = ["none", createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
+const DEFAULT_TRANSITION_PROPS = ["all"];
+const EMPTY_OPTIONS = {};
 const easing = {
   // This is the most common easing curve.
   easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -5983,15 +6174,19 @@ function getAutoHeightDuration(height2) {
   return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3e3);
 }
 function createTransitions(inputTransitions) {
+  const transitions = {
+    ...inputTransitions
+  };
+  delete transitions.reducedMotion;
   const mergedEasing = {
     ...easing,
-    ...inputTransitions.easing
+    ...transitions.easing
   };
   const mergedDuration = {
     ...duration,
-    ...inputTransitions.duration
+    ...transitions.duration
   };
-  const create = (props = ["all"], options = {}) => {
+  const createTransitionValue = (props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) => {
     const {
       duration: durationOption = mergedDuration.standard,
       easing: easingOption = mergedEasing.easeInOut,
@@ -6022,14 +6217,22 @@ function createTransitions(inputTransitions) {
     }
     return (Array.isArray(props) ? props : [props]).map((animatedProp) => `${animatedProp} ${typeof durationOption === "string" ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === "string" ? delay : formatMs(delay)}`).join(",");
   };
+  const create = transitions.create ?? createTransitionValue;
   return {
     getAutoHeightDuration,
     create,
-    ...inputTransitions,
+    ...transitions,
     easing: mergedEasing,
     duration: mergedDuration
   };
 }
+const EMPTY_MOTION = {};
+function createMotion(inputMotion = EMPTY_MOTION) {
+  return {
+    reducedMotion: "never",
+    ...inputMotion
+  };
+}
 const zIndex = {
   mobileStepper: 1e3,
   fab: 1050,
@@ -6051,7 +6254,7 @@ function stringifyTheme(baseTheme = {}) {
     const array = Object.entries(object);
     for (let index = 0; index < array.length; index++) {
       const [key, value] = array[index];
-      if (!isSerializable(value) || key.startsWith("unstable_")) {
+      if (!isSerializable(value) || key.startsWith("unstable_") || key.startsWith("internal_")) {
         delete object[key];
       } else if (isPlainObject(value)) {
         object[key] = {
@@ -6067,19 +6270,70 @@ function stringifyTheme(baseTheme = {}) {
 const theme = ${JSON.stringify(serializableTheme, null, 2)};
 
 theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.motion = { reducedMotion: 'never', ...theme.motion };
 theme.transitions = createTransitions(theme.transitions || {});
 
 export default theme;`;
 }
+function coefficientToPercentage(coefficient) {
+  if (typeof coefficient === "number") {
+    return `${(coefficient * 100).toFixed(0)}%`;
+  }
+  return `calc((${coefficient}) * 100%)`;
+}
+const parseAddition = (str) => {
+  if (!Number.isNaN(+str)) {
+    return +str;
+  }
+  const numbers = str.match(/\d*\.?\d+/g);
+  if (!numbers) {
+    return 0;
+  }
+  let sum = 0;
+  for (let i = 0; i < numbers.length; i += 1) {
+    sum += +numbers[i];
+  }
+  return sum;
+};
+function attachColorManipulators(theme) {
+  Object.assign(theme, {
+    alpha(color2, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `oklch(from ${color2} l c h / ${typeof coefficient === "string" ? `calc(${coefficient})` : coefficient})`;
+      }
+      if (obj.vars) {
+        return `rgba(${color2.replace(/var\(--([^,\s)]+)(?:,[^)]+)?\)+/g, "var(--$1Channel)")} / ${typeof coefficient === "string" ? `calc(${coefficient})` : coefficient})`;
+      }
+      return alpha(color2, parseAddition(coefficient));
+    },
+    lighten(color2, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color2}, #fff ${coefficientToPercentage(coefficient)})`;
+      }
+      return lighten(color2, coefficient);
+    },
+    darken(color2, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color2}, #000 ${coefficientToPercentage(coefficient)})`;
+      }
+      return darken(color2, coefficient);
+    }
+  });
+}
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
     mixins: mixinsInput = {},
     spacing: spacingInput,
     palette: paletteInput = {},
+    motion: motionInput = {},
     transitions: transitionsInput = {},
     typography: typographyInput = {},
     shape: shapeInput,
+    colorSpace,
     ...other
   } = options;
   if (options.vars && // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
@@ -6087,7 +6341,10 @@ function createThemeNoVars(options = {}, ...args) {
   options.generateThemeVars === void 0) {
     throw new Error("MUI: `vars` is a private field used for CSS variables support.\nPlease use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.");
   }
-  const palette = createPalette(paletteInput);
+  const palette = createPalette({
+    ...paletteInput,
+    colorSpace
+  });
   const systemTheme = createTheme$1(options);
   let muiTheme = deepmerge(systemTheme, {
     mixins: createMixins(systemTheme.breakpoints, mixinsInput),
@@ -6095,6 +6352,7 @@ function createThemeNoVars(options = {}, ...args) {
     // Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
     shadows: shadows.slice(),
     typography: createTypography(palette, typographyInput),
+    motion: createMotion(motionInput),
     transitions: createTransitions(transitionsInput),
     zIndex: {
       ...zIndex
@@ -6102,6 +6360,10 @@ function createThemeNoVars(options = {}, ...args) {
   });
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  delete muiTheme.transitions.reducedMotion;
+  if (muiTheme.focusVisible != null && muiTheme.focusVisible !== false) {
+    muiTheme.focusVisible = resolveFocusVisible(muiTheme.focusVisible, muiTheme.palette.primary.main);
+  }
   {
     const stateClasses = ["active", "checked", "completed", "disabled", "error", "expanded", "focused", "focusVisible", "required", "selected"];
     const traverse = (node2, component) => {
@@ -6139,6 +6401,7 @@ function createThemeNoVars(options = {}, ...args) {
     });
   };
   muiTheme.toRuntimeSource = stringifyTheme;
+  attachColorManipulators(muiTheme);
   return muiTheme;
 }
 function getOverlayAlpha(elevation) {
@@ -6176,9 +6439,13 @@ function createColorScheme(options) {
     // need to cast to avoid module augmentation test
     opacity,
     overlays,
-    ...rest
+    colorSpace,
+    ...other
   } = options;
-  const palette = createPalette(paletteInput);
+  const palette = createPalette({
+    ...paletteInput,
+    colorSpace
+  });
   return {
     palette,
     opacity: {
@@ -6186,11 +6453,14 @@ function createColorScheme(options) {
       ...opacity
     },
     overlays: overlays || getOverlays(palette.mode),
-    ...rest
+    ...other
   };
 }
 function shouldSkipGeneratingVar(keys2) {
-  return !!keys2[0].match(/(cssVarPrefix|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys2[0].match(/sxConfig$/) || // ends with sxConfig
+  return keys2[0] === "motion" || // Keep `focusVisible` inline: its values reference the per-component private vars
+  // (`--_focusVisible-offset`/`-behavior`). Hoisted to a `:root` var they resolve where those
+  // vars are unset, silently breaking the inner-ring inset.
+  keys2[0] === "focusVisible" || !!keys2[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys2[0].match(/sxConfig$/) || // ends with sxConfig
   keys2[0] === "palette" && !!keys2[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }
 const excludeVariablesFromRoot = (cssVarPrefix) => [...[...Array(25)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}overlays-${index}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkColor`];
@@ -6293,7 +6563,7 @@ const silent = (fn) => {
   return void 0;
 };
 const createGetCssVar = (cssVarPrefix = "mui") => createGetCssVar$1(cssVarPrefix);
-function attachColorScheme$1(colorSchemes, scheme, restTheme, colorScheme) {
+function attachColorScheme$1(colorSpace, colorSchemes, scheme, restTheme, colorScheme) {
   if (!scheme) {
     return void 0;
   }
@@ -6305,7 +6575,8 @@ function attachColorScheme$1(colorSchemes, scheme, restTheme, colorScheme) {
       palette: {
         mode,
         ...scheme?.palette
-      }
+      },
+      colorSpace
     });
     return void 0;
   }
@@ -6317,7 +6588,8 @@ function attachColorScheme$1(colorSchemes, scheme, restTheme, colorScheme) {
     palette: {
       mode,
       ...scheme?.palette
-    }
+    },
+    colorSpace
   });
   colorSchemes[colorScheme] = {
     ...scheme,
@@ -6338,6 +6610,7 @@ function createThemeWithVars(options = {}, ...args) {
     defaultColorScheme: defaultColorSchemeInput,
     disableCssColorScheme = false,
     cssVarPrefix = "mui",
+    nativeColor = false,
     shouldSkipGeneratingVar: shouldSkipGeneratingVar$1 = shouldSkipGeneratingVar,
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? "media" : void 0,
     rootSelector = ":root",
@@ -6362,12 +6635,16 @@ function createThemeWithVars(options = {}, ...args) {
   if (!defaultScheme) {
     throw new Error(`MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.`);
   }
-  const muiTheme = attachColorScheme$1(colorSchemes, defaultScheme, input, defaultColorScheme);
+  let colorSpace;
+  if (nativeColor) {
+    colorSpace = "oklch";
+  }
+  const muiTheme = attachColorScheme$1(colorSpace, colorSchemes, defaultScheme, input, defaultColorScheme);
   if (builtInLight && !colorSchemes.light) {
-    attachColorScheme$1(colorSchemes, builtInLight, void 0, "light");
+    attachColorScheme$1(colorSpace, colorSchemes, builtInLight, void 0, "light");
   }
   if (builtInDark && !colorSchemes.dark) {
-    attachColorScheme$1(colorSchemes, builtInDark, void 0, "dark");
+    attachColorScheme$1(colorSpace, colorSchemes, builtInDark, void 0, "dark");
   }
   let theme = {
     defaultColorScheme,
@@ -6399,12 +6676,28 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.common, "background", "#000");
       setColor(palette.common, "onBackground", "#fff");
     }
+    function colorMix(method, color2, coefficient) {
+      if (colorSpace) {
+        let mixer;
+        if (method === private_safeAlpha) {
+          mixer = `transparent ${((1 - coefficient) * 100).toFixed(0)}%`;
+        }
+        if (method === private_safeDarken) {
+          mixer = `#000 ${(coefficient * 100).toFixed(0)}%`;
+        }
+        if (method === private_safeLighten) {
+          mixer = `#fff ${(coefficient * 100).toFixed(0)}%`;
+        }
+        return `color-mix(in ${colorSpace}, ${color2}, ${mixer})`;
+      }
+      return method(color2, coefficient);
+    }
     assignNode(palette, ["Alert", "AppBar", "Avatar", "Button", "Chip", "FilledInput", "LinearProgress", "Skeleton", "Slider", "SnackbarContent", "SpeedDialAction", "StepConnector", "StepContent", "Switch", "TableCell", "Tooltip"]);
     if (palette.mode === "light") {
-      setColor(palette.Alert, "errorColor", private_safeDarken(palette.error.light, 0.6));
-      setColor(palette.Alert, "infoColor", private_safeDarken(palette.info.light, 0.6));
-      setColor(palette.Alert, "successColor", private_safeDarken(palette.success.light, 0.6));
-      setColor(palette.Alert, "warningColor", private_safeDarken(palette.warning.light, 0.6));
+      setColor(palette.Alert, "errorColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.6));
+      setColor(palette.Alert, "infoColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.6));
+      setColor(palette.Alert, "successColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.6));
+      setColor(palette.Alert, "warningColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.6));
       setColor(palette.Alert, "errorFilledBg", setCssVarColor("palette-error-main"));
       setColor(palette.Alert, "infoFilledBg", setCssVarColor("palette-info-main"));
       setColor(palette.Alert, "successFilledBg", setCssVarColor("palette-success-main"));
@@ -6413,10 +6706,10 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, "infoFilledColor", silent(() => palette.getContrastText(palette.info.main)));
       setColor(palette.Alert, "successFilledColor", silent(() => palette.getContrastText(palette.success.main)));
       setColor(palette.Alert, "warningFilledColor", silent(() => palette.getContrastText(palette.warning.main)));
-      setColor(palette.Alert, "errorStandardBg", private_safeLighten(palette.error.light, 0.9));
-      setColor(palette.Alert, "infoStandardBg", private_safeLighten(palette.info.light, 0.9));
-      setColor(palette.Alert, "successStandardBg", private_safeLighten(palette.success.light, 0.9));
-      setColor(palette.Alert, "warningStandardBg", private_safeLighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, "errorStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.9));
+      setColor(palette.Alert, "infoStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.9));
+      setColor(palette.Alert, "successStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.9));
+      setColor(palette.Alert, "warningStandardBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.9));
       setColor(palette.Alert, "errorIconColor", setCssVarColor("palette-error-main"));
       setColor(palette.Alert, "infoIconColor", setCssVarColor("palette-info-main"));
       setColor(palette.Alert, "successIconColor", setCssVarColor("palette-success-main"));
@@ -6431,41 +6724,41 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, "bg", "rgba(0, 0, 0, 0.06)");
       setColor(palette.FilledInput, "hoverBg", "rgba(0, 0, 0, 0.09)");
       setColor(palette.FilledInput, "disabledBg", "rgba(0, 0, 0, 0.12)");
-      setColor(palette.LinearProgress, "primaryBg", private_safeLighten(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, "secondaryBg", private_safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, "errorBg", private_safeLighten(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, "infoBg", private_safeLighten(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, "successBg", private_safeLighten(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, "warningBg", private_safeLighten(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, "bg", `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.11)`);
-      setColor(palette.Slider, "primaryTrack", private_safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Slider, "secondaryTrack", private_safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Slider, "errorTrack", private_safeLighten(palette.error.main, 0.62));
-      setColor(palette.Slider, "infoTrack", private_safeLighten(palette.info.main, 0.62));
-      setColor(palette.Slider, "successTrack", private_safeLighten(palette.success.main, 0.62));
-      setColor(palette.Slider, "warningTrack", private_safeLighten(palette.warning.main, 0.62));
-      const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.8);
+      setColor(palette.LinearProgress, "primaryBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, "secondaryBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, "errorBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.62));
+      setColor(palette.LinearProgress, "infoBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.62));
+      setColor(palette.LinearProgress, "successBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.62));
+      setColor(palette.LinearProgress, "warningBg", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-light") : palette.warning.main, 0.62));
+      setColor(palette.Skeleton, "bg", colorSpace ? colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-text-primary") : palette.text.primary, 0.11) : `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.11)`);
+      setColor(palette.Slider, "primaryTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.62));
+      setColor(palette.Slider, "secondaryTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.62));
+      setColor(palette.Slider, "errorTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.62));
+      setColor(palette.Slider, "infoTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.62));
+      setColor(palette.Slider, "successTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.62));
+      setColor(palette.Slider, "warningTrack", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-main") : palette.warning.main, 0.62));
+      const snackbarContentBackground = colorSpace ? colorMix(private_safeDarken, nativeColor ? getCssVar("palette-background-default") : palette.background.default, 0.6825) : private_safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, "bg", snackbarContentBackground);
-      setColor(palette.SnackbarContent, "color", silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, "color", silent(() => colorSpace ? dark.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, "fabHoverBg", private_safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, "border", setCssVarColor("palette-grey-400"));
       setColor(palette.StepContent, "border", setCssVarColor("palette-grey-400"));
       setColor(palette.Switch, "defaultColor", setCssVarColor("palette-common-white"));
       setColor(palette.Switch, "defaultDisabledColor", setCssVarColor("palette-grey-100"));
-      setColor(palette.Switch, "primaryDisabledColor", private_safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Switch, "secondaryDisabledColor", private_safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Switch, "errorDisabledColor", private_safeLighten(palette.error.main, 0.62));
-      setColor(palette.Switch, "infoDisabledColor", private_safeLighten(palette.info.main, 0.62));
-      setColor(palette.Switch, "successDisabledColor", private_safeLighten(palette.success.main, 0.62));
-      setColor(palette.Switch, "warningDisabledColor", private_safeLighten(palette.warning.main, 0.62));
-      setColor(palette.TableCell, "border", private_safeLighten(private_safeAlpha(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, "bg", private_safeAlpha(palette.grey[700], 0.92));
+      setColor(palette.Switch, "primaryDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.62));
+      setColor(palette.Switch, "secondaryDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.62));
+      setColor(palette.Switch, "errorDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.62));
+      setColor(palette.Switch, "infoDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.62));
+      setColor(palette.Switch, "successDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.62));
+      setColor(palette.Switch, "warningDisabledColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-main") : palette.warning.main, 0.62));
+      setColor(palette.TableCell, "border", colorMix(private_safeLighten, private_safeAlpha(nativeColor ? getCssVar("palette-divider") : palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, "bg", colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-grey-700") : palette.grey[700], 0.92));
     }
     if (palette.mode === "dark") {
-      setColor(palette.Alert, "errorColor", private_safeLighten(palette.error.light, 0.6));
-      setColor(palette.Alert, "infoColor", private_safeLighten(palette.info.light, 0.6));
-      setColor(palette.Alert, "successColor", private_safeLighten(palette.success.light, 0.6));
-      setColor(palette.Alert, "warningColor", private_safeLighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, "errorColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.6));
+      setColor(palette.Alert, "infoColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.6));
+      setColor(palette.Alert, "successColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.6));
+      setColor(palette.Alert, "warningColor", colorMix(private_safeLighten, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.6));
       setColor(palette.Alert, "errorFilledBg", setCssVarColor("palette-error-dark"));
       setColor(palette.Alert, "infoFilledBg", setCssVarColor("palette-info-dark"));
       setColor(palette.Alert, "successFilledBg", setCssVarColor("palette-success-dark"));
@@ -6474,10 +6767,10 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, "infoFilledColor", silent(() => palette.getContrastText(palette.info.dark)));
       setColor(palette.Alert, "successFilledColor", silent(() => palette.getContrastText(palette.success.dark)));
       setColor(palette.Alert, "warningFilledColor", silent(() => palette.getContrastText(palette.warning.dark)));
-      setColor(palette.Alert, "errorStandardBg", private_safeDarken(palette.error.light, 0.9));
-      setColor(palette.Alert, "infoStandardBg", private_safeDarken(palette.info.light, 0.9));
-      setColor(palette.Alert, "successStandardBg", private_safeDarken(palette.success.light, 0.9));
-      setColor(palette.Alert, "warningStandardBg", private_safeDarken(palette.warning.light, 0.9));
+      setColor(palette.Alert, "errorStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-light") : palette.error.light, 0.9));
+      setColor(palette.Alert, "infoStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-light") : palette.info.light, 0.9));
+      setColor(palette.Alert, "successStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-light") : palette.success.light, 0.9));
+      setColor(palette.Alert, "warningStandardBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.light, 0.9));
       setColor(palette.Alert, "errorIconColor", setCssVarColor("palette-error-main"));
       setColor(palette.Alert, "infoIconColor", setCssVarColor("palette-info-main"));
       setColor(palette.Alert, "successIconColor", setCssVarColor("palette-success-main"));
@@ -6494,44 +6787,46 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, "bg", "rgba(255, 255, 255, 0.09)");
       setColor(palette.FilledInput, "hoverBg", "rgba(255, 255, 255, 0.13)");
       setColor(palette.FilledInput, "disabledBg", "rgba(255, 255, 255, 0.12)");
-      setColor(palette.LinearProgress, "primaryBg", private_safeDarken(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, "secondaryBg", private_safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, "errorBg", private_safeDarken(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, "infoBg", private_safeDarken(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, "successBg", private_safeDarken(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, "warningBg", private_safeDarken(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, "bg", `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.13)`);
-      setColor(palette.Slider, "primaryTrack", private_safeDarken(palette.primary.main, 0.5));
-      setColor(palette.Slider, "secondaryTrack", private_safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.Slider, "errorTrack", private_safeDarken(palette.error.main, 0.5));
-      setColor(palette.Slider, "infoTrack", private_safeDarken(palette.info.main, 0.5));
-      setColor(palette.Slider, "successTrack", private_safeDarken(palette.success.main, 0.5));
-      setColor(palette.Slider, "warningTrack", private_safeDarken(palette.warning.main, 0.5));
-      const snackbarContentBackground = private_safeEmphasize(palette.background.default, 0.98);
+      setColor(palette.LinearProgress, "primaryBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, "secondaryBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, "errorBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.5));
+      setColor(palette.LinearProgress, "infoBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.5));
+      setColor(palette.LinearProgress, "successBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.5));
+      setColor(palette.LinearProgress, "warningBg", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-main") : palette.warning.main, 0.5));
+      setColor(palette.Skeleton, "bg", colorSpace ? colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-text-primary") : palette.text.primary, 0.13) : `rgba(${setCssVarColor("palette-text-primaryChannel")} / 0.13)`);
+      setColor(palette.Slider, "primaryTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.5));
+      setColor(palette.Slider, "secondaryTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.5));
+      setColor(palette.Slider, "errorTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.5));
+      setColor(palette.Slider, "infoTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.5));
+      setColor(palette.Slider, "successTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.5));
+      setColor(palette.Slider, "warningTrack", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.main, 0.5));
+      const snackbarContentBackground = colorSpace ? colorMix(private_safeLighten, nativeColor ? getCssVar("palette-background-default") : palette.background.default, 0.985) : private_safeEmphasize(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, "bg", snackbarContentBackground);
-      setColor(palette.SnackbarContent, "color", silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, "color", silent(() => colorSpace ? light.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, "fabHoverBg", private_safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, "border", setCssVarColor("palette-grey-600"));
       setColor(palette.StepContent, "border", setCssVarColor("palette-grey-600"));
       setColor(palette.Switch, "defaultColor", setCssVarColor("palette-grey-300"));
       setColor(palette.Switch, "defaultDisabledColor", setCssVarColor("palette-grey-600"));
-      setColor(palette.Switch, "primaryDisabledColor", private_safeDarken(palette.primary.main, 0.55));
-      setColor(palette.Switch, "secondaryDisabledColor", private_safeDarken(palette.secondary.main, 0.55));
-      setColor(palette.Switch, "errorDisabledColor", private_safeDarken(palette.error.main, 0.55));
-      setColor(palette.Switch, "infoDisabledColor", private_safeDarken(palette.info.main, 0.55));
-      setColor(palette.Switch, "successDisabledColor", private_safeDarken(palette.success.main, 0.55));
-      setColor(palette.Switch, "warningDisabledColor", private_safeDarken(palette.warning.main, 0.55));
-      setColor(palette.TableCell, "border", private_safeDarken(private_safeAlpha(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, "bg", private_safeAlpha(palette.grey[700], 0.92));
-    }
-    setColorChannel(palette.background, "default");
-    setColorChannel(palette.background, "paper");
-    setColorChannel(palette.common, "background");
-    setColorChannel(palette.common, "onBackground");
-    setColorChannel(palette, "divider");
+      setColor(palette.Switch, "primaryDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-primary-main") : palette.primary.main, 0.55));
+      setColor(palette.Switch, "secondaryDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-secondary-main") : palette.secondary.main, 0.55));
+      setColor(palette.Switch, "errorDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-error-main") : palette.error.main, 0.55));
+      setColor(palette.Switch, "infoDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-info-main") : palette.info.main, 0.55));
+      setColor(palette.Switch, "successDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-success-main") : palette.success.main, 0.55));
+      setColor(palette.Switch, "warningDisabledColor", colorMix(private_safeDarken, nativeColor ? getCssVar("palette-warning-light") : palette.warning.main, 0.55));
+      setColor(palette.TableCell, "border", colorMix(private_safeDarken, private_safeAlpha(nativeColor ? getCssVar("palette-divider") : palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, "bg", colorMix(private_safeAlpha, nativeColor ? getCssVar("palette-grey-700") : palette.grey[700], 0.92));
+    }
+    if (!nativeColor) {
+      setColorChannel(palette.background, "default");
+      setColorChannel(palette.background, "paper");
+      setColorChannel(palette.common, "background");
+      setColorChannel(palette.common, "onBackground");
+      setColorChannel(palette, "divider");
+    }
     Object.keys(palette).forEach((color2) => {
       const colors = palette[color2];
-      if (color2 !== "tonalOffset" && colors && typeof colors === "object") {
+      if (color2 !== "tonalOffset" && !nativeColor && colors && typeof colors === "object") {
         if (colors.main) {
           setColor(palette[color2], "mainChannel", private_safeColorChannel(toRgb(colors.main)));
         }
@@ -6560,11 +6855,16 @@ function createThemeWithVars(options = {}, ...args) {
     });
   });
   theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
+  const focusVisibleInput = mergeFocusVisibleInput(options.focusVisible, args);
+  if (focusVisibleInput != null && focusVisibleInput !== false) {
+    theme.focusVisible = resolveFocusVisible(focusVisibleInput, getCssVar("palette-primary-main"));
+  }
   const parserConfig = {
     prefix: cssVarPrefix,
     disableCssColorScheme,
     shouldSkipGeneratingVar: shouldSkipGeneratingVar$1,
-    getSelector: defaultGetSelector(theme)
+    getSelector: defaultGetSelector(theme),
+    enableContrastVars: nativeColor
   };
   const {
     vars,
@@ -6593,6 +6893,7 @@ function createThemeWithVars(options = {}, ...args) {
       theme: this
     });
   };
+  theme.internal_cache = {};
   theme.toRuntimeSource = stringifyTheme;
   return theme;
 }
@@ -6619,7 +6920,7 @@ function createTheme(options = {}, ...args) {
       light: true
     } : void 0,
     defaultColorScheme: initialDefaultColorScheme = palette?.mode,
-    ...rest
+    ...other
   } = options;
   const defaultColorSchemeInput = initialDefaultColorScheme || "light";
   const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
@@ -6668,18 +6969,84 @@ function createTheme(options = {}, ...args) {
       };
       attachColorScheme(theme, "light", colorSchemesInput.light);
     }
+    if (theme.focusVisible != null && theme.focusVisible !== false) {
+      let focusVisibleInput = theme.focusVisible;
+      const rawFocusVisible = mergeFocusVisibleInput(options.focusVisible, args);
+      const authoredColor = rawFocusVisible && typeof rawFocusVisible === "object" ? rawFocusVisible.outlineColor : void 0;
+      if (!authoredColor || isResolvedFocusVisible(rawFocusVisible) && authoredColor === theme.palette.primary.main) {
+        const {
+          outlineColor: outlineColor2,
+          ...rest
+        } = focusVisibleInput;
+        focusVisibleInput = rest;
+      }
+      Object.keys(theme.colorSchemes).forEach((scheme) => {
+        const schemePalette = theme.colorSchemes?.[scheme]?.palette;
+        if (schemePalette?.primary) {
+          theme.colorSchemes[scheme].focusVisible = resolveFocusVisible(focusVisibleInput, schemePalette.primary.main);
+        }
+      });
+    }
     return theme;
   }
   if (!palette && !("light" in colorSchemesInput) && defaultColorSchemeInput === "light") {
     colorSchemesInput.light = true;
   }
   return createThemeWithVars({
-    ...rest,
+    ...other,
     colorSchemes: colorSchemesInput,
     defaultColorScheme: defaultColorSchemeInput,
     ...typeof cssVariables !== "boolean" && cssVariables
   }, ...args);
 }
+function useForkRef$1(...refs) {
+  const cleanupRef = React.useRef(void 0);
+  const refEffect = React.useCallback((instance) => {
+    const cleanups = refs.map((ref) => {
+      if (ref == null) {
+        return null;
+      }
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === "function" ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach((refCleanup) => refCleanup?.());
+    };
+  }, refs);
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (value) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = void 0;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
+    };
+  }, refs);
+}
+function useEventCallback(fn) {
+  const ref = React.useRef(fn);
+  useEnhancedEffect$1(() => {
+    ref.current = fn;
+  });
+  return React.useRef((...args) => (
+    // @ts-expect-error hide `this`
+    (0, ref.current)(...args)
+  )).current;
+}
 const defaultTheme = createTheme();
 function useTheme() {
   const theme = useTheme$1(defaultTheme);
@@ -6697,20 +7064,6 @@ const styled = createStyled2({
   defaultTheme,
   rootShouldForwardProp
 });
-const { makeStyles } = createMakeAndWithStyles({
-  useTheme
-});
-const { tss } = createTss({
-  "useContext": function useContext2() {
-    const theme = useTheme();
-    return { theme };
-  },
-  "usePlugin": useMuiThemeStyleOverridesPlugin
-});
-const useStyles = tss.create({});
-function internal_createExtendSxProp() {
-  return extendSxProp$1;
-}
 const memoTheme = unstable_memoTheme;
 ({
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -6729,6 +7082,17 @@ const memoTheme = unstable_memoTheme;
 function useDefaultProps(params) {
   return useDefaultProps$1(params);
 }
+const { makeStyles } = createMakeAndWithStyles({
+  useTheme
+});
+const { tss } = createTss({
+  "useContext": function useContext2() {
+    const theme = useTheme();
+    return { theme };
+  },
+  "usePlugin": useMuiThemeStyleOverridesPlugin
+});
+const useStyles = tss.create({});
 function setRef$1(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -6736,66 +7100,6 @@ function setRef$1(ref, value) {
     ref.current = value;
   }
 }
-function useEventCallback(fn) {
-  const ref = React.useRef(fn);
-  useEnhancedEffect$1(() => {
-    ref.current = fn;
-  });
-  return React.useRef((...args) => (
-    // @ts-expect-error hide `this`
-    (0, ref.current)(...args)
-  )).current;
-}
-function useForkRef$1(...refs) {
-  const cleanupRef = React.useRef(void 0);
-  const refEffect = React.useCallback((instance) => {
-    const cleanups = refs.map((ref) => {
-      if (ref == null) {
-        return null;
-      }
-      if (typeof ref === "function") {
-        const refCallback = ref;
-        const refCleanup = refCallback(instance);
-        return typeof refCleanup === "function" ? refCleanup : () => {
-          refCallback(null);
-        };
-      }
-      ref.current = instance;
-      return () => {
-        ref.current = null;
-      };
-    });
-    return () => {
-      cleanups.forEach((refCleanup) => refCleanup?.());
-    };
-  }, refs);
-  return React.useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null;
-    }
-    return (value) => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = void 0;
-      }
-      if (value != null) {
-        cleanupRef.current = refEffect(value);
-      }
-    };
-  }, refs);
-}
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
-    return t2.__proto__ = e2, t2;
-  }, _setPrototypeOf(t, e);
-}
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-}
-function _assertThisInitialized(e) {
-  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
 function hasCorrectMainProperty(obj) {
   return typeof obj.main === "string";
 }
@@ -6830,22 +7134,22 @@ function getReactElementRef(element) {
   }
   return element?.ref || null;
 }
-function getContainer(container) {
-  return typeof container === "function" ? container() : container;
+function getContainer(container2) {
+  return typeof container2 === "function" ? container2() : container2;
 }
 const Portal = /* @__PURE__ */ React.forwardRef(function Portal2(props, forwardedRef) {
   const {
     children,
-    container,
+    container: container2,
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
   const handleRef = useForkRef$1(/* @__PURE__ */ React.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
   useEnhancedEffect$1(() => {
     if (!disablePortal) {
-      setMountNode(getContainer(container) || document.body);
+      setMountNode(getContainer(container2) || document.body);
     }
-  }, [container, disablePortal]);
+  }, [container2, disablePortal]);
   useEnhancedEffect$1(() => {
     if (mountNode && !disablePortal) {
       setRef$1(forwardedRef, mountNode);
@@ -6898,30 +7202,17 @@ Portal.propTypes = {
 function getTypographyUtilityClass(slot) {
   return generateUtilityClass("MuiTypography", slot);
 }
-generateUtilityClasses("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
-const v6Colors = {
-  primary: true,
-  secondary: true,
-  error: true,
-  info: true,
-  success: true,
-  warning: true,
-  textPrimary: true,
-  textSecondary: true,
-  textDisabled: true
-};
-const extendSxProp = internal_createExtendSxProp();
+generateUtilityClasses("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom"]);
 const useUtilityClasses = (ownerState) => {
   const {
     align,
     gutterBottom,
     noWrap,
-    paragraph,
     variant,
     classes
   } = ownerState;
   const slots = {
-    root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize(align)}`, gutterBottom && "gutterBottom", noWrap && "noWrap", paragraph && "paragraph"]
+    root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize(align)}`, gutterBottom && "gutterBottom", noWrap && "noWrap"]
   };
   return composeClasses(slots, getTypographyUtilityClass, classes);
 };
@@ -6932,7 +7223,7 @@ const TypographyRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== "inherit" && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
+    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== "inherit" && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom];
   }
 })(memoTheme(({
   theme
@@ -6990,13 +7281,6 @@ const TypographyRoot = styled("span", {
     style: {
       marginBottom: "0.35em"
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.paragraph,
-    style: {
-      marginBottom: 16
-    }
   }]
 })));
 const defaultVariantMapping = {
@@ -7013,27 +7297,17 @@ const defaultVariantMapping = {
   inherit: "p"
 };
 const Typography = /* @__PURE__ */ React.forwardRef(function Typography2(inProps, ref) {
-  const {
-    color: color2,
-    ...themeProps
-  } = useDefaultProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiTypography"
   });
-  const isSxColor = !v6Colors[color2];
-  const props = extendSxProp({
-    ...themeProps,
-    ...isSxColor && {
-      color: color2
-    }
-  });
   const {
+    color: color2,
     align = "inherit",
     className,
     component,
     gutterBottom = false,
     noWrap = false,
-    paragraph = false,
     variant = "body1",
     variantMapping = defaultVariantMapping,
     ...other
@@ -7046,11 +7320,10 @@ const Typography = /* @__PURE__ */ React.forwardRef(function Typography2(inProps
     component,
     gutterBottom,
     noWrap,
-    paragraph,
     variant,
     variantMapping
   };
-  const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
+  const Component = component || variantMapping[variant] || defaultVariantMapping[variant] || "span";
   const classes = useUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(TypographyRoot, {
     as: Component,
@@ -7112,12 +7385,6 @@ Typography.propTypes = {
    * @default false
    */
   noWrap: PropTypes.bool,
-  /**
-   * If `true`, the element will be a paragraph element.
-   * @default false
-   * @deprecated Use the `component` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  paragraph: PropTypes.bool,
   /**
    * @ignore
    */
@@ -8747,7 +9014,7 @@ function getAnchorEl(anchorEl) {
 const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 const defaultPopperOptions = {};
 React.forwardRef((props, ref) => {
-  const { anchorEl, children, container, disablePortal = false, keepMounted = false, modifiers: modifiers2, open, placement: initialPlacement = "bottom", popperOptions = defaultPopperOptions, popperRef: popperRefProp, style: style2, transition = false, ...other } = props;
+  const { anchorEl, children, container: container2, disablePortal = false, keepMounted = false, modifiers: modifiers2, open, placement: initialPlacement = "bottom", popperOptions = defaultPopperOptions, popperRef: popperRefProp, style: style2, transition = false, ...other } = props;
   const tooltipRef = React.useRef(null);
   const ownRef = useForkRef(tooltipRef, ref);
   const popperRef = React.useRef(null);
@@ -8844,7 +9111,7 @@ React.forwardRef((props, ref) => {
       onExited: handleExited
     };
   }
-  return jsx(Portal, { disablePortal, container, children: jsx("div", { ref: handleRef, role: "tooltip", ...other, style: {
+  return jsx(Portal, { disablePortal, container: container2, children: jsx("div", { ref: handleRef, role: "tooltip", ...other, style: {
     // Prevents scroll issue, waiting for Popper.js to add this style once initiated.
     position: "fixed",
     // Fix Popper.js display issue
@@ -8854,6 +9121,18 @@ React.forwardRef((props, ref) => {
     ...style2
   }, children: typeof children === "function" ? children(childProps) : children }) });
 });
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
+    return t2.__proto__ = e2, t2;
+  }, _setPrototypeOf(t, e);
+}
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
 var safeIsNaN = Number.isNaN || function ponyfill(value) {
   return typeof value === "number" && value !== value;
 };