@mui/styled-engine - npm Package Compare versions

Comparing version 9.0.0-alpha.0 to 9.0.0-alpha.1

GlobalStyles/GlobalStyles.d.mts

+import * as React from 'react';
+import { Interpolation } from '@emotion/react';
+export interface GlobalStylesProps<Theme = {}> {
+  defaultTheme?: object | undefined;
+  styles: Interpolation<Theme>;
+}
+export default function GlobalStyles<Theme = {}>(props: GlobalStylesProps<Theme>): React.JSX.Element;

GlobalStyles/GlobalStyles.mjs

+'use client';
+
+import PropTypes from 'prop-types';
+import { Global } from '@emotion/react';
+import { jsx as _jsx } from "react/jsx-runtime";
+function isEmpty(obj) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+export default function GlobalStyles(props) {
+  const {
+    styles,
+    defaultTheme = {}
+  } = props;
+  const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
+  return /*#__PURE__*/_jsx(Global, {
+    styles: globalStyles
+  });
+}
+process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
+  defaultTheme: PropTypes.object,
+  styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
+} : void 0;

GlobalStyles/index.d.mts

+export { default } from "./GlobalStyles.mjs";
+export * from "./GlobalStyles.mjs";

GlobalStyles/index.mjs

+export { default } from "./GlobalStyles.mjs";

index.d.mts

