@mui/system 7.0.1 → 7.1.0

package/modern/createTheme/createSpacing.d.ts

@@ -1,10 +0,0 @@
-export type SpacingOptions = number | string | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
-export type SpacingArgument = number | string;
-export interface Spacing {
-  (): string;
-  (value: SpacingArgument): 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, transform?: Spacing | (() => undefined) | ((abs: number | string) => number | number)): Spacing;

package/modern/createTheme/createSpacing.js

@@ -1,31 +0,0 @@
-import { createUnarySpacing } from "../spacing/index.js";
-
-// The different signatures imply different meaning for their arguments that can't be expressed structurally.
-// We express the difference with variable names.
-
-export default function createSpacing(spacingInput = 8,
-// Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-// Smaller components, such as icons, can align to a 4dp grid.
-// https://m2.material.io/design/layout/understanding-layout.html
-transform = createUnarySpacing({
-  spacing: spacingInput
-})) {
-  // Already transformed.
-  if (spacingInput.mui) {
-    return spacingInput;
-  }
-  const spacing = (...argsInput) => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!(argsInput.length <= 4)) {
-        console.error(`MUI: Too many arguments provided, expected between 0 and 4, got ${argsInput.length}`);
-      }
-    }
-    const args = argsInput.length === 0 ? [1] : argsInput;
-    return args.map(argument => {
-      const output = transform(argument);
-      return typeof output === 'number' ? `${output}px` : output;
-    }).join(' ');
-  };
-  spacing.mui = true;
-  return spacing;
-}

package/modern/createTheme/createTheme.d.ts

@@ -1,54 +0,0 @@
-import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints, BreakpointsOptions } from "../createBreakpoints/createBreakpoints.js";
-import { Shape, ShapeOptions } from "./shape.js";
-import { Spacing, SpacingOptions } from "./createSpacing.js";
-import { SxConfig, SxProps } from "../styleFunctionSx/index.js";
-import { ApplyStyles } from "./applyStyles.js";
-import { CssContainerQueries } from "../cssContainerQueries/index.js";
-export { Breakpoint, Breakpoints, BreakpointOverrides } from "../createBreakpoints/createBreakpoints.js";
-export type Direction = 'ltr' | 'rtl';
-export interface Typography {}
-export interface Mixins {}
-export interface Shadows {}
-export interface Transitions {}
-export interface ZIndex {}
-export interface ThemeOptions {
-  shape?: ShapeOptions;
-  breakpoints?: BreakpointsOptions;
-  direction?: Direction;
-  mixins?: Mixins;
-  palette?: Record<string, any>;
-  shadows?: Shadows;
-  spacing?: SpacingOptions;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  typography?: Typography;
-  zIndex?: ZIndex;
-  unstable_sxConfig?: SxConfig;
-}
-export interface Theme extends CssContainerQueries {
-  shape: Shape;
-  breakpoints: Breakpoints;
-  direction: Direction;
-  palette: Record<string, any> & {
-    mode: 'light' | 'dark';
-  };
-  shadows?: Shadows;
-  spacing: Spacing;
-  transitions?: Transitions;
-  components?: Record<string, any>;
-  mixins?: Mixins;
-  typography?: Typography;
-  zIndex?: ZIndex;
-  applyStyles: ApplyStyles<'light' | 'dark'>;
-  unstable_sxConfig: SxConfig;
-  unstable_sx: (props: SxProps<Theme>) => CSSObject;
-}
-
-/**
- * Generate a theme base on the options received.
- * @param options Takes an incomplete theme object and adds the missing parts.
- * @param args Deep merge the arguments with the about to be returned theme.
- * @returns A complete, ready-to-use theme object.
- */
-export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;

package/modern/createTheme/createTheme.js

