@mui/system 7.0.1 → 7.1.0

package/modern/createBox/createBox.js

@@ -1,35 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import clsx from 'clsx';
-import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.js";
-import useTheme from "../useTheme/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function createBox(options = {}) {
-  const {
-    themeId,
-    defaultTheme,
-    defaultClassName = 'MuiBox-root',
-    generateClassName
-  } = options;
-  const BoxRoot = styled('div', {
-    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
-  })(styleFunctionSx);
-  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
-    const theme = useTheme(defaultTheme);
-    const {
-      className,
-      component = 'div',
-      ...other
-    } = extendSxProp(inProps);
-    return /*#__PURE__*/_jsx(BoxRoot, {
-      as: component,
-      ref: ref,
-      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme,
-      ...other
-    });
-  });
-  return Box;
-}

package/modern/createBox/index.d.ts

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

package/modern/createBox/index.js

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

package/modern/createBreakpoints/createBreakpoints.d.ts

@@ -1,78 +0,0 @@
-import { 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 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;
-}
-export interface BreakpointsOptions extends Partial<Breakpoints> {
-  /**
-   * The increment divided by 100 used to implement exclusive breakpoints.
-   * For example, `step: 5` means that `down(500)` will result in `'(max-width: 499.95px)'`.
-   * @default 5
-   */
-  step?: number | undefined;
-  /**
-   * The unit used for the breakpoint's values.
-   * @default 'px'
-   */
-  unit?: string | undefined;
-}
-export default function createBreakpoints(options: BreakpointsOptions): Breakpoints;

package/modern/createBreakpoints/createBreakpoints.js

@@ -1,81 +0,0 @@
-// Sorted ASC by size. That's important.
-// It can't be configured as it's used statically for propTypes.
-export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-const sortBreakpointsValues = values => {
-  const breakpointsAsArray = Object.keys(values).map(key => ({
-    key,
-    val: values[key]
-  })) || [];
-  // Sort in ascending order
-  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
-  return breakpointsAsArray.reduce((acc, obj) => {
-    return {
-      ...acc,
-      [obj.key]: obj.val
-    };
-  }, {});
-};
-
-// Keep in mind that @media is inclusive by the CSS specification.
-export default 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
-    },
-    unit = 'px',
-    step = 5,
-    ...other
-  } = breakpoints;
-  const sortedValues = sortBreakpointsValues(values);
-  const keys = Object.keys(sortedValues);
-  function up(key) {
-    const value = typeof values[key] === 'number' ? values[key] : key;
-    return `@media (min-width:${value}${unit})`;
-  }
-  function down(key) {
-    const value = typeof values[key] === 'number' ? values[key] : key;
-    return `@media (max-width:${value - step / 100}${unit})`;
-  }
-  function between(start, end) {
-    const endIndex = keys.indexOf(end);
-    return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
-  }
-  function only(key) {
-    if (keys.indexOf(key) + 1 < keys.length) {
-      return between(key, keys[keys.indexOf(key) + 1]);
-    }
-    return up(key);
-  }
-  function not(key) {
-    // handle first and last key separately, for better readability
-    const keyIndex = keys.indexOf(key);
-    if (keyIndex === 0) {
-      return up(keys[1]);
-    }
-    if (keyIndex === keys.length - 1) {
-      return down(keys[keyIndex]);
-    }
-    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
-  }
-  return {
-    keys,
-    values: sortedValues,
-    up,
-    down,
-    between,
-    only,
-    not,
-    unit,
-    ...other
-  };
-}

package/modern/createBreakpoints/index.d.ts

@@ -1,3 +0,0 @@
-/** This export is intended for internal integration with Pigment CSS */
-/* eslint-disable import/prefer-default-export */
-export { default as unstable_createBreakpoints } from "./createBreakpoints.js";

package/modern/createBreakpoints/index.js

@@ -1,3 +0,0 @@
-/** This export is intended for internal integration with Pigment CSS */
-/* eslint-disable import/prefer-default-export */
-export { default as unstable_createBreakpoints } from "./createBreakpoints.js";

