@mui/system 9.1.1 → 9.2.0

package/borders/borders.d.ts

@@ -1,15 +1,17 @@
-import { PropsFor, SimpleStyleFunction } from "../style/index.js";
-export const border: SimpleStyleFunction<'border'>;
-export const borderTop: SimpleStyleFunction<'borderTop'>;
-export const borderRight: SimpleStyleFunction<'borderRight'>;
-export const borderBottom: SimpleStyleFunction<'borderBottom'>;
-export const borderLeft: SimpleStyleFunction<'borderLeft'>;
-export const borderColor: SimpleStyleFunction<'borderColor'>;
-export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
-export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
-export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
-export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
-export const borderRadius: SimpleStyleFunction<'borderRadius'>;
+import type { PropsFor, SimpleStyleFunction } from "../style/index.js";
+export declare const border: SimpleStyleFunction<"border">;
+export declare const borderTop: SimpleStyleFunction<"borderTop">;
+export declare const borderRight: SimpleStyleFunction<"borderRight">;
+export declare const borderBottom: SimpleStyleFunction<"borderBottom">;
+export declare const borderLeft: SimpleStyleFunction<"borderLeft">;
+export declare const borderColor: SimpleStyleFunction<"borderColor">;
+export declare const borderTopColor: SimpleStyleFunction<"borderTopColor">;
+export declare const borderRightColor: SimpleStyleFunction<"borderRightColor">;
+export declare const borderBottomColor: SimpleStyleFunction<"borderBottomColor">;
+export declare const borderLeftColor: SimpleStyleFunction<"borderLeftColor">;
+export declare const outline: SimpleStyleFunction<"outline">;
+export declare const outlineColor: SimpleStyleFunction<"outlineColor">;
+export declare const borderRadius: SimpleStyleFunction<'borderRadius'>;
 declare const borders: SimpleStyleFunction<'border' | 'borderTop' | 'borderRight' | 'borderBottom' | 'borderLeft' | 'borderColor' | 'borderRadius'>;
 export type BordersProps = PropsFor<typeof borders>;
 export default borders;

package/borders/borders.js

@@ -12,6 +12,7 @@ var _style = _interopRequireDefault(require("../style"));
 var _compose = _interopRequireDefault(require("../compose"));
 var _spacing = require("../spacing");
 var _breakpoints = require("../breakpoints");
+/** @internal */
 function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
@@ -22,7 +23,7 @@ function createBorderStyle(prop, transform) {
   return (0, _style.default)({
     prop,
     themeKey: 'borders',
-    transform
+    transform: transform
   });
 }
 const border = exports.border = createBorderStyle('border', borderTransform);
@@ -37,9 +38,6 @@ const borderBottomColor = exports.borderBottomColor = createBorderStyle('borderB
 const borderLeftColor = exports.borderLeftColor = createBorderStyle('borderLeftColor');
 const outline = exports.outline = createBorderStyle('outline', borderTransform);
 const outlineColor = exports.outlineColor = createBorderStyle('outlineColor');
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
 const borderRadius = props => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'shape.borderRadius', 4, 'borderRadius');

package/borders/borders.mjs

@@ -3,6 +3,8 @@ import style from "../style/index.mjs";
 import compose from "../compose/index.mjs";
 import { createUnaryUnit, getValue } from "../spacing/index.mjs";
 import { handleBreakpoints } from "../breakpoints/index.mjs";