@@ -1,49 +0,0 @@
-import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from "../createBreakpoints/createBreakpoints.js";
-import cssContainerQueries from "../cssContainerQueries/index.js";
-import shape from "./shape.js";
-import createSpacing from "./createSpacing.js";
-import styleFunctionSx from "../styleFunctionSx/styleFunctionSx.js";
-import defaultSxConfig from "../styleFunctionSx/defaultSxConfig.js";
-import applyStyles from "./applyStyles.js";
-function createTheme(options = {}, ...args) {
-  const {
-    breakpoints: breakpointsInput = {},
-    palette: paletteInput = {},
-    spacing: spacingInput,
-    shape: shapeInput = {},
-    ...other
-  } = options;
-  const breakpoints = createBreakpoints(breakpointsInput);
-  const spacing = createSpacing(spacingInput);
-  let muiTheme = deepmerge({
-    breakpoints,
-    direction: 'ltr',
-    components: {},
-    // Inject component definitions.
-    palette: {
-      mode: 'light',
-      ...paletteInput
-    },
-    spacing,
-    shape: {
-      ...shape,
-      ...shapeInput
-    }
-  }, other);
-  muiTheme = cssContainerQueries(muiTheme);
-  muiTheme.applyStyles = applyStyles;
-  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
-  muiTheme.unstable_sxConfig = {
-    ...defaultSxConfig,
-    ...other?.unstable_sxConfig
-  };
-  muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this
-    });
-  };
-  return muiTheme;
-}
-export default createTheme;

package/modern/createTheme/index.d.ts

@@ -1,4 +0,0 @@
-export { default } from "./createTheme.js";
-export * from "./createTheme.js";
-export { default as unstable_applyStyles } from "./applyStyles.js";
-export * from "./applyStyles.js";

package/modern/createTheme/index.js

@@ -1,3 +0,0 @@
-export { default } from "./createTheme.js";
-export { default as private_createBreakpoints } from "../createBreakpoints/createBreakpoints.js";
-export { default as unstable_applyStyles } from "./applyStyles.js";

package/modern/createTheme/shape.d.ts

@@ -1,6 +0,0 @@
-export interface Shape {
-  borderRadius: number;
-}
-export type ShapeOptions = Partial<Shape>;
-declare const shape: Shape;
-export default shape;

package/modern/createTheme/shape.js

@@ -1,4 +0,0 @@
-const shape = {
-  borderRadius: 4
-};
-export default shape;

package/modern/cssContainerQueries/cssContainerQueries.d.ts

@@ -1,23 +0,0 @@
-import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
-export interface ContainerQueries {
-  up: Breakpoints['up'];
-  down: Breakpoints['down'];
-  between: Breakpoints['between'];
-  only: Breakpoints['only'];
-  not: Breakpoints['not'];
-}
-export interface CssContainerQueries {
-  containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
-}
-/**
- * For using in `sx` prop to sort the breakpoint from low to high.
- * Note: this function does not work and will not support multiple units.
- *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
- *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
- */
-export declare function sortContainerQueries(theme: Partial<CssContainerQueries>, css: Record<string, any>): Record<string, any>;
-export declare function isCqShorthand(breakpointKeys: string[], value: string): boolean;
-export declare function getContainerQuery(theme: CssContainerQueries, shorthand: string): string | null;
-export default function cssContainerQueries<T extends {
-  breakpoints: Breakpoints;
-}>(themeInput: T): T & CssContainerQueries;

package/modern/cssContainerQueries/cssContainerQueries.js