package/modern/createStyled/createStyled.d.ts

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { CreateMUIStyled as CreateMUIStyledStyledEngine, CSSInterpolation } from '@mui/styled-engine';
-import styleFunctionSx, { SxProps } from "../styleFunctionSx/index.js";
-import { Theme as DefaultTheme } from "../createTheme/index.js";
-export function shouldForwardProp(propName: PropertyKey): boolean;
-export interface MUIStyledCommonProps<Theme extends object = DefaultTheme> {
-  theme?: Theme;
-  as?: React.ElementType;
-  sx?: SxProps<Theme>;
-}
-export interface MuiStyledOptions {
-  name?: string;
-  slot?: string;
-  // The difference between Interpolation and CSSInterpolation is that the former supports functions based on props
-  // If we want to support props in the overrides, we will need to change the CSSInterpolation to Interpolation<Props>
-  overridesResolver?: (props: any, styles: Record<string, CSSInterpolation>) => CSSInterpolation;
-  skipVariantsResolver?: boolean;
-  skipSx?: boolean;
-}
-export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<MUIStyledCommonProps<Theme>, MuiStyledOptions, Theme>;
-export default function createStyled<Theme extends object = DefaultTheme>(options?: {
-  themeId?: string;
-  defaultTheme?: Theme;
-  rootShouldForwardProp?: (prop: PropertyKey) => boolean;
-  slotShouldForwardProp?: (prop: PropertyKey) => boolean;
-  styleFunctionSx?: typeof styleFunctionSx;
-}): CreateMUIStyled<Theme>;

package/modern/createStyled/createStyled.js

