@mui/styled-engine-sc 9.0.0 → 9.1.0

package/GlobalStyles/GlobalStyles.d.mts

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import { CSSObject, StyleFunction } from 'styled-components';
+import type * as React from 'react';
+import { type CSSObject, type StyleFunction } from 'styled-components';
 export interface GlobalStylesProps<Theme extends object = {}> {
   defaultTheme?: object | undefined;
   styles: string | CSSObject | StyleFunction<Theme>;
 }
-export default function Global<Theme extends object = {}>(props: GlobalStylesProps<Theme>): React.JSX.Element;
+declare const GlobalStyles: <Theme extends object = {}>(props: GlobalStylesProps<Theme>) => React.JSX.Element;
+export default GlobalStyles;

package/GlobalStyles/GlobalStyles.d.ts

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import { CSSObject, StyleFunction } from 'styled-components';
+import type * as React from 'react';
+import { type CSSObject, type StyleFunction } from 'styled-components';
 export interface GlobalStylesProps<Theme extends object = {}> {
   defaultTheme?: object | undefined;
   styles: string | CSSObject | StyleFunction<Theme>;
 }
-export default function Global<Theme extends object = {}>(props: GlobalStylesProps<Theme>): React.JSX.Element;
+declare const GlobalStyles: <Theme extends object = {}>(props: GlobalStylesProps<Theme>) => React.JSX.Element;
+export default GlobalStyles;

package/GlobalStyles/GlobalStyles.js

@@ -21,7 +21,7 @@ const GlobalStyles = (0, _styledComponents.createGlobalStyle)(props => {
   return styles;
 });
 var _default = exports.default = GlobalStyles;
-GlobalStyles.propTypes = {
+process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
   defaultTheme: _propTypes.default.object,
   styles: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.object, _propTypes.default.func])
-};
+} : void 0;

package/GlobalStyles/GlobalStyles.mjs

@@ -14,7 +14,7 @@ const GlobalStyles = createGlobalStyle(props => {
   return styles;
 });
 export default GlobalStyles;
-GlobalStyles.propTypes = {
+process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
   defaultTheme: PropTypes.object,
   styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
-};
+} : void 0;

package/GlobalStyles/index.d.mts

@@ -1,2 +1,2 @@
 export { default } from "./GlobalStyles.mjs";
-export * from "./GlobalStyles.mjs";
+export type * from "./GlobalStyles.mjs";

package/GlobalStyles/index.d.ts

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

package/LICENSE

@@ -1,4 +1,4 @@
-The MIT License (MIT)
+MIT License
 
 Copyright (c) 2014 Call-Em-All
 

package/StyledEngineProvider/StyledEngineProvider.d.mts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface StyledEngineProviderProps {
   children?: React.ReactNode;
   injectFirst?: boolean | undefined;

package/StyledEngineProvider/StyledEngineProvider.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface StyledEngineProviderProps {
   children?: React.ReactNode;
   injectFirst?: boolean | undefined;

package/StyledEngineProvider/StyledEngineProvider.js

@@ -21,7 +21,7 @@ function StyledEngineProvider(props) {
   }
   return children;
 }
-StyledEngineProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes /* remove-proptypes */ = {
   /**
    * Your component tree.
    */
@@ -32,4 +32,4 @@ StyledEngineProvider.propTypes = {
    * If you want to override MUI's styles, set this prop.
    */
   injectFirst: _propTypes.default.bool
-};
+} : void 0;

package/StyledEngineProvider/StyledEngineProvider.mjs

@@ -14,7 +14,7 @@ export default function StyledEngineProvider(props) {
   }
   return children;
 }
-StyledEngineProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes /* remove-proptypes */ = {
   /**
    * Your component tree.
    */
@@ -25,4 +25,4 @@ StyledEngineProvider.propTypes = {
    * If you want to override MUI's styles, set this prop.
    */
   injectFirst: PropTypes.bool
-};
+} : void 0;

package/StyledEngineProvider/index.d.mts

@@ -1,2 +1,2 @@
 export { default } from "./StyledEngineProvider.mjs";
-export * from "./StyledEngineProvider.mjs";
+export type * from "./StyledEngineProvider.mjs";