@@ -1,69 +0,0 @@
-import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
-/**
- * For using in `sx` prop to sort the breakpoint from low to high.
- * Note: this function does not work and will not support multiple units.
- *       e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
- *            output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
- */
-export function sortContainerQueries(theme, css) {
-  if (!theme.containerQueries) {
-    return css;
-  }
-  const sorted = Object.keys(css).filter(key => key.startsWith('@container')).sort((a, b) => {
-    const regex = /min-width:\s*([0-9.]+)/;
-    return +(a.match(regex)?.[1] || 0) - +(b.match(regex)?.[1] || 0);
-  });
-  if (!sorted.length) {
-    return css;
-  }
-  return sorted.reduce((acc, key) => {
-    const value = css[key];
-    delete acc[key];
-    acc[key] = value;
-    return acc;
-  }, {
-    ...css
-  });
-}
-export function isCqShorthand(breakpointKeys, value) {
-  return value === '@' || value.startsWith('@') && (breakpointKeys.some(key => value.startsWith(`@${key}`)) || !!value.match(/^@\d/));
-}
-export function getContainerQuery(theme, shorthand) {
-  const matches = shorthand.match(/^@([^/]+)?\/?(.+)?$/);
-  if (!matches) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided shorthand ${`(${shorthand})`} is invalid. The format should be \`@<breakpoint | number>\` or \`@<breakpoint | number>/<container>\`.\n` + 'For example, `@sm` or `@600` or `@40rem/sidebar`.' : _formatErrorMessage(18, `(${shorthand})`));
-    }
-    return null;
-  }
-  const [, containerQuery, containerName] = matches;
-  const value = Number.isNaN(+containerQuery) ? containerQuery || 0 : +containerQuery;
-  return theme.containerQueries(containerName).up(value);
-}
-export default function cssContainerQueries(themeInput) {
-  const toContainerQuery = (mediaQuery, name) => mediaQuery.replace('@media', name ? `@container ${name}` : '@container');
-  function attachCq(node, name) {
-    node.up = (...args) => toContainerQuery(themeInput.breakpoints.up(...args), name);
-    node.down = (...args) => toContainerQuery(themeInput.breakpoints.down(...args), name);
-    node.between = (...args) => toContainerQuery(themeInput.breakpoints.between(...args), name);
-    node.only = (...args) => toContainerQuery(themeInput.breakpoints.only(...args), name);
-    node.not = (...args) => {
-      const result = toContainerQuery(themeInput.breakpoints.not(...args), name);
-      if (result.includes('not all and')) {
-        // `@container` does not work with `not all and`, so need to invert the logic
-        return result.replace('not all and ', '').replace('min-width:', 'width<').replace('max-width:', 'width>').replace('and', 'or');
-      }
-      return result;
-    };
-  }
-  const node = {};
-  const containerQueries = name => {
-    attachCq(node, name);
-    return node;
-  };
-  attachCq(containerQueries);
-  return {
-    ...themeInput,
-    containerQueries
-  };
-}

package/modern/cssContainerQueries/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from "./cssContainerQueries.js";
-export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.js";
-export type { CssContainerQueries } from "./cssContainerQueries.js";

package/modern/cssContainerQueries/index.js

@@ -1,2 +0,0 @@
-export { default } from "./cssContainerQueries.js";
-export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.js";

package/modern/cssGrid/cssGrid.d.ts

@@ -1,15 +0,0 @@
-import { PropsFor, grid, SimpleStyleFunction } from "../Box/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'>;
-export type CssGridProps = PropsFor<typeof grid>;
-export default grid;

package/modern/cssGrid/cssGrid.js

@@ -1,85 +0,0 @@
-import style from "../style/index.js";
-import compose from "../compose/index.js";
-import { createUnaryUnit, getValue } from "../spacing/index.js";
-import { handleBreakpoints } from "../breakpoints/index.js";
-import responsivePropType from "../responsivePropType/index.js";
-
-// 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');
-    const styleFromPropValue = propValue => ({
-      gap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.gap, styleFromPropValue);
-  }
-  return null;
-};
-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');
-    const styleFromPropValue = propValue => ({
-      columnGap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
-  }
-  return null;
-};
-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');
-    const styleFromPropValue = propValue => ({
-      rowGap: getValue(transformer, propValue)
-    });
-    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
-  }
-  return null;
-};
-rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  rowGap: responsivePropType
-} : {};
-rowGap.filterProps = ['rowGap'];
-export const gridColumn = style({
-  prop: 'gridColumn'
-});
-export const gridRow = style({
-  prop: 'gridRow'
-});
-export const gridAutoFlow = style({
-  prop: 'gridAutoFlow'
-});
-export const gridAutoColumns = style({
-  prop: 'gridAutoColumns'
-});
-export const gridAutoRows = style({
-  prop: 'gridAutoRows'
-});
-export const gridTemplateColumns = style({
-  prop: 'gridTemplateColumns'
-});
-export const gridTemplateRows = style({
-  prop: 'gridTemplateRows'
-});
-export const gridTemplateAreas = style({
-  prop: 'gridTemplateAreas'
-});
-export const gridArea = style({
-  prop: 'gridArea'
-});
-const grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-export default grid;

package/modern/cssGrid/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./cssGrid.js";
-export * from "./cssGrid.js";

package/modern/cssGrid/index.js

@@ -1,2 +0,0 @@
-export { default } from "./cssGrid.js";
-export * from "./cssGrid.js";

package/modern/cssVars/createCssVarsProvider.d.ts