@@ -1,276 +0,0 @@
-import styledEngineStyled, { internal_mutateStyles as mutateStyles } from '@mui/styled-engine';
-import { isPlainObject } from '@mui/utils/deepmerge';
-import capitalize from '@mui/utils/capitalize';
-import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from "../createTheme/index.js";
-import styleFunctionSx from "../styleFunctionSx/index.js";
-import preprocessStyles from "../preprocessStyles.js";
-
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable no-labels */
-/* eslint-disable no-lone-blocks */
-
-export const systemDefaultTheme = createTheme();
-
-// Update /system/styled/#api in case if this changes
-export function shouldForwardProp(prop) {
-  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
-}
-function defaultOverridesResolver(slot) {
-  if (!slot) {
-    return null;
-  }
-  return (_props, styles) => styles[slot];
-}
-function attachTheme(props, themeId, defaultTheme) {
-  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
-}
-function processStyle(props, style) {
-  /*
-   * Style types:
-   *  - null/undefined
-   *  - string
-   *  - CSS style object: { [cssKey]: [cssValue], variants }
-   *  - Processed style object: { style, variants, isProcessed: true }
-   *  - Array of any of the above
-   */
-
-  const resolvedStyle = typeof style === 'function' ? style(props) : style;
-  if (Array.isArray(resolvedStyle)) {
-    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle));
-  }
-  if (Array.isArray(resolvedStyle?.variants)) {
-    let rootStyle;
-    if (resolvedStyle.isProcessed) {
-      rootStyle = resolvedStyle.style;
-    } else {
-      const {
-        variants,
-        ...otherStyles
-      } = resolvedStyle;
-      rootStyle = otherStyles;
-    }
-    return processStyleVariants(props, resolvedStyle.variants, [rootStyle]);
-  }
-  if (resolvedStyle?.isProcessed) {
-    return resolvedStyle.style;
-  }
-  return resolvedStyle;
-}
-function processStyleVariants(props, variants, results = []) {
-  let mergedState; // We might not need it, initialized lazily
-
-  variantLoop: for (let i = 0; i < variants.length; i += 1) {
-    const variant = variants[i];
-    if (typeof variant.props === 'function') {
-      mergedState ?? (mergedState = {
-        ...props,
-        ...props.ownerState,
-        ownerState: props.ownerState
-      });
-      if (!variant.props(mergedState)) {
-        continue;
-      }
-    } else {
-      for (const key in variant.props) {
-        if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
-          continue variantLoop;
-        }
-      }
-    }
-    if (typeof variant.style === 'function') {
-      mergedState ?? (mergedState = {
-        ...props,
-        ...props.ownerState,
-        ownerState: props.ownerState
-      });
-      results.push(variant.style(mergedState));
-    } else {
-      results.push(variant.style);
-    }
-  }
-  return results;
-}
-export default function createStyled(input = {}) {
-  const {
-    themeId,
-    defaultTheme = systemDefaultTheme,
-    rootShouldForwardProp = shouldForwardProp,
-    slotShouldForwardProp = shouldForwardProp
-  } = input;
-  function styleAttachTheme(props) {
-    attachTheme(props, themeId, defaultTheme);
-  }
-  const styled = (tag, inputOptions = {}) => {
-    // If `tag` is already a styled component, filter out the `sx` style function
-    // to prevent unnecessary styles generated by the composite components.
-    mutateStyles(tag, styles => styles.filter(style => style !== styleFunctionSx));
-    const {
-      name: componentName,
-      slot: componentSlot,
-      skipVariantsResolver: inputSkipVariantsResolver,
-      skipSx: inputSkipSx,
-      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-      // For more details: https://github.com/mui/material-ui/pull/37908
-      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
-      ...options
-    } = inputOptions;
-
-    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
-    // TODO v6: remove `Root` in the next major release
-    // For more details: https://github.com/mui/material-ui/pull/37908
-    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
-    const skipSx = inputSkipSx || false;
-    let shouldForwardPropOption = shouldForwardProp;
-
-    // TODO v6: remove `Root` in the next major release
-    // For more details: https://github.com/mui/material-ui/pull/37908
-    if (componentSlot === 'Root' || componentSlot === 'root') {
-      shouldForwardPropOption = rootShouldForwardProp;
-    } else if (componentSlot) {
-      // any other slot specified
-      shouldForwardPropOption = slotShouldForwardProp;
-    } else if (isStringTag(tag)) {
-      // for string (html) tag, preserve the behavior in emotion & styled-components.
-      shouldForwardPropOption = undefined;
-    }
-    const defaultStyledResolver = styledEngineStyled(tag, {
-      shouldForwardProp: shouldForwardPropOption,
-      label: generateStyledLabel(componentName, componentSlot),
-      ...options
-    });
-    const transformStyle = style => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style) {
-        return function styleFunctionProcessor(props) {
-          return processStyle(props, style);
-        };
-      }
-      if (isPlainObject(style)) {
-        const serialized = preprocessStyles(style);
-        if (!serialized.variants) {
-          return serialized.style;
-        }
-        return function styleObjectProcessor(props) {
-          return processStyle(props, serialized);
-        };
-      }
-      return style;
-    };
-    const muiStyledResolver = (...expressionsInput) => {
-      const expressionsHead = [];
-      const expressionsBody = expressionsInput.map(transformStyle);
-      const expressionsTail = [];
-
-      // Preprocess `props` to set the scoped theme value.
-      // This must run before any other expression.
-      expressionsHead.push(styleAttachTheme);
-      if (componentName && overridesResolver) {
-        expressionsTail.push(function styleThemeOverrides(props) {
-          const theme = props.theme;
-          const styleOverrides = theme.components?.[componentName]?.styleOverrides;
-          if (!styleOverrides) {
-            return null;
-          }
-          const resolvedStyleOverrides = {};
-
-          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          // eslint-disable-next-line guard-for-in
-          for (const slotKey in styleOverrides) {
-            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey]);
-          }
-          return overridesResolver(props, resolvedStyleOverrides);
-        });
-      }
-      if (componentName && !skipVariantsResolver) {
-        expressionsTail.push(function styleThemeVariants(props) {
-          const theme = props.theme;
-          const themeVariants = theme?.components?.[componentName]?.variants;
-          if (!themeVariants) {
-            return null;
-          }
-          return processStyleVariants(props, themeVariants);
-        });
-      }
-      if (!skipSx) {
-        expressionsTail.push(styleFunctionSx);
-      }
-
-      // This function can be called as a tagged template, so the first argument would contain
-      // CSS `string[]` values.
-      if (Array.isArray(expressionsBody[0])) {
-        const inputStrings = expressionsBody.shift();
-
-        // We need to add placeholders in the tagged template for the custom functions we have
-        // possibly added (attachTheme, overrides, variants, and sx).
-        const placeholdersHead = new Array(expressionsHead.length).fill('');
-        const placeholdersTail = new Array(expressionsTail.length).fill('');
-        let outputStrings;
-        // prettier-ignore
-        {
-          outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
-          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
-        }
-
-        // The only case where we put something before `attachTheme`
-        expressionsHead.unshift(outputStrings);
-      }
-      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
-      const Component = defaultStyledResolver(...expressions);
-      if (tag.muiName) {
-        Component.muiName = tag.muiName;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
-      }
-      return Component;
-    };
-    if (defaultStyledResolver.withConfig) {
-      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
-    }
-    return muiStyledResolver;
-  };
-  return styled;
-}
-function generateDisplayName(componentName, componentSlot, tag) {
-  if (componentName) {
-    return `${componentName}${capitalize(componentSlot || '')}`;
-  }
-  return `Styled(${getDisplayName(tag)})`;
-}
-function generateStyledLabel(componentName, componentSlot) {
-  let label;
-  if (process.env.NODE_ENV !== 'production') {
-    if (componentName) {
-      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-      // For more details: https://github.com/mui/material-ui/pull/37908
-      label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
-    }
-  }
-  return label;
-}
-function isObjectEmpty(object) {
-  // eslint-disable-next-line
-  for (const _ in object) {
-    return false;
-  }
-  return true;
-}
-
-// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-function isStringTag(tag) {
-  return typeof tag === 'string' &&
-  // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
-}
-function lowercaseFirstLetter(string) {
-  if (!string) {
-    return string;
-  }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-}

