@mui/system 5.15.15 → 6.0.0-alpha.1

package/{styled.d.ts → styled/styled.d.ts}

@@ -1,4 +1,4 @@
-import { CreateMUIStyled } from './createStyled';
+import { CreateMUIStyled } from '../createStyled';
 
 declare const styled: CreateMUIStyled;
 

package/styled/styled.js

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

package/typography/index.d.ts

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

package/typography/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './typography';
+export * from './typography';

package/typography/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/typography/index.js",
+  "types": "./index.d.ts"
+}

package/typography/typography.d.ts

@@ -0,0 +1,12 @@
+import { PropsFor, SimpleStyleFunction, typography } from '../Box';
+
+export const typographyVariant: SimpleStyleFunction<'typography'>;
+export const fontFamily: SimpleStyleFunction<'fontFamily'>;
+export const fontSize: SimpleStyleFunction<'fontSize'>;
+export const fontStyle: SimpleStyleFunction<'fontStyle'>;
+export const fontWeight: SimpleStyleFunction<'fontWeight'>;
+export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
+export const lineHeight: SimpleStyleFunction<'lineHeight'>;
+export const textAlign: SimpleStyleFunction<'textAlign'>;
+export const textTransform: SimpleStyleFunction<'textTransform'>;
+export type TypographyProps = PropsFor<typeof typography>;

package/{esm → typography}/typography.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 export const fontFamily = style({
   prop: 'fontFamily',
   themeKey: 'typography'

package/useMediaQuery/index.js

@@ -1,26 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _useMediaQuery.default;
-  }
-});
-var _useMediaQuery = _interopRequireWildcard(require("./useMediaQuery"));
-Object.keys(_useMediaQuery).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useMediaQuery[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useMediaQuery[key];
-    }
-  });
-});
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+export { default } from './useMediaQuery';
+export * from './useMediaQuery';

package/useMediaQuery/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/useMediaQuery/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/useMediaQuery/index.js",
   "types": "./index.d.ts"
 }

package/useMediaQuery/useMediaQuery.js