package/StyledEngineProvider/index.d.ts

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

package/index.d.mts

@@ -1,42 +1,22 @@
-import * as React from 'react';
-import * as CSS from 'csstype';
-import * as hoistNonReactStatics from 'hoist-non-react-statics';
+import { styled as scStyled } from 'styled-components';
+import type * as React from 'react';
+import type * as CSS from 'csstype';
+import type * as hoistNonReactStatics from 'hoist-non-react-statics';
+export type * from 'styled-components';
 type WithOptionalTheme<P extends {
   theme?: T | undefined;
 }, T> = OmitU<P, 'theme'> & {
   theme?: T | undefined;
 };
-
-// Helper type operators
-// Pick that distributes over union types
 export type PickU<T, K extends keyof T> = T extends any ? { [P in K]: T[P] } : never;
 export type OmitU<T, K extends keyof T> = T extends any ? PickU<T, Exclude<keyof T, K>> : never;
-
-// Any prop that has a default prop becomes optional, but its type is unchanged
-// Undeclared default props are augmented into the resulting allowable attributes
-// If declared props have indexed properties, ignore default props entirely as keyof gets widened
-// Wrap in an outer-level conditional type to allow distribution over props that are unions
 type Defaultize<P, D> = P extends any ? string extends keyof P ? P : PickU<P, Exclude<keyof P, keyof D>> & Partial<PickU<P, Extract<keyof P, keyof D>>> & Partial<PickU<D, Exclude<keyof D, keyof P>>> : never;
 export type IntrinsicElementsKeys = keyof React.JSX.IntrinsicElements;
 type ReactDefaultizedProps<C, P> = C extends {
   defaultProps: infer D;
 } ? Defaultize<P, D> : P;
-type MakeAttrsOptional<C extends string | React.ComponentType<any>, O extends object, A extends keyof P, P = React.ComponentPropsWithRef<C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never>> =
-// Distribute unions early to avoid quadratic expansion
-P extends any ? OmitU<ReactDefaultizedProps<C, P> & O, A> & Partial<PickU<P & O, A>> : never;
-export type StyledComponentProps<
-// The Component from whose props are derived
-C extends string | React.ComponentType<any>,
-// The Theme from the current context
-T extends object,
-// The other props added by the template
-O extends object,
-// The props that are made optional by .attrs
-A extends keyof any,
-// The Component passed with "forwardedAs" prop
-FAsC extends string | React.ComponentType<any> = C> =
-// Distribute O if O is a union type
-O extends object ? WithOptionalTheme<MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>, T> : never;
+type MakeAttrsOptional<C extends string | React.ComponentType<any>, O extends object, A extends keyof P, P = React.ComponentPropsWithRef<C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never>> = P extends any ? OmitU<ReactDefaultizedProps<C, P> & O, A> & Partial<PickU<P & O, A>> : never;
+export type StyledComponentProps<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, FAsC extends string | React.ComponentType<any> = C> = O extends object ? WithOptionalTheme<MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>, T> : never;
 export interface ThemeProps<T> {
   theme: T;
 }
@@ -44,29 +24,18 @@ export type ThemedStyledProps<P, T> = P & ThemeProps<T>;
 export interface Keyframes {
   getName(): string;
 }