package/modern/createStyled/index.d.ts

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

package/modern/createStyled/index.js

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

package/modern/createTheme/applyStyles.d.ts

@@ -1,67 +0,0 @@
-import { CSSObject } from '@mui/styled-engine';
-export interface ApplyStyles<K extends string> {
-  (key: K, styles: CSSObject): CSSObject;
-}
-/**
- * A universal utility to style components with multiple color modes. Always use it from the theme object.
- * It works with:
- *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
- *  - Zero-runtime engine
- *
- * Tips: Use an array over object spread and place `theme.applyStyles()` last.
- *
- * With the styled function:
- * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
- * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
- *
- * With the sx prop:
- * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
- * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
- *
- * @example
- * 1. using with `styled`:
- * ```jsx
- *   const Component = styled('div')(({ theme }) => [
- *     { background: '#e5e5e5' },
- *     theme.applyStyles('dark', {
- *       background: '#1c1c1c',
- *       color: '#fff',
- *     }),
- *   ]);
- * ```
- *
- * @example
- * 2. using with `sx` prop:
- * ```jsx
- *   <Box sx={[
- *     { background: '#e5e5e5' },
- *     theme => theme.applyStyles('dark', {
- *        background: '#1c1c1c',
- *        color: '#fff',
- *      }),
- *     ]}
- *   />
- * ```
- *
- * @example
- * 3. theming a component:
- * ```jsx
- *   extendTheme({
- *     components: {
- *       MuiButton: {
- *         styleOverrides: {
- *           root: ({ theme }) => [
- *             { background: '#e5e5e5' },
- *             theme.applyStyles('dark', {
- *               background: '#1c1c1c',
- *               color: '#fff',
- *             }),
- *           ],
- *         },
- *       }
- *     }
- *   })
- *```
- */
-export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;

package/modern/createTheme/applyStyles.js

@@ -1,87 +0,0 @@
-/**
- * A universal utility to style components with multiple color modes. Always use it from the theme object.
- * It works with:
- *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
- *  - Zero-runtime engine
- *
- * Tips: Use an array over object spread and place `theme.applyStyles()` last.
- *
- * With the styled function:
- * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
- * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
- *
- * With the sx prop:
- * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
- * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
- *
- * @example
- * 1. using with `styled`:
- * ```jsx
- *   const Component = styled('div')(({ theme }) => [
- *     { background: '#e5e5e5' },
- *     theme.applyStyles('dark', {
- *       background: '#1c1c1c',
- *       color: '#fff',
- *     }),
- *   ]);
- * ```
- *
- * @example
- * 2. using with `sx` prop:
- * ```jsx
- *   <Box sx={[
- *     { background: '#e5e5e5' },
- *     theme => theme.applyStyles('dark', {
- *        background: '#1c1c1c',
- *        color: '#fff',
- *      }),
- *     ]}
- *   />
- * ```
- *
- * @example
- * 3. theming a component:
- * ```jsx
- *   extendTheme({
- *     components: {
- *       MuiButton: {
- *         styleOverrides: {
- *           root: ({ theme }) => [
- *             { background: '#e5e5e5' },
- *             theme.applyStyles('dark', {
- *               background: '#1c1c1c',
- *               color: '#fff',
- *             }),
- *           ],
- *         },
- *       }
- *     }
- *   })
- *```
- */
-export default function applyStyles(key, styles) {
-  // @ts-expect-error this is 'any' type
-  const theme = this;
-  if (theme.vars) {
-    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {
-      return {};
-    }
-    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
-    let selector = theme.getColorSchemeSelector(key);
-    if (selector === '&') {
-      return styles;
-    }
-    if (selector.includes('data-') || selector.includes('.')) {
-      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
-      selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;
-    }
-    return {
-      [selector]: styles
-    };
-  }
-  if (theme.palette.mode === key) {
-    return styles;
-  }
-  return {};
-}