+import * as CSS from 'csstype';
+import { StyledComponent, StyledOptions } from '@emotion/styled';
+import { PropsOf } from '@emotion/react';
+export * from '@emotion/styled';
+export { default } from '@emotion/styled';
+export { ThemeContext, keyframes, css } from '@emotion/react';
+export { default as StyledEngineProvider } from "./StyledEngineProvider/index.mjs";
+export { default as GlobalStyles } from "./GlobalStyles/index.mjs";
+export * from "./GlobalStyles/index.mjs";
+export type MUIStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> = StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+
+/**
+ * For internal usage in `@mui/system` package
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(tag: React.ElementType, processor: (styles: any) => any): void;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles<P>(styles: Interpolation<P>): object;
+export interface SerializedStyles {
+  name: string;
+  styles: string;
+  map?: string | undefined;
+  next?: SerializedStyles | undefined;
+}
+export type CSSProperties = CSS.PropertiesFallback<number | string>;
+export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>> };
+
+// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
+// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
+export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };
+
+// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
+// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
+export interface CSSOthersObject {
+  [propertiesName: string]: unknown | CSSInterpolation;
+}
+export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };
+export interface ArrayCSSInterpolation extends ReadonlyArray<CSSInterpolation> {}
+export interface CSSOthersObjectForCSSObject {
+  [propertiesName: string]: CSSInterpolation;
+}
+
+// Omit variants as a key, because we have a special handling for it
+export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}
+export interface ComponentSelector {
+  __emotion_styles: any;
+}
+export type Keyframes = {
+  name: string;
+  styles: string;
+  anim: number;
+  toString: () => string;
+} & string;
+export type Equal<A, B, T, F> = A extends B ? (B extends A ? T : F) : F;
+export type InterpolationPrimitive = null | undefined | boolean | number | string | ComponentSelector | Keyframes | SerializedStyles | CSSObject;
+export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation;
+export interface FunctionInterpolation<Props> {
+  (props: Props): Interpolation<Props>;
+}
+export interface ArrayInterpolation<Props> extends ReadonlyArray<Interpolation<Props>> {}
+export type Interpolation<Props> = null | undefined | boolean | number | string | ComponentSelector | Keyframes | SerializedStyles | CSSPropertiesWithMultiValues | (CSSObject & {
+  variants?: Array<{
+    props: (Props extends {
+      ownerState: infer O;
+    } ? Partial<Omit<Props, 'ownerState'> & O> : Partial<Props>) | ((props: Props extends {
+      ownerState: infer O;
+    } ? Props & O & {
+      ownerState: O;
+    } : Props) => boolean);
+    style: CSSObject | ((args: Props extends {
+      theme: any;
+    } ? {
+      theme: Props['theme'];
+    } : any) => CSSObject);
+  }> | undefined;
+}) | ArrayInterpolation<Props> | FunctionInterpolation<Props>;
+export function shouldForwardProp(propName: PropertyKey): boolean;
+
+/** Same as StyledOptions but shouldForwardProp must be a type guard */
+export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
+  label?: string | undefined;
+  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
+  target?: string | undefined;
+}
+
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ */
+export interface CreateStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}> {
+  (...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {}>(...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
+  (template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+
+  /**
+   * @typeparam AdditionalProps  Additional props to add to your styled component
+   */
+  <AdditionalProps extends {}>(template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
+    theme: T;
+  }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
+}
+export interface CreateMUIStyled<MUIStyledCommonProps extends {}, MuiStyledOptions, Theme extends object> {
+  <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {
+    ref?: React.Ref<InstanceType<C>> | undefined;
+  }, Theme>;
+  <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {
+    ref?: React.Ref<InstanceType<C>> | undefined;
+  }, Theme>;
+  <C extends React.JSXElementConstructor<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>;
+  <C extends React.JSXElementConstructor<React.ComponentProps<C>>>(component: C, options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
+  <Tag extends keyof React.JSX.IntrinsicElements, ForwardedProps extends keyof React.JSX.IntrinsicElements[Tag] = keyof React.JSX.IntrinsicElements[Tag]>(tag: Tag, options: FilteringStyledOptions<React.JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions): CreateStyledComponent<MUIStyledCommonProps, Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>, {}, Theme>;
+  <Tag extends keyof React.JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<MUIStyledCommonProps, React.JSX.IntrinsicElements[Tag], {}, Theme>;
+}

index.mjs

+/**
+ * @mui/styled-engine v9.0.0-alpha.1
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use client';
+
+/* eslint-disable no-underscore-dangle */
+import emStyled from '@emotion/styled';
+import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
+export default function styled(tag, options) {
+  const stylesFactory = emStyled(tag, options);
+  if (process.env.NODE_ENV !== 'production') {
+    return (...styles) => {
+      const component = typeof tag === 'string' ? `"${tag}"` : 'component';
+      if (styles.length === 0) {
+        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
+      } else if (styles.some(style => style === undefined)) {
+        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
+      }
+      return stylesFactory(...styles);
+    };
+  }
+  return stylesFactory;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_mutateStyles(tag, processor) {
+  // Emotion attaches all the styles as `__emotion_styles`.
+  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
+  if (Array.isArray(tag.__emotion_styles)) {
+    tag.__emotion_styles = processor(tag.__emotion_styles);
+  }
+}
+
+// Emotion only accepts an array, but we want to avoid allocations
+const wrapper = [];
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_serializeStyles(styles) {
+  wrapper[0] = styles;
+  return emSerializeStyles(wrapper);
+}
+export { ThemeContext, keyframes, css } from '@emotion/react';
+export { default as StyledEngineProvider } from "./StyledEngineProvider/index.mjs";
+export { default as GlobalStyles } from "./GlobalStyles/index.mjs";

StyledEngineProvider/index.d.mts

+export { default } from "./StyledEngineProvider.mjs";
+export * from "./StyledEngineProvider.mjs";

StyledEngineProvider/index.mjs

+export { default } from "./StyledEngineProvider.mjs";

StyledEngineProvider/StyledEngineProvider.d.mts

+import * as React from 'react';
+export interface StyledEngineProviderProps {
+  children?: React.ReactNode;
+  enableCssLayer?: boolean | undefined;
+  injectFirst?: boolean | undefined;
+}
+export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

StyledEngineProvider/StyledEngineProvider.mjs

+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import { StyleSheet } from '@emotion/sheet';
+
+// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
+import { jsx as _jsx } from "react/jsx-runtime";
+const cacheMap = new Map();
+
+// Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
+// We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
+// Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
+export const TEST_INTERNALS_DO_NOT_USE = {
+  /**
+   * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
+   *
+   * let rule;
+   * TEST_INTERNALS_DO_NOT_USE.insert = (...args) => {
+   *    rule = args[0];
+   * };
+   *
+   * expect(rule).to.equal(...);
+   */
+  insert: undefined
+};
+
+// We might be able to remove this when this issue is fixed:
+// https://github.com/emotion-js/emotion/issues/2790
+const createEmotionCache = (options, CustomSheet) => {
+  const cache = createCache(options);
+
+  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
+  cache.sheet = new CustomSheet({
+    key: cache.key,
+    nonce: cache.sheet.nonce,
+    container: cache.sheet.container,
+    speedy: cache.sheet.isSpeedy,
+    prepend: cache.sheet.prepend,
+    insertionPoint: cache.sheet.insertionPoint
+  });
+  return cache;
+};
+let insertionPoint;
+if (typeof document === 'object') {
+  // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
+  // For more information, see https://github.com/mui/material-ui/issues/44597
+  insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
+  if (!insertionPoint) {
+    insertionPoint = document.createElement('meta');
+    insertionPoint.setAttribute('name', 'emotion-insertion-point');
+    insertionPoint.setAttribute('content', '');
+    const head = document.querySelector('head');
+    if (head) {
+      head.prepend(insertionPoint);
+    }
+  }
+}
+function getCache(injectFirst, enableCssLayer) {
+  if (injectFirst || enableCssLayer) {
+    /**
+     * This is for client-side apps only.
+     * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
+     * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
+     */
+    class MyStyleSheet extends StyleSheet {
+      insert(rule, options) {
+        if (TEST_INTERNALS_DO_NOT_USE.insert) {
+          return TEST_INTERNALS_DO_NOT_USE.insert(rule, options);
+        }
+        if (this.key && this.key.endsWith('global')) {
+          this.before = insertionPoint;
+        }
+        return super.insert(rule, options);
+      }
+    }
+    const emotionCache = createEmotionCache({
+      key: 'css',
+      insertionPoint: injectFirst ? insertionPoint : undefined
+    }, MyStyleSheet);
+    if (enableCssLayer) {
+      const prevInsert = emotionCache.insert;
+      emotionCache.insert = (...args) => {
+        if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
+          // avoid nested @layer
+          args[1].styles = `@layer mui {${args[1].styles}}`;
+        }
+        return prevInsert(...args);
+      };
+    }
+    return emotionCache;
+  }
+  return undefined;
+}
+export default function StyledEngineProvider(props) {
+  const {
+    injectFirst,
+    enableCssLayer,
+    children
+  } = props;
+  const cache = React.useMemo(() => {
+    const cacheKey = `${injectFirst}-${enableCssLayer}`;
+    if (typeof document === 'object' && cacheMap.has(cacheKey)) {
+      return cacheMap.get(cacheKey);
+    }
+    const fresh = getCache(injectFirst, enableCssLayer);
+    cacheMap.set(cacheKey, fresh);
+    return fresh;
+  }, [injectFirst, enableCssLayer]);
+  return cache ? /*#__PURE__*/_jsx(CacheProvider, {
+    value: cache,
+    children: children
+  }) : children;
+}
+process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * If `true`, the styles are wrapped in `@layer mui`.
+   * Learn more about [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers).
+   */
+  enableCssLayer: PropTypes.bool,
+  /**
+   * By default, the styles are injected last in the <head> element of the page.
+   * As a result, they gain more specificity than any other style sheet.
+   * If you want to override MUI's styles, set this prop.
+   */
+  injectFirst: PropTypes.bool
+} : void 0;

GlobalStyles/GlobalStyles.d.ts

 import * as React from 'react';
 import { Interpolation } from '@emotion/react';
 export interface GlobalStylesProps<Theme = {}> {
-  defaultTheme?: object;
+  defaultTheme?: object | undefined;
   styles: Interpolation<Theme>;
 }
 export default function GlobalStyles<Theme = {}>(props: GlobalStylesProps<Theme>): React.JSX.Element;

index.d.ts

@@ -23,4 +23,4 @@ import * as CSS from 'csstype';
   styles: string;
-  map?: string;
-  next?: SerializedStyles;
+  map?: string | undefined;
+  next?: SerializedStyles | undefined;
 }
@@ -77,3 +77,3 @@ export type CSSProperties = CSS.PropertiesFallback<number | string>;
     } : any) => CSSObject);
