@mui/system 6.1.1 → 6.1.3

package/{node → esm}/styleFunctionSx/defaultSxConfig.js

@@ -1,35 +1,29 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _spacing = require("../spacing");
-var _borders = require("../borders");
-var _cssGrid = require("../cssGrid");
-var _palette = require("../palette");
-var _sizing = require("../sizing");
+import { padding, margin } from "../spacing/index.js";
+import { borderRadius, borderTransform } from "../borders/index.js";
+import { gap, rowGap, columnGap } from "../cssGrid/index.js";
+import { paletteTransform } from "../palette/index.js";
+import { maxWidth, sizingTransform } from "../sizing/index.js";
 const defaultSxConfig = {
   // borders
   border: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderTop: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderRight: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderBottom: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderLeft: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   borderColor: {
     themeKey: 'palette'
@@ -48,149 +42,149 @@ const defaultSxConfig = {
   },
   outline: {
     themeKey: 'borders',
-    transform: _borders.borderTransform
+    transform: borderTransform
   },
   outlineColor: {
     themeKey: 'palette'
   },
   borderRadius: {
     themeKey: 'shape.borderRadius',
-    style: _borders.borderRadius
+    style: borderRadius
   },
   // palette
   color: {
     themeKey: 'palette',
-    transform: _palette.paletteTransform
+    transform: paletteTransform
   },
   bgcolor: {
     themeKey: 'palette',
     cssProperty: 'backgroundColor',
-    transform: _palette.paletteTransform
+    transform: paletteTransform
   },
   backgroundColor: {
     themeKey: 'palette',
-    transform: _palette.paletteTransform
+    transform: paletteTransform
   },
   // spacing
   p: {
-    style: _spacing.padding
+    style: padding
   },
   pt: {
-    style: _spacing.padding
+    style: padding
   },
   pr: {
-    style: _spacing.padding
+    style: padding
   },
   pb: {
-    style: _spacing.padding
+    style: padding
   },
   pl: {
-    style: _spacing.padding
+    style: padding
   },
   px: {
-    style: _spacing.padding
+    style: padding
   },
   py: {
-    style: _spacing.padding
+    style: padding
   },
   padding: {
-    style: _spacing.padding
+    style: padding
   },
   paddingTop: {
-    style: _spacing.padding
+    style: padding
   },
   paddingRight: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBottom: {
-    style: _spacing.padding
+    style: padding
   },
   paddingLeft: {
-    style: _spacing.padding
+    style: padding
   },
   paddingX: {
-    style: _spacing.padding
+    style: padding
   },
   paddingY: {
-    style: _spacing.padding
+    style: padding
   },
   paddingInline: {
-    style: _spacing.padding
+    style: padding
   },
   paddingInlineStart: {
-    style: _spacing.padding
+    style: padding
   },
   paddingInlineEnd: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBlock: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBlockStart: {
-    style: _spacing.padding
+    style: padding
   },
   paddingBlockEnd: {
-    style: _spacing.padding
+    style: padding
   },
   m: {
-    style: _spacing.margin
+    style: margin
   },
   mt: {
-    style: _spacing.margin
+    style: margin
   },
   mr: {
-    style: _spacing.margin
+    style: margin
   },
   mb: {
-    style: _spacing.margin
+    style: margin
   },
   ml: {
-    style: _spacing.margin
+    style: margin
   },
   mx: {
-    style: _spacing.margin
+    style: margin
   },
   my: {
-    style: _spacing.margin
+    style: margin
   },
   margin: {
-    style: _spacing.margin
+    style: margin
   },
   marginTop: {
-    style: _spacing.margin
+    style: margin
   },
   marginRight: {
-    style: _spacing.margin
+    style: margin
   },
   marginBottom: {
-    style: _spacing.margin
+    style: margin
   },
   marginLeft: {
-    style: _spacing.margin
+    style: margin
   },
   marginX: {
-    style: _spacing.margin
+    style: margin
   },
   marginY: {
-    style: _spacing.margin
+    style: margin
   },
   marginInline: {
-    style: _spacing.margin
+    style: margin
   },
   marginInlineStart: {
-    style: _spacing.margin
+    style: margin
   },
   marginInlineEnd: {
-    style: _spacing.margin
+    style: margin
   },
   marginBlock: {
-    style: _spacing.margin
+    style: margin
   },
   marginBlockStart: {
-    style: _spacing.margin
+    style: margin
   },
   marginBlockEnd: {
-    style: _spacing.margin
+    style: margin
   },
   // display
   displayPrint: {
@@ -222,13 +216,13 @@ const defaultSxConfig = {
   justifySelf: {},
   // grid
   gap: {
-    style: _cssGrid.gap
+    style: gap
   },
   rowGap: {
-    style: _cssGrid.rowGap
+    style: rowGap
   },
   columnGap: {
-    style: _cssGrid.columnGap
+    style: columnGap
   },
   gridColumn: {},
   gridRow: {},
@@ -254,22 +248,22 @@ const defaultSxConfig = {
   },
   // sizing
   width: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   maxWidth: {
-    style: _sizing.maxWidth
+    style: maxWidth
   },
   minWidth: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   height: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   maxHeight: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   minHeight: {
-    transform: _sizing.sizingTransform
+    transform: sizingTransform
   },
   boxSizing: {},
   // typography
@@ -297,4 +291,4 @@ const defaultSxConfig = {
     themeKey: 'typography'
   }
 };
-var _default = exports.default = defaultSxConfig;
+export default defaultSxConfig;

package/{node → esm}/styleFunctionSx/extendSxProp.js

@@ -1,18 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = extendSxProp;
-var _deepmerge = require("@mui/utils/deepmerge");
-var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
+import { isPlainObject } from '@mui/utils/deepmerge';
+import defaultSxConfig from "./defaultSxConfig.js";
 const splitProps = props => {
   const result = {
     systemProps: {},
     otherProps: {}
   };
-  const config = props?.theme?.unstable_sxConfig ?? _defaultSxConfig.default;
+  const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
   Object.keys(props).forEach(prop => {
     if (config[prop]) {
       result.systemProps[prop] = props[prop];
@@ -22,7 +15,7 @@ const splitProps = props => {
   });
   return result;
 };
-function extendSxProp(props) {
+export default function extendSxProp(props) {
   const {
     sx: inSx,
     ...other
@@ -37,7 +30,7 @@ function extendSxProp(props) {
   } else if (typeof inSx === 'function') {
     finalSx = (...args) => {
       const result = inSx(...args);
-      if (!(0, _deepmerge.isPlainObject)(result)) {
+      if (!isPlainObject(result)) {
         return systemProps;
       }
       return {

package/esm/styleFunctionSx/index.js

@@ -0,0 +1,4 @@
+export { default } from "./styleFunctionSx.js";
+export { unstable_createStyleFunctionSx } from "./styleFunctionSx.js";
+export { default as extendSxProp } from "./extendSxProp.js";
+export { default as unstable_defaultSxConfig } from "./defaultSxConfig.js";

package/{node → esm}/styleFunctionSx/styleFunctionSx.js

@@ -1,17 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
-var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
-var _merge = _interopRequireDefault(require("../merge"));
-var _style = require("../style");
-var _breakpoints = require("../breakpoints");
-var _cssContainerQueries = require("../cssContainerQueries");
-var _defaultSxConfig = _interopRequireDefault(require("./defaultSxConfig"));
+import capitalize from '@mui/utils/capitalize';
+import merge from "../merge/index.js";
+import { getPath, getStyleValue as getValue } from "../style/index.js";
+import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from "../breakpoints/index.js";
+import { sortContainerQueries } from "../cssContainerQueries/index.js";
+import defaultSxConfig from "./defaultSxConfig.js";
 function objectsHaveSameKeys(...objects) {
   const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
   const union = new Set(allKeys);
@@ -22,7 +14,7 @@ function callIfFn(maybeFn, arg) {
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function unstable_createStyleFunctionSx() {
+export function unstable_createStyleFunctionSx() {
   function getThemeValue(prop, val, theme, config) {
     const props = {
       [prop]: val,
@@ -50,15 +42,15 @@ function unstable_createStyleFunctionSx() {
         [prop]: val
       };
     }
-    const themeMapping = (0, _style.getPath)(theme, themeKey) || {};
+    const themeMapping = getPath(theme, themeKey) || {};
     if (style) {
       return style(props);
     }
     const styleFromPropValue = propValueFinal => {
-      let value = (0, _style.getStyleValue)(themeMapping, transform, propValueFinal);
+      let value = getValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = (0, _style.getStyleValue)(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
+        value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -67,7 +59,7 @@ function unstable_createStyleFunctionSx() {
         [cssProperty]: value
       };
     };
-    return (0, _breakpoints.handleBreakpoints)(props, val, styleFromPropValue);
+    return handleBreakpoints(props, val, styleFromPropValue);
   }
   function styleFunctionSx(props) {
     const {
@@ -77,7 +69,7 @@ function unstable_createStyleFunctionSx() {
     if (!sx) {
       return null; // Emotion & styled-components will neglect null
     }
-    const config = theme.unstable_sxConfig ?? _defaultSxConfig.default;
+    const config = theme.unstable_sxConfig ?? defaultSxConfig;
 
     /*
      * Receive `sxInput` as object or callback
@@ -95,7 +87,7 @@ function unstable_createStyleFunctionSx() {
       if (!sxObject) {
         return null;
       }
-      const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
+      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
       const breakpointsKeys = Object.keys(emptyBreakpoints);
       let css = emptyBreakpoints;
       Object.keys(sxObject).forEach(styleKey => {
@@ -103,9 +95,9 @@ function unstable_createStyleFunctionSx() {
         if (value !== null && value !== undefined) {
           if (typeof value === 'object') {
             if (config[styleKey]) {
-              css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
+              css = merge(css, getThemeValue(styleKey, value, theme, config));
             } else {
-              const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
+              const breakpointsValues = handleBreakpoints({
                 theme
               }, value, x => ({
                 [styleKey]: x
@@ -116,15 +108,15 @@ function unstable_createStyleFunctionSx() {
                   theme
                 });
               } else {
-                css = (0, _merge.default)(css, breakpointsValues);
+                css = merge(css, breakpointsValues);
               }
             }
           } else {
-            css = (0, _merge.default)(css, getThemeValue(styleKey, value, theme, config));
+            css = merge(css, getThemeValue(styleKey, value, theme, config));
           }
         }
       });
-      return (0, _cssContainerQueries.sortContainerQueries)(theme, (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css));
+      return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
     }
     return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
   }
@@ -132,4 +124,4 @@ function unstable_createStyleFunctionSx() {
 }
 const styleFunctionSx = unstable_createStyleFunctionSx();
 styleFunctionSx.filterProps = ['sx'];
-var _default = exports.default = styleFunctionSx;
+export default styleFunctionSx;

package/esm/styled/index.js

@@ -0,0 +1 @@
+export { default } from "./styled.js";

package/esm/styled/styled.js

@@ -0,0 +1,3 @@
+import createStyled from "../createStyled/index.js";
+const styled = createStyled();
+export default styled;

package/esm/typography/index.js

@@ -0,0 +1,2 @@
+export { default } from "./typography.js";
+export * from "./typography.js";

package/esm/typography/typography.js

@@ -0,0 +1,37 @@
+import style from "../style/index.js";
+import compose from "../compose/index.js";
+export const fontFamily = style({
+  prop: 'fontFamily',
+  themeKey: 'typography'
+});
+export const fontSize = style({
+  prop: 'fontSize',
+  themeKey: 'typography'
+});
+export const fontStyle = style({
+  prop: 'fontStyle',
+  themeKey: 'typography'
+});
+export const fontWeight = style({
+  prop: 'fontWeight',
+  themeKey: 'typography'
+});
+export const letterSpacing = style({
+  prop: 'letterSpacing'
+});
+export const textTransform = style({
+  prop: 'textTransform'
+});
+export const lineHeight = style({
+  prop: 'lineHeight'
+});
+export const textAlign = style({
+  prop: 'textAlign'
+});
+export const typographyVariant = style({
+  prop: 'typography',
+  cssProperty: false,
+  themeKey: 'typography'
+});
+const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
+export default typography;

package/esm/useMediaQuery/index.js

@@ -0,0 +1,2 @@
+export { default } from "./useMediaQuery.js";
+export * from "./useMediaQuery.js";

package/{node → esm}/useMediaQuery/useMediaQuery.js

@@ -1,16 +1,9 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useMediaQuery;
-var React = _interopRequireWildcard(require("react"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _useThemeProps = require("../useThemeProps");
-var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { getThemeProps } from "../useThemeProps/index.js";
+import useTheme from "../useThemeWithoutDefault/index.js";
 // TODO React 17: Remove `useMediaQueryOld` once React 17 support is removed
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
@@ -25,7 +18,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     // event listeners to return the correct matches value.
     return defaultMatches;
   });
-  (0, _useEnhancedEffect.default)(() => {
+  useEnhancedEffect(() => {
     if (!matchMedia) {
       return undefined;
     }
@@ -76,8 +69,8 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   return match;
 }
-function useMediaQuery(queryInput, options = {}) {
-  const theme = (0, _useThemeWithoutDefault.default)();
+export default function useMediaQuery(queryInput, options = {}) {
+  const theme = useTheme();
   // Wait for jsdom to support the match media feature.
   // All the browsers MUI support have this built-in.
   // This defensive check is here for simplicity.
@@ -88,7 +81,7 @@ function useMediaQuery(queryInput, options = {}) {
     matchMedia = supportMatchMedia ? window.matchMedia : null,
     ssrMatchMedia = null,
     noSsr = false
-  } = (0, _useThemeProps.getThemeProps)({
+  } = getThemeProps({
     name: 'MuiUseMediaQuery',
     props: options,
     theme

package/esm/useTheme/index.js

@@ -0,0 +1,2 @@
+export { default } from "./useTheme.js";
+export * from "./useTheme.js";

package/esm/useTheme/useTheme.js

@@ -0,0 +1,9 @@
+'use client';
+
+import createTheme from "../createTheme/index.js";
+import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
+export const systemDefaultTheme = createTheme();
+function useTheme(defaultTheme = systemDefaultTheme) {
+  return useThemeWithoutDefault(defaultTheme);
+}
+export default useTheme;

package/esm/useThemeProps/getThemeProps.js

@@ -0,0 +1,12 @@
+import resolveProps from '@mui/utils/resolveProps';
+export default function getThemeProps(params) {
+  const {
+    theme,
+    name,
+    props
+  } = params;
+  if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
+    return props;
+  }
+  return resolveProps(theme.components[name].defaultProps, props);
+}

package/esm/useThemeProps/index.js

@@ -0,0 +1,2 @@
+export { default } from "./useThemeProps.js";
+export { default as getThemeProps } from "./getThemeProps.js";

package/esm/useThemeProps/useThemeProps.js

@@ -0,0 +1,20 @@
+'use client';
+
+import getThemeProps from "./getThemeProps.js";
+import useTheme from "../useTheme/index.js";
+export default function useThemeProps({
+  props,
+  name,
+  defaultTheme,
+  themeId
+}) {
+  let theme = useTheme(defaultTheme);
+  if (themeId) {
+    theme = theme[themeId] || theme;
+  }
+  return getThemeProps({
+    theme,
+    name,
+    props
+  });
+}

package/esm/useThemeWithoutDefault/index.js

@@ -0,0 +1 @@
+export { default } from "./useThemeWithoutDefault.js";

package/esm/useThemeWithoutDefault/useThemeWithoutDefault.js

@@ -0,0 +1,12 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeContext } from '@mui/styled-engine';
+function isObjectEmpty(obj) {
+  return Object.keys(obj).length === 0;
+}
+function useTheme(defaultTheme = null) {
+  const contextTheme = React.useContext(ThemeContext);
+  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
+}
+export default useTheme;

package/esm/version/index.js

@@ -0,0 +1,6 @@
+export const version = "6.1.3";
+export const major = Number("6");
+export const minor = Number("1");
+export const patch = Number("3");
+export const prerelease = undefined;
+export default version;