@mui/system 9.1.1 → 9.1.2

package/cssGrid/cssGrid.d.ts

@@ -1,16 +1,16 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
-export const gap: SimpleStyleFunction<'gap'>;
-export const columnGap: SimpleStyleFunction<'columnGap'>;
-export const rowGap: SimpleStyleFunction<'rowGap'>;
-export const gridColumn: SimpleStyleFunction<'gridColumn'>;
-export const gridRow: SimpleStyleFunction<'gridRow'>;
-export const gridAutoFlow: SimpleStyleFunction<'gridAutoFlow'>;
-export const gridAutoColumns: SimpleStyleFunction<'gridAutoColumns'>;
-export const gridAutoRows: SimpleStyleFunction<'gridAutoRows'>;
-export const gridTemplateColumns: SimpleStyleFunction<'gridTemplateColumns'>;
-export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
-export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
-export const gridArea: SimpleStyleFunction<'gridArea'>;
+import type { PropsFor, SimpleStyleFunction } from "../style/index.js";
+export declare const gap: SimpleStyleFunction<'gap'>;
+export declare const columnGap: SimpleStyleFunction<'columnGap'>;
+export declare const rowGap: SimpleStyleFunction<'rowGap'>;
+export declare const gridColumn: SimpleStyleFunction<'gridColumn'>;
+export declare const gridRow: SimpleStyleFunction<'gridRow'>;
+export declare const gridAutoFlow: SimpleStyleFunction<'gridAutoFlow'>;
+export declare const gridAutoColumns: SimpleStyleFunction<'gridAutoColumns'>;
+export declare const gridAutoRows: SimpleStyleFunction<'gridAutoRows'>;
+export declare const gridTemplateColumns: SimpleStyleFunction<'gridTemplateColumns'>;
+export declare const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
+export declare const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
+export declare const gridArea: SimpleStyleFunction<'gridArea'>;
 declare const grid: SimpleStyleFunction<'gap' | 'columnGap' | 'rowGap' | 'gridColumn' | 'gridRow' | 'gridAutoFlow' | 'gridAutoColumns' | 'gridAutoRows' | 'gridTemplateColumns' | 'gridTemplateRows' | 'gridTemplateAreas' | 'gridArea'>;
 export type CssGridProps = PropsFor<typeof grid>;
 export default grid;

package/cssGrid/cssGrid.js

@@ -10,8 +10,6 @@ var _compose = _interopRequireDefault(require("../compose"));
 var _spacing = require("../spacing");
 var _breakpoints = require("../breakpoints");
 var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
-// false positive
-// eslint-disable-next-line react/function-component-definition
 const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'gap');
@@ -27,9 +25,6 @@ gap.propTypes = process.env.NODE_ENV !== 'production' ? {
   gap: _responsivePropType.default
 } : {};
 gap.filterProps = ['gap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
 const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'columnGap');
@@ -45,9 +40,6 @@ columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   columnGap: _responsivePropType.default
 } : {};
 columnGap.filterProps = ['columnGap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
 const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'spacing', 8, 'rowGap');

package/cssGrid/cssGrid.mjs

@@ -3,9 +3,6 @@ import compose from "../compose/index.mjs";
 import { createUnaryUnit, getValue } from "../spacing/index.mjs";
 import { handleBreakpoints } from "../breakpoints/index.mjs";
 import responsivePropType from "../responsivePropType/index.mjs";
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
 export const gap = props => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
