@vitessce/vega 4.0.10 → 4.1.0

package/dist/index.js

@@ -549,7 +549,7 @@ function lruCache$1(maxsize) {
     set: (key2, value2) => has$2(curr, key2) ? curr[key2] = value2 : update2(key2, value2)
   };
 }
-function merge$4(compare2, array0, array1, output2) {
+function merge$3(compare2, array0, array1, output2) {
   const n0 = array0.length, n1 = array1.length;
   if (!n1) return array0;
   if (!n0) return array1;
@@ -1541,7 +1541,7 @@ function* flatten(arrays) {
     yield* array2;
   }
 }
-function merge$3(arrays) {
+function merge$2(arrays) {
   return Array.from(flatten(arrays));
 }
 function range$6(start, stop3, step) {
@@ -2893,7 +2893,7 @@ function defaultLocale$1(definition2) {
   utcParse$1 = locale$1.utcParse;
   return locale$1;
 }
-function memoize$2(method2) {
+function memoize$1(method2) {
   const cache2 = {};
   return (spec) => cache2[spec] || (cache2[spec] = method2(spec));
 }
@@ -2919,7 +2919,7 @@ function rightmostDigit(str, dec) {
   }
 }
 function numberLocale(locale2) {
-  const format2 = memoize$2(locale2.format), formatPrefix2 = locale2.formatPrefix;
+  const format2 = memoize$1(locale2.format), formatPrefix2 = locale2.formatPrefix;
   return {
     format: format2,
     formatPrefix: formatPrefix2,
@@ -3003,12 +3003,12 @@ function timeMultiFormat(format2, interval2, spec) {
   return (date2) => (second2(date2) < date2 ? L : minute(date2) < date2 ? S : hour(date2) < date2 ? M2 : day(date2) < date2 ? H : month(date2) < date2 ? week2(date2) < date2 ? d : w2 : year(date2) < date2 ? quarter2(date2) < date2 ? m2 : q : y2)(date2);
 }
 function timeLocale(locale2) {
-  const timeFormat2 = memoize$2(locale2.format), utcFormat2 = memoize$2(locale2.utcFormat);
+  const timeFormat2 = memoize$1(locale2.format), utcFormat2 = memoize$1(locale2.utcFormat);
   return {
     timeFormat: (spec) => isString(spec) ? timeFormat2(spec) : timeMultiFormat(timeFormat2, timeInterval, spec),
     utcFormat: (spec) => isString(spec) ? utcFormat2(spec) : timeMultiFormat(utcFormat2, utcInterval, spec),
-    timeParse: memoize$2(locale2.parse),
-    utcParse: memoize$2(locale2.utcParse)
+    timeParse: memoize$1(locale2.parse),
+    utcParse: memoize$1(locale2.utcParse)
   };
 }
 let defaultTimeLocale;
@@ -6400,7 +6400,7 @@ function SortedList(idFunc, source2, input) {
         data2.sort(compare2);
       }
       if (add2.length) {
-        data2 = compare2 ? merge$4(compare2, data2, add2.sort(compare2)) : data2.concat(add2);
+        data2 = compare2 ? merge$3(compare2, data2, add2.sort(compare2)) : data2.concat(add2);
         add2 = [];
       }
       return data2;
@@ -16346,7 +16346,7 @@ function get$2(opt, key2, d) {
   const v = isObject$1(opt) ? opt[key2] : opt;
   return v != null ? v : d !== void 0 ? d : 0;
 }
-function offsetValue$1(v) {
+function offsetValue$2(v) {
   return v < 0 ? Math.ceil(-v) : 0;
 }
 function gridLayout(view, groups, opt) {
@@ -16366,8 +16366,8 @@ function gridLayout(view, groups, opt) {
     yMax = Math.max(yMax, py2 = Math.ceil(b2.y2));
     xExtent[c2] = Math.max(xExtent[c2], px2);
     yExtent[r3] = Math.max(yExtent[r3], py2);
-    xOffset[i] = padCol + offsetValue$1(b2.x1);
-    yOffset[i] = padRow + offsetValue$1(b2.y1);
+    xOffset[i] = padCol + offsetValue$2(b2.x1);
+    yOffset[i] = padRow + offsetValue$2(b2.y1);
     if (dirty) view.dirty(groups[i]);
   }
   for (i = 0; i < n; ++i) {
@@ -18208,7 +18208,7 @@ function clip$1(pointVisible, clipLine2, interpolate2, start) {
         clip2.point = point2;
         clip2.lineStart = lineStart;
         clip2.lineEnd = lineEnd;
-        segments2 = merge$3(segments2);
+        segments2 = merge$2(segments2);
         var startInside = polygonContains(polygon, start);
         if (segments2.length) {
           if (!polygonStarted) sink.polygonStart(), polygonStarted = true;
@@ -18557,7 +18557,7 @@ function clipRectangle(x02, y02, x12, y12) {
       activeStream = bufferStream, segments2 = [], polygon = [], clean = true;
     }
     function polygonEnd() {
-      var startInside = polygonInside(), cleanInside = clean && startInside, visible2 = (segments2 = merge$3(segments2)).length;
+      var startInside = polygonInside(), cleanInside = clean && startInside, visible2 = (segments2 = merge$2(segments2)).length;
       if (cleanInside || visible2) {
         stream2.polygonStart();
         if (cleanInside) {
@@ -25820,7 +25820,7 @@ function SortedIndex() {
       oldi = index2;
       value2 = Array(n0 + n1);
       index2 = array32(n0 + n1);
-      merge$2(base2, oldv, oldi, n0, addv, addi, n1, value2, index2);
+      merge$1(base2, oldv, oldi, n0, addv, addi, n1, value2, index2);
     } else {
       if (base2 > 0) for (i = 0; i < n1; ++i) {
         addi[i] += base2;
@@ -25878,7 +25878,7 @@ function sort(values2, index2) {
   });
   return permute(values2, index2);
 }
-function merge$2(base2, value0, index0, n0, value1, index1, n1, value2, index2) {
+function merge$1(base2, value0, index0, n0, value1, index1, n1, value2, index2) {
   let i0 = 0, i1 = 0, i;
   for (i = 0; i0 < n0 && i1 < n1; ++i) {
     if (value0[i0] < value1[i1]) {
@@ -27919,7 +27919,7 @@ function contrast(color1, color2) {
   const lum1 = luminance(color1), lum2 = luminance(color2), lumL = Math.max(lum1, lum2), lumD = Math.min(lum1, lum2);
   return (lumL + 0.05) / (lumD + 0.05);
 }
-function merge$1() {
+function merge() {
   const args = [].slice.call(arguments);
   args.unshift({});
   return extend$1(...args);
@@ -28212,7 +28212,7 @@ const functionContext = {
   slice: slice$2,
   flush,
   lerp,
-  merge: merge$1,
+  merge,
   pad: pad$2,
   peek: peek$2,
   pluck,
@@ -32093,7 +32093,7 @@ function position$1(spec, pos) {
   };
 }
 function axisGrid(spec, config, userEncode, dataRef, band2) {
-  const _ = lookup(spec, config), orient2 = spec.orient, vscale = spec.gridScale, sign2 = getSign(orient2, 1, -1), offset2 = offsetValue(spec.offset, sign2);
+  const _ = lookup(spec, config), orient2 = spec.orient, vscale = spec.gridScale, sign2 = getSign(orient2, 1, -1), offset2 = offsetValue$1(spec.offset, sign2);
   let enter, exit, update2;
   const encode2 = {
     enter: enter = {
@@ -32159,7 +32159,7 @@ function axisGrid(spec, config, userEncode, dataRef, band2) {
     encode: encode2
   }, userEncode);
 }
-function offsetValue(offset2, sign2) {
+function offsetValue$1(offset2, sign2) {
   if (sign2 === 1) ;
   else if (!isObject$1(offset2)) {
     offset2 = isSignal(sign2) ? {
@@ -33235,7 +33235,7 @@ const vegaImport = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   logger,
   lruCache: lruCache$1,
   markup,
-  merge: merge$4,
+  merge: merge$3,
   mergeConfig,
   multiLineOffset,
   one: one$2,
@@ -33790,7 +33790,7 @@ function rulesheet(callback) {
     }
   };
 }
-function memoize$1(fn) {
+function memoize(fn) {
   var cache2 = /* @__PURE__ */ Object.create(null);
   return function(arg2) {
     if (cache2[arg2] === void 0) cache2[arg2] = fn(arg2);
@@ -34078,10 +34078,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
@@ -34118,7 +34118,7 @@ var createCache = function createCache2(options) {
     key: key2,
     sheet: new StyleSheet({
       key: key2,
-      container,
+      container: container2,
       nonce: options.nonce,
       speedy: options.speedy,
       prepend: options.prepend,
@@ -34560,7 +34560,7 @@ var isCustomProperty = function isCustomProperty2(property2) {
 var isProcessableValue = function isProcessableValue2(value2) {
   return value2 != null && typeof value2 !== "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(key2, value2) {
@@ -35585,7 +35585,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;
   }
@@ -36535,8 +36535,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;
@@ -36586,7 +36585,7 @@ function requireReactIs_development() {
       return typeOf(object2) === REACT_SUSPENSE_LIST_TYPE;
     };
     reactIs_development.isValidElementType = function(type2) {
-      return "string" === typeof type2 || "function" === typeof type2 || type2 === REACT_FRAGMENT_TYPE || type2 === REACT_PROFILER_TYPE || type2 === REACT_STRICT_MODE_TYPE || type2 === REACT_SUSPENSE_TYPE || type2 === REACT_SUSPENSE_LIST_TYPE || "object" === typeof type2 && null !== type2 && (type2.$$typeof === REACT_LAZY_TYPE || type2.$$typeof === REACT_MEMO_TYPE || type2.$$typeof === REACT_CONTEXT_TYPE || type2.$$typeof === REACT_CONSUMER_TYPE || type2.$$typeof === REACT_FORWARD_REF_TYPE || type2.$$typeof === REACT_CLIENT_REFERENCE || void 0 !== type2.getModuleId) ? true : false;
+      return "string" === typeof type2 || "function" === typeof type2 || type2 === REACT_FRAGMENT_TYPE || type2 === REACT_PROFILER_TYPE || type2 === REACT_STRICT_MODE_TYPE || type2 === REACT_SUSPENSE_TYPE || type2 === REACT_SUSPENSE_LIST_TYPE || type2 === REACT_VIEW_TRANSITION_TYPE || "object" === typeof type2 && null !== type2 && (type2.$$typeof === REACT_LAZY_TYPE || type2.$$typeof === REACT_MEMO_TYPE || type2.$$typeof === REACT_CONTEXT_TYPE || type2.$$typeof === REACT_CONSUMER_TYPE || type2.$$typeof === REACT_FORWARD_REF_TYPE || type2.$$typeof === REACT_CLIENT_REFERENCE || void 0 !== type2.getModuleId) ? true : false;
     };
     reactIs_development.typeOf = typeOf;
   })();
@@ -36656,19 +36655,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: unit2 = "px",
     step = 5,
@@ -36704,6 +36696,10 @@ function createBreakpoints(breakpoints) {
     }
     return between(key2, keys2[keys2.indexOf(key2) + 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,
@@ -36713,28 +36709,40 @@ function createBreakpoints(breakpoints) {
     only,
     not,
     unit: unit2,
+    internal_mediaKeys: mediaKeys,
     ...other
   };
 }
+const MIN_WIDTH_PATTERN = /min-width:\s*([0-9.]+)/;
 function sortContainerQueries(theme, css2) {
-  if (!theme.containerQueries) {
+  if (!theme.containerQueries || !hasContainerQuery(css2)) {
     return css2;
   }
-  const sorted = Object.keys(css2).filter((key2) => key2.startsWith("@container")).sort((a2, b2) => {
-    const regex = /min-width:\s*([0-9.]+)/;
-    return +(a2.match(regex)?.[1] || 0) - +(b2.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css2;
+  const keys2 = [];
+  for (const key2 in css2) {
+    if (key2.startsWith("@container")) {
+      keys2.push(key2);
+    }
   }
-  return sorted.reduce((acc, key2) => {
-    const value2 = css2[key2];
-    delete acc[key2];
-    acc[key2] = value2;
-    return acc;
-  }, {
-    ...css2
+  keys2.sort((a2, b2) => {
+    return +(a2.match(MIN_WIDTH_PATTERN)?.[1] || 0) - +(b2.match(MIN_WIDTH_PATTERN)?.[1] || 0);
   });
+  const result = css2;
+  for (let i = 0; i < keys2.length; i += 1) {
+    const key2 = keys2[i];
+    const value2 = result[key2];
+    delete result[key2];
+    result[key2] = value2;
+  }
+  return result;
+}
+function hasContainerQuery(css2) {
+  for (const key2 in css2) {
+    if (key2.startsWith("@container")) {
+      return true;
+    }
+  }
+  return false;
 }
 function isCqShorthand(breakpointKeys, value2) {
   return value2 === "@" || value2.startsWith("@") && (breakpointKeys.some((key2) => value2.startsWith(`@${key2}`)) || !!value2.match(/^@\d/));
@@ -36743,8 +36751,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;
@@ -36781,15 +36792,82 @@ const shape = {
   borderRadius: 4
 };
 const responsivePropType = _pt.oneOfType([_pt.number, _pt.string, _pt.object, _pt.array]);
-function merge(acc, item) {
-  if (!item) {
-    return acc;
+function isObjectEmpty$1(object2) {
+  if (object2 == null) {
+    return true;
   }
-  return deepmerge(acc, item, {
-    clone: false
-    // No need to clone deep, it's way faster.
-  });
+  for (const _ in object2) {
+    return false;
+  }
+  return true;
 }
+function fastDeepAssign(target2, source2) {
+  const sourceIsArray = Array.isArray(source2);
+  const targetIsArray = Array.isArray(target2);
+  if (isPrimitive(source2)) {
+    return source2;
+  } else if (isPrimitiveOrBuiltIn(target2)) {
+    return clone$1(source2);
+  } else if (sourceIsArray && targetIsArray) {
+    return mergeArray(target2, source2);
+  } else if (sourceIsArray !== targetIsArray) {
+    return clone$1(source2);
+  } else {
+    return mergeObject(target2, source2);
+  }
+}
+function cloneArray(value2) {
+  let i = 0;
+  const il = value2.length;
+  const result = new Array(il);
+  for (i = 0; i < il; i += 1) {
+    result[i] = clone$1(value2[i]);
+  }
+  return result;
+}
+function cloneObject(target2) {
+  const result = {};
+  for (const key2 in target2) {
+    if (key2 === "__proto__" || key2 === "constructor" || key2 === "prototype") {
+      continue;
+    }
+    result[key2] = clone$1(target2[key2]);
+  }
+  return result;
+}
+function mergeArray(target2, source2) {
+  const tl2 = target2.length;
+  for (let i = 0; i < source2.length; i += 1) {
+    target2[tl2 + i] = clone$1(source2[i]);
+  }
+  return target2;
+}
+function isMergeableObject(value2) {
+  return typeof value2 === "object" && value2 !== null && !(value2 instanceof RegExp) && !(value2 instanceof Date);
+}
+function isPrimitive(value2) {
+  return typeof value2 !== "object" || value2 === null;
+}
+function isPrimitiveOrBuiltIn(value2) {
+  return typeof value2 !== "object" || value2 === null || value2 instanceof RegExp || value2 instanceof Date;
+}
+function clone$1(entry2) {
+  return isMergeableObject(entry2) ? Array.isArray(entry2) ? cloneArray(entry2) : cloneObject(entry2) : entry2;
+}
+function mergeObject(target2, source2) {
+  for (const key2 in source2) {
+    if (key2 === "__proto__" || key2 === "constructor" || key2 === "prototype") {
+      continue;
+    }
+    if (key2 in target2) {
+      target2[key2] = fastDeepAssign(target2[key2], source2[key2]);
+    } else {
+      target2[key2] = clone$1(source2[key2]);
+    }
+  }
+  return target2;
+}
+const EMPTY_THEME$2 = {};
 const values$3 = {
   xs: 0,
   // phone
@@ -36802,12 +36880,9 @@ const values$3 = {
   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: (key2) => `@media (min-width:${values$3[key2]}px)`
-};
+const DEFAULT_BREAKPOINTS = createBreakpoints({
+  values: values$3
+});
 const defaultContainerQueries = {
   containerQueries: (containerName) => ({
     up: (key2) => {
@@ -36820,52 +36895,89 @@ const defaultContainerQueries = {
   })
 };
 function handleBreakpoints(props, propValue, styleFromPropValue) {
-  const theme = props.theme || {};
+  const result = {};
+  return iterateBreakpoints(result, props.theme, propValue, (mediaKey, value2, initialKey) => {
+    const finalValue = styleFromPropValue(value2, initialKey);
+    if (mediaKey) {
+      result[mediaKey] = finalValue;
+    } else {
+      fastDeepAssign(result, finalValue);
+    }
+  });
+}
+function iterateBreakpoints(target2, theme, propValue, callback) {
+  theme ??= EMPTY_THEME$2;
   if (Array.isArray(propValue)) {
-    const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
-    return propValue.reduce((acc, item, index2) => {
-      acc[themeBreakpoints.up(themeBreakpoints.keys[index2])] = styleFromPropValue(propValue[index2]);
-      return acc;
-    }, {});
+    const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+    for (let i = 0; i < propValue.length; i += 1) {
+      buildBreakpoint(target2, breakpoints.up(breakpoints.keys[i]), propValue[i], void 0, callback);
+    }
+    return target2;
   }
   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$3;
+    for (const key2 in propValue) {
+      if (isCqShorthand(breakpoints.keys, key2)) {
+        const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, key2);
         if (containerKey) {
-          acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+          buildBreakpoint(target2, containerKey, propValue[key2], key2, callback);
         }
-      } else if (Object.keys(themeBreakpoints.values || values$3).includes(breakpoint)) {
-        const mediaKey = themeBreakpoints.up(breakpoint);
-        acc[mediaKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
+      } else if (key2 in breakpointValues) {
+        const mediaKey = breakpoints.up(key2);
+        buildBreakpoint(target2, mediaKey, propValue[key2], key2, callback);
       } else {
-        const cssKey = breakpoint;
-        acc[cssKey] = propValue[cssKey];
+        const cssKey = key2;
+        target2[cssKey] = propValue[cssKey];
       }
-      return acc;
-    }, {});
+    }
+    return target2;
   }
-  const output2 = styleFromPropValue(propValue);
-  return output2;
+  callback(void 0, propValue);
+  return target2;
 }
-function createEmptyBreakpointObject(breakpointsInput = {}) {
-  const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key2) => {
-    const breakpointStyleKey = breakpointsInput.up(key2);
-    acc[breakpointStyleKey] = {};
-    return acc;
-  }, {});
-  return breakpointsInOrder || {};
+function buildBreakpoint(target2, mediaKey, value2, initialKey, callback) {
+  target2[mediaKey] ??= {};
+  callback(mediaKey, value2, 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, key2) => {
-    const breakpointOutput = acc[key2];
-    const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
-    if (isBreakpointUnused) {
-      delete acc[key2];
+function removeUnusedBreakpoints(breakpoints, style2) {
+  const breakpointKeys = breakpoints.internal_mediaKeys;
+  for (let i = 0; i < breakpointKeys.length; i += 1) {
+    const key2 = breakpointKeys[i];
+    if (isObjectEmpty$1(style2[key2])) {
+      delete style2[key2];
     }
-    return acc;
-  }, style2);
+  }
+  return style2;
+}
+function hasBreakpoint(breakpoints, value2) {
+  if (Array.isArray(value2)) {
+    return true;
+  }
+  if (typeof value2 === "object" && value2 !== null) {
+    for (let i = 0; i < breakpoints.keys.length; i += 1) {
+      if (breakpoints.keys[i] in value2) {
+        return true;
+      }
+    }
+    const valueKeys = Object.keys(value2);
+    for (let i = 0; i < valueKeys.length; i += 1) {
+      if (isCqShorthand(breakpoints.keys, valueKeys[i])) {
+        return true;
+      }
+    }
+  }
+  return false;
 }
 function capitalize$1(string2) {
   if (typeof string2 !== "string") {
@@ -36873,37 +36985,54 @@ function capitalize$1(string2) {
   }
   return string2.charAt(0).toUpperCase() + string2.slice(1);
 }
-function getPath(obj, path2, checkVars = true) {
-  if (!path2 || typeof path2 !== "string") {
-    return null;
-  }
-  if (obj && obj.vars && checkVars) {
-    const val = `vars.${path2}`.split(".").reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
-    if (val != null) {
-      return val;
-    }
-  }
-  return path2.split(".").reduce((acc, item) => {
-    if (acc && acc[item] != null) {
-      return acc[item];
-    }
-    return null;
-  }, obj);
-}
-function getStyleValue(themeMapping, transform2, propValueFinal, userValue = propValueFinal) {
+function getStyleValue2(themeMapping, transform2, userValue, alternateProp) {
   let value2;
   if (typeof themeMapping === "function") {
-    value2 = themeMapping(propValueFinal);
+    value2 = themeMapping(userValue);
   } else if (Array.isArray(themeMapping)) {
-    value2 = themeMapping[propValueFinal] || userValue;
+    value2 = themeMapping[userValue] || userValue;
+  } else if (typeof userValue === "string") {
+    value2 = getPath(themeMapping, userValue, true, alternateProp) || userValue;
   } else {
-    value2 = getPath(themeMapping, propValueFinal) || userValue;
+    value2 = userValue;
   }
   if (transform2) {
     value2 = transform2(value2, userValue, themeMapping);
   }
   return value2;
 }
+function getPath(obj, pathInput, checkVars = true, alternateProp = void 0) {
+  if (!obj || !pathInput) {
+    return null;
+  }
+  const path2 = pathInput.split(".");
+  if (obj.vars && checkVars) {
+    const val = getPathImpl(obj.vars, path2, alternateProp);
+    if (val != null) {
+      return val;
+    }
+  }
+  return getPathImpl(obj, path2, alternateProp);
+}
+function getPathImpl(object2, path2, alternateProp = void 0) {
+  let lastResult = void 0;
+  let result = object2;
+  let index2 = 0;
+  while (index2 < path2.length) {
+    if (result === null || result === void 0) {
+      return result;
+    }
+    lastResult = result;
+    result = result[path2[index2]];
+    index2 += 1;
+  }
+  if (alternateProp && result === void 0) {
+    const lastKey = path2[path2.length - 1];
+    const alternateKey = `${alternateProp}${lastKey === "default" ? "" : capitalize$1(lastKey)}`;
+    return lastResult?.[alternateKey];
+  }
+  return result;
+}
 function style$1(options) {
   const {
     prop,
@@ -36918,15 +37047,9 @@ function style$1(options) {
     const propValue = props[prop];
     const theme = props.theme;
     const themeMapping = getPath(theme, themeKey) || {};
-    const styleFromPropValue = (propValueFinal) => {
-      let value2 = getStyleValue(themeMapping, transform2, propValueFinal);
-      if (propValueFinal === value2 && typeof propValueFinal === "string") {
-        value2 = getStyleValue(themeMapping, transform2, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value2;
-      }
-      return {
+    const styleFromPropValue = (valueFinal) => {
+      const value2 = getStyleValue2(themeMapping, transform2, valueFinal, prop);
+      return cssProperty === false ? value2 : {
         [cssProperty]: value2
       };
     };
@@ -36938,15 +37061,9 @@ function style$1(options) {
   fn.filterProps = [prop];
   return fn;
 }
-function memoize(fn) {
-  const cache2 = {};
-  return (arg2) => {
-    if (cache2[arg2] === void 0) {
-      cache2[arg2] = fn(arg2);
-    }
-    return cache2[arg2];
-  };
-}
+const EMPTY_THEME$1 = {
+  internal_cache: {}
+};
 const properties = {
   m: "margin",
   p: "padding"
@@ -36965,22 +37082,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 key2 in properties) {
+  CSS_PROPERTIES[key2] = [properties[key2]];
+}
+for (const keyProperty in properties) {
+  for (const keyDirection in directions) {
+    const property2 = properties[keyProperty];
+    const direction = directions[keyDirection];
+    const value2 = Array.isArray(direction) ? direction.map((dir) => property2 + dir) : [property2 + direction];
+    CSS_PROPERTIES[keyProperty + keyDirection] = value2;
   }
-  const [a2, b2] = prop.split("");
-  const property2 = properties[a2];
-  const direction = directions[b2] || "";
-  return Array.isArray(direction) ? direction.map((dir) => property2 + dir) : [property2 + 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 key2 in aliases) {
+  CSS_PROPERTIES[key2] = CSS_PROPERTIES[aliases[key2]];
+}
+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") {
@@ -37048,42 +37167,45 @@ function getValue$1(transformer2, propValue) {
   }
   return transformer2(propValue);
 }
-function getStyleFromPropValue(cssProperties, transformer2) {
-  return (propValue) => cssProperties.reduce((acc, cssProperty) => {
-    acc[cssProperty] = getValue$1(transformer2, propValue);
-    return acc;
-  }, {});
-}
-function resolveCssProperty(props, keys2, prop, transformer2) {
-  if (!keys2.includes(prop)) {
-    return null;
-  }
-  const cssProperties = getCssProperties(prop);
-  const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer2);
-  const propValue = props[prop];
-  return handleBreakpoints(props, propValue, styleFromPropValue);
-}
+const container = [""];
 function style(props, keys2) {
-  const transformer2 = createUnarySpacing(props.theme);
-  return Object.keys(props).map((prop) => resolveCssProperty(props, keys2, prop, transformer2)).reduce(merge, {});
+  const theme = props.theme ?? EMPTY_THEME$1;
+  const transformer2 = 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, value2) => {
+      const target2 = mediaKey ? result[mediaKey] : result;
+      for (let i = 0; i < cssProperties.length; i += 1) {
+        target2[cssProperties[i]] = getValue$1(transformer2, value2);
+      }
+    });
+  }
+  return result;
 }
-function margin(props) {
+function marginFn(props) {
   return style(props, marginKeys);
 }
-margin.propTypes = marginKeys.reduce((obj, key2) => {
+marginFn.propTypes = Array.from(marginKeys).reduce((obj, key2) => {
   obj[key2] = responsivePropType;
   return obj;
 }, {});
-margin.filterProps = marginKeys;
-function padding$1(props) {
+marginFn.filterProps = marginKeys;
+const margin = marginFn;
+function paddingFn(props) {
   return style(props, paddingKeys);
 }
-padding$1.propTypes = paddingKeys.reduce((obj, key2) => {
+paddingFn.propTypes = Array.from(paddingKeys).reduce((obj, key2) => {
   obj[key2] = responsivePropType;
   return obj;
 }, {});
-padding$1.filterProps = paddingKeys;
-spacingKeys.reduce((obj, key2) => {
+paddingFn.filterProps = paddingKeys;
+const padding$1 = paddingFn;
+Array.from(spacingKeys).reduce((obj, key2) => {
   obj[key2] = responsivePropType;
   return obj;
 }, {});
@@ -37116,12 +37238,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), []);
@@ -37260,6 +37383,7 @@ const backgroundColor$3 = style$1({
   transform: paletteTransform
 });
 compose(color$1, bgcolor, backgroundColor$3);
+const breakpointsValues = values$3;
 function sizingTransform(value2) {
   return value2 <= 1 && value2 !== 0 ? `${value2 * 100}%` : value2;
 }
@@ -37270,7 +37394,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$3[propValue];
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue];
       if (!breakpoint) {
         return {
           maxWidth: sizingTransform(propValue)
@@ -37608,68 +37732,24 @@ const defaultSxConfig = {
     themeKey: "typography"
   }
 };
-function objectsHaveSameKeys(...objects) {
-  const allKeys = objects.reduce((keys2, object2) => keys2.concat(Object.keys(object2)), []);
-  const union2 = new Set(allKeys);
-  return objects.every((object2) => union2.size === Object.keys(object2).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: transform2,
-      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 value2 = getStyleValue(themeMapping, transform2, propValueFinal);
-      if (propValueFinal === value2 && typeof propValueFinal === "string") {
-        value2 = getStyleValue(themeMapping, transform2, `${prop}${propValueFinal === "default" ? "" : capitalize$1(propValueFinal)}`, propValueFinal);
-      }
-      if (cssProperty === false) {
-        return value2;
-      }
-      return {
-        [cssProperty]: value2
-      };
-    };
-    return handleBreakpoints(props, val, styleFromPropValue);
-  }
-  function styleFunctionSx2(props) {
     const {
       sx,
-      theme = {}
-    } = props || {};
-    if (!sx) {
-      return null;
-    }
+      theme = EMPTY_THEME,
+      nested: nested2
+    } = props;
     const config = theme.unstable_sxConfig ?? defaultSxConfig;
-    function traverse(sxInput) {
+    const wrapper2 = {
+      sx: null,
+      theme,
+      nested: true
+    };
+    function process2(sxInput) {
       let sxObject = sxInput;
       if (typeof sxInput === "function") {
         sxObject = sxInput(theme);
@@ -37679,43 +37759,94 @@ function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-      const breakpointsKeys = Object.keys(emptyBreakpoints);
-      let css2 = emptyBreakpoints;
-      Object.keys(sxObject).forEach((styleKey) => {
+      const breakpoints = theme.breakpoints ?? DEFAULT_BREAKPOINTS;
+      const css2 = createEmptyBreakpointObject(breakpoints);
+      for (const styleKey in sxObject) {
         const value2 = callIfFn(sxObject[styleKey], theme);
-        if (value2 !== null && value2 !== void 0) {
-          if (typeof value2 === "object") {
-            if (config[styleKey]) {
-              css2 = merge(css2, getThemeValue(styleKey, value2, theme, config));
-            } else {
-              const breakpointsValues = handleBreakpoints({
-                theme
-              }, value2, (x2) => ({
-                [styleKey]: x2
-              }));
-              if (objectsHaveSameKeys(breakpointsValues, value2)) {
-                css2[styleKey] = styleFunctionSx2({
-                  sx: value2,
-                  theme
-                });
-              } else {
-                css2 = merge(css2, breakpointsValues);
-              }
-            }
-          } else {
-            css2 = merge(css2, getThemeValue(styleKey, value2, theme, config));
-          }
+        if (value2 === null || value2 === void 0) {
+          continue;
         }
-      });
-      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css2));
+        if (typeof value2 !== "object") {
+          setThemeValue(css2, styleKey, value2, theme, config);
+          continue;
+        }
+        if (config[styleKey]) {
+          setThemeValue(css2, styleKey, value2, theme, config);
+          continue;
+        }
+        if (hasBreakpoint(breakpoints, value2)) {
+          iterateBreakpoints(css2, props.theme, value2, (mediaKey, finalValue) => {
+            css2[mediaKey][styleKey] = finalValue;
+          });
+        } else {
+          wrapper2.sx = value2;
+          css2[styleKey] = styleFunctionSx2(wrapper2);
+        }
+      }
+      if (!nested2 && theme.modularCssLayers) {
+        return {
+          "@layer sx": sortContainerQueries(theme, removeUnusedBreakpoints(breakpoints, css2))
+        };
+      }
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpoints, css2));
     }
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+    return Array.isArray(sx) ? sx.map(process2) : process2(sx);
   }
+  styleFunctionSx2.filterProps = ["sx"];
   return styleFunctionSx2;
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
-styleFunctionSx.filterProps = ["sx"];
+function setThemeValue(css2, prop, value2, theme, config) {
+  const options = config[prop];
+  if (!options) {
+    css2[prop] = value2;
+    return;
+  }
+  if (value2 == null) {
+    return;
+  }
+  const {
+    themeKey
+  } = options;
+  if (themeKey === "typography" && value2 === "inherit") {
+    css2[prop] = value2;
+    return;
+  }
+  const {
+    style: style2
+  } = options;
+  if (style2) {
+    fastDeepAssign(css2, style2({
+      [prop]: value2,
+      theme
+    }));
+    return;
+  }
+  const {
+    cssProperty = prop,
+    transform: transform2
+  } = options;
+  const themeMapping = getPath(theme, themeKey);
+  iterateBreakpoints(css2, theme, value2, (mediaKey, valueFinal) => {
+    const finalValue = getStyleValue2(themeMapping, transform2, valueFinal, prop);
+    if (cssProperty === false) {
+      if (mediaKey) {
+        fastDeepAssign(css2[mediaKey], finalValue);
+      } else {
+        fastDeepAssign(css2, finalValue);
+      }
+    } else {
+      if (mediaKey) {
+        css2[mediaKey][cssProperty] = finalValue;
+      } else {
+        css2[cssProperty] = finalValue;
+      }
+    }
+  });
+}
+function callIfFn(maybeFn, arg2) {
+  return typeof maybeFn === "function" ? maybeFn(arg2) : maybeFn;
+}
 function applyStyles(key2, styles) {
   const theme = this;
   if (theme.vars) {
@@ -37776,67 +37907,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$1.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 = () => {
@@ -37947,6 +38030,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;
@@ -37954,32 +38043,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];
@@ -38005,9 +38094,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;
@@ -38034,6 +38123,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
@@ -38054,18 +38144,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;
@@ -38084,7 +38177,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);
         });
@@ -38096,7 +38189,7 @@ function createStyled2(input = {}) {
           if (!themeVariants) {
             return null;
           }
-          return processStyleVariants(props, themeVariants);
+          return processStyleVariants(props, themeVariants, [], props.theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
@@ -38145,12 +38238,6 @@ function generateStyledLabel(componentName, componentSlot) {
   }
   return label2;
 }
-function isObjectEmpty(object2) {
-  for (const _ in object2) {
-    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
@@ -38163,7 +38250,7 @@ function lowercaseFirstLetter(string2) {
   }
   return string2.charAt(0).toLowerCase() + string2.slice(1);
 }
-function resolveProps(defaultProps, props) {
+function resolveProps(defaultProps, props, mergeClassNameAndStyle = false) {
   const output2 = {
     ...props
   };
@@ -38189,10 +38276,23 @@ function resolveProps(defaultProps, props) {
           for (const slotKey in defaultSlotProps) {
             if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
               const slotPropName = slotKey;
-              output2[propName][slotPropName] = resolveProps(defaultSlotProps[slotPropName], slotProps[slotPropName]);
+              const defaultSlotPropValue = defaultSlotProps[slotPropName];
+              const slotPropValue = slotProps[slotPropName];
+              if (typeof defaultSlotPropValue === "function" || typeof slotPropValue === "function") {
+                output2[propName][slotPropName] = (...args) => resolveProps((typeof defaultSlotPropValue === "function" ? defaultSlotPropValue(...args) : defaultSlotPropValue) ?? {}, (typeof slotPropValue === "function" ? slotPropValue(...args) : slotPropValue) ?? {}, mergeClassNameAndStyle);
+              } else {
+                output2[propName][slotPropName] = resolveProps(defaultSlotPropValue ?? {}, slotPropValue ?? {}, mergeClassNameAndStyle);
+              }
             }
           }
         }
+      } else if (propName === "className" && mergeClassNameAndStyle && props.className !== void 0) {
+        output2.className = clsx(defaultProps?.className, props?.className);
+      } else if (propName === "style" && mergeClassNameAndStyle && props.style) {
+        output2.style = {
+          ...defaultProps?.style,
+          ...props?.style
+        };
       } else if (output2[propName] === void 0) {
         output2[propName] = defaultProps[propName];
       }
@@ -38352,6 +38452,9 @@ function private_safeAlpha(color2, value2, warning) {
   try {
     return alpha(color2, value2);
   } catch (error2) {
+    if (warning && true) {
+      console.warn(warning);
+    }
     return color2;
   }
 }
@@ -38371,6 +38474,9 @@ function private_safeDarken(color2, coefficient, warning) {
   try {
     return darken(color2, coefficient);
   } catch (error2) {
+    if (warning && true) {
+      console.warn(warning);
+    }
     return color2;
   }
 }
@@ -38394,6 +38500,9 @@ function private_safeLighten(color2, coefficient, warning) {
   try {
     return lighten(color2, coefficient);
   } catch (error2) {
+    if (warning && true) {
+      console.warn(warning);
+    }
     return color2;
   }
 }
@@ -38446,10 +38555,10 @@ function getThemeProps(params2) {
   }
   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;
 }
@@ -38499,9 +38608,14 @@ function createGetCssVar$1(prefix2 = "") {
   };
   return getCssVar;
 }
+const prototypePollutingKeys = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 const assignNestedKeys = (obj, keys2, value2, arrayKeys = []) => {
   let temp2 = obj;
-  keys2.forEach((k, index2) => {
+  for (let index2 = 0; index2 < keys2.length; index2 += 1) {
+    const k = keys2[index2];
+    if (prototypePollutingKeys.has(k)) {
+      break;
+    }
     if (index2 === keys2.length - 1) {
       if (Array.isArray(temp2)) {
         temp2[Number(k)] = value2;
@@ -38514,7 +38628,7 @@ const assignNestedKeys = (obj, keys2, value2, arrayKeys = []) => {
       }
       temp2 = temp2[k];
     }
-  });
+  }
 };
 const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse2(object2, parentKeys = [], arrayKeys = []) {
@@ -38581,7 +38695,8 @@ function prepareCssVars(theme, parserConfig = {}) {
   const {
     getSelector = defaultGetSelector2,
     disableCssColorScheme,
-    colorSchemeSelector: selector
+    colorSchemeSelector: selector,
+    enableContrastVars
   } = parserConfig;
   const {
     colorSchemes: colorSchemes2 = {},
@@ -38715,6 +38830,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 {
@@ -38915,6 +39041,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 {
@@ -39000,11 +39139,15 @@ function getDefaultWarning(mode = "light") {
     dark: orange[900]
   };
 }
+function contrastColor(background2) {
+  return `oklch(from ${background2} 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);
@@ -39014,6 +39157,9 @@ function createPalette(palette) {
   const success = palette.success || getDefaultSuccess(mode);
   const warning = palette.warning || getDefaultWarning(mode);
   function getContrastText(background2) {
+    if (colorSpace) {
+      return contrastColor(background2);
+    }
     const contrastText = getContrastRatio(background2, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
     {
       const contrast2 = getContrastRatio(background2, contrastText);
@@ -39056,8 +39202,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);
     }
@@ -39133,6 +39284,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 entries2 = Object.entries(typography);
@@ -39254,6 +39443,8 @@ function createShadow(...px2) {
   return [`${px2[0]}px ${px2[1]}px ${px2[2]}px ${px2[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px2[4]}px ${px2[5]}px ${px2[6]}px ${px2[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px2[8]}px ${px2[9]}px ${px2[10]}px ${px2[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)",
@@ -39289,15 +39480,19 @@ function getAutoHeightDuration(height2) {
   return Math.min(Math.round((4 + 15 * constant2 ** 0.25 + constant2 / 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 create2 = (props = ["all"], options = {}) => {
+  const createTransitionValue = (props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) => {
     const {
       duration: durationOption = mergedDuration.standard,
       easing: easingOption = mergedEasing.easeInOut,
@@ -39328,14 +39523,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 create2 = transitions.create ?? createTransitionValue;
   return {
     getAutoHeightDuration,
     create: create2,
-    ...inputTransitions,
+    ...transitions,
     easing: mergedEasing,
     duration: mergedDuration
   };
 }
+const EMPTY_MOTION = {};
+function createMotion(inputMotion = EMPTY_MOTION) {
+  return {
+    reducedMotion: "never",
+    ...inputMotion
+  };
+}
 const zIndex = {
   mobileStepper: 1e3,
   fab: 1050,
@@ -39357,7 +39560,7 @@ function stringifyTheme(baseTheme = {}) {
     const array2 = Object.entries(object2);
     for (let index2 = 0; index2 < array2.length; index2++) {
       const [key2, value2] = array2[index2];
-      if (!isSerializable(value2) || key2.startsWith("unstable_")) {
+      if (!isSerializable(value2) || key2.startsWith("unstable_") || key2.startsWith("internal_")) {
         delete object2[key2];
       } else if (isPlainObject(value2)) {
         object2[key2] = {
@@ -39373,19 +39576,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 numbers2 = str.match(/\d*\.?\d+/g);
+  if (!numbers2) {
+    return 0;
+  }
+  let sum2 = 0;
+  for (let i = 0; i < numbers2.length; i += 1) {
+    sum2 += +numbers2[i];
+  }
+  return sum2;
+};
+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`.
@@ -39393,7 +39647,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),
@@ -39401,6 +39658,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
@@ -39408,6 +39666,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) => {
@@ -39445,6 +39707,7 @@ function createThemeNoVars(options = {}, ...args) {
     });
   };
   muiTheme.toRuntimeSource = stringifyTheme;
+  attachColorManipulators(muiTheme);
   return muiTheme;
 }
 function getOverlayAlpha(elevation) {
@@ -39482,9 +39745,13 @@ function createColorScheme(options) {
     // need to cast to avoid module augmentation test
     opacity: opacity2,
     overlays,
-    ...rest
+    colorSpace,
+    ...other
   } = options;
-  const palette = createPalette(paletteInput);
+  const palette = createPalette({
+    ...paletteInput,
+    colorSpace
+  });
   return {
     palette,
     opacity: {
@@ -39492,11 +39759,14 @@ function createColorScheme(options) {
       ...opacity2
     },
     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((_, index2) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}overlays-${index2}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ""}palette-AppBar-darkColor`];
@@ -39599,7 +39869,7 @@ const silent = (fn) => {
   return void 0;
 };
 const createGetCssVar = (cssVarPrefix = "mui") => createGetCssVar$1(cssVarPrefix);
-function attachColorScheme$1(colorSchemes2, scheme2, restTheme, colorScheme) {
+function attachColorScheme$1(colorSpace, colorSchemes2, scheme2, restTheme, colorScheme) {
   if (!scheme2) {
     return void 0;
   }
@@ -39611,7 +39881,8 @@ function attachColorScheme$1(colorSchemes2, scheme2, restTheme, colorScheme) {
       palette: {
         mode,
         ...scheme2?.palette
-      }
+      },
+      colorSpace
     });
     return void 0;
   }
@@ -39623,7 +39894,8 @@ function attachColorScheme$1(colorSchemes2, scheme2, restTheme, colorScheme) {
     palette: {
       mode,
       ...scheme2?.palette
-    }
+    },
+    colorSpace
   });
   colorSchemes2[colorScheme] = {
     ...scheme2,
@@ -39644,6 +39916,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",
@@ -39668,12 +39941,16 @@ function createThemeWithVars(options = {}, ...args) {
   if (!defaultScheme) {
     throw new Error(`MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.`);
   }
-  const muiTheme = attachColorScheme$1(colorSchemes2, defaultScheme, input, defaultColorScheme);
+  let colorSpace;
+  if (nativeColor) {
+    colorSpace = "oklch";
+  }
+  const muiTheme = attachColorScheme$1(colorSpace, colorSchemes2, defaultScheme, input, defaultColorScheme);
   if (builtInLight && !colorSchemes2.light) {
-    attachColorScheme$1(colorSchemes2, builtInLight, void 0, "light");
+    attachColorScheme$1(colorSpace, colorSchemes2, builtInLight, void 0, "light");
   }
   if (builtInDark && !colorSchemes2.dark) {
-    attachColorScheme$1(colorSchemes2, builtInDark, void 0, "dark");
+    attachColorScheme$1(colorSpace, colorSchemes2, builtInDark, void 0, "dark");
   }
   let theme = {
     defaultColorScheme,
@@ -39705,12 +39982,28 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.common, "background", "#000");
       setColor(palette.common, "onBackground", "#fff");
     }
+    function colorMix(method2, color2, coefficient) {
+      if (colorSpace) {
+        let mixer;
+        if (method2 === private_safeAlpha) {
+          mixer = `transparent ${((1 - coefficient) * 100).toFixed(0)}%`;
+        }
+        if (method2 === private_safeDarken) {
+          mixer = `#000 ${(coefficient * 100).toFixed(0)}%`;
+        }
+        if (method2 === private_safeLighten) {
+          mixer = `#fff ${(coefficient * 100).toFixed(0)}%`;
+        }
+        return `color-mix(in ${colorSpace}, ${color2}, ${mixer})`;
+      }
+      return method2(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"));
@@ -39719,10 +40012,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"));
@@ -39737,41 +40030,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"));
@@ -39780,10 +40073,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"));
@@ -39800,44 +40093,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 colors2 = palette[color2];
-      if (color2 !== "tonalOffset" && colors2 && typeof colors2 === "object") {
+      if (color2 !== "tonalOffset" && !nativeColor && colors2 && typeof colors2 === "object") {
         if (colors2.main) {
           setColor(palette[color2], "mainChannel", private_safeColorChannel(toRgb(colors2.main)));
         }
@@ -39866,11 +40161,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,
@@ -39899,6 +40199,7 @@ function createThemeWithVars(options = {}, ...args) {
       theme: this
     });
   };
+  theme.internal_cache = {};
   theme.toRuntimeSource = stringifyTheme;
   return theme;
 }
@@ -39925,7 +40226,7 @@ function createTheme(options = {}, ...args) {
       light: true
     } : void 0,
     defaultColorScheme: initialDefaultColorScheme = palette?.mode,
-    ...rest
+    ...other
   } = options;
   const defaultColorSchemeInput = initialDefaultColorScheme || "light";
   const defaultScheme = initialColorSchemes?.[defaultColorSchemeInput];
@@ -39974,18 +40275,74 @@ 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((scheme2) => {
+        const schemePalette = theme.colorSchemes?.[scheme2]?.palette;
+        if (schemePalette?.primary) {
+          theme.colorSchemes[scheme2].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$1.useRef(void 0);
+  const refEffect = React$1.useCallback((instance) => {
+    const cleanups = refs.map((ref2) => {
+      if (ref2 == null) {
+        return null;
+      }
+      if (typeof ref2 === "function") {
+        const refCallback = ref2;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === "function" ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref2.current = instance;
+      return () => {
+        ref2.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach((refCleanup) => refCleanup?.());
+    };
+  }, refs);
+  return React$1.useMemo(() => {
+    if (refs.every((ref2) => ref2 == null)) {
+      return null;
+    }
+    return (value2) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = void 0;
+      }
+      if (value2 != null) {
+        cleanupRef.current = refEffect(value2);
+      }
+    };
+  }, refs);
+}
 const defaultTheme = createTheme();
 function useTheme() {
   const theme = useTheme$1(defaultTheme);
@@ -40003,20 +40360,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$1 = tss.create({});
-function internal_createExtendSxProp() {
-  return extendSxProp$1;
-}
 const memoTheme = unstable_memoTheme;
 ({
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -40035,6 +40378,17 @@ const memoTheme = unstable_memoTheme;
 function useDefaultProps(params2) {
   return useDefaultProps$1(params2);
 }
+const { makeStyles } = createMakeAndWithStyles({
+  useTheme
+});
+const { tss } = createTss({
+  "useContext": function useContext2() {
+    const theme = useTheme();
+    return { theme };
+  },
+  "usePlugin": useMuiThemeStyleOverridesPlugin
+});
+const useStyles$1 = tss.create({});
 function setRef$1(ref2, value2) {
   if (typeof ref2 === "function") {
     ref2(value2);
@@ -40042,56 +40396,6 @@ function setRef$1(ref2, value2) {
     ref2.current = value2;
   }
 }
-function useForkRef$1(...refs) {
-  const cleanupRef = React$1.useRef(void 0);
-  const refEffect = React$1.useCallback((instance) => {
-    const cleanups = refs.map((ref2) => {
-      if (ref2 == null) {
-        return null;
-      }
-      if (typeof ref2 === "function") {
-        const refCallback = ref2;
-        const refCleanup = refCallback(instance);
-        return typeof refCleanup === "function" ? refCleanup : () => {
-          refCallback(null);
-        };
-      }
-      ref2.current = instance;
-      return () => {
-        ref2.current = null;
-      };
-    });
-    return () => {
-      cleanups.forEach((refCleanup) => refCleanup?.());
-    };
-  }, refs);
-  return React$1.useMemo(() => {
-    if (refs.every((ref2) => ref2 == null)) {
-      return null;
-    }
-    return (value2) => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = void 0;
-      }
-      if (value2 != null) {
-        cleanupRef.current = refEffect(value2);
-      }
-    };
-  }, refs);
-}
-function _setPrototypeOf(t4, e3) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t5, e4) {
-    return t5.__proto__ = e4, t5;
-  }, _setPrototypeOf(t4, e3);
-}
-function _inheritsLoose(t4, o) {
-  t4.prototype = Object.create(o.prototype), t4.prototype.constructor = t4, _setPrototypeOf(t4, o);
-}
-function _assertThisInitialized(e3) {
-  if (void 0 === e3) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e3;
-}
 function hasCorrectMainProperty(obj) {
   return typeof obj.main === "string";
 }
@@ -40126,22 +40430,22 @@ function getReactElementRef(element2) {
   }
   return element2?.ref || null;
 }
-function getContainer(container) {
-  return typeof container === "function" ? container() : container;
+function getContainer(container2) {
+  return typeof container2 === "function" ? container2() : container2;
 }
 const Portal = /* @__PURE__ */ React$1.forwardRef(function Portal2(props, forwardedRef) {
   const {
     children: children2,
-    container,
+    container: container2,
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React$1.useState(null);
   const handleRef = useForkRef$1(/* @__PURE__ */ React$1.isValidElement(children2) ? getReactElementRef(children2) : 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);
@@ -40194,30 +40498,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: align2,
     gutterBottom,
     noWrap,
-    paragraph,
     variant,
     classes
   } = ownerState;
   const slots = {
-    root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize$1(align2)}`, gutterBottom && "gutterBottom", noWrap && "noWrap", paragraph && "paragraph"]
+    root: ["root", variant, ownerState.align !== "inherit" && `align${capitalize$1(align2)}`, gutterBottom && "gutterBottom", noWrap && "noWrap"]
   };
   return composeClasses(slots, getTypographyUtilityClass, classes);
 };
@@ -40228,7 +40519,7 @@ const TypographyRoot = styled("span", {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== "inherit" && styles[`align${capitalize$1(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$1(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom];
   }
 })(memoTheme(({
   theme
@@ -40286,13 +40577,6 @@ const TypographyRoot = styled("span", {
     style: {
       marginBottom: "0.35em"
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.paragraph,
-    style: {
-      marginBottom: 16
-    }
   }]
 })));
 const defaultVariantMapping = {
@@ -40309,27 +40593,17 @@ const defaultVariantMapping = {
   inherit: "p"
 };
 const Typography = /* @__PURE__ */ React$1.forwardRef(function Typography2(inProps, ref2) {
-  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: align2 = "inherit",
     className,
     component,
     gutterBottom = false,
     noWrap = false,
-    paragraph = false,
     variant = "body1",
     variantMapping = defaultVariantMapping,
     ...other
@@ -40342,11 +40616,10 @@ const Typography = /* @__PURE__ */ React$1.forwardRef(function Typography2(inPro
     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$1(TypographyRoot, {
     as: Component,
@@ -40408,12 +40681,6 @@ Typography.propTypes = {
    * @default false
    */
   noWrap: _pt.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: _pt.bool,
   /**
    * @ignore
    */
@@ -42043,7 +42310,7 @@ function getAnchorEl(anchorEl) {
 const useEnhancedEffect = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
 const defaultPopperOptions = {};
 React$1.forwardRef((props, ref2) => {
-  const { anchorEl, children: children2, container, disablePortal = false, keepMounted = false, modifiers: modifiers2, open, placement: initialPlacement = "bottom", popperOptions = defaultPopperOptions, popperRef: popperRefProp, style: style2, transition = false, ...other } = props;
+  const { anchorEl, children: children2, 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$1.useRef(null);
   const ownRef = useForkRef(tooltipRef, ref2);
   const popperRef = React$1.useRef(null);
@@ -42140,7 +42407,7 @@ React$1.forwardRef((props, ref2) => {
       onExited: handleExited
     };
   }
-  return jsx$1(Portal, { disablePortal, container, children: jsx$1("div", { ref: handleRef, role: "tooltip", ...other, style: {
+  return jsx$1(Portal, { disablePortal, container: container2, children: jsx$1("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
@@ -42150,6 +42417,18 @@ React$1.forwardRef((props, ref2) => {
     ...style2
   }, children: typeof children2 === "function" ? children2(childProps) : children2 }) });
 });
+function _assertThisInitialized(e3) {
+  if (void 0 === e3) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e3;
+}
+function _setPrototypeOf(t4, e3) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t5, e4) {
+    return t5.__proto__ = e4, t5;
+  }, _setPrototypeOf(t4, e3);
+}
+function _inheritsLoose(t4, o) {
+  t4.prototype = Object.create(o.prototype), t4.prototype.constructor = t4, _setPrototypeOf(t4, o);
+}
 var safeIsNaN = Number.isNaN || function ponyfill(value2) {
   return typeof value2 === "number" && value2 !== value2;
 };
@@ -51765,6 +52044,7 @@ const CoordinationType$1 = {
   SPATIAL_ROTATION_ORBIT: "spatialRotationOrbit",
   SPATIAL_ORBIT_AXIS: "spatialOrbitAxis",
   SPATIAL_AXIS_FIXED: "spatialAxisFixed",
+  SPATIAL_CAMERA_SNAPSHOT: "spatialCameraSnapshot",
   HEATMAP_ZOOM_X: "heatmapZoomX",
   HEATMAP_ZOOM_Y: "heatmapZoomY",
   HEATMAP_TARGET_X: "heatmapTargetX",
@@ -51816,6 +52096,7 @@ const CoordinationType$1 = {
   SPATIAL_TARGET_C: "spatialTargetC",
   SPATIAL_LAYER_VISIBLE: "spatialLayerVisible",
   SPATIAL_LAYER_OPACITY: "spatialLayerOpacity",
+  SPATIAL_LAYER_OPACITY_UNSELECTED: "spatialLayerOpacityUnselected",
   SPATIAL_LAYER_COLORMAP: "spatialLayerColormap",
   SPATIAL_LAYER_LABEL: "spatialLayerLabel",
   SPATIAL_LAYER_TRANSPARENT_COLOR: "spatialLayerTransparentColor",
@@ -52181,6 +52462,7 @@ const CoordinationType$1 = {
     CoordinationType$1.SPATIAL_ROTATION_ORBIT,
     CoordinationType$1.SPATIAL_ORBIT_AXIS,
     CoordinationType$1.SPATIAL_ZOOM,
+    CoordinationType$1.SPATIAL_CAMERA_SNAPSHOT,
     CoordinationType$1.OBS_FILTER,
     CoordinationType$1.OBS_HIGHLIGHT,
     CoordinationType$1.OBS_SET_SELECTION,
@@ -52206,6 +52488,7 @@ const CoordinationType$1 = {
     CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
     CoordinationType$1.SPATIAL_LAYER_COLOR,
     CoordinationType$1.SPATIAL_LAYER_OPACITY,
+    CoordinationType$1.SPATIAL_LAYER_OPACITY_UNSELECTED,
     CoordinationType$1.SPATIAL_LAYER_VISIBLE,
     CoordinationType$1.SPATIAL_LAYER_LABEL,
     CoordinationType$1.SPATIAL_CHANNEL_COLOR,
@@ -52410,6 +52693,7 @@ const CoordinationType$1 = {
     CoordinationType$1.SPATIAL_ROTATION_ORBIT,
     CoordinationType$1.SPATIAL_ORBIT_AXIS,
     CoordinationType$1.SPATIAL_AXIS_FIXED,
+    CoordinationType$1.SPATIAL_CAMERA_SNAPSHOT,
     CoordinationType$1.OBS_FILTER,
     CoordinationType$1.OBS_HIGHLIGHT,
     CoordinationType$1.OBS_SET_SELECTION,
@@ -52431,6 +52715,7 @@ const CoordinationType$1 = {
     CoordinationType$1.SPATIAL_TARGET_C,
     CoordinationType$1.SPATIAL_LAYER_VISIBLE,
     CoordinationType$1.SPATIAL_LAYER_OPACITY,
+    CoordinationType$1.SPATIAL_LAYER_OPACITY_UNSELECTED,
     CoordinationType$1.SPATIAL_LAYER_COLORMAP,
     CoordinationType$1.SPATIAL_LAYER_TRANSPARENT_COLOR,
     CoordinationType$1.SPATIAL_LAYER_MODEL_MATRIX,
@@ -52626,6 +52911,7 @@ const CoordinationType$1 = {
     CoordinationType$1.SPATIAL_LAYER_VISIBLE,
     CoordinationType$1.SPATIAL_LAYER_LABEL,
     CoordinationType$1.SPATIAL_LAYER_OPACITY,
+    CoordinationType$1.SPATIAL_LAYER_OPACITY_UNSELECTED,
     CoordinationType$1.SPATIAL_LAYER_COLORMAP,
     CoordinationType$1.SPATIAL_LAYER_TRANSPARENT_COLOR,
     CoordinationType$1.SPATIAL_LAYER_MODEL_MATRIX,
@@ -75527,7 +75813,7 @@ function _embed(_x5, _x6) {
 function _embed3() {
   _embed3 = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime.mark(function _callee4(el, spec) {
     var _opts$config, _opts$actions, _opts$renderer, _opts$logLevel, _opts$downloadFileNam, _ref, _expressionInterprete;
-    var opts2, loader2, config, actions, i18n, renderer, logLevel, downloadFileName, element2, ID, _getRoot, root2, rootContainer, style2, mode, vgSpec, parsed, container, chartWrapper, patch2, name, expressionFunction2, ast, runtime2, view, handler, hover2, _ref2, hoverSet, updateSet, documentClickHandler, wrapper2, details, summary, ctrl, _iterator, _step, _loop, viewSourceLink, compileLink, _opts$editorUrl, editorUrl, editorLink, finalize2, _args4 = arguments;
+    var opts2, loader2, config, actions, i18n, renderer, logLevel, downloadFileName, element2, ID, _getRoot, root2, rootContainer, style2, mode, vgSpec, parsed, container2, chartWrapper, patch2, name, expressionFunction2, ast, runtime2, view, handler, hover2, _ref2, hoverSet, updateSet, documentClickHandler, wrapper2, details, summary, ctrl, _iterator, _step, _loop, viewSourceLink, compileLink, _opts$editorUrl, editorUrl, editorLink, finalize2, _args4 = arguments;
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
@@ -75578,12 +75864,12 @@ function _embed3() {
               element2.classList.add("has-actions");
             }
             element2.innerHTML = "";
-            container = element2;
+            container2 = element2;
             if (actions) {
               chartWrapper = document.createElement("div");
               chartWrapper.classList.add(CHART_WRAPPER_CLASS);
               element2.appendChild(chartWrapper);
-              container = chartWrapper;
+              container2 = chartWrapper;
             }
             patch2 = opts2.patch;
             if (patch2) {
@@ -75619,15 +75905,15 @@ function _embed3() {
             view.addSignalListener("autosize", (_, autosize) => {
               var type2 = autosize.type;
               if (type2 == "fit-x") {
-                container.classList.add("fit-x");
-                container.classList.remove("fit-y");
+                container2.classList.add("fit-x");
+                container2.classList.remove("fit-y");
               } else if (type2 == "fit-y") {
-                container.classList.remove("fit-x");
-                container.classList.add("fit-y");
+                container2.classList.remove("fit-x");
+                container2.classList.add("fit-y");
               } else if (type2 == "fit") {
-                container.classList.add("fit-x", "fit-y");
+                container2.classList.add("fit-x", "fit-y");
               } else {
-                container.classList.remove("fit-x", "fit-y");
+                container2.classList.remove("fit-x", "fit-y");
               }
             });
             if (opts2.tooltip !== false) {
@@ -75657,7 +75943,7 @@ function _embed3() {
               }
             }
             _context4.next = 37;
-            return view.initialize(container, opts2.bind).runAsync();
+            return view.initialize(container2, opts2.bind).runAsync();
           case 37:
             if (actions !== false) {
               wrapper2 = element2;