@mui/system 5.10.17 → 5.11.0

package/createTheme/createTheme.js

@@ -11,6 +11,8 @@ var _utils = require("@mui/utils");
 var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
 var _shape = _interopRequireDefault(require("./shape"));
 var _createSpacing = _interopRequireDefault(require("./createSpacing"));
+var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx/styleFunctionSx"));
+var _defaultSxConfig = _interopRequireDefault(require("../styleFunctionSx/defaultSxConfig"));
 const _excluded = ["breakpoints", "palette", "spacing", "shape"];
 function createTheme(options = {}, ...args) {
   const {
@@ -34,6 +36,13 @@ function createTheme(options = {}, ...args) {
     shape: (0, _extends2.default)({}, _shape.default, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = (0, _extends2.default)({}, _defaultSxConfig.default, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return (0, _styleFunctionSx.default)({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 var _default = createTheme;

package/cssGrid.js

@@ -10,6 +10,8 @@ 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');
@@ -25,6 +27,9 @@ 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');
@@ -40,6 +45,9 @@ 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/cssVars/createCssVarsProvider.spec.d.ts

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

package/cssVars/createGetCssVar.d.ts

@@ -1,5 +1,5 @@
-/**
- * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
- * and they does not need to remember the prefix (defined once).
- */
-export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;

package/cssVars/cssVarsParser.d.ts

@@ -1,63 +1,63 @@
-type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
- *
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
- *
- * @example
- * const { css, vars } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: 'var(--color)' } }
- * }, { prefix: 'foo' })
- *
- * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
- * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
- */
-export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
-    prefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: Record<string, string | number>;
-    vars: NestedRecord<string>;
-};
-export {};
+type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `prefix`: The prefix of the generated CSS variables. This function does not change the value.
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: 'var(--color)' } }
+ * }, { prefix: 'foo' })
+ *
+ * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
+ * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
+ */
+export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
+    prefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: Record<string, string | number>;
+    vars: NestedRecord<string>;
+};
+export {};

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,42 +1,42 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
-export interface GetInitColorSchemeScriptOptions {
-    /**
-     * The mode to be used for the first visit
-     * @default 'light'
-     */
-    defaultMode?: 'light' | 'dark' | 'system';
-    /**
-     * The default color scheme to be used on the light mode
-     * @default 'light'
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode
-     * * @default 'dark'
-     */
-    defaultDarkColorScheme?: string;
-    /**
-     * The node (provided as string) used to attach the color-scheme attribute
-     * @default 'document.documentElement'
-     */
-    colorSchemeNode?: string;
-    /**
-     * localStorage key used to store `mode`
-     * @default 'mode'
-     */
-    modeStorageKey?: string;
-    /**
-     * localStorage key used to store `colorScheme`
-     * @default 'color-scheme'
-     */
-    colorSchemeStorageKey?: string;
-    /**
-     * DOM attribute for applying color scheme
-     * @default 'data-color-scheme'
-     */
-    attribute?: string;
-}
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
+export interface GetInitColorSchemeScriptOptions {
+    /**
+     * The mode to be used for the first visit
+     * @default 'light'
+     */
+    defaultMode?: 'light' | 'dark' | 'system';
+    /**
+     * The default color scheme to be used on the light mode
+     * @default 'light'
+     */
+    defaultLightColorScheme?: string;
+    /**
+     * The default color scheme to be used on the dark mode
+     * * @default 'dark'
+     */
+    defaultDarkColorScheme?: string;
+    /**
+     * The node (provided as string) used to attach the color-scheme attribute
+     * @default 'document.documentElement'
+     */
+    colorSchemeNode?: string;
+    /**
+     * localStorage key used to store `mode`
+     * @default 'mode'
+     */
+    modeStorageKey?: string;
+    /**
+     * localStorage key used to store `colorScheme`
+     * @default 'color-scheme'
+     */
+    colorSchemeStorageKey?: string;
+    /**
+     * DOM attribute for applying color scheme
+     * @default 'data-color-scheme'
+     */
+    attribute?: string;
+}
+export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;