+
+/** @internal */
 export function borderTransform(value) {
   if (typeof value !== 'number') {
     return value;
@@ -13,7 +15,7 @@ function createBorderStyle(prop, transform) {
   return style({
     prop,
     themeKey: 'borders',
-    transform
+    transform: transform
   });
 }
 export const border = createBorderStyle('border', borderTransform);
@@ -28,9 +30,6 @@ export const borderBottomColor = createBorderStyle('borderBottomColor');
 export const borderLeftColor = createBorderStyle('borderLeftColor');
 export const outline = createBorderStyle('outline', borderTransform);
 export const outlineColor = createBorderStyle('outlineColor');
-
-// 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/breakpoints/breakpoints.d.mts

@@ -1,22 +1,19 @@
-import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from "../createBreakpoints/createBreakpoints.mjs";
+import type { CSSObject } from '@mui/styled-engine';
+import type { Breakpoints } from "../createBreakpoints/createBreakpoints.mjs";
 import type { Breakpoint, Theme } from "../createTheme/index.mjs";
-import { ResponsiveStyleValue } from "../styleFunctionSx/index.mjs";
-import { StyleFunction } from "../style/index.mjs";
-export const DEFAULT_BREAKPOINTS: Breakpoints;
+import type { ResponsiveStyleValue } from "../styleFunctionSx/index.mjs";
+import type { StyleFunction } from "../style/index.mjs";
+export declare const DEFAULT_BREAKPOINTS: Breakpoints;
+export declare function handleBreakpoints<Props>(props: Props, propValue: any, styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any): any;
+export declare function iterateBreakpoints(target: any, theme: Theme | undefined, propValue: any, callback: (mediaKey: string | undefined, value: any, initialKey?: string) => any): any;
+type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare function setupBreakpoints<Props, BreakpointsInput extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<BreakpointsInput, Props>> & Props>;
+export declare function mergeBreakpointsInOrder(breakpoints: Breakpoints, ...styles: CSSObject[]): CSSObject;
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
   breakpoints?: Breakpoints['values'] | undefined;
   base?: Record<string, boolean> | undefined;
 }
-export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
-export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;
-export function iterateBreakpoints(target: any, theme: Theme, propValue: any, callback: (mediaKey: string | undefined, value: any, initialKey?: string) => any): any;
-export function handleBreakpoints<Props>(props: Props, propValue: any, styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any): any;
-export function hasBreakpoint(breakpoints: Breakpoints, value: any): boolean;
-type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/**
- * @returns An enhanced stylefunction that considers breakpoints
- */
-export default function breakpoints<Props, BreakpointsInput extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<BreakpointsInput, Props>> & Props>;
+export declare function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
+export declare function hasBreakpoint(breakpoints: Breakpoints, value: any): boolean;
+export default setupBreakpoints;

package/breakpoints/breakpoints.d.ts

@@ -1,22 +1,19 @@
-import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+import type { CSSObject } from '@mui/styled-engine';
+import type { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
 import type { Breakpoint, Theme } from "../createTheme/index.js";
-import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
-import { StyleFunction } from "../style/index.js";
-export const DEFAULT_BREAKPOINTS: Breakpoints;
+import type { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
+import type { StyleFunction } from "../style/index.js";
+export declare const DEFAULT_BREAKPOINTS: Breakpoints;
+export declare function handleBreakpoints<Props>(props: Props, propValue: any, styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any): any;
+export declare function iterateBreakpoints(target: any, theme: Theme | undefined, propValue: any, callback: (mediaKey: string | undefined, value: any, initialKey?: string) => any): any;
+type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+declare function setupBreakpoints<Props, BreakpointsInput extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<BreakpointsInput, Props>> & Props>;
+export declare function mergeBreakpointsInOrder(breakpoints: Breakpoints, ...styles: CSSObject[]): CSSObject;
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
   breakpoints?: Breakpoints['values'] | undefined;
   base?: Record<string, boolean> | undefined;
 }
-export function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
-export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;
-export function iterateBreakpoints(target: any, theme: Theme, propValue: any, callback: (mediaKey: string | undefined, value: any, initialKey?: string) => any): any;
-export function handleBreakpoints<Props>(props: Props, propValue: any, styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any): any;
-export function hasBreakpoint(breakpoints: Breakpoints, value: any): boolean;
-type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/**
- * @returns An enhanced stylefunction that considers breakpoints
- */
-export default function breakpoints<Props, BreakpointsInput extends string = DefaultBreakPoints>(styleFunction: StyleFunction<Props>): StyleFunction<Partial<Record<BreakpointsInput, Props>> & Props>;
+export declare function resolveBreakpointValues<T>(options: ResolveBreakpointValuesOptions<T>): Record<string, T>;
+export declare function hasBreakpoint(breakpoints: Breakpoints, value: any): boolean;
+export default setupBreakpoints;

package/breakpoints/breakpoints.js

@@ -26,6 +26,7 @@ const EMPTY_THEME = {};
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
+/** @internal */
 const values = exports.values = {
   xs: 0,
   // phone
@@ -38,7 +39,7 @@ const values = exports.values = {
   xl: 1536 // large screen
 };
 const DEFAULT_BREAKPOINTS = exports.DEFAULT_BREAKPOINTS = (0, _createBreakpoints.default)({
-  values
+  values: values
 });
 const defaultContainerQueries = {
   containerQueries: containerName => ({
@@ -80,9 +81,7 @@ function iterateBreakpoints(target, theme, propValue, callback) {
         if (containerKey) {
           buildBreakpoint(target, containerKey, propValue[key], key, callback);
         }
-      }
-      // key is key
-      else if (key in breakpointValues) {
+      } else if (key in breakpointValues) {
         const mediaKey = breakpoints.up(key);
         buildBreakpoint(target, mediaKey, propValue[key], key, callback);
       } else {
@@ -100,7 +99,6 @@ function buildBreakpoint(target, mediaKey, value, initialKey, callback) {
   callback(mediaKey, value, initialKey);
 }
 function setupBreakpoints(styleFunction) {
-  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
     const theme = props.theme || {};
     const base = styleFunction(props);
@@ -128,6 +126,8 @@ function setupBreakpoints(styleFunction) {
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
   return newStyleFunction;
 }
+
+/** @internal */
 function createEmptyBreakpointObject(breakpoints = DEFAULT_BREAKPOINTS) {
   const {
     internal_mediaKeys: mediaKeys
@@ -138,6 +138,8 @@ function createEmptyBreakpointObject(breakpoints = DEFAULT_BREAKPOINTS) {
   }
   return result;
 }
+
+/** @internal */
 function removeUnusedBreakpoints(breakpoints, style) {
   const breakpointKeys = breakpoints.internal_mediaKeys;
   for (let i = 0; i < breakpointKeys.length; i += 1) {
@@ -154,11 +156,8 @@ function mergeBreakpointsInOrder(breakpoints, ...styles) {
   return removeUnusedBreakpoints(breakpoints, mergedOutput);
 }
 
-// compute base for responsive values; e.g.,
-// [1,2,3] => {xs: true, sm: true, md: true}
-// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+/** @internal */
 function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
-  // fixed value
   if (typeof breakpointValues !== 'object') {
     return {};
   }
@@ -179,11 +178,12 @@ function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
   }
   return base;
 }
-function resolveBreakpointValues({
-  values: breakpointValues,
-  breakpoints: themeBreakpoints,
-  base: customBase
-}) {
+function resolveBreakpointValues(options) {
+  const {
+    values: breakpointValues,
+    breakpoints: themeBreakpoints,
+    base: customBase
+  } = options;
   const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
   const keys = Object.keys(base);
   if (keys.length === 0) {
@@ -194,8 +194,9 @@ function resolveBreakpointValues({
     if (Array.isArray(breakpointValues)) {
       acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else if (typeof breakpointValues === 'object') {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+    } else if (typeof breakpointValues === 'object' && breakpointValues) {
+      const bv = breakpointValues;
+      acc[breakpoint] = bv[breakpoint] != null ? bv[breakpoint] : bv[previous];
       previous = breakpoint;
     } else {
       acc[breakpoint] = breakpointValues;

package/breakpoints/breakpoints.mjs

@@ -9,6 +9,7 @@ const EMPTY_THEME = {};
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.
+/** @internal */
 export const values = {
   xs: 0,
   // phone
@@ -21,7 +22,7 @@ export const values = {
   xl: 1536 // large screen
 };
 export const DEFAULT_BREAKPOINTS = createBreakpoints({
-  values
+  values: values
 });
 const defaultContainerQueries = {
   containerQueries: containerName => ({
@@ -63,9 +64,7 @@ export function iterateBreakpoints(target, theme, propValue, callback) {
         if (containerKey) {
           buildBreakpoint(target, containerKey, propValue[key], key, callback);
         }
-      }
-      // key is key
-      else if (key in breakpointValues) {
+      } else if (key in breakpointValues) {
         const mediaKey = breakpoints.up(key);
         buildBreakpoint(target, mediaKey, propValue[key], key, callback);
       } else {
@@ -83,7 +82,6 @@ function buildBreakpoint(target, mediaKey, value, initialKey, callback) {
   callback(mediaKey, value, initialKey);
 }
 function setupBreakpoints(styleFunction) {
-  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = props => {
     const theme = props.theme || {};
     const base = styleFunction(props);
@@ -111,6 +109,8 @@ function setupBreakpoints(styleFunction) {
   newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
   return newStyleFunction;
 }
+
+/** @internal */
 export function createEmptyBreakpointObject(breakpoints = DEFAULT_BREAKPOINTS) {
   const {
     internal_mediaKeys: mediaKeys
@@ -121,6 +121,8 @@ export function createEmptyBreakpointObject(breakpoints = DEFAULT_BREAKPOINTS) {
   }
   return result;
 }
+
+/** @internal */
 export function removeUnusedBreakpoints(breakpoints, style) {
   const breakpointKeys = breakpoints.internal_mediaKeys;
   for (let i = 0; i < breakpointKeys.length; i += 1) {
@@ -137,11 +139,8 @@ export function mergeBreakpointsInOrder(breakpoints, ...styles) {
   return removeUnusedBreakpoints(breakpoints, mergedOutput);
 }
 
-// compute base for responsive values; e.g.,
-// [1,2,3] => {xs: true, sm: true, md: true}
-// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
+/** @internal */
 export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
-  // fixed value
   if (typeof breakpointValues !== 'object') {
     return {};
   }
@@ -162,11 +161,12 @@ export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
   }
   return base;
 }
-export function resolveBreakpointValues({
-  values: breakpointValues,
-  breakpoints: themeBreakpoints,
-  base: customBase
-}) {
+export function resolveBreakpointValues(options) {
+  const {
+    values: breakpointValues,
+    breakpoints: themeBreakpoints,
+    base: customBase
+  } = options;
   const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
   const keys = Object.keys(base);
   if (keys.length === 0) {
@@ -177,8 +177,9 @@ export function resolveBreakpointValues({
     if (Array.isArray(breakpointValues)) {
       acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else if (typeof breakpointValues === 'object') {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
+    } else if (typeof breakpointValues === 'object' && breakpointValues) {
+      const bv = breakpointValues;
+      acc[breakpoint] = bv[breakpoint] != null ? bv[breakpoint] : bv[previous];
       previous = breakpoint;
     } else {
       acc[breakpoint] = breakpointValues;

package/compose/compose.d.mts

@@ -1,15 +1,8 @@
-import { StyleFunction } from "../style/index.mjs";
-
-/**
- * given a list of StyleFunction return the intersection of the props each individual
- * StyleFunction requires.
- *
- * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
- * their composed function requires { color: string, spacing: number }
- */
+import type { StyleFunction } from "../style/index.mjs";
 type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
 type ComposedOwnerState<T> = ComposedArg<T>;
 export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
   filterProps: string[];
 };
-export default function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;
+declare function compose<T extends Array<StyleFunction<any>>>(...styles: T): ComposedStyleFunction<T>;
+export default compose;

package/compose/compose.d.ts

@@ -1,15 +1,8 @@
-import { StyleFunction } from "../style/index.js";
-
-/**
- * given a list of StyleFunction return the intersection of the props each individual
- * StyleFunction requires.
- *
- * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
- * their composed function requires { color: string, spacing: number }
- */
+import type { StyleFunction } from "../style/index.js";
 type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
 type ComposedOwnerState<T> = ComposedArg<T>;
 export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<ComposedOwnerState<T>> & {
   filterProps: string[];
 };
-export default function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;
+declare function compose<T extends Array<StyleFunction<any>>>(...styles: T): ComposedStyleFunction<T>;
+export default compose;

package/compose/compose.js

@@ -13,8 +13,6 @@ function compose(...styles) {
     });
     return acc;
   }, {});
-
-  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     const result = {};
     for (const prop in props) {

package/compose/compose.mjs

@@ -6,8 +6,6 @@ function compose(...styles) {
     });
     return acc;
   }, {});
-
-  // eslint-disable-next-line react/function-component-definition
   const fn = props => {
     const result = {};
     for (const prop in props) {

package/createBox/createBox.d.mts

@@ -1,9 +1,9 @@
-import { OverridableComponent } from '@mui/types';
-import { BoxTypeMap } from "../Box/index.mjs";
-import { Theme as SystemTheme } from "../createTheme/index.mjs";
+import type { OverridableComponent } from '@mui/types';
+import type { BoxTypeMap } from "../Box/index.mjs";
+import type { Theme as SystemTheme } from "../createTheme/index.mjs";
 export default function createBox<T extends object = SystemTheme, AdditionalProps extends Record<string, unknown> = {}>(options?: {
   themeId?: string | undefined;
-  defaultTheme: T;
+  defaultTheme?: T | undefined;
   defaultClassName?: string | undefined;
   generateClassName?: ((componentName: string) => string) | undefined;
 }): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

package/createBox/createBox.d.ts

@@ -1,9 +1,9 @@
-import { OverridableComponent } from '@mui/types';
-import { BoxTypeMap } from "../Box/index.js";
-import { Theme as SystemTheme } from "../createTheme/index.js";
+import type { OverridableComponent } from '@mui/types';
+import type { BoxTypeMap } from "../Box/index.js";
+import type { Theme as SystemTheme } from "../createTheme/index.js";
 export default function createBox<T extends object = SystemTheme, AdditionalProps extends Record<string, unknown> = {}>(options?: {
   themeId?: string | undefined;
-  defaultTheme: T;
+  defaultTheme?: T | undefined;
   defaultClassName?: string | undefined;
   generateClassName?: ((componentName: string) => string) | undefined;
 }): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

package/createBreakpoints/createBreakpoints.d.mts

@@ -1,68 +1,17 @@
-import { OverridableStringUnion } from '@mui/types';
+import type { OverridableStringUnion } from '@mui/types';
 export interface BreakpointOverrides {}
 export type Breakpoint = OverridableStringUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', BreakpointOverrides>;
-export const keys: Breakpoint[];
-
-// Keep in sync with docs/src/pages/customization/breakpoints/breakpoints.md
-// #host-reference
+export declare const breakpointKeys: Breakpoint[];
 export interface Breakpoints {
   keys: Breakpoint[];
-  /**
-   * Each breakpoint (a key) matches with a fixed screen width (a value).
-   * @default {
-   *    // extra-small
-   *    xs: 0,
-   *    // small
-   *    sm: 600,
-   *    // medium
-   *    md: 900,
-   *    // large
-   *    lg: 1200,
-   *    // extra-large
-   *    xl: 1536,
-   * }
-   */
   values: { [key in Breakpoint]: number };
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
-   */
   up: (key: Breakpoint | number) => string;
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
-   */
   down: (key: Breakpoint | number) => string;
-  /**
-   * @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
-   *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
-   */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
-   *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
-   */
   only: (key: Breakpoint) => string;
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.).
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths stopping at
-   *          the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
-   */
   not: (key: Breakpoint) => string;
-  /**
-   * The unit used for the breakpoint's values.
-   * @default 'px'
-   */
   unit?: string | undefined;
   /**
-   * Media query keys
    * @ignore - Do not document.
    */
   internal_mediaKeys: string[];
@@ -80,4 +29,4 @@ export interface BreakpointsOptions extends Partial<Breakpoints> {
    */
   unit?: string | undefined;
 }
-export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;
+export default function createBreakpoints(breakpoints: BreakpointsOptions): Breakpoints;

package/createBreakpoints/createBreakpoints.d.ts

@@ -1,68 +1,17 @@
-import { OverridableStringUnion } from '@mui/types';
+import type { OverridableStringUnion } from '@mui/types';
 export interface BreakpointOverrides {}
 export type Breakpoint = OverridableStringUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', BreakpointOverrides>;
-export const keys: Breakpoint[];
-
-// Keep in sync with docs/src/pages/customization/breakpoints/breakpoints.md
-// #host-reference
+export declare const breakpointKeys: Breakpoint[];
 export interface Breakpoints {
   keys: Breakpoint[];
-  /**
-   * Each breakpoint (a key) matches with a fixed screen width (a value).
-   * @default {
-   *    // extra-small
-   *    xs: 0,
-   *    // small
-   *    sm: 600,
-   *    // medium
-   *    md: 900,
-   *    // large
-   *    lg: 1200,
-   *    // extra-large
-   *    xl: 1536,
-   * }
-   */
   values: { [key in Breakpoint]: number };
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key (inclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-up-key-media-query)
-   */
   up: (key: Breakpoint | number) => string;
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-down-key-media-query)
-   */
   down: (key: Breakpoint | number) => string;
-  /**
-   * @param start - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @param end - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths greater than
-   *          the screen size given by the breakpoint key in the first argument (inclusive) and less than the screen size given by the breakpoint key in the second argument (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-between-start-end-media-query)
-   */
   between: (start: Breakpoint | number, end: Breakpoint | number) => string;
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.) or a screen width number in px.
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths starting from
-   *          the screen size given by the breakpoint key (inclusive) and stopping at the screen size given by the next breakpoint key (exclusive).
-   * @see [API documentation](https://mui.com/material-ui/customization/breakpoints/#theme-breakpoints-only-key-media-query)
-   */
   only: (key: Breakpoint) => string;
-  /**
-   * @param key - A breakpoint key (`xs`, `sm`, etc.).
-   * @returns A media query string ready to be used with most styling solutions, which matches screen widths stopping at
-   *          the screen size given by the breakpoint key (exclusive) and starting at the screen size given by the next breakpoint key (inclusive).
-   */
   not: (key: Breakpoint) => string;
-  /**
-   * The unit used for the breakpoint's values.
-   * @default 'px'
-   */
   unit?: string | undefined;
   /**
-   * Media query keys
    * @ignore - Do not document.
    */
   internal_mediaKeys: string[];
@@ -80,4 +29,4 @@ export interface BreakpointsOptions extends Partial<Breakpoints> {
    */
   unit?: string | undefined;
 }
-export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;
+export default function createBreakpoints(breakpoints: BreakpointsOptions): Breakpoints;

package/createBreakpoints/createBreakpoints.js

@@ -8,6 +8,10 @@ exports.default = createBreakpoints;
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 const breakpointKeys = exports.breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+// Keep in sync with docs/src/pages/customization/breakpoints/breakpoints.md
+// #host-reference
+
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -26,18 +30,12 @@ const sortBreakpointsValues = values => {
 // Keep in mind that @media is inclusive by the CSS specification.
 function createBreakpoints(breakpoints) {
   const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
     values = {
       xs: 0,
-      // phone
       sm: 600,
-      // tablet
       md: 900,
-      // small laptop
       lg: 1200,
-      // desktop
-      xl: 1536 // large screen
+      xl: 1536
     },
     unit = 'px',
     step = 5,
@@ -79,7 +77,7 @@ function createBreakpoints(breakpoints) {
     mediaKeys.push(up(keys[i]));
   }
   return {
-    keys,
+    keys: keys,
     values: sortedValues,
     up,
     down,