impact-ui 5.0.0-alpha.1 → 5.0.0-beta.2

package/dist/node_modules/@mui/system/esm/Stack/createStack.js

@@ -9,9 +9,9 @@ import { createUnarySpacing, getValue } from "../spacing.js";
 import { jsx } from "react/jsx-runtime";
 import extendSxProp from "../styleFunctionSx/extendSxProp.js";
 import useThemeProps from "../useThemeProps/useThemeProps.js";
-import deepmerge from "../../../utils/deepmerge/deepmerge.js";
-import composeClasses from "../../../utils/composeClasses/composeClasses.js";
-import generateUtilityClass from "../../../utils/generateUtilityClass/generateUtilityClass.js";
+import deepmerge from "../../node_modules/@mui/utils/esm/deepmerge/deepmerge.js";
+import composeClasses from "../../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
+import generateUtilityClass from "../../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
 import createTheme from "../createTheme/createTheme.js";
 const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
 const defaultTheme = createTheme();

package/dist/node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from "react";
+import PropTypes from "../../../../prop-types/index.js";
+import useTheme from "../useThemeWithoutDefault.js";
+import RtlProvider from "../RtlProvider/index.js";
+import useLayerOrder from "./useLayerOrder.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useTheme$1 from "../../../private-theming/useTheme/useTheme.js";
+import ThemeProvider$1 from "../../../private-theming/ThemeProvider/ThemeProvider.js";
+import { T as ThemeContext } from "../../../../@emotion/react/dist/emotion-element-f0de968e.browser.esm.js";
+import DefaultPropsProvider from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import exactProp from "../../node_modules/@mui/utils/esm/exactProp/exactProp.js";
+const EMPTY_THEME = {};
+function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
+  return React.useMemo(() => {
+    const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
+    if (typeof localTheme === "function") {
+      const mergedTheme = localTheme(resolvedTheme);
+      const result = themeId ? _extends({}, upperTheme, {
+        [themeId]: mergedTheme
+      }) : mergedTheme;
+      if (isPrivate) {
+        return () => result;
+      }
+      return result;
+    }
+    return themeId ? _extends({}, upperTheme, {
+      [themeId]: localTheme
+    }) : _extends({}, upperTheme, localTheme);
+  }, [themeId, upperTheme, localTheme, isPrivate]);
+}
+function ThemeProvider(props) {
+  const {
+    children,
+    theme: localTheme,
+    themeId
+  } = props;
+  const upperTheme = useTheme(EMPTY_THEME);
+  const upperPrivateTheme = useTheme$1() || EMPTY_THEME;
+  if (process.env.NODE_ENV !== "production") {
+    if (upperTheme === null && typeof localTheme === "function" || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === "function") {
+      console.error(["MUI: You are providing a theme function prop to the ThemeProvider component:", "<ThemeProvider theme={outerTheme => outerTheme} />", "", "However, no outer theme is present.", "Make sure a theme is already injected higher in the React tree or provide a theme object."].join("\n"));
+    }
+  }
+  const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
+  const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
+  const rtlValue = engineTheme.direction === "rtl";
+  const layerOrder = useLayerOrder(engineTheme);
+  return /* @__PURE__ */ jsx(ThemeProvider$1, {
+    theme: privateTheme,
+    children: /* @__PURE__ */ jsx(ThemeContext.Provider, {
+      value: engineTheme,
+      children: /* @__PURE__ */ jsx(RtlProvider, {
+        value: rtlValue,
+        children: /* @__PURE__ */ jsxs(DefaultPropsProvider, {
+          value: engineTheme == null ? void 0 : engineTheme.components,
+          children: [layerOrder, children]
+        })
+      })
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * A theme object. You can provide a function to extend the outer theme.
+   */
+  theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+  /**
+   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
+   */
+  themeId: PropTypes.string
+} : void 0;
+if (process.env.NODE_ENV !== "production") {
+  process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;
+}
+export {
+  ThemeProvider as default
+};

package/dist/node_modules/@mui/system/esm/ThemeProvider/useLayerOrder.js

@@ -0,0 +1,50 @@
+import "react";
+import useTheme from "../useThemeWithoutDefault.js";
+import { jsx } from "react/jsx-runtime";
+import useId from "../../node_modules/@mui/utils/esm/useId/useId.js";
+import useEnhancedEffect from "../../node_modules/@mui/utils/esm/useEnhancedEffect/useEnhancedEffect.js";
+import GlobalStyles from "../GlobalStyles/GlobalStyles.js";
+function useLayerOrder(theme) {
+  const upperTheme = useTheme();
+  const id = useId() || "";
+  const {
+    modularCssLayers
+  } = theme;
+  let layerOrder = "mui.global, mui.components, mui.theme, mui.custom, mui.sx";
+  if (!modularCssLayers || upperTheme !== null) {
+    layerOrder = "";
+  } else if (typeof modularCssLayers === "string") {
+    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
+  } else {
+    layerOrder = `@layer ${layerOrder};`;
+  }
+  useEnhancedEffect(() => {
+    const head = document.querySelector("head");
+    if (!head) {
+      return;
+    }
+    const firstChild = head.firstChild;
+    if (layerOrder) {
+      var _firstChild$hasAttrib;
+      if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, "data-mui-layer-order") && firstChild.getAttribute("data-mui-layer-order") === id) {
+        return;
+      }
+      const styleElement = document.createElement("style");
+      styleElement.setAttribute("data-mui-layer-order", id);
+      styleElement.textContent = layerOrder;
+      head.prepend(styleElement);
+    } else {
+      var _head$querySelector;
+      (_head$querySelector = head.querySelector(`style[data-mui-layer-order="${id}"]`)) == null || _head$querySelector.remove();
+    }
+  }, [layerOrder, id]);
+  if (!layerOrder) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(GlobalStyles, {
+    styles: layerOrder
+  });
+}
+export {
+  useLayerOrder as default
+};

package/dist/node_modules/@mui/system/esm/borders.js

@@ -9,51 +9,25 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = style({
-  prop: "border",
-  themeKey: "borders",
-  transform: borderTransform
-});
-const borderTop = style({
-  prop: "borderTop",
-  themeKey: "borders",
-  transform: borderTransform
-});
-const borderRight = style({
-  prop: "borderRight",
-  themeKey: "borders",
-  transform: borderTransform
-});
-const borderBottom = style({
-  prop: "borderBottom",
-  themeKey: "borders",
-  transform: borderTransform
-});
-const borderLeft = style({
-  prop: "borderLeft",
-  themeKey: "borders",
-  transform: borderTransform
-});
-const borderColor = style({
-  prop: "borderColor",
-  themeKey: "palette"
-});
-const borderTopColor = style({
-  prop: "borderTopColor",
-  themeKey: "palette"
-});
-const borderRightColor = style({
-  prop: "borderRightColor",
-  themeKey: "palette"
-});
-const borderBottomColor = style({
-  prop: "borderBottomColor",
-  themeKey: "palette"
-});
-const borderLeftColor = style({
-  prop: "borderLeftColor",
-  themeKey: "palette"
-});
+function createBorderStyle(prop, transform) {
+  return style({
+    prop,
+    themeKey: "borders",
+    transform
+  });
+}
+const border = createBorderStyle("border", borderTransform);
+const borderTop = createBorderStyle("borderTop", borderTransform);
+const borderRight = createBorderStyle("borderRight", borderTransform);
+const borderBottom = createBorderStyle("borderBottom", borderTransform);
+const borderLeft = createBorderStyle("borderLeft", borderTransform);
+const borderColor = createBorderStyle("borderColor");
+const borderTopColor = createBorderStyle("borderTopColor");
+const borderRightColor = createBorderStyle("borderRightColor");
+const borderBottomColor = createBorderStyle("borderBottomColor");
+const borderLeftColor = createBorderStyle("borderLeftColor");
+const outline = createBorderStyle("outline", borderTransform);
+const outlineColor = createBorderStyle("outlineColor");
 const borderRadius = (props) => {
   if (props.borderRadius !== void 0 && props.borderRadius !== null) {
     const transformer = createUnaryUnit(props.theme, "shape.borderRadius", 4, "borderRadius");
@@ -68,7 +42,7 @@ borderRadius.propTypes = process.env.NODE_ENV !== "production" ? {
   borderRadius: responsivePropType
 } : {};
 borderRadius.filterProps = ["borderRadius"];
-compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
+compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
 export {
   border,
   borderBottom,
@@ -81,5 +55,7 @@ export {
   borderRightColor,
   borderTop,
   borderTopColor,
-  borderTransform
+  borderTransform,
+  outline,
+  outlineColor
 };

package/dist/node_modules/@mui/system/esm/breakpoints.js

@@ -1,5 +1,5 @@
 import "@babel/runtime/helpers/esm/extends";
-import deepmerge from "../../utils/deepmerge/deepmerge.js";
+import deepmerge from "../node_modules/@mui/utils/esm/deepmerge/deepmerge.js";
 const values = {
   xs: 0,
   // phone

package/dist/node_modules/@mui/system/esm/colorManipulator.js

@@ -1,11 +1,12 @@
-import formatMuiErrorMessage from "../../utils/formatMuiErrorMessage/formatMuiErrorMessage.js";
-function clamp(value, min = 0, max = 1) {
+import formatMuiErrorMessage from "../node_modules/@mui/utils/esm/formatMuiErrorMessage/formatMuiErrorMessage.js";
+import clamp from "../node_modules/@mui/utils/esm/clamp/clamp.js";
+function clampWrapper(value, min = 0, max = 1) {
   if (process.env.NODE_ENV !== "production") {
     if (value < min || value > max) {
       console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
     }
   }
-  return Math.min(Math.max(min, value), max);
+  return clamp(value, min, max);
 }
 function hexToRgb(color) {
   color = color.slice(1);
@@ -74,46 +75,9 @@ function recomposeColor(color) {
   }
   return `${type}(${values})`;
 }
-function hslToRgb(color) {
-  color = decomposeColor(color);
-  const {
-    values
-  } = color;
-  const h = values[0];
-  const s = values[1] / 100;
-  const l = values[2] / 100;
-  const a = s * Math.min(l, 1 - l);
-  const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-  let type = "rgb";
-  const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-  if (color.type === "hsla") {
-    type += "a";
-    rgb.push(values[3]);
-  }
-  return recomposeColor({
-    type,
-    values: rgb
-  });
-}
-function getLuminance(color) {
-  color = decomposeColor(color);
-  let rgb = color.type === "hsl" || color.type === "hsla" ? decomposeColor(hslToRgb(color)).values : color.values;
-  rgb = rgb.map((val) => {
-    if (color.type !== "color") {
-      val /= 255;
-    }
-    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
-  });
-  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
-}
-function getContrastRatio(foreground, background) {
-  const lumA = getLuminance(foreground);
-  const lumB = getLuminance(background);
-  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
-}
 function alpha(color, value) {
   color = decomposeColor(color);
-  value = clamp(value);
+  value = clampWrapper(value);
   if (color.type === "rgb" || color.type === "hsl") {
     color.type += "a";
   }
@@ -124,46 +88,9 @@ function alpha(color, value) {
   }
   return recomposeColor(color);
 }
-function darken(color, coefficient) {
-  color = decomposeColor(color);
-  coefficient = clamp(coefficient);
-  if (color.type.indexOf("hsl") !== -1) {
-    color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf("rgb") !== -1 || color.type.indexOf("color") !== -1) {
-    for (let i = 0; i < 3; i += 1) {
-      color.values[i] *= 1 - coefficient;
-    }
-  }
-  return recomposeColor(color);
-}
-function lighten(color, coefficient) {
-  color = decomposeColor(color);
-  coefficient = clamp(coefficient);
-  if (color.type.indexOf("hsl") !== -1) {
-    color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf("rgb") !== -1) {
-    for (let i = 0; i < 3; i += 1) {
-      color.values[i] += (255 - color.values[i]) * coefficient;
-    }
-  } else if (color.type.indexOf("color") !== -1) {
-    for (let i = 0; i < 3; i += 1) {
-      color.values[i] += (1 - color.values[i]) * coefficient;
-    }
-  }
-  return recomposeColor(color);
-}
-function emphasize(color, coefficient = 0.15) {
-  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
-}
 export {
   alpha,
-  darken,
   decomposeColor,
-  emphasize,
-  getContrastRatio,
-  getLuminance,
   hexToRgb,
-  hslToRgb,
-  lighten,
   recomposeColor
 };

package/dist/node_modules/@mui/system/esm/createStyled.js

@@ -1,12 +1,12 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import styled, { internal_processStyles } from "../../styled-engine/index.js";
-import propsToClassKey from "./propsToClassKey.js";
-import capitalize from "../../utils/capitalize/capitalize.js";
-import getDisplayName from "../../utils/getDisplayName/getDisplayName.js";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import styled, { internal_processStyles, internal_serializeStyles } from "../../styled-engine/index.js";
+import capitalize from "../node_modules/@mui/utils/esm/capitalize/capitalize.js";
+import getDisplayName from "../node_modules/@mui/utils/esm/getDisplayName/getDisplayName.js";
 import createTheme from "./createTheme/createTheme.js";
+import { isPlainObject } from "../node_modules/@mui/utils/esm/deepmerge/deepmerge.js";
 import styleFunctionSx from "./styleFunctionSx/styleFunctionSx.js";
-const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
+const _excluded = ["ownerState"], _excluded2 = ["variants"], _excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -16,49 +16,15 @@ function isStringTag(tag) {
   // it's a lowercase character
   tag.charCodeAt(0) > 96;
 }
-const getStyleOverrides = (name, theme) => {
-  if (theme.components && theme.components[name] && theme.components[name].styleOverrides) {
-    return theme.components[name].styleOverrides;
-  }
-  return null;
-};
-const getVariantStyles = (name, theme) => {
-  let variants = [];
-  if (theme && theme.components && theme.components[name] && theme.components[name].variants) {
-    variants = theme.components[name].variants;
-  }
-  const variantsStyles = {};
-  variants.forEach((definition) => {
-    const key = propsToClassKey(definition.props);
-    variantsStyles[key] = definition.style;
-  });
-  return variantsStyles;
-};
-const variantsResolver = (props, styles, theme, name) => {
-  var _theme$components;
-  const {
-    ownerState = {}
-  } = props;
-  const variantsStyles = [];
-  const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[name]) == null ? void 0 : _theme$components.variants;
-  if (themeVariants) {
-    themeVariants.forEach((themeVariant) => {
-      let isMatch = true;
-      Object.keys(themeVariant.props).forEach((key) => {
-        if (ownerState[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
-          isMatch = false;
-        }
-      });
-      if (isMatch) {
-        variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
-      }
-    });
-  }
-  return variantsStyles;
-};
 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;
+}
 const systemDefaultTheme = createTheme();
 const lowercaseFirstLetter = (string) => {
   if (!string) {
@@ -79,6 +45,50 @@ function defaultOverridesResolver(slot) {
   }
   return (props, styles) => styles[slot];
 }
+function processStyleArg(callableStyle, _ref, layerName) {
+  let {
+    ownerState
+  } = _ref, props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const resolvedStylesArg = typeof callableStyle === "function" ? callableStyle(_extends({
+    ownerState
+  }, props)) : callableStyle;
+  if (Array.isArray(resolvedStylesArg)) {
+    return resolvedStylesArg.flatMap((resolvedStyle) => processStyleArg(resolvedStyle, _extends({
+      ownerState
+    }, props), layerName));
+  }
+  if (!!resolvedStylesArg && typeof resolvedStylesArg === "object" && Array.isArray(resolvedStylesArg.variants)) {
+    const {
+      variants = []
+    } = resolvedStylesArg, otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
+    let result = otherStyles;
+    variants.forEach((variant) => {
+      let isMatch = true;
+      if (typeof variant.props === "function") {
+        isMatch = variant.props(_extends({
+          ownerState
+        }, props, ownerState));
+      } else {
+        Object.keys(variant.props).forEach((key) => {
+          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
+            isMatch = false;
+          }
+        });
+      }
+      if (isMatch) {
+        if (!Array.isArray(result)) {
+          result = [result];
+        }
+        const variantStyle = typeof variant.style === "function" ? variant.style(_extends({
+          ownerState
+        }, props, ownerState)) : variant.style;
+        result.push(layerName ? shallowLayer(internal_serializeStyles(variantStyle), layerName) : variantStyle);
+      }
+    });
+    return result;
+  }
+  return layerName ? shallowLayer(internal_serializeStyles(resolvedStylesArg), layerName) : resolvedStylesArg;
+}
 function createStyled(input = {}) {
   const {
     themeId,
@@ -105,7 +115,8 @@ function createStyled(input = {}) {
       // TODO v6: remove `lowercaseFirstLetter()` in the next major release
       // For more details: https://github.com/mui/material-ui/pull/37908
       overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
-    } = inputOptions, options = _objectWithoutPropertiesLoose(inputOptions, _excluded);
+    } = inputOptions, options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
+    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
@@ -130,44 +141,56 @@ function createStyled(input = {}) {
       shouldForwardProp: shouldForwardPropOption,
       label
     }, options));
+    const transformStyleArg = (stylesArg) => {
+      if (typeof stylesArg === "function" && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
+        return (props) => {
+          const theme = resolveTheme({
+            theme: props.theme,
+            defaultTheme,
+            themeId
+          });
+          return processStyleArg(stylesArg, _extends({}, props, {
+            theme
+          }), theme.modularCssLayers ? layerName : void 0);
+        };
+      }
+      return stylesArg;
+    };
     const muiStyledResolver = (styleArg, ...expressions) => {
-      const expressionsWithDefaultTheme = expressions ? expressions.map((stylesArg) => {
-        return typeof stylesArg === "function" && stylesArg.__emotion_real !== stylesArg ? (props) => {
-          return stylesArg(_extends({}, props, {
-            theme: resolveTheme(_extends({}, props, {
-              defaultTheme,
-              themeId
-            }))
-          }));
-        } : stylesArg;
-      }) : [];
-      let transformedStyleArg = styleArg;
+      let transformedStyleArg = transformStyleArg(styleArg);
+      const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
       if (componentName && overridesResolver) {
         expressionsWithDefaultTheme.push((props) => {
           const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }));
-          const styleOverrides = getStyleOverrides(componentName, theme);
-          if (styleOverrides) {
-            const resolvedStyleOverrides = {};
-            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
-              resolvedStyleOverrides[slotKey] = typeof slotStyle === "function" ? slotStyle(_extends({}, props, {
-                theme
-              })) : slotStyle;
-            });
-            return overridesResolver(props, resolvedStyleOverrides);
+          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
+            return null;
           }
-          return null;
+          const styleOverrides = theme.components[componentName].styleOverrides;
+          const resolvedStyleOverrides = {};
+          Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
+              theme
+            }), theme.modularCssLayers ? "theme" : void 0);
+          });
+          return overridesResolver(props, resolvedStyleOverrides);
         });
       }
       if (componentName && !skipVariantsResolver) {
         expressionsWithDefaultTheme.push((props) => {
+          var _theme$components;
           const theme = resolveTheme(_extends({}, props, {
             defaultTheme,
             themeId
           }));
-          return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+          const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
+          return processStyleArg({
+            variants: themeVariants
+          }, _extends({}, props, {
+            theme
+          }), theme.modularCssLayers ? "theme" : void 0);
         });
       }
       if (!skipSx) {
@@ -178,16 +201,6 @@ function createStyled(input = {}) {
         const placeholders = new Array(numOfCustomFnsApplied).fill("");
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === "function" && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      styleArg.__emotion_real !== styleArg) {
-        transformedStyleArg = (props) => styleArg(_extends({}, props, {
-          theme: resolveTheme(_extends({}, props, {
-            defaultTheme,
-            themeId
-          }))
-        }));
       }
       const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
       if (process.env.NODE_ENV !== "production") {

package/dist/node_modules/@mui/system/esm/createTheme/applyStyles.js

@@ -0,0 +1,16 @@
+function applyStyles(key, styles) {
+  const theme = this;
+  if (theme.vars && typeof theme.getColorSchemeSelector === "function") {
+    const selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, "*:where($1)");
+    return {
+      [selector]: styles
+    };
+  }
+  if (theme.palette.mode === key) {
+    return styles;
+  }
+  return {};
+}
+export {
+  applyStyles as default
+};

package/dist/node_modules/@mui/system/esm/createTheme/createTheme.js

@@ -5,7 +5,8 @@ import shape from "./shape.js";
 import createSpacing from "./createSpacing.js";
 import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
 import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
-import deepmerge from "../../../utils/deepmerge/deepmerge.js";
+import applyStyles from "./applyStyles.js";
+import deepmerge from "../../node_modules/@mui/utils/esm/deepmerge/deepmerge.js";
 const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
@@ -27,6 +28,7 @@ function createTheme(options = {}, ...args) {
     spacing,
     shape: _extends({}, shape, shapeInput)
   }, other);
