@mui/system 5.10.17 → 5.11.0

package/Unstable_Grid/GridProps.d.ts

@@ -1,162 +1,162 @@
-import * as React from 'react';
-import { OverrideProps, IfEquals } from '@mui/types';
-import { SxProps } from '../styleFunctionSx';
-import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
-import { SystemProps } from '../Box';
-type ResponsiveStyleValue<T> = T | Array<T | null> | {
-    [key in Breakpoint]?: T | null;
-};
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-export type GridSpacing = number | string;
-export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-export type GridSize = 'auto' | number;
-export interface GridDefaultBreakpoints {
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    lg?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-     */
-    lgOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `md` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    md?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `md` breakpoint and wider screens if not overridden.
-     */
-    mdOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    sm?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-     */
-    smOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-     * @default false
-     */
-    xl?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-     */
-    xlOffset?: GridSize;
-    /**
-     * If a number, it sets the number of columns the grid item uses.
-     * It can't be greater than the total number of columns of the container (12 by default).
-     * If 'auto', the grid item's width matches its content.
-     * If false, the prop is ignored.
-     * If true, the grid item's width grows to use the space available in the grid container.
-     * The value is applied for all the screen sizes with the lowest priority.
-     * @default false
-     */
-    xs?: boolean | GridSize;
-    /**
-     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
-     * If 'auto', the grid item push itself to the right-end of the container.
-     * The value is applied for the `xs` breakpoint and wider screens if not overridden.
-     */
-    xsOffset?: GridSize;
-}
-type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
-interface BreakpointOverridesEmpty {
-}
-type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
-export interface GridBaseProps extends Breakpoints {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The number of columns.
-     * @default 12
-     */
-    columns?: ResponsiveStyleValue<number>;
-    /**
-     * Defines the horizontal space between the type `item` components.
-     * It overrides the value of the `spacing` prop.
-     */
-    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
-    /**
-     * If `true`, the component will have the flex *container* behavior.
-     * You should be wrapping *items* with a *container*.
-     * @default false
-     */
-    container?: boolean;
-    /**
-     * Defines the `flex-direction` style property.
-     * It is applied for all screen sizes.
-     * @default 'row'
-     */
-    direction?: ResponsiveStyleValue<GridDirection>;
-    /**
-     * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
-     */
-    disableEqualOverflow?: boolean;
-    /**
-     * Defines the vertical space between the type `item` components.
-     * It overrides the value of the `spacing` prop.
-     */
-    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
-    /**
-     * Defines the space between the type `item` components.
-     * It can only be used on a type `container` component.
-     * @default 0
-     */
-    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
-    /**
-     * Defines the `flex-wrap` style property.
-     * It's applied for all screen sizes.
-     * @default 'wrap'
-     */
-    wrap?: GridWrap;
-}
-export interface GridOwnerState extends GridBaseProps {
-    nested: boolean;
-    gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
-    gridOffset: Partial<Record<Breakpoint, GridSize>>;
-}
-export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & GridBaseProps & {
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: D;
-}
-export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
-    component?: React.ElementType;
-}> = OverrideProps<GridTypeMap<P, D>, D>;
-export {};
+import * as React from 'react';
+import { OverrideProps, IfEquals } from '@mui/types';
+import { SxProps } from '../styleFunctionSx';
+import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
+import { SystemProps } from '../Box';
+type ResponsiveStyleValue<T> = T | Array<T | null> | {
+    [key in Breakpoint]?: T | null;
+};
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | number;
+export interface GridDefaultBreakpoints {
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    lg?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+     */
+    lgOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `md` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    md?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `md` breakpoint and wider screens if not overridden.
+     */
+    mdOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    sm?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+     */
+    smOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+     * @default false
+     */
+    xl?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+     */
+    xlOffset?: GridSize;
+    /**
+     * If a number, it sets the number of columns the grid item uses.
+     * It can't be greater than the total number of columns of the container (12 by default).
+     * If 'auto', the grid item's width matches its content.
+     * If false, the prop is ignored.
+     * If true, the grid item's width grows to use the space available in the grid container.
+     * The value is applied for all the screen sizes with the lowest priority.
+     * @default false
+     */
+    xs?: boolean | GridSize;
+    /**
+     * If a number, it sets the margin-left equals to the number of columns the grid item uses.
+     * If 'auto', the grid item push itself to the right-end of the container.
+     * The value is applied for the `xs` breakpoint and wider screens if not overridden.
+     */
+    xsOffset?: GridSize;
+}
+type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
+interface BreakpointOverridesEmpty {
+}
+type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
+export interface GridBaseProps extends Breakpoints {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The number of columns.
+     * @default 12
+     */
+    columns?: ResponsiveStyleValue<number>;
+    /**
+     * Defines the horizontal space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * If `true`, the component will have the flex *container* behavior.
+     * You should be wrapping *items* with a *container*.
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'row'
+     */
+    direction?: ResponsiveStyleValue<GridDirection>;
+    /**
+     * If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
+     */
+    disableEqualOverflow?: boolean;
+    /**
+     * Defines the vertical space between the type `item` components.
+     * It overrides the value of the `spacing` prop.
+     */
+    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+    /**
+     * Defines the space between the type `item` components.
+     * It can only be used on a type `container` component.
+     * @default 0
+     */
+    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+    /**
+     * Defines the `flex-wrap` style property.
+     * It's applied for all screen sizes.
+     * @default 'wrap'
+     */
+    wrap?: GridWrap;
+}
+export interface GridOwnerState extends GridBaseProps {
+    nested: boolean;
+    gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
+    gridOffset: Partial<Record<Breakpoint, GridSize>>;
+}
+export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & GridBaseProps & {
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<P, D>, D>;
+export {};

package/Unstable_Grid/createGrid.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { OverridableComponent } from '@mui/types';
-import { GridTypeMap } from './GridProps';
-declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
-declare function useThemePropsDefault<T extends {}>(props: T): T & {};
-export default function createGrid(options?: {
-    createStyledComponent?: typeof defaultCreateStyledComponent;
-    useThemeProps?: typeof useThemePropsDefault;
-    componentName?: string;
-}): OverridableComponent<GridTypeMap<{}, "div">>;
-export {};
+import * as React from 'react';
+import { OverridableComponent } from '@mui/types';
+import { GridTypeMap } from './GridProps';
+declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
+declare function useThemePropsDefault<T extends {}>(props: T): T & {};
+export default function createGrid(options?: {
+    createStyledComponent?: typeof defaultCreateStyledComponent;
+    useThemeProps?: typeof useThemePropsDefault;
+    componentName?: string;
+}): OverridableComponent<GridTypeMap<{}, "div">>;
+export {};

package/Unstable_Grid/gridClasses.d.ts

@@ -1,20 +1,20 @@
-export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
-}
-export type GridClassKey = keyof GridClasses;
-export declare function getGridUtilityClass(slot: string): string;
-declare const gridClasses: GridClasses;
-export default gridClasses;
+export interface GridClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `container={true}`. */
+    container: string;
+    /** Styles applied to the root element if `direction="column"`. */
+    'direction-xs-column': string;
+    /** Styles applied to the root element if `direction="column-reverse"`. */
+    'direction-xs-column-reverse': string;
+    /** Styles applied to the root element if `direction="row-reverse"`. */
+    'direction-xs-row-reverse': string;
+    /** Styles applied to the root element if `wrap="nowrap"`. */
+    'wrap-xs-nowrap': string;
+    /** Styles applied to the root element if `wrap="reverse"`. */
+    'wrap-xs-wrap-reverse': string;
+}
+export type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;