@@ -20,9 +17,6 @@ gap.propTypes = process.env.NODE_ENV !== 'production' ? {
   gap: responsivePropType
 } : {};
 gap.filterProps = ['gap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
 export const columnGap = props => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
@@ -37,9 +31,6 @@ columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
   columnGap: responsivePropType
 } : {};
 columnGap.filterProps = ['columnGap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
 export const rowGap = props => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');

package/cssVars/createCssVarsProvider.js

@@ -14,7 +14,7 @@ var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
-var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
+var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DISABLE_CSS_TRANSITION = exports.DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -332,7 +332,7 @@ function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
   const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)({
+  const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.buildInitColorSchemeScript)({
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultLightColorScheme,
     defaultDarkColorScheme,

package/cssVars/createCssVarsProvider.mjs

@@ -6,7 +6,7 @@ import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ThemeProvider from "../ThemeProvider/index.mjs";
-import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.mjs";
+import { buildInitColorSchemeScript, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.mjs";
 import useCurrentColorScheme from "./useCurrentColorScheme.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -324,7 +324,7 @@ export default function createCssVarsProvider(options) {
   } : void 0;
   const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
   const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-  const getInitColorSchemeScript = params => InitColorSchemeScript({
+  const getInitColorSchemeScript = params => buildInitColorSchemeScript({
     colorSchemeStorageKey: defaultColorSchemeStorageKey,
     defaultLightColorScheme,
     defaultDarkColorScheme,

package/cssVars/useCurrentColorScheme.js

@@ -82,6 +82,7 @@ function useCurrentColorScheme(options) {
   });
   const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
   React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsClient(true); // to rerender the component after hydration
   }, []);
   const colorScheme = getColorScheme(state);

package/cssVars/useCurrentColorScheme.mjs

@@ -73,6 +73,7 @@ export default function useCurrentColorScheme(options) {
   });
   const [isClient, setIsClient] = React.useState(noSsr || !isMultiSchemes);
   React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsClient(true); // to rerender the component after hydration
   }, []);
   const colorScheme = getColorScheme(state);

package/display/display.d.mts

@@ -1,4 +1,52 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
+import type { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
+export declare const displayPrint: import("../index.mjs").StyleFunction<{
+  displayPrint?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const displayRaw: import("../index.mjs").StyleFunction<{
+  display?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const overflow: import("../index.mjs").StyleFunction<{
+  overflow?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const textOverflow: import("../index.mjs").StyleFunction<{
+  textOverflow?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const visibility: import("../index.mjs").StyleFunction<{
+  visibility?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const whiteSpace: import("../index.mjs").StyleFunction<{
+  whiteSpace?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
 declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
 export type DisplayProps = PropsFor<typeof display>;
 export default display;

package/display/display.d.ts

@@ -1,4 +1,52 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
+import type { PropsFor, SimpleStyleFunction } from "../style/index.js";
+export declare const displayPrint: import("../index.js").StyleFunction<{
+  displayPrint?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const displayRaw: import("../index.js").StyleFunction<{
+  display?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const overflow: import("../index.js").StyleFunction<{
+  overflow?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const textOverflow: import("../index.js").StyleFunction<{
+  textOverflow?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const visibility: import("../index.js").StyleFunction<{
+  visibility?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
+export declare const whiteSpace: import("../index.js").StyleFunction<{
+  whiteSpace?: unknown;
+} & {
+  theme?: object | undefined;
+}> & {
+  filterProps: string[];
+  propTypes: any;
+};
 declare const display: SimpleStyleFunction<'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'>;
 export type DisplayProps = PropsFor<typeof display>;
 export default display;

package/display/display.js

@@ -31,4 +31,5 @@ const visibility = exports.visibility = (0, _style.default)({
 const whiteSpace = exports.whiteSpace = (0, _style.default)({
   prop: 'whiteSpace'
 });
-var _default = exports.default = (0, _compose.default)(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
+const display = (0, _compose.default)(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
+var _default = exports.default = display;

package/display/display.mjs

@@ -24,4 +24,5 @@ export const visibility = style({
 export const whiteSpace = style({
   prop: 'whiteSpace'
 });
-export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
+const display = compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
+export default display;

package/flexbox/flexbox.d.mts

@@ -1,17 +1,17 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
-export const flexBasis: SimpleStyleFunction<'flexBasis'>;
-export const flexDirection: SimpleStyleFunction<'flexDirection'>;
-export const flexWrap: SimpleStyleFunction<'flexWrap'>;
-export const justifyContent: SimpleStyleFunction<'justifyContent'>;
-export const alignItems: SimpleStyleFunction<'alignItems'>;
-export const alignContent: SimpleStyleFunction<'alignContent'>;
-export const order: SimpleStyleFunction<'order'>;
-export const flex: SimpleStyleFunction<'flex'>;
-export const flexGrow: SimpleStyleFunction<'flexGrow'>;
-export const flexShrink: SimpleStyleFunction<'flexShrink'>;
-export const alignSelf: SimpleStyleFunction<'alignSelf'>;
-export const justifyItems: SimpleStyleFunction<'justifyItems'>;
-export const justifySelf: SimpleStyleFunction<'justifySelf'>;
+import type { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
+export declare const flexBasis: SimpleStyleFunction<'flexBasis'>;
+export declare const flexDirection: SimpleStyleFunction<'flexDirection'>;
+export declare const flexWrap: SimpleStyleFunction<'flexWrap'>;
+export declare const justifyContent: SimpleStyleFunction<'justifyContent'>;
+export declare const alignItems: SimpleStyleFunction<'alignItems'>;
+export declare const alignContent: SimpleStyleFunction<'alignContent'>;
+export declare const order: SimpleStyleFunction<'order'>;
+export declare const flex: SimpleStyleFunction<'flex'>;
+export declare const flexGrow: SimpleStyleFunction<'flexGrow'>;
+export declare const flexShrink: SimpleStyleFunction<'flexShrink'>;
+export declare const alignSelf: SimpleStyleFunction<'alignSelf'>;
+export declare const justifyItems: SimpleStyleFunction<'justifyItems'>;
+export declare const justifySelf: SimpleStyleFunction<'justifySelf'>;
 declare const flexbox: SimpleStyleFunction<'flexBasis' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'order' | 'flex' | 'flexGrow' | 'flexShrink' | 'alignSelf' | 'justifyItems' | 'justifySelf'>;
 export type FlexboxProps = PropsFor<typeof flexbox>;
 export default flexbox;

package/flexbox/flexbox.d.ts

@@ -1,17 +1,17 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
-export const flexBasis: SimpleStyleFunction<'flexBasis'>;
-export const flexDirection: SimpleStyleFunction<'flexDirection'>;
-export const flexWrap: SimpleStyleFunction<'flexWrap'>;
-export const justifyContent: SimpleStyleFunction<'justifyContent'>;
-export const alignItems: SimpleStyleFunction<'alignItems'>;
-export const alignContent: SimpleStyleFunction<'alignContent'>;
-export const order: SimpleStyleFunction<'order'>;
-export const flex: SimpleStyleFunction<'flex'>;
-export const flexGrow: SimpleStyleFunction<'flexGrow'>;
-export const flexShrink: SimpleStyleFunction<'flexShrink'>;
-export const alignSelf: SimpleStyleFunction<'alignSelf'>;
-export const justifyItems: SimpleStyleFunction<'justifyItems'>;
-export const justifySelf: SimpleStyleFunction<'justifySelf'>;
+import type { PropsFor, SimpleStyleFunction } from "../style/index.js";
+export declare const flexBasis: SimpleStyleFunction<'flexBasis'>;
+export declare const flexDirection: SimpleStyleFunction<'flexDirection'>;
+export declare const flexWrap: SimpleStyleFunction<'flexWrap'>;
+export declare const justifyContent: SimpleStyleFunction<'justifyContent'>;
+export declare const alignItems: SimpleStyleFunction<'alignItems'>;
+export declare const alignContent: SimpleStyleFunction<'alignContent'>;
+export declare const order: SimpleStyleFunction<'order'>;
+export declare const flex: SimpleStyleFunction<'flex'>;
+export declare const flexGrow: SimpleStyleFunction<'flexGrow'>;
+export declare const flexShrink: SimpleStyleFunction<'flexShrink'>;
+export declare const alignSelf: SimpleStyleFunction<'alignSelf'>;
+export declare const justifyItems: SimpleStyleFunction<'justifyItems'>;
+export declare const justifySelf: SimpleStyleFunction<'justifySelf'>;
 declare const flexbox: SimpleStyleFunction<'flexBasis' | 'flexDirection' | 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'order' | 'flex' | 'flexGrow' | 'flexShrink' | 'alignSelf' | 'justifyItems' | 'justifySelf'>;
 export type FlexboxProps = PropsFor<typeof flexbox>;
 export default flexbox;

package/getThemeValue/getThemeValue.d.mts

@@ -1 +1,2 @@
-export default function getThemeValue(prop: string, value: any, theme: object): any;
+declare function getThemeValue(prop: string, value: any, theme: object): any;
+export default getThemeValue;

package/getThemeValue/getThemeValue.d.ts

@@ -1 +1,2 @@
-export default function getThemeValue(prop: string, value: any, theme: object): any;
+declare function getThemeValue(prop: string, value: any, theme: object): any;
+export default getThemeValue;

package/getThemeValue/getThemeValue.js

@@ -27,6 +27,8 @@ const filterPropsMapping = {
   spacing: _spacing.default.filterProps,
   typography: _typography.default.filterProps
 };
+
+/** @internal */
 const styleFunctionMapping = exports.styleFunctionMapping = {
   borders: _borders.default,
   display: _display.default,
@@ -39,10 +41,12 @@ const styleFunctionMapping = exports.styleFunctionMapping = {
   spacing: _spacing.default,
   typography: _typography.default
 };
+
+/** @internal */
 const propToStyleFunction = exports.propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
-  filterPropsMapping[styleFnName].forEach(propName => {
+  for (const propName of filterPropsMapping[styleFnName]) {
     acc[propName] = styleFunctionMapping[styleFnName];
-  });
+  }
   return acc;
 }, {});
 function getThemeValue(prop, value, theme) {

package/getThemeValue/getThemeValue.mjs

@@ -20,6 +20,8 @@ const filterPropsMapping = {
   spacing: spacing.filterProps,
   typography: typography.filterProps
 };
+
+/** @internal */
 export const styleFunctionMapping = {
   borders,
   display,
@@ -27,15 +29,17 @@ export const styleFunctionMapping = {
   grid,
   positions,
   palette,
-  shadows,
+  shadows: shadows,
   sizing,
   spacing,
   typography
 };
+
+/** @internal */
 export const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
-  filterPropsMapping[styleFnName].forEach(propName => {
+  for (const propName of filterPropsMapping[styleFnName]) {
     acc[propName] = styleFunctionMapping[styleFnName];
-  });
+  }
   return acc;
 }, {});
 function getThemeValue(prop, value, theme) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.1.1
+ * @mui/system v9.1.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/system v9.1.1
+ * @mui/system v9.1.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/memoize/memoize.d.mts

@@ -1 +1 @@
-export default function memoize<ArgType = any, ReturnType = any>(fn: (arg: ArgType) => ReturnType): (arg: ArgType) => ReturnType;
+export default function memoize<ArgType extends keyof any = any, ReturnType = any>(fn: (arg: ArgType) => ReturnType): (arg: ArgType) => ReturnType;

package/memoize/memoize.d.ts

@@ -1 +1 @@
-export default function memoize<ArgType = any, ReturnType = any>(fn: (arg: ArgType) => ReturnType): (arg: ArgType) => ReturnType;
+export default function memoize<ArgType extends keyof any = any, ReturnType = any>(fn: (arg: ArgType) => ReturnType): (arg: ArgType) => ReturnType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
   "license": "MIT",
@@ -30,8 +30,8 @@
     "prop-types": "^15.8.1",
     "@mui/private-theming": "^9.1.1",
     "@mui/styled-engine": "^9.1.1",
-    "@mui/types": "^9.1.1",
-    "@mui/utils": "^9.1.1"
+    "@mui/utils": "^9.1.1",
+    "@mui/types": "^9.1.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -74,48 +74,6 @@
         "default": "./index.mjs"
       }
     },
-    "./Box": {
-      "import": {
-        "types": "./Box/index.d.mts",
-        "default": "./Box/index.mjs"
-      },
-      "require": {
-        "types": "./Box/index.d.ts",
-        "default": "./Box/index.js"
-      },
-      "default": {
-        "types": "./Box/index.d.mts",
-        "default": "./Box/index.mjs"
-      }
-    },
-    "./Container": {
-      "import": {
-        "types": "./Container/index.d.mts",
-        "default": "./Container/index.mjs"
-      },
-      "require": {
-        "types": "./Container/index.d.ts",
-        "default": "./Container/index.js"
-      },
-      "default": {
-        "types": "./Container/index.d.mts",
-        "default": "./Container/index.mjs"
-      }
-    },
-    "./createBreakpoints": {
-      "import": {
-        "types": "./createBreakpoints/index.d.mts",
-        "default": "./createBreakpoints/index.mjs"
-      },
-      "require": {
-        "types": "./createBreakpoints/index.d.ts",
-        "default": "./createBreakpoints/index.js"
-      },
-      "default": {
-        "types": "./createBreakpoints/index.d.mts",
-        "default": "./createBreakpoints/index.mjs"
-      }
-    },
     "./createTheme": {
       "import": {
         "types": "./createTheme/index.d.mts",
@@ -158,32 +116,32 @@
         "default": "./styleFunctionSx/index.mjs"
       }
     },
-    "./ThemeProvider": {
+    "./Box": {
       "import": {
-        "types": "./ThemeProvider/index.d.mts",
-        "default": "./ThemeProvider/index.mjs"
+        "types": "./Box/index.d.mts",
+        "default": "./Box/index.mjs"
       },
       "require": {
-        "types": "./ThemeProvider/index.d.ts",
-        "default": "./ThemeProvider/index.js"
+        "types": "./Box/index.d.ts",
+        "default": "./Box/index.js"
       },
       "default": {
-        "types": "./ThemeProvider/index.d.mts",
-        "default": "./ThemeProvider/index.mjs"
+        "types": "./Box/index.d.mts",
+        "default": "./Box/index.mjs"
       }
     },
-    "./useThemeProps": {
+    "./Container": {
       "import": {
-        "types": "./useThemeProps/index.d.mts",
-        "default": "./useThemeProps/index.mjs"
+        "types": "./Container/index.d.mts",
+        "default": "./Container/index.mjs"
       },
       "require": {
-        "types": "./useThemeProps/index.d.ts",
-        "default": "./useThemeProps/index.js"
+        "types": "./Container/index.d.ts",
+        "default": "./Container/index.js"
       },
       "default": {
-        "types": "./useThemeProps/index.d.mts",
-        "default": "./useThemeProps/index.mjs"
+        "types": "./Container/index.d.mts",
+        "default": "./Container/index.mjs"
       }
     },
     "./DefaultPropsProvider": {
@@ -256,6 +214,20 @@
         "default": "./Stack/index.mjs"
       }
     },
+    "./ThemeProvider": {
+      "import": {
+        "types": "./ThemeProvider/index.d.mts",
+        "default": "./ThemeProvider/index.mjs"
+      },
+      "require": {
+        "types": "./ThemeProvider/index.d.ts",
+        "default": "./ThemeProvider/index.js"
+      },
+      "default": {
+        "types": "./ThemeProvider/index.d.mts",
+        "default": "./ThemeProvider/index.mjs"
+      }
+    },
     "./borders": {
       "import": {
         "types": "./borders/index.d.mts",
@@ -326,6 +298,20 @@
         "default": "./createBox/index.mjs"
       }
     },
+    "./createBreakpoints": {
+      "import": {
+        "types": "./createBreakpoints/index.d.mts",
+        "default": "./createBreakpoints/index.mjs"
+      },
+      "require": {
+        "types": "./createBreakpoints/index.d.ts",
+        "default": "./createBreakpoints/index.js"
+      },
+      "default": {
+        "types": "./createBreakpoints/index.d.mts",
+        "default": "./createBreakpoints/index.mjs"
+      }
+    },
     "./createStyled": {
       "import": {
         "types": "./createStyled/index.d.mts",
@@ -620,6 +606,20 @@
         "default": "./useTheme/index.mjs"
       }
     },
+    "./useThemeProps": {
+      "import": {
+        "types": "./useThemeProps/index.d.mts",
+        "default": "./useThemeProps/index.mjs"
+      },
+      "require": {
+        "types": "./useThemeProps/index.d.ts",
+        "default": "./useThemeProps/index.js"
+      },
+      "default": {
+        "types": "./useThemeProps/index.d.mts",
+        "default": "./useThemeProps/index.mjs"
+      }
+    },
     "./useThemeWithoutDefault": {
       "import": {
         "types": "./useThemeWithoutDefault/index.d.mts",

package/palette/palette.d.mts

@@ -1,6 +1,7 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
-export const color: SimpleStyleFunction<'color'>;
-export const bgcolor: SimpleStyleFunction<'bgcolor'>;
+import type { PropsFor, SimpleStyleFunction } from "../style/index.mjs";
+export declare const color: SimpleStyleFunction<'color'>;
+export declare const bgcolor: SimpleStyleFunction<'bgcolor'>;
+export declare const backgroundColor: SimpleStyleFunction<'backgroundColor'>;
 declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
 export type PaletteProps = PropsFor<typeof palette>;
 export default palette;

package/palette/palette.d.ts

@@ -1,6 +1,7 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
-export const color: SimpleStyleFunction<'color'>;
-export const bgcolor: SimpleStyleFunction<'bgcolor'>;
+import type { PropsFor, SimpleStyleFunction } from "../style/index.js";
+export declare const color: SimpleStyleFunction<'color'>;
+export declare const bgcolor: SimpleStyleFunction<'bgcolor'>;
+export declare const backgroundColor: SimpleStyleFunction<'backgroundColor'>;
 declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
 export type PaletteProps = PropsFor<typeof palette>;
 export default palette;

package/palette/palette.js

@@ -8,6 +8,7 @@ exports.default = exports.color = exports.bgcolor = exports.backgroundColor = vo
 exports.paletteTransform = paletteTransform;
 var _style = _interopRequireDefault(require("../style"));
 var _compose = _interopRequireDefault(require("../compose"));
+/** @internal */
 function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;

package/palette/palette.mjs

@@ -1,5 +1,7 @@
 import style from "../style/index.mjs";
 import compose from "../compose/index.mjs";
+
+/** @internal */
 export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;