+  muiTheme.applyStyles = applyStyles;
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
   muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
   muiTheme.unstable_sx = function sx(props) {

package/dist/node_modules/@mui/system/esm/createTheme/index.js

@@ -0,0 +1,8 @@
+import { default as default2 } from "./createTheme.js";
+import { default as default3 } from "./createBreakpoints.js";
+import { default as default4 } from "./applyStyles.js";
+export {
+  default2 as default,
+  default3 as private_createBreakpoints,
+  default4 as unstable_applyStyles
+};

package/dist/node_modules/@mui/system/esm/merge.js

@@ -1,4 +1,4 @@
-import deepmerge from "../../utils/deepmerge/deepmerge.js";
+import deepmerge from "../node_modules/@mui/utils/esm/deepmerge/deepmerge.js";
 function merge(acc, item) {
   if (!item) {
     return acc;

package/dist/node_modules/@mui/system/esm/sizing.js

@@ -11,10 +11,20 @@ const width = style({
 const maxWidth = (props) => {
   if (props.maxWidth !== void 0 && props.maxWidth !== null) {
     const styleFromPropValue = (propValue) => {
-      var _props$theme;
+      var _props$theme, _props$theme2;
       const breakpoint = ((_props$theme = props.theme) == null || (_props$theme = _props$theme.breakpoints) == null || (_props$theme = _props$theme.values) == null ? void 0 : _props$theme[propValue]) || values[propValue];
+      if (!breakpoint) {
+        return {
+          maxWidth: sizingTransform(propValue)
+        };
+      }
+      if (((_props$theme2 = props.theme) == null || (_props$theme2 = _props$theme2.breakpoints) == null ? void 0 : _props$theme2.unit) !== "px") {
+        return {
+          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+        };
+      }
       return {
-        maxWidth: breakpoint || sizingTransform(propValue)
+        maxWidth: breakpoint
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);