package/cssVars/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './createCssVarsProvider';
-export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+export { default } from './createCssVarsProvider';
+export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,53 +1,53 @@
-export type Mode = 'light' | 'dark' | 'system';
-export type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-    /**
-     * User selected mode.
-     * Note: on the server, mode is always undefined
-     */
-    mode: Mode | undefined;
-    /**
-     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-     */
-    systemMode: SystemMode | undefined;
-    /**
-     * The color scheme for the light mode.
-     */
-    lightColorScheme: SupportedColorScheme;
-    /**
-     * The color scheme for the dark mode.
-     */
-    darkColorScheme: SupportedColorScheme;
-}
-export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-    /**
-     * The current application color scheme. It is always `undefined` on the server.
-     */
-    colorScheme: SupportedColorScheme | undefined;
-    /**
-     * `mode` is saved to internal state and localStorage
-     * If `mode` is null, it will be reset to the defaultMode
-     */
-    setMode: (mode: Mode | null) => void;
-    /**
-     * `colorScheme` is saved to internal state and localStorage
-     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-     */
-    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-        light: SupportedColorScheme | null;
-        dark: SupportedColorScheme | null;
-    }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    storageWindow?: Window | null;
-}
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
-export {};
+export type Mode = 'light' | 'dark' | 'system';
+export type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+    /**
+     * User selected mode.
+     * Note: on the server, mode is always undefined
+     */
+    mode: Mode | undefined;
+    /**
+     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+     */
+    systemMode: SystemMode | undefined;
+    /**
+     * The color scheme for the light mode.
+     */
+    lightColorScheme: SupportedColorScheme;
+    /**
+     * The color scheme for the dark mode.
+     */
+    darkColorScheme: SupportedColorScheme;
+}
+export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+    /**
+     * The current application color scheme. It is always `undefined` on the server.
+     */
+    colorScheme: SupportedColorScheme | undefined;
+    /**
+     * `mode` is saved to internal state and localStorage
+     * If `mode` is null, it will be reset to the defaultMode
+     */
+    setMode: (mode: Mode | null) => void;
+    /**
+     * `colorScheme` is saved to internal state and localStorage
+     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+     */
+    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+        light: SupportedColorScheme | null;
+        dark: SupportedColorScheme | null;
+    }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    storageWindow?: Window | null;
+}
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
+export {};

package/esm/borders.js

@@ -3,7 +3,7 @@ import style from './style';
 import compose from './compose';
 import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
-function getBorder(value) {
+export function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
   }
@@ -12,27 +12,27 @@ function getBorder(value) {
 export const border = style({
   prop: 'border',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export const borderTop = style({
   prop: 'borderTop',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export const borderRight = style({
   prop: 'borderRight',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export const borderBottom = style({
   prop: 'borderBottom',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export const borderLeft = style({
   prop: 'borderLeft',
   themeKey: 'borders',
-  transform: getBorder
+  transform: borderTransform
 });
 export const borderColor = style({
   prop: 'borderColor',
@@ -54,6 +54,9 @@ export const borderLeftColor = style({
   prop: 'borderLeftColor',
   themeKey: 'palette'
 });
+
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const borderRadius = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');

package/esm/breakpoints.js

@@ -50,6 +50,8 @@ export 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/esm/compose.js

@@ -6,6 +6,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/esm/createBox.js

@@ -4,15 +4,14 @@ const _excluded = ["className", "component"];
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import defaultStyleFunctionSx, { extendSxProp } from './styleFunctionSx';
+import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
 import useTheme from './useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function createBox(options = {}) {
   const {
     defaultTheme,
     defaultClassName = 'MuiBox-root',
-    generateClassName,
-    styleFunctionSx = defaultStyleFunctionSx
+    generateClassName
   } = options;
   const BoxRoot = styled('div', {
     shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'

package/esm/createStyled.js

@@ -8,7 +8,7 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
-import defaultStyleFunctionSx from './styleFunctionSx';
+import styleFunctionSx from './styleFunctionSx';
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -74,8 +74,7 @@ export default function createStyled(input = {}) {
   const {
     defaultTheme = systemDefaultTheme,
     rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp,
-    styleFunctionSx = defaultStyleFunctionSx
+    slotShouldForwardProp = shouldForwardProp
   } = input;
   const systemSx = props => {
     const theme = isEmpty(props.theme) ? defaultTheme : props.theme;

package/esm/createTheme/createTheme.js

@@ -5,6 +5,8 @@ import { deepmerge } from '@mui/utils';
 import createBreakpoints from './createBreakpoints';
 import shape from './shape';
 import createSpacing from './createSpacing';
+import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
+import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
 function createTheme(options = {}, ...args) {
   const {
       breakpoints: breakpointsInput = {},
@@ -27,6 +29,13 @@ function createTheme(options = {}, ...args) {
     shape: _extends({}, shape, shapeInput)
   }, other);
   muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
+  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
+  muiTheme.unstable_sx = function sx(props) {
+    return styleFunctionSx({
+      sx: props,
+      theme: this
+    });
+  };
   return muiTheme;
 }
 export default createTheme;

package/esm/cssGrid.js

@@ -3,6 +3,9 @@ import compose from './compose';
 import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
 import responsivePropType from './responsivePropType';
+
+// 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');
@@ -17,6 +20,9 @@ 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');
@@ -31,6 +37,9 @@ 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/esm/index.js

@@ -21,8 +21,7 @@ export * from './spacing';
 export { default as style, getPath, getStyleValue } from './style';
 export { default as typography } from './typography';
 export * from './typography';
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
-export { default as experimental_sx } from './sx';
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';
 export { default as createBox } from './createBox';

package/esm/palette.js

@@ -1,6 +1,6 @@
 import style from './style';
 import compose from './compose';
-function transform(value, userValue) {
+export function paletteTransform(value, userValue) {
   if (userValue === 'grey') {
     return userValue;
   }
@@ -9,18 +9,18 @@ function transform(value, userValue) {
 export const color = style({
   prop: 'color',
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 export const bgcolor = style({
   prop: 'bgcolor',
   cssProperty: 'backgroundColor',
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 export const backgroundColor = style({
   prop: 'backgroundColor',
   themeKey: 'palette',
-  transform
+  transform: paletteTransform
 });
 const palette = compose(color, bgcolor, backgroundColor);
 export default palette;