@@ -1,17 +1,10 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-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"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { getThemeProps } from '../useThemeProps';
+import useTheme from '../useThemeWithoutDefault';
+
 /**
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
@@ -37,7 +30,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     // event listeners to return the correct matches value.
     return defaultMatches;
   });
-  (0, _useEnhancedEffect.default)(() => {
+  useEnhancedEffect(() => {
     let active = true;
     if (!matchMedia) {
       return undefined;
@@ -94,8 +87,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.
@@ -106,7 +99,7 @@ function useMediaQuery(queryInput, options = {}) {
     matchMedia = supportMatchMedia ? window.matchMedia : null,
     ssrMatchMedia = null,
     noSsr = false
-  } = (0, _useThemeProps.getThemeProps)({
+  } = getThemeProps({
     name: 'MuiUseMediaQuery',
     props: options,
     theme

package/useTheme/index.d.ts

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

package/useTheme/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+export { default } from './useTheme';
+export * from './useTheme';

package/useTheme/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/useTheme/index.js",
+  "types": "./index.d.ts"
+}

package/{useTheme.d.ts → useTheme/useTheme.d.ts}

@@ -1,3 +1,3 @@
-import { Theme } from './createTheme';
+import { Theme } from '../createTheme';
 
 export default function useTheme<T = Theme>(defaultTheme?: T): T;

package/{modern → useTheme}/useTheme.js

@@ -1,7 +1,7 @@
 'use client';
 
-import createTheme from './createTheme';
-import useThemeWithoutDefault from './useThemeWithoutDefault';
+import createTheme from '../createTheme';
+import useThemeWithoutDefault from '../useThemeWithoutDefault';
 export const systemDefaultTheme = createTheme();
 function useTheme(defaultTheme = systemDefaultTheme) {
   return useThemeWithoutDefault(defaultTheme);

package/useThemeProps/getThemeProps.js

@@ -1,12 +1,5 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getThemeProps;
-var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
-function getThemeProps(params) {
+import resolveProps from '@mui/utils/resolveProps';
+export default function getThemeProps(params) {
   const {
     theme,
     name,
@@ -15,5 +8,5 @@ function getThemeProps(params) {
   if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
     return props;
   }
-  return (0, _resolveProps.default)(theme.components[name].defaultProps, props);
+  return resolveProps(theme.components[name].defaultProps, props);
 }

package/useThemeProps/index.js

@@ -1,21 +1,4 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _useThemeProps.default;
-  }
-});
-Object.defineProperty(exports, "getThemeProps", {
-  enumerable: true,
-  get: function () {
-    return _getThemeProps.default;
-  }
-});
-var _useThemeProps = _interopRequireDefault(require("./useThemeProps"));
-var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
+export { default } from './useThemeProps';
+export { default as getThemeProps } from './getThemeProps';

package/useThemeProps/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "../esm/useThemeProps/index.js",
-  "main": "./index.js",
+  "module": "./index.js",
+  "main": "../node/useThemeProps/index.js",
   "types": "./index.d.ts"
 }

package/useThemeProps/useThemeProps.js

@@ -1,24 +1,18 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useThemeProps;
-var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-function useThemeProps({
+import getThemeProps from './getThemeProps';
+import useTheme from '../useTheme';
+export default function useThemeProps({
   props,
   name,
   defaultTheme,
   themeId
 }) {
-  let theme = (0, _useTheme.default)(defaultTheme);
+  let theme = useTheme(defaultTheme);
   if (themeId) {
     theme = theme[themeId] || theme;
   }
-  const mergedProps = (0, _getThemeProps.default)({
+  const mergedProps = getThemeProps({
     theme,
     name,
     props

package/useThemeWithoutDefault/index.d.ts

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

package/useThemeWithoutDefault/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './useThemeWithoutDefault';

package/useThemeWithoutDefault/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/useThemeWithoutDefault/index.js",
+  "types": "./index.d.ts"
+}

package/esm/Box/Box.js

@@ -1,30 +0,0 @@
-'use client';
-
-import PropTypes from 'prop-types';
-import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
-import createBox from '../createBox';
-import boxClasses from './boxClasses';
-const Box = createBox({
-  defaultClassName: boxClasses.root,
-  generateClassName: ClassNameGenerator.generate
-});
-process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export default Box;

package/esm/Box/boxClasses.js

@@ -1,3 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-const boxClasses = generateUtilityClasses('MuiBox', ['root']);
-export default boxClasses;

package/esm/Box/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './Box';
-export { default as boxClasses } from './boxClasses';
-export * from './boxClasses';

package/esm/Container/ContainerProps.js

@@ -1 +0,0 @@
-export {};

package/esm/Container/containerClasses.js

@@ -1,7 +0,0 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getContainerUtilityClass(slot) {
-  return generateUtilityClass('MuiContainer', slot);
-}
-const containerClasses = generateUtilityClasses('MuiContainer', ['root', 'disableGutters', 'fixed', 'maxWidthXs', 'maxWidthSm', 'maxWidthMd', 'maxWidthLg', 'maxWidthXl']);
-export default containerClasses;

package/esm/Container/createContainer.js

@@ -1,143 +0,0 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import composeClasses from '@mui/utils/composeClasses';
-import capitalize from '@mui/utils/capitalize';
-import useThemePropsSystem from '../useThemeProps';
-import systemStyled from '../styled';
-import createTheme from '../createTheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-const defaultTheme = createTheme();
-const defaultCreateStyledComponent = systemStyled('div', {
-  name: 'MuiContainer',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    const {
-      ownerState
-    } = props;
-    return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
-  }
-});
-const useThemePropsDefault = inProps => useThemePropsSystem({
-  props: inProps,
-  name: 'MuiContainer',
-  defaultTheme
-});
-const useUtilityClasses = (ownerState, componentName) => {
-  const getContainerUtilityClass = slot => {
-    return generateUtilityClass(componentName, slot);
-  };
-  const {
-    classes,
-    fixed,
-    disableGutters,
-    maxWidth
-  } = ownerState;
-  const slots = {
-    root: ['root', maxWidth && `maxWidth${capitalize(String(maxWidth))}`, fixed && 'fixed', disableGutters && 'disableGutters']
-  };
-  return composeClasses(slots, getContainerUtilityClass, classes);
-};
-export default function createContainer(options = {}) {
-  const {
-    // This will allow adding custom styled fn (for example for custom sx style function)
-    createStyledComponent = defaultCreateStyledComponent,
-    useThemeProps = useThemePropsDefault,
-    componentName = 'MuiContainer'
-  } = options;
-  const ContainerRoot = createStyledComponent(({
-    theme,
-    ownerState
-  }) => _extends({
-    width: '100%',
-    marginLeft: 'auto',
-    boxSizing: 'border-box',
-    marginRight: 'auto',
-    display: 'block'
-  }, !ownerState.disableGutters && {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up('sm')]: {
-      paddingLeft: theme.spacing(3),
-      paddingRight: theme.spacing(3)
-    }
-  }), ({
-    theme,
-    ownerState
-  }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
-    const breakpoint = breakpointValueKey;
-    const value = theme.breakpoints.values[breakpoint];
-    if (value !== 0) {
-      // @ts-ignore
-      acc[theme.breakpoints.up(breakpoint)] = {
-        maxWidth: `${value}${theme.breakpoints.unit}`
-      };
-    }
-    return acc;
-  }, {}), ({
-    theme,
-    ownerState
-  }) => _extends({}, ownerState.maxWidth === 'xs' && {
-    // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up('xs')]: {
-      // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
-    }
-  }, ownerState.maxWidth &&
-  // @ts-ignore module augmentation fails if custom breakpoints are used
-  ownerState.maxWidth !== 'xs' && {
-    // @ts-ignore module augmentation fails if custom breakpoints are used
-    [theme.breakpoints.up(ownerState.maxWidth)]: {
-      // @ts-ignore module augmentation fails if custom breakpoints are used
-      maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
-    }
-  }));
-  const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
-    const props = useThemeProps(inProps);
-    const {
-        className,
-        component = 'div',
-        disableGutters = false,
-        fixed = false,
-        maxWidth = 'lg'
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded);
-    const ownerState = _extends({}, props, {
-      component,
-      disableGutters,
-      fixed,
-      maxWidth
-    });
-
-    // @ts-ignore module augmentation fails if custom breakpoints are used
-    const classes = useUtilityClasses(ownerState, componentName);
-    return (
-      /*#__PURE__*/
-      // @ts-ignore theme is injected by the styled util
-      _jsx(ContainerRoot, _extends({
-        as: component
-        // @ts-ignore module augmentation fails if custom breakpoints are used
-        ,
-        ownerState: ownerState,
-        className: clsx(classes.root, className),
-        ref: ref
-      }, other))
-    );
-  });
-  process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
-    children: PropTypes.node,
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    component: PropTypes.elementType,
-    disableGutters: PropTypes.bool,
-    fixed: PropTypes.bool,
-    maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-  } : void 0;
-  return Container;
-}