-export * from 'styled-components';
-export { default } from 'styled-components';
-export { default as StyledEngineProvider } from "./StyledEngineProvider/index.mjs";
-export { default as GlobalStyles } from "./GlobalStyles/index.mjs";
-export * from "./GlobalStyles/index.mjs";
-
+declare const _default: typeof scStyled;
+export default _default;
 /**
  * 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;
-
-// Not needed anymore, but fixes https://github.com/mui/material-ui/issues/44112
-// TODO: Remove it in v7
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_processStyles(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;
-
-// These are the same as the ones in @mui/styled-engine
-// CSS.PropertiesFallback are necessary so that we support spreading of the mixins. For example:
-// '@font-face'?: Fontface | Fontface[]
+export declare function internal_mutateStyles(tag: React.ElementType, processor: (styles: any) => any): void;
+export declare function internal_processStyles(tag: React.ElementType, processor: (styles: any) => any): void;
+export declare function internal_serializeStyles<P>(styles: Interpolation<P>): object;
+export { ThemeContext, keyframes, css } from 'styled-components';
+export { default as StyledEngineProvider } from "./StyledEngineProvider/index.mjs";
+export { default as GlobalStyles } from "./GlobalStyles/index.mjs";
+export type { GlobalStylesProps } from "./GlobalStyles/index.mjs";
 export type CSSProperties = CSS.PropertiesFallback<number | string>;
 export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>> };
 export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };
@@ -78,8 +47,6 @@ export interface ArrayCSSInterpolation extends Array<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, Omit<CSSOthersObject, 'variants'> {}
 interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> {
   variants: Array<{
@@ -93,17 +60,12 @@ interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> {
 }
 export type FalseyValue = undefined | null | false;
 export type Interpolation<P> = InterpolationValue | CSSObjectWithVariants<P> | InterpolationFunction<P> | FlattenInterpolation<P>;
-// cannot be made a self-referential interface, breaks WithPropNested
-// see https://github.com/microsoft/TypeScript/issues/34796
 export type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>;
 export type InterpolationValue = string | number | FalseyValue | Keyframes | StyledComponentInterpolation | CSSObject;
 export type SimpleInterpolation = InterpolationValue | FlattenSimpleInterpolation;
-// adapter for compatibility with @mui/styled-engine
 export type CSSInterpolation = SimpleInterpolation;
 export type FlattenSimpleInterpolation = ReadonlyArray<SimpleInterpolation>;
 export type InterpolationFunction<P> = (props: P) => Interpolation<P>;
-
-// abuse Pick to strip the call signature from ForwardRefExoticComponent
 type ForwardRefExoticBase<P> = PickU<React.ForwardRefExoticComponent<P>, keyof React.ForwardRefExoticComponent<any>>;
 type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
   as?: AsC | undefined;
@@ -111,16 +73,12 @@ type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T e
 };
 export type StyledComponent<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object = {}, O extends object = {}, A extends keyof any = never> =
 // the "string" allows this to be used as an object key
-// I really want to avoid this if possible but it's the only way to use nesting with object styles...
 string & StyledComponentBase<C, T, O, A> & hoistNonReactStatics.NonReactStatics<C extends React.ComponentType<any> ? C : never>;
-
-// any doesn't count as assignable to never in the extends clause, and we default A to never
 export type AnyStyledComponent = StyledComponent<any, any, any, any> | StyledComponent<any, any, any> | React.FunctionComponent<any> | React.ComponentType<any>;
 export type StyledComponentInnerComponent<C extends AnyStyledComponent> = C extends StyledComponent<infer I, any, any, any> ? I : C extends StyledComponent<infer I, any, any> ? I : C;
 export type StyledComponentInnerOtherProps<C extends AnyStyledComponent> = C extends StyledComponent<any, any, infer O, any> ? O : C extends StyledComponent<any, any, infer O> ? O : never;
 export type StyledComponentInnerAttrs<C extends AnyStyledComponent> = C extends StyledComponent<any, any, any, infer A> ? A : never;
 export interface StyledComponentBase<C extends string | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {
-  // add our own fake call signature to implement the polymorphic 'as' prop
   (props: StyledComponentProps<C, T, O, A> & {
     as?: never | undefined;
     forwardedAs?: never | undefined;
@@ -129,37 +87,24 @@ export interface StyledComponentBase<C extends string | React.ComponentType<any>
   withComponent<WithC extends AnyStyledComponent>(component: WithC): StyledComponent<StyledComponentInnerComponent<WithC>, T, O & StyledComponentInnerOtherProps<WithC>, A | StyledComponentInnerAttrs<WithC>>;
   withComponent<WithC extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>>(component: WithC): StyledComponent<WithC, T, O, A>;
 }
-
-// remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
 type StyledComponentInterpolation = Pick<StyledComponentBase<any, any, any, any>, keyof StyledComponentBase<any, any>> | Pick<StyledComponentBase<any, any, any>, keyof StyledComponentBase<any, any>>;
-
-// These are typings coming from styled-components
-// They are adjusted to accept the extended options coming from mui
 type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
 type ThemedStyledComponentFactories<T extends object> = { [TTag in keyof React.JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T> };
 export type StyledComponentPropsWithRef<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>> = C extends AnyStyledComponent ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>> : React.ComponentPropsWithRef<C>;
-
-// Same as in styled-components, but copied here so that it would use the Interpolation & CSS typings from above
 export interface ThemedStyledFunctionBase<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> {
   (first: TemplateStringsArray): StyledComponent<C, T, O, A>;
   (first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>, ...other: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>>): StyledComponent<C, T, O, A>;
   <U extends object>(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>, ...other: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>): StyledComponent<C, T, O & U, A>;
 }
-
-// same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
 export interface ThemedStyledFunction<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> extends ThemedStyledFunctionBase<C, T, O, A> {}
 export type CreateStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}> = ThemedStyledFunction<React.ComponentType<ComponentProps>, T, SpecificComponentProps & JSXProps>;
-
-// Config to be used with withConfig
 export interface StyledConfig<O extends object = {}> {
-  // TODO: Add all types from the original StyledComponentWrapperProperties
   componentId?: string | undefined;
   displayName?: string | undefined;
   label?: string | undefined;
   target?: string | undefined;
   shouldForwardProp?: ((prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean) | undefined;
 }
-
 /** Same as StyledConfig but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
   componentId?: string | undefined;
@@ -168,8 +113,6 @@ export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Prop
   shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
   target?: string | undefined;
 }
-
-// same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components
 export interface ThemedBaseStyledInterface<MUIStyledCommonProps extends object, MuiStyledOptions extends object, Theme extends object> extends ThemedStyledComponentFactories<Theme> {
   <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;

package/index.d.ts

@@ -1,42 +1,22 @@
-import * as React from 'react';
-import * as CSS from 'csstype';
-import * as hoistNonReactStatics from 'hoist-non-react-statics';
+import { styled as scStyled } from 'styled-components';
+import type * as React from 'react';
+import type * as CSS from 'csstype';
+import type * as hoistNonReactStatics from 'hoist-non-react-statics';
+export type * from 'styled-components';
 type WithOptionalTheme<P extends {
   theme?: T | undefined;
 }, T> = OmitU<P, 'theme'> & {
   theme?: T | undefined;
 };
-
-// Helper type operators
-// Pick that distributes over union types
 export type PickU<T, K extends keyof T> = T extends any ? { [P in K]: T[P] } : never;
 export type OmitU<T, K extends keyof T> = T extends any ? PickU<T, Exclude<keyof T, K>> : never;
-
-// Any prop that has a default prop becomes optional, but its type is unchanged
-// Undeclared default props are augmented into the resulting allowable attributes
-// If declared props have indexed properties, ignore default props entirely as keyof gets widened
-// Wrap in an outer-level conditional type to allow distribution over props that are unions
 type Defaultize<P, D> = P extends any ? string extends keyof P ? P : PickU<P, Exclude<keyof P, keyof D>> & Partial<PickU<P, Extract<keyof P, keyof D>>> & Partial<PickU<D, Exclude<keyof D, keyof P>>> : never;
 export type IntrinsicElementsKeys = keyof React.JSX.IntrinsicElements;
 type ReactDefaultizedProps<C, P> = C extends {
   defaultProps: infer D;
 } ? Defaultize<P, D> : P;
-type MakeAttrsOptional<C extends string | React.ComponentType<any>, O extends object, A extends keyof P, P = React.ComponentPropsWithRef<C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never>> =
-// Distribute unions early to avoid quadratic expansion
-P extends any ? OmitU<ReactDefaultizedProps<C, P> & O, A> & Partial<PickU<P & O, A>> : never;
-export type StyledComponentProps<
-// The Component from whose props are derived
-C extends string | React.ComponentType<any>,
-// The Theme from the current context
-T extends object,
-// The other props added by the template
-O extends object,
-// The props that are made optional by .attrs
-A extends keyof any,
-// The Component passed with "forwardedAs" prop
-FAsC extends string | React.ComponentType<any> = C> =
-// Distribute O if O is a union type
-O extends object ? WithOptionalTheme<MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>, T> : never;
+type MakeAttrsOptional<C extends string | React.ComponentType<any>, O extends object, A extends keyof P, P = React.ComponentPropsWithRef<C extends IntrinsicElementsKeys | React.ComponentType<any> ? C : never>> = P extends any ? OmitU<ReactDefaultizedProps<C, P> & O, A> & Partial<PickU<P & O, A>> : never;
+export type StyledComponentProps<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, FAsC extends string | React.ComponentType<any> = C> = O extends object ? WithOptionalTheme<MakeAttrsOptional<C, O, A> & MakeAttrsOptional<FAsC, O, A>, T> : never;
 export interface ThemeProps<T> {
   theme: T;
 }
@@ -44,29 +24,18 @@ export type ThemedStyledProps<P, T> = P & ThemeProps<T>;
 export interface Keyframes {
   getName(): string;
 }
-export * from 'styled-components';
-export { default } from 'styled-components';
-export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
-export { default as GlobalStyles } from "./GlobalStyles/index.js";
-export * from "./GlobalStyles/index.js";
-
+declare const _default: typeof scStyled;
+export default _default;
 /**
  * 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;
-
-// Not needed anymore, but fixes https://github.com/mui/material-ui/issues/44112
-// TODO: Remove it in v7
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function internal_processStyles(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;
-
-// These are the same as the ones in @mui/styled-engine
-// CSS.PropertiesFallback are necessary so that we support spreading of the mixins. For example:
-// '@font-face'?: Fontface | Fontface[]
+export declare function internal_mutateStyles(tag: React.ElementType, processor: (styles: any) => any): void;
+export declare function internal_processStyles(tag: React.ElementType, processor: (styles: any) => any): void;
+export declare function internal_serializeStyles<P>(styles: Interpolation<P>): object;
+export { ThemeContext, keyframes, css } from 'styled-components';
+export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
+export { default as GlobalStyles } from "./GlobalStyles/index.js";
+export type { GlobalStylesProps } from "./GlobalStyles/index.js";
 export type CSSProperties = CSS.PropertiesFallback<number | string>;
 export type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | Array<Extract<CSSProperties[K], string>> };
 export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };
@@ -78,8 +47,6 @@ export interface ArrayCSSInterpolation extends Array<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, Omit<CSSOthersObject, 'variants'> {}
 interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> {
   variants: Array<{
@@ -93,17 +60,12 @@ interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> {
 }
 export type FalseyValue = undefined | null | false;
 export type Interpolation<P> = InterpolationValue | CSSObjectWithVariants<P> | InterpolationFunction<P> | FlattenInterpolation<P>;
-// cannot be made a self-referential interface, breaks WithPropNested
-// see https://github.com/microsoft/TypeScript/issues/34796
 export type FlattenInterpolation<P> = ReadonlyArray<Interpolation<P>>;
 export type InterpolationValue = string | number | FalseyValue | Keyframes | StyledComponentInterpolation | CSSObject;
 export type SimpleInterpolation = InterpolationValue | FlattenSimpleInterpolation;
-// adapter for compatibility with @mui/styled-engine
 export type CSSInterpolation = SimpleInterpolation;
 export type FlattenSimpleInterpolation = ReadonlyArray<SimpleInterpolation>;
 export type InterpolationFunction<P> = (props: P) => Interpolation<P>;
-
-// abuse Pick to strip the call signature from ForwardRefExoticComponent
 type ForwardRefExoticBase<P> = PickU<React.ForwardRefExoticComponent<P>, keyof React.ForwardRefExoticComponent<any>>;
 type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T extends object, O extends object, A extends keyof any, AsC extends string | React.ComponentType<any> = C, FAsC extends string | React.ComponentType<any> = C> = StyledComponentProps<C, T, O, A, FAsC> & {
   as?: AsC | undefined;
@@ -111,16 +73,12 @@ type StyledComponentPropsWithAs<C extends string | React.ComponentType<any>, T e
 };
 export type StyledComponent<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object = {}, O extends object = {}, A extends keyof any = never> =
 // the "string" allows this to be used as an object key
-// I really want to avoid this if possible but it's the only way to use nesting with object styles...
 string & StyledComponentBase<C, T, O, A> & hoistNonReactStatics.NonReactStatics<C extends React.ComponentType<any> ? C : never>;
-
-// any doesn't count as assignable to never in the extends clause, and we default A to never
 export type AnyStyledComponent = StyledComponent<any, any, any, any> | StyledComponent<any, any, any> | React.FunctionComponent<any> | React.ComponentType<any>;
 export type StyledComponentInnerComponent<C extends AnyStyledComponent> = C extends StyledComponent<infer I, any, any, any> ? I : C extends StyledComponent<infer I, any, any> ? I : C;
 export type StyledComponentInnerOtherProps<C extends AnyStyledComponent> = C extends StyledComponent<any, any, infer O, any> ? O : C extends StyledComponent<any, any, infer O> ? O : never;
 export type StyledComponentInnerAttrs<C extends AnyStyledComponent> = C extends StyledComponent<any, any, any, infer A> ? A : never;
 export interface StyledComponentBase<C extends string | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> extends ForwardRefExoticBase<StyledComponentProps<C, T, O, A>> {
-  // add our own fake call signature to implement the polymorphic 'as' prop
   (props: StyledComponentProps<C, T, O, A> & {
     as?: never | undefined;
     forwardedAs?: never | undefined;
@@ -129,37 +87,24 @@ export interface StyledComponentBase<C extends string | React.ComponentType<any>
   withComponent<WithC extends AnyStyledComponent>(component: WithC): StyledComponent<StyledComponentInnerComponent<WithC>, T, O & StyledComponentInnerOtherProps<WithC>, A | StyledComponentInnerAttrs<WithC>>;
   withComponent<WithC extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>>(component: WithC): StyledComponent<WithC, T, O, A>;
 }
-
-// remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
 type StyledComponentInterpolation = Pick<StyledComponentBase<any, any, any, any>, keyof StyledComponentBase<any, any>> | Pick<StyledComponentBase<any, any, any>, keyof StyledComponentBase<any, any>>;
-
-// These are typings coming from styled-components
-// They are adjusted to accept the extended options coming from mui
 type AnyIfEmpty<T extends object> = keyof T extends never ? any : T;
 type ThemedStyledComponentFactories<T extends object> = { [TTag in keyof React.JSX.IntrinsicElements]: ThemedStyledFunctionBase<TTag, T> };
 export type StyledComponentPropsWithRef<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>> = C extends AnyStyledComponent ? React.ComponentPropsWithRef<StyledComponentInnerComponent<C>> : React.ComponentPropsWithRef<C>;
-
-// Same as in styled-components, but copied here so that it would use the Interpolation & CSS typings from above
 export interface ThemedStyledFunctionBase<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> {
   (first: TemplateStringsArray): StyledComponent<C, T, O, A>;
   (first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>, ...other: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O, T>>>): StyledComponent<C, T, O, A>;
   <U extends object>(first: TemplateStringsArray | CSSObject | InterpolationFunction<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>, ...other: Array<Interpolation<ThemedStyledProps<StyledComponentPropsWithRef<C> & O & U, T>>>): StyledComponent<C, T, O & U, A>;
 }
-
-// same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
 export interface ThemedStyledFunction<C extends keyof React.JSX.IntrinsicElements | React.ComponentType<any>, T extends object, O extends object = {}, A extends keyof any = never> extends ThemedStyledFunctionBase<C, T, O, A> {}
 export type CreateStyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}, T extends object = {}> = ThemedStyledFunction<React.ComponentType<ComponentProps>, T, SpecificComponentProps & JSXProps>;
-
-// Config to be used with withConfig
 export interface StyledConfig<O extends object = {}> {
-  // TODO: Add all types from the original StyledComponentWrapperProperties
   componentId?: string | undefined;
   displayName?: string | undefined;
   label?: string | undefined;
   target?: string | undefined;
   shouldForwardProp?: ((prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean) | undefined;
 }
-
 /** Same as StyledConfig but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
   componentId?: string | undefined;
@@ -168,8 +113,6 @@ export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Prop
   shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
   target?: string | undefined;
 }
-
-// same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components
 export interface ThemedBaseStyledInterface<MUIStyledCommonProps extends object, MuiStyledOptions extends object, Theme extends object> extends ThemedStyledComponentFactories<Theme> {
   <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;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/styled-engine-sc v9.0.0
+ * @mui/styled-engine-sc v9.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -8,7 +8,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -36,7 +35,7 @@ Object.defineProperty(exports, "css", {
     return _styledComponents.css;
   }
 });
-exports.default = styled;
+exports.default = void 0;
 exports.internal_mutateStyles = internal_mutateStyles;
 exports.internal_processStyles = internal_processStyles;
 exports.internal_serializeStyles = internal_serializeStyles;
@@ -46,18 +45,34 @@ Object.defineProperty(exports, "keyframes", {
     return _styledComponents.keyframes;
   }
 });
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = require("styled-components");
 var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
 var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// Re-export the full `styled-components` *type* surface, matching the
+// hand-written `.d.ts` that this conversion replaces. Type-only: emits
+// nothing at runtime. Local declarations below intentionally shadow some
+// styled-components names (`Keyframes`, `Interpolation`, `StyledComponent`,
+// `CSSObject`, …) — local declarations win over re-exports.
+
+// Helper type operators
+// Pick that distributes over union types
+
+// Any prop that has a default prop becomes optional, but its type is unchanged
+// Undeclared default props are augmented into the resulting allowable attributes
+// If declared props have indexed properties, ignore default props entirely as keyof gets widened
+// Wrap in an outer-level conditional type to allow distribution over props that are unions
+
 function styled(tag, options) {
   let stylesFactory;
   if (options) {
-    stylesFactory = (0, _styledComponents.default)(tag).withConfig({
+    stylesFactory = (0, _styledComponents.styled)(tag).withConfig({
       displayName: options.label,
       shouldForwardProp: options.shouldForwardProp
     });
   } else {
-    stylesFactory = (0, _styledComponents.default)(tag);
+    stylesFactory = (0, _styledComponents.styled)(tag);
   }
   if (process.env.NODE_ENV !== 'production') {
     const fn = (...styles) => {
@@ -74,8 +89,10 @@ function styled(tag, options) {
   }
   return stylesFactory;
 }
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
+var _default = exports.default = styled;
+/**
+ * For internal usage in `@mui/system` package
+ */
 function internal_mutateStyles(tag, processor) {
   // Styled-components attaches an instance to `componentStyle`.
   // https://github.com/styled-components/styled-components/blob/da8151762dcf72735ffba358173d4c097f6d5888/packages/styled-components/src/models/StyledComponent.ts#L257
@@ -89,12 +106,39 @@ function internal_mutateStyles(tag, processor) {
 
 // Not needed anymore, but fixes https://github.com/mui/material-ui/issues/44112
 // TODO: Remove it in v7
-// eslint-disable-next-line @typescript-eslint/naming-convention
 function internal_processStyles(tag, processor) {
   return internal_mutateStyles(tag, processor);
 }
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
 function internal_serializeStyles(styles) {
   return styles;
-}
+}
+
+// These are the same as the ones in @mui/styled-engine
+// CSS.PropertiesFallback are necessary so that we support spreading of the mixins. For example:
+// '@font-face'?: Fontface | Fontface[]
+
+// Omit variants as a key, because we have a special handling for it
+
+// cannot be made a self-referential interface, breaks WithPropNested
+// see https://github.com/microsoft/TypeScript/issues/34796
+
+// adapter for compatibility with @mui/styled-engine
+
+// abuse Pick to strip the call signature from ForwardRefExoticComponent
+
+// any doesn't count as assignable to never in the extends clause, and we default A to never
+
+// remove the call signature from StyledComponent so Interpolation can still infer InterpolationFunction
+
+// These are typings coming from styled-components
+// They are adjusted to accept the extended options coming from mui
+
+// Same as in styled-components, but copied here so that it would use the Interpolation & CSS typings from above
+
+// same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
+
+// Config to be used with withConfig
+
+/** Same as StyledConfig but shouldForwardProp must be a type guard */
+
+// same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components