package/Unstable_Grid/gridGenerator.d.ts

@@ -1,29 +1,29 @@
-import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
-import { Spacing } from '../createTheme/createSpacing';
-import { ResponsiveStyleValue } from '../styleFunctionSx';
-import { GridDirection, GridOwnerState } from './GridProps';
-interface Props {
-    theme: {
-        breakpoints: Breakpoints;
-        spacing?: Spacing;
-    };
-    ownerState: GridOwnerState & {
-        parentDisableEqualOverflow?: boolean;
-    };
-}
-interface Iterator<T> {
-    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
-}
-export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
-export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
-export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridStyles: ({ ownerState }: Props) => {};
-export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
-export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
-export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
-export {};
+import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Spacing } from '../createTheme/createSpacing';
+import { ResponsiveStyleValue } from '../styleFunctionSx';
+import { GridDirection, GridOwnerState } from './GridProps';
+interface Props {
+    theme: {
+        breakpoints: Breakpoints;
+        spacing?: Spacing;
+    };
+    ownerState: GridOwnerState & {
+        parentDisableEqualOverflow?: boolean;
+    };
+}
+interface Iterator<T> {
+    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
+export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridStyles: ({ ownerState }: Props) => {};
+export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
+export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
+export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
+export {};

package/Unstable_Grid/index.d.ts

@@ -1,5 +1,5 @@
-export { default } from './Grid';
-export { default as createGrid } from './createGrid';
-export * from './GridProps';
-export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
+export { default } from './Grid';
+export { default as createGrid } from './createGrid';
+export * from './GridProps';
+export { default as gridClasses } from './gridClasses';
+export * from './gridClasses';

package/borders.js

@@ -4,13 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
+exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
+exports.borderTransform = borderTransform;
+exports.default = void 0;
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
 var _spacing = require("./spacing");
 var _breakpoints = require("./breakpoints");
-function getBorder(value) {
+function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
   }
@@ -19,31 +21,31 @@ function getBorder(value) {
 const border = (0, _style.default)({
   prop: 'border',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.border = border;
 const borderTop = (0, _style.default)({
   prop: 'borderTop',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderTop = borderTop;
 const borderRight = (0, _style.default)({
   prop: 'borderRight',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderRight = borderRight;
 const borderBottom = (0, _style.default)({
   prop: 'borderBottom',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderBottom = borderBottom;
 const borderLeft = (0, _style.default)({
   prop: 'borderLeft',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 exports.borderLeft = borderLeft;
 const borderColor = (0, _style.default)({
@@ -70,6 +72,9 @@ const borderLeftColor = (0, _style.default)({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 exports.borderLeftColor = borderLeftColor;
 const borderRadius = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {

package/breakpoints.js

@@ -63,6 +63,8 @@ function handleBreakpoints(props, propValue, styleFromPropValue) {
   return output;
 }
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
     const theme = props.theme || {};
     const base = styleFunction(props);

package/compose.js

@@ -13,6 +13,9 @@ function compose(...styles) {
     });
     return acc;
   }, {});
+
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {

package/createBox.d.ts

@@ -1,9 +1,7 @@
 import Box from './Box';
-import styleFunctionSx from './styleFunctionSx';
 
 export default function createBox(options?: {
   defaultTheme: object;
   defaultClassName?: string;
   generateClassName?: (componentName: string) => string;
-  styleFunctionSx?: typeof styleFunctionSx;
 }): typeof Box;

package/createBox.js

@@ -20,12 +20,11 @@ function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = _styleFunctionSx.default
+    generateClassName
   } = options;
   const BoxRoot = (0, _styledEngine.default)('div', {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
+  })(_styleFunctionSx.default);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = (0, _useTheme.default)(defaultTheme);
     const _extendSxProp = (0, _styleFunctionSx.extendSxProp)(inProps),

package/createBox.spec.d.ts

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

package/createStyled.js

@@ -85,12 +85,11 @@ function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = _styleFunctionSx.default
+    slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
     const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-    return styleFunctionSx((0, _extends2.default)({}, props, {
+    return (0, _styleFunctionSx.default)((0, _extends2.default)({}, props, {
       theme
     }));
   };

package/createTheme/createSpacing.d.ts

@@ -1,10 +1,10 @@
-export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
-export type SpacingArgument = number | string;
-export interface Spacing {
-    (): string;
-    (value: number): string;
-    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
-    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
-    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
-}
-export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
+export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
+export type SpacingArgument = number | string;
+export interface Spacing {
+    (): string;
+    (value: number): string;
+    (topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
+    (top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
+    (top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
+}
+export default function createSpacing(spacingInput?: SpacingOptions): Spacing;

package/createTheme/createTheme.d.ts

@@ -1,6 +1,8 @@
+import { CSSObject } from '@mui/styled-engine';
 import { Breakpoints, BreakpointsOptions } from './createBreakpoints';
 import { Shape, ShapeOptions } from './shape';
 import { Spacing, SpacingOptions } from './createSpacing';
+import { SxConfig, SxProps } from '../styleFunctionSx';
 
 export { Breakpoint, BreakpointOverrides } from './createBreakpoints';
 
@@ -18,6 +20,7 @@ export interface ThemeOptions {
   components?: Record<string, any>;
   typography?: unknown;
   zIndex?: Record<string, number>;
+  unstable_sxConfig?: SxConfig;
 }
 
 export interface Theme {
@@ -32,6 +35,8 @@ export interface Theme {
   mixins?: unknown;
   typography?: unknown;
   zIndex?: unknown;
+  unstable_sxConfig: SxConfig;
+  unstable_sx: (props: SxProps<Theme>) => CSSObject;
 }
 
 /**