-  }>;
+  }> | undefined;
 }) | ArrayInterpolation<Props> | FunctionInterpolation<Props>;
@@ -84,5 +84,5 @@ export function shouldForwardProp(propName: PropertyKey): boolean;
 export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
-  label?: string;
+  label?: string | undefined;
   shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
-  target?: string;
+  target?: string | undefined;
 }
@@ -118,6 +118,6 @@
   <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+    ref?: React.Ref<InstanceType<C>> | undefined;
   }, Theme>;
   <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {
-    ref?: React.Ref<InstanceType<C>>;
+    ref?: React.Ref<InstanceType<C>> | undefined;
   }, Theme>;
@@ -124,0 +124,0 @@ <C extends React.JSXElementConstructor<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>;

index.js

 /**
- * @mui/styled-engine v9.0.0-alpha.0
+ * @mui/styled-engine v9.0.0-alpha.1
  *
@@ -4,0 +4,0 @@ * @license MIT

package.json

 {
   "name": "@mui/styled-engine",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.1",
   "author": "MUI Team",
@@ -55,7 +55,9 @@ "description": "styled() API wrapper package for emotion.",
   "type": "commonjs",
-  "main": "./index.js",
-  "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "import": {
+        "types": "./index.d.mts",
+        "default": "./index.mjs"
+      },
       "require": {
@@ -66,18 +68,37 @@ "types": "./index.d.ts",
       "default": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
+        "types": "./index.d.mts",
+        "default": "./index.mjs"
       }
     },
-    "./*": {
+    "./GlobalStyles": {
+      "import": {
+        "types": "./GlobalStyles/index.d.mts",
+        "default": "./GlobalStyles/index.mjs"
+      },
       "require": {
-        "types": "./*/index.d.ts",
-        "default": "./*/index.js"
+        "types": "./GlobalStyles/index.d.ts",
+        "default": "./GlobalStyles/index.js"
       },
       "default": {
-        "types": "./esm/*/index.d.ts",
-        "default": "./esm/*/index.js"
+        "types": "./GlobalStyles/index.d.mts",
+        "default": "./GlobalStyles/index.mjs"
       }
     },