package/esm/Container/index.js

@@ -1,5 +0,0 @@
-'use client';
-
-export { default } from './Container';
-export { default as containerClasses } from './containerClasses';
-export * from './containerClasses';

package/esm/GlobalStyles/GlobalStyles.js

@@ -1,37 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
-import useTheme from '../useTheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-function GlobalStyles({
-  styles,
-  themeId,
-  defaultTheme = {}
-}) {
-  const upperTheme = useTheme(defaultTheme);
-  const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
-  return /*#__PURE__*/_jsx(MuiGlobalStyles, {
-    styles: globalStyles
-  });
-}
-process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  defaultTheme: PropTypes.object,
-  /**
-   * @ignore
-   */
-  styles: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.array, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
-  /**
-   * @ignore
-   */
-  themeId: PropTypes.string
-} : void 0;
-export default GlobalStyles;

package/esm/GlobalStyles/index.js

@@ -1,4 +0,0 @@
-'use client';
-
-export { default } from './GlobalStyles';
-export * from './GlobalStyles';

package/esm/RtlProvider/index.js

@@ -1,25 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const RtlContext = /*#__PURE__*/React.createContext();
-function RtlProvider(_ref) {
-  let {
-      value
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/_jsx(RtlContext.Provider, _extends({
-    value: value != null ? value : true
-  }, props));
-}
-process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
-  children: PropTypes.node,
-  value: PropTypes.bool
-} : void 0;
-export const useRtl = () => {
-  const value = React.useContext(RtlContext);
-  return value != null ? value : false;
-};
-export default RtlProvider;

package/esm/Stack/StackProps.js

@@ -1 +0,0 @@
-export {};