@@ -1,141 +0,0 @@
-import * as React from 'react';
-import InitColorSchemeScript from "../InitColorSchemeScript/index.js";
-import { Result } from "./useCurrentColorScheme.js";
-import type { StorageManager } from "./localStorageManager.js";
-export interface ColorSchemeContextValue<SupportedColorScheme extends string> extends Result<SupportedColorScheme> {
-  allColorSchemes: SupportedColorScheme[];
-}
-export interface CssVarsProviderConfig<ColorScheme extends string> {
-  /**
-   * DOM attribute for applying color scheme
-   * @default 'data-color-scheme'
-   */
-  attribute?: string;
-  /**
-   * localStorage key used to store application `mode`
-   * @default 'mode'
-   */
-  modeStorageKey?: string;
-  /**
-   * localStorage key used to store `colorScheme`
-   * @default 'color-scheme'
-   */
-  colorSchemeStorageKey?: string;
-  /**
-   * Design system default color scheme.
-   * - provides string if the design system has one default color scheme (either light or dark)
-   * - provides object if the design system has default light & dark color schemes
-   */
-  defaultColorScheme: ColorScheme | {
-    light: ColorScheme;
-    dark: ColorScheme;
-  };
-  /**
-   * Disable CSS transitions when switching between modes or color schemes
-   * @default false
-   */
-  disableTransitionOnChange?: boolean;
-  /**
-   * If `true`, theme values are recalculated when the mode changes.
-   * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
-   * @default false
-   */
-  forceThemeRerender?: boolean;
-}
-type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
-export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {
-  CssVarsProvider: (props: React.PropsWithChildren<Partial<CssVarsProviderConfig<ColorScheme>> & {
-    theme?: Identify<Identifier, {
-      cssVariables?: false;
-      cssVarPrefix?: string;
-      colorSchemes: Partial<Record<ColorScheme, any>>;
-      colorSchemeSelector?: 'media' | 'class' | 'data' | string;
-    }>;
-    /**
-     * The default mode when the storage is empty,
-     * require the theme to have `colorSchemes` with light and dark.
-     * @default 'system'
-     */
-    defaultMode?: 'light' | 'dark' | 'system';
-    /**
-     * The document used to perform `disableTransitionOnChange` feature
-     * @default document
-     */
-    documentNode?: Document | null;
-    /**
-     * The node used to attach the color-scheme attribute
-     * @default document
-     */
-    colorSchemeNode?: Element | null;
-    /**
-     * The storage manager to be used for storing the mode and color scheme.
-     * @default using `window.localStorage`
-     */
-    storageManager?: StorageManager | null;
-    /**
-     * The window that attaches the 'storage' event listener
-     * @default window
-     */
-    storageWindow?: Window | null;
-    /**
-     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
-     */
-    disableNestedContext?: boolean;
-    /**
-     * If `true`, the style sheet won't be generated.
-     *
-     * This is useful for controlling nested CssVarsProvider behavior.
-     * @default false
-     */
-    disableStyleSheetGeneration?: boolean;
-  }>) => React.JSX.Element;
-  useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  getInitColorSchemeScript: typeof InitColorSchemeScript;
-}
-export default function createCssVarsProvider<ColorScheme extends string, Identifier extends string | undefined = undefined>(options: CssVarsProviderConfig<ColorScheme> & {
-  /**
-   * The design system's unique id for getting the corresponded theme when there are multiple design systems.
-   */
-  themeId?: Identifier;
-  /**
-   * Design system default theme
-   *
-   * - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
-   * those object of the color scheme will be used when the color scheme is active.
-   *
-   *  {
-   *    colorSchemes: {
-   *      light: { ...lightColorSchemeValues },
-   *      dark: { ...darkColorSchemeValues }
-   *    }
-   *  }
-   *
-   * - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
-   *   likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
-   *
-   * - If the theme contains the same keys as the color scheme, their values will be merged.
-   *  Ex. {
-   *    colorSchemes: {
-   *      light: { palette: { primary: { ... } } },
-   *      dark: { palette: { primary: { ...} } }
-   *    },
-   *    palette: { shared: { ... } }
-   *  }
-   *
-   *  becomes: {
-   *    colorSchemes: { ... },
-   *    palette: { shared: { ... }, primary: { ... } }
-   *  }
-   */
-  theme: any;
-  /**
-   * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
-   *
-   * The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate
-   * variants from those tokens.
-   */
-  resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
-}): CreateCssVarsProviderResult<ColorScheme, Identifier>;
-
-// disable automatic export
-export {};