-    "./esm": null
-  }
+    "./StyledEngineProvider": {
+      "import": {
+        "types": "./StyledEngineProvider/index.d.mts",
+        "default": "./StyledEngineProvider/index.mjs"
+      },
+      "require": {
+        "types": "./StyledEngineProvider/index.d.ts",
+        "default": "./StyledEngineProvider/index.js"
+      },
+      "default": {
+        "types": "./StyledEngineProvider/index.d.mts",
+        "default": "./StyledEngineProvider/index.mjs"
+      }
+    }
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts"
 }

StyledEngineProvider/StyledEngineProvider.d.ts

 import * as React from 'react';
 export interface StyledEngineProviderProps {
   children?: React.ReactNode;
-  enableCssLayer?: boolean;
-  injectFirst?: boolean;
+  enableCssLayer?: boolean | undefined;
+  injectFirst?: boolean | undefined;
 }
 export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

esm/GlobalStyles/GlobalStyles.d.ts

-import * as React from 'react';
-import { Interpolation } from '@emotion/react';
-export interface GlobalStylesProps<Theme = {}> {
-  defaultTheme?: object;
-  styles: Interpolation<Theme>;
-}
-export default function GlobalStyles<Theme = {}>(props: GlobalStylesProps<Theme>): React.JSX.Element;

esm/GlobalStyles/GlobalStyles.js

-'use client';
-
-import PropTypes from 'prop-types';
-import { Global } from '@emotion/react';
-import { jsx as _jsx } from "react/jsx-runtime";
-function isEmpty(obj) {
-  return obj === undefined || obj === null || Object.keys(obj).length === 0;
-}
-export default function GlobalStyles(props) {
-  const {
-    styles,
-    defaultTheme = {}
-  } = props;
-  const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
-  return /*#__PURE__*/_jsx(Global, {
-    styles: globalStyles
-  });
-}
-process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
-  defaultTheme: PropTypes.object,
-  styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
-} : void 0;

esm/GlobalStyles/index.d.ts

-export { default } from "./GlobalStyles.js";
-export * from "./GlobalStyles.js";

esm/GlobalStyles/index.js

-export { default } from "./GlobalStyles.js";

esm/index.d.ts

-import * as CSS from 'csstype';
-import { StyledComponent, StyledOptions } from '@emotion/styled';
-import { PropsOf } from '@emotion/react';
-export * from '@emotion/styled';
-export { default } from '@emotion/styled';
-export { ThemeContext, keyframes, css } from '@emotion/react';
-export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
-export { default as GlobalStyles } from "./GlobalStyles/index.js";
-export * from "./GlobalStyles/index.js";
-export type MUIStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> = StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-
-/**
- * For internal usage in `@mui/system` package
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_mutateStyles(tag: React.ElementType, processor: (styles: any) => any): void;
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_serializeStyles<P>(styles: Interpolation<P>): object;
-export interface SerializedStyles {
-  name: string;
-  styles: string;
-  map?: string;
-  next?: SerializedStyles;
-}
-export type CSSProperties = CSS.PropertiesFallback<number | string>;
-export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>> };
-
-// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
-// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
-export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };
-
-// TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
-// For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
-export interface CSSOthersObject {
-  [propertiesName: string]: unknown | CSSInterpolation;
-}
-export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };
-export interface ArrayCSSInterpolation extends ReadonlyArray<CSSInterpolation> {}
-export interface CSSOthersObjectForCSSObject {
-  [propertiesName: string]: CSSInterpolation;
-}
-
-// Omit variants as a key, because we have a special handling for it
-export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}
-export interface ComponentSelector {
-  __emotion_styles: any;
-}
-export type Keyframes = {
-  name: string;
-  styles: string;
-  anim: number;
-  toString: () => string;
-} & string;
-export type Equal<A, B, T, F> = A extends B ? (B extends A ? T : F) : F;
-export type InterpolationPrimitive = null | undefined | boolean | number | string | ComponentSelector | Keyframes | SerializedStyles | CSSObject;
-export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation;
-export interface FunctionInterpolation<Props> {
-  (props: Props): Interpolation<Props>;
-}
-export interface ArrayInterpolation<Props> extends ReadonlyArray<Interpolation<Props>> {}
-export type Interpolation<Props> = null | undefined | boolean | number | string | ComponentSelector | Keyframes | SerializedStyles | CSSPropertiesWithMultiValues | (CSSObject & {
-  variants?: Array<{
-    props: (Props extends {
-      ownerState: infer O;
-    } ? Partial<Omit<Props, 'ownerState'> & O> : Partial<Props>) | ((props: Props extends {
-      ownerState: infer O;
-    } ? Props & O & {
-      ownerState: O;
-    } : Props) => boolean);
-    style: CSSObject | ((args: Props extends {
-      theme: any;
-    } ? {
-      theme: Props['theme'];
-    } : any) => CSSObject);
-  }>;
-}) | ArrayInterpolation<Props> | FunctionInterpolation<Props>;
-export function shouldForwardProp(propName: PropertyKey): boolean;
-
-/** Same as StyledOptions but shouldForwardProp must be a type guard */
-export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
-  label?: string;
-  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
-  target?: string;
-}
-
-/**
- * @typeparam ComponentProps  Props which will be included when withComponent is called
- * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
- */
-export interface CreateStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}> {
-  (...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & {
-    theme: T;
-  }>>): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-
-  /**
-   * @typeparam AdditionalProps  Additional props to add to your styled component
-   */
-  <AdditionalProps extends {}>(...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
-    theme: T;
-  }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
-  (template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & {
-    theme: T;
-  }>>): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
-
-  /**
-   * @typeparam AdditionalProps  Additional props to add to your styled component
-   */
-  <AdditionalProps extends {}>(template: TemplateStringsArray, ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & {
-    theme: T;
-  }>>): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
-}
-export interface CreateMUIStyled<MUIStyledCommonProps extends {}, MuiStyledOptions, Theme extends object> {
-  <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-  }, Theme>;
-  <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {
-    ref?: React.Ref<InstanceType<C>>;
-  }, Theme>;
-  <C extends React.JSXElementConstructor<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>;
-  <C extends React.JSXElementConstructor<React.ComponentProps<C>>>(component: C, options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
-  <Tag extends keyof React.JSX.IntrinsicElements, ForwardedProps extends keyof React.JSX.IntrinsicElements[Tag] = keyof React.JSX.IntrinsicElements[Tag]>(tag: Tag, options: FilteringStyledOptions<React.JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions): CreateStyledComponent<MUIStyledCommonProps, Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>, {}, Theme>;
-  <Tag extends keyof React.JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<MUIStyledCommonProps> & MuiStyledOptions): CreateStyledComponent<MUIStyledCommonProps, React.JSX.IntrinsicElements[Tag], {}, Theme>;
-}

esm/index.js

-/**
- * @mui/styled-engine v9.0.0-alpha.0
- *
- * @license MIT
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use client';
-
-/* eslint-disable no-underscore-dangle */
-import emStyled from '@emotion/styled';
-import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
-export default function styled(tag, options) {
-  const stylesFactory = emStyled(tag, options);
-  if (process.env.NODE_ENV !== 'production') {
-    return (...styles) => {
-      const component = typeof tag === 'string' ? `"${tag}"` : 'component';
-      if (styles.length === 0) {
-        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
-      } else if (styles.some(style => style === undefined)) {
-        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
-      }
-      return stylesFactory(...styles);
-    };
-  }
-  return stylesFactory;
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_mutateStyles(tag, processor) {
-  // Emotion attaches all the styles as `__emotion_styles`.
-  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
-  if (Array.isArray(tag.__emotion_styles)) {
-    tag.__emotion_styles = processor(tag.__emotion_styles);
-  }
-}
-
-// Emotion only accepts an array, but we want to avoid allocations
-const wrapper = [];
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_serializeStyles(styles) {
-  wrapper[0] = styles;
-  return emSerializeStyles(wrapper);
-}
-export { ThemeContext, keyframes, css } from '@emotion/react';
-export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
-export { default as GlobalStyles } from "./GlobalStyles/index.js";

esm/package.json

-{"type":"module","sideEffects":false}

esm/StyledEngineProvider/index.d.ts

-export { default } from "./StyledEngineProvider.js";
-export * from "./StyledEngineProvider.js";

esm/StyledEngineProvider/index.js

-export { default } from "./StyledEngineProvider.js";

esm/StyledEngineProvider/StyledEngineProvider.d.ts

-import * as React from 'react';
-export interface StyledEngineProviderProps {
-  children?: React.ReactNode;
-  enableCssLayer?: boolean;
-  injectFirst?: boolean;
-}
-export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;

esm/StyledEngineProvider/StyledEngineProvider.js

-'use client';
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import { StyleSheet } from '@emotion/sheet';
-
-// To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
-import { jsx as _jsx } from "react/jsx-runtime";
-const cacheMap = new Map();
-
-// Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
-// We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
-// Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
-export const TEST_INTERNALS_DO_NOT_USE = {
-  /**
-   * to intercept the generated CSS before inserting to the style tag, so that we can check the generated CSS.
-   *
-   * let rule;
-   * TEST_INTERNALS_DO_NOT_USE.insert = (...args) => {
-   *    rule = args[0];
-   * };
-   *
-   * expect(rule).to.equal(...);
-   */
-  insert: undefined
-};
-
-// We might be able to remove this when this issue is fixed:
-// https://github.com/emotion-js/emotion/issues/2790
-const createEmotionCache = (options, CustomSheet) => {
-  const cache = createCache(options);
-
-  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
-  cache.sheet = new CustomSheet({
-    key: cache.key,
-    nonce: cache.sheet.nonce,
-    container: cache.sheet.container,
-    speedy: cache.sheet.isSpeedy,
-    prepend: cache.sheet.prepend,
-    insertionPoint: cache.sheet.insertionPoint
-  });
-  return cache;
-};
-let insertionPoint;
-if (typeof document === 'object') {
-  // Use `insertionPoint` over `prepend`(deprecated) because it can be controlled for GlobalStyles injection order
-  // For more information, see https://github.com/mui/material-ui/issues/44597
-  insertionPoint = document.querySelector('[name="emotion-insertion-point"]');
-  if (!insertionPoint) {
-    insertionPoint = document.createElement('meta');
-    insertionPoint.setAttribute('name', 'emotion-insertion-point');
-    insertionPoint.setAttribute('content', '');
-    const head = document.querySelector('head');
-    if (head) {
-      head.prepend(insertionPoint);
-    }
-  }
-}
-function getCache(injectFirst, enableCssLayer) {
-  if (injectFirst || enableCssLayer) {
-    /**
-     * This is for client-side apps only.
-     * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
-     * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
-     */
-    class MyStyleSheet extends StyleSheet {
-      insert(rule, options) {
-        if (TEST_INTERNALS_DO_NOT_USE.insert) {
-          return TEST_INTERNALS_DO_NOT_USE.insert(rule, options);
-        }
-        if (this.key && this.key.endsWith('global')) {
-          this.before = insertionPoint;
-        }
-        return super.insert(rule, options);
-      }
-    }
-    const emotionCache = createEmotionCache({
-      key: 'css',
-      insertionPoint: injectFirst ? insertionPoint : undefined
-    }, MyStyleSheet);
-    if (enableCssLayer) {
-      const prevInsert = emotionCache.insert;
-      emotionCache.insert = (...args) => {
-        if (!args[1].styles.match(/^@layer\s+[^{]*$/)) {
-          // avoid nested @layer
-          args[1].styles = `@layer mui {${args[1].styles}}`;
-        }
-        return prevInsert(...args);
-      };
-    }
-    return emotionCache;
-  }
-  return undefined;
-}
-export default function StyledEngineProvider(props) {
-  const {
-    injectFirst,
-    enableCssLayer,
-    children
-  } = props;
-  const cache = React.useMemo(() => {
-    const cacheKey = `${injectFirst}-${enableCssLayer}`;
-    if (typeof document === 'object' && cacheMap.has(cacheKey)) {
-      return cacheMap.get(cacheKey);
-    }
-    const fresh = getCache(injectFirst, enableCssLayer);
-    cacheMap.set(cacheKey, fresh);
-    return fresh;
-  }, [injectFirst, enableCssLayer]);
-  return cache ? /*#__PURE__*/_jsx(CacheProvider, {
-    value: cache,
-    children: children
-  }) : children;
-}
-process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
-  /**
-   * Your component tree.
-   */
-  children: PropTypes.node,
-  /**
-   * If `true`, the styles are wrapped in `@layer mui`.
-   * Learn more about [Cascade layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers).
-   */
-  enableCssLayer: PropTypes.bool,
-  /**
-   * By default, the styles are injected last in the <head> element of the page.
-   * As a result, they gain more specificity than any other style sheet.
-   * If you want to override MUI's styles, set this prop.
-   */
-  injectFirst: PropTypes.bool
-} : void 0;

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102985

3.47%

Worsened metrics

Number of package files

24

-4%

Lines of code

585

-18.3%

No dependency changes