@mui/system 7.0.0-alpha.0 → 7.0.0-alpha.1

package/Grid/GridProps.d.ts

@@ -1,105 +1,103 @@
 import * as React from 'react';
 import { OverrideProps, PartiallyRequired } from '@mui/types';
-import { SxProps } from '../styleFunctionSx';
-import { Theme, Breakpoint } from '../createTheme';
-import { SystemProps } from '../Box';
-type ResponsiveStyleValue<T> = T | Array<T | null> | {
-    [key in Breakpoint]?: T | null;
-};
+import { SxProps } from "../styleFunctionSx/index.js";
+import { Theme, Breakpoint } from "../createTheme/index.js";
+import { SystemProps } from "../Box/index.js";
+type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
 export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type GridSize = 'auto' | 'grow' | number | false;
 export type GridOffset = 'auto' | number;
 export interface GridBaseProps {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * The number of columns.
-     * @default 12
-     */
-    columns?: ResponsiveStyleValue<number>;
-    /**
-     * Defines the horizontal space between the type `item` components.
-     * It overrides the value of the `spacing` prop.
-     */
-    columnSpacing?: ResponsiveStyleValue<GridSpacing>;
-    /**
-     * If `true`, the component will have the flex *container* behavior.
-     * You should be wrapping *items* with a *container*.
-     * @default false
-     */
-    container?: boolean;
-    /**
-     * Defines the `flex-direction` style property.
-     * It is applied for all screen sizes.
-     * @default 'row'
-     */
-    direction?: ResponsiveStyleValue<GridDirection>;
-    /**
-     * Defines the offset value for the type `item` components.
-     */
-    offset?: ResponsiveStyleValue<GridOffset>;
-    /**
-     * @internal
-     * The level of the grid starts from `0` and increases when the grid nests
-     * inside another grid. Nesting is defined as a container Grid being a direct
-     * child of a container Grid.
-     *
-     * ```js
-     * <Grid container> // level 0
-     *   <Grid container> // level 1
-     *     <Grid container> // level 2
-     * ```
-     *
-     * Only consecutive grid is considered nesting. A grid container will start at
-     * `0` if there are non-Grid container element above it.
-     *
-     * ```js
-     * <Grid container> // level 0
-     *   <div>
-     *     <Grid container> // level 0
-     * ```
-     *
-     * ```js
-     * <Grid container> // level 0
-     *   <Grid>
-     *     <Grid container> // level 0
-     * ```
-     */
-    unstable_level?: number;
-    /**
-     * Defines the vertical space between the type `item` components.
-     * It overrides the value of the `spacing` prop.
-     */
-    rowSpacing?: ResponsiveStyleValue<GridSpacing>;
-    /**
-     * Defines the size of the the type `item` components.
-     */
-    size?: ResponsiveStyleValue<GridSize>;
-    /**
-     * Defines the space between the type `item` components.
-     * It can only be used on a type `container` component.
-     * @default 0
-     */
-    spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
-    /**
-     * Defines the `flex-wrap` style property.
-     * It's applied for all screen sizes.
-     * @default 'wrap'
-     */
-    wrap?: GridWrap;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns?: ResponsiveStyleValue<number>;
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container?: boolean;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction?: ResponsiveStyleValue<GridDirection>;
+  /**
+   * Defines the offset value for the type `item` components.
+   */
+  offset?: ResponsiveStyleValue<GridOffset>;
+  /**
+   * @internal
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
+   * ```
+   *
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <div>
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
+   * ```
+   */
+  unstable_level?: number;
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size?: ResponsiveStyleValue<GridSize>;
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap?: GridWrap;
 }
 export type GridOwnerState = PartiallyRequired<GridBaseProps, 'size' | 'offset' | 'unstable_level'>;
 export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
-    props: AdditionalProps & GridBaseProps & {
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: DefaultComponent;
+  props: AdditionalProps & GridBaseProps & {
+    sx?: SxProps<Theme>;
+  } & SystemProps<Theme>;
+  defaultComponent: DefaultComponent;
 }
 export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
-    component?: React.ElementType;
+  component?: React.ElementType;
 }> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
-export {};
+export {};

package/Grid/createGrid.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { OverridableComponent } from '@mui/types';
-import useThemeSystem from '../useTheme';
-import { GridTypeMap } from './GridProps';
-declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
+import useThemeSystem from "../useTheme/index.js";
+import { GridTypeMap } from "./GridProps.js";
+declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled/index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
 declare function useThemePropsDefault<T extends {}>(props: T): T;
 export default function createGrid(options?: {
-    createStyledComponent?: typeof defaultCreateStyledComponent;
-    useThemeProps?: typeof useThemePropsDefault;
-    useTheme?: typeof useThemeSystem;
-    componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent;
+  useThemeProps?: typeof useThemePropsDefault;
+  useTheme?: typeof useThemeSystem;
+  componentName?: string;
 }): OverridableComponent<GridTypeMap<{}, "div">>;
-export {};
+export {};

package/Grid/createGrid.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/Grid/gridClasses.d.ts

@@ -1,20 +1,20 @@
 export interface GridClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `container={true}`. */
-    container: string;
-    /** Styles applied to the root element if `direction="column"`. */
-    'direction-xs-column': string;
-    /** Styles applied to the root element if `direction="column-reverse"`. */
-    'direction-xs-column-reverse': string;
-    /** Styles applied to the root element if `direction="row-reverse"`. */
-    'direction-xs-row-reverse': string;
-    /** Styles applied to the root element if `wrap="nowrap"`. */
-    'wrap-xs-nowrap': string;
-    /** Styles applied to the root element if `wrap="reverse"`. */
-    'wrap-xs-wrap-reverse': string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `container={true}`. */
+  container: string;
+  /** Styles applied to the root element if `direction="column"`. */
+  'direction-xs-column': string;
+  /** Styles applied to the root element if `direction="column-reverse"`. */
+  'direction-xs-column-reverse': string;
+  /** Styles applied to the root element if `direction="row-reverse"`. */
+  'direction-xs-row-reverse': string;
+  /** Styles applied to the root element if `wrap="nowrap"`. */
+  'wrap-xs-nowrap': string;
+  /** Styles applied to the root element if `wrap="reverse"`. */
+  'wrap-xs-wrap-reverse': string;
 }
 export type GridClassKey = keyof GridClasses;
 export declare function getGridUtilityClass(slot: string): string;
 declare const gridClasses: GridClasses;
-export default gridClasses;
+export default gridClasses;

package/Grid/gridGenerator.d.ts

@@ -1,22 +1,42 @@
-import { Breakpoints } from '../createBreakpoints/createBreakpoints';
-import { Spacing } from '../createTheme/createSpacing';
-import { ResponsiveStyleValue } from '../styleFunctionSx';
-import { GridDirection, GridOwnerState } from './GridProps';
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+import { Spacing } from "../createTheme/createSpacing.js";
+import { ResponsiveStyleValue } from "../styleFunctionSx/index.js";
+import { GridDirection, GridOwnerState } from "./GridProps.js";
 interface Props {
-    theme: {
-        breakpoints: Breakpoints;
-        spacing?: Spacing;
-    };
-    ownerState: GridOwnerState;
+  theme: {
+    breakpoints: Breakpoints;
+    spacing?: Spacing;
+  };
+  ownerState: GridOwnerState;
 }
-export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridStyles: ({ ownerState }: Props) => {};
+export declare const generateGridSizeStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridOffsetStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridColumnsStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridRowSpacingStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridColumnSpacingStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridDirectionStyles: ({
+  theme,
+  ownerState
+}: Props) => {};
+export declare const generateGridStyles: ({
+  ownerState
+}: Props) => {};
 export declare const generateSizeClassNames: (size: GridOwnerState["size"]) => string[];
 export declare const generateSpacingClassNames: (spacing: GridOwnerState["spacing"], smallestBreakpoint?: string) => string[];
 export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
-export {};
+export {};

package/Grid/index.d.ts

@@ -1,7 +1,7 @@
-export { default } from './Grid';
-export { default as createGrid } from './createGrid';
-export * from './GridProps';
-export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
-export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
-export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames, } from './gridGenerator';
+export { default } from "./Grid.js";
+export { default as createGrid } from "./createGrid.js";
+export * from "./GridProps.js";
+export { default as gridClasses } from "./gridClasses.js";
+export * from "./gridClasses.js";
+export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+export { generateDirectionClasses as unstable_generateDirectionClasses, generateSizeClassNames as unstable_generateSizeClassNames, generateSpacingClassNames as unstable_generateSpacingClassNames } from "./gridGenerator.js";

package/Grid/traverseBreakpoints.d.ts

@@ -1,7 +1,7 @@
-import { Breakpoints, Breakpoint } from '../createBreakpoints/createBreakpoints';
+import { Breakpoints, Breakpoint } from "../createBreakpoints/createBreakpoints.js";
 export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
 interface Iterator<T> {
-    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+  (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
 }
 export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: T | T[] | Record<string, any> | undefined, iterator: Iterator<T>) => void;
-export {};
+export {};

package/InitColorSchemeScript/InitColorSchemeScript.d.ts

@@ -6,46 +6,46 @@ export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
 export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
 export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
 export interface InitColorSchemeScriptProps {
-    /**
-     * The default mode when the storage is empty (user's first visit).
-     * @default 'system'
-     */
-    defaultMode?: 'system' | 'light' | 'dark';
-    /**
-     * The default color scheme to be used on the light mode.
-     * @default 'light'
-     */
-    defaultLightColorScheme?: string;
-    /**
-     * The default color scheme to be used on the dark mode.
-     * * @default 'dark'
-     */
-    defaultDarkColorScheme?: string;
-    /**
-     * The node (provided as string) used to attach the color-scheme attribute.
-     * @default 'document.documentElement'
-     */
-    colorSchemeNode?: string;
-    /**
-     * localStorage key used to store `mode`.
-     * @default 'mode'
-     */
-    modeStorageKey?: string;
-    /**
-     * localStorage key used to store `colorScheme`.
-     * @default 'color-scheme'
-     */
-    colorSchemeStorageKey?: string;
-    /**
-     * DOM attribute for applying color scheme.
-     * @default 'data-color-scheme'
-     * @example '.mode-%s' // for class based color scheme
-     * @example '[data-mode-%s]' // for data-attribute without '='
-     */
-    attribute?: 'class' | 'data' | string;
-    /**
-     * Nonce string to pass to the inline script for CSP headers.
-     */
-    nonce?: string | undefined;
+  /**
+   * The default mode when the storage is empty (user's first visit).
+   * @default 'system'
+   */
+  defaultMode?: 'system' | 'light' | 'dark';
+  /**
+   * The default color scheme to be used on the light mode.
+   * @default 'light'
+   */
+  defaultLightColorScheme?: string;
+  /**
+   * The default color scheme to be used on the dark mode.
+   * * @default 'dark'
+   */
+  defaultDarkColorScheme?: string;
+  /**
+   * The node (provided as string) used to attach the color-scheme attribute.
+   * @default 'document.documentElement'
+   */
+  colorSchemeNode?: string;
+  /**
+   * localStorage key used to store `mode`.
+   * @default 'mode'
+   */
+  modeStorageKey?: string;
+  /**
+   * localStorage key used to store `colorScheme`.
+   * @default 'color-scheme'
+   */
+  colorSchemeStorageKey?: string;
+  /**
+   * DOM attribute for applying color scheme.
+   * @default 'data-color-scheme'
+   * @example '.mode-%s' // for class based color scheme
+   * @example '[data-mode-%s]' // for data-attribute without '='
+   */
+  attribute?: 'class' | 'data' | string;
+  /**
+   * Nonce string to pass to the inline script for CSP headers.
+   */
+  nonce?: string | undefined;
 }
-export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;
+export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;

package/InitColorSchemeScript/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './InitColorSchemeScript';
-export type { InitColorSchemeScriptProps } from './InitColorSchemeScript';
+export { default } from "./InitColorSchemeScript.js";
+export type { InitColorSchemeScriptProps } from "./InitColorSchemeScript.js";

package/README.md

@@ -6,7 +6,7 @@ MUI System is a set of CSS utilities to help you build custom designs more effi
 
 Install the package in your project directory with:
 
-<!-- #default-branch-switch -->
+<!-- #npm-tag-reference -->
 
 ```bash
 npm install @mui/system@next @emotion/react @emotion/styled
@@ -14,6 +14,6 @@ npm install @mui/system@next @emotion/react @emotion/styled
 
 ## Documentation
 
-<!-- #default-branch-switch -->
+<!-- #host-reference -->
 
 Visit [https://next.mui.com/system/getting-started/](https://next.mui.com/system/getting-started/) to view the full documentation.

package/RtlProvider/index.d.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-
 interface RtlProviderProps {
   children?: React.ReactNode;
   value?: boolean;
 }
-
 declare const RtlProvider: React.FC<RtlProviderProps>;
 export const useRtl: () => boolean;
-
-export default RtlProvider;
+export default RtlProvider;

package/Stack/Stack.d.ts

@@ -10,5 +10,5 @@
  *
  * - [Stack API](https://mui.com/system/api/stack/)
  */
-declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
-export default Stack;
+declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps.js").StackTypeMap<{}, "div">>;
+export default Stack;

package/Stack/StackProps.d.ts

@@ -1,53 +1,53 @@
 import * as React from 'react';
 import { OverrideProps } from '@mui/types';
-import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
-import { SystemProps } from '../Box';
-import { Theme } from '../createTheme';
+import { ResponsiveStyleValue, SxProps } from "../styleFunctionSx/index.js";
+import { SystemProps } from "../Box/index.js";
+import { Theme } from "../createTheme/index.js";
 export interface StackBaseProps {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Defines the `flex-direction` style property.
-     * It is applied for all screen sizes.
-     * @default 'column'
-     */
-    direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
-    /**
-     * Defines the space between immediate children.
-     * @default 0
-     */
-    spacing?: ResponsiveStyleValue<number | string>;
-    /**
-     * Add an element between each child.
-     */
-    divider?: React.ReactNode;
-    /**
-     * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
-     *
-     * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
-     * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
-     *
-     * To enable this flag globally, follow the theme's default props configuration.
-     * @default false
-     */
-    useFlexGap?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<number | string>;
+  /**
+   * Add an element between each child.
+   */
+  divider?: React.ReactNode;
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the theme's default props configuration.
+   * @default false
+   */
+  useFlexGap?: boolean;
 }
 export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
-    props: AdditionalProps & StackBaseProps & {
-        /**
-         * The system prop, which allows defining system overrides as well as additional CSS styles.
-         */
-        sx?: SxProps<Theme>;
-    } & SystemProps<Theme>;
-    defaultComponent: DefaultComponent;
+  props: AdditionalProps & StackBaseProps & {
+    /**
+     * The system prop, which allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+  } & SystemProps<Theme>;
+  defaultComponent: DefaultComponent;
 }
 export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
-    component?: React.ElementType;
+  component?: React.ElementType;
 }> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
 export interface StackOwnerState {
-    direction: StackProps['direction'];
-    spacing: StackProps['spacing'];
-    useFlexGap: boolean;
-}
+  direction: StackProps['direction'];
+  spacing: StackProps['spacing'];
+  useFlexGap: boolean;
+}

package/Stack/createStack.d.ts

@@ -1,21 +1,24 @@
 import * as React from 'react';
 import { OverridableComponent } from '@mui/types';
-import { StackTypeMap, StackOwnerState } from './StackProps';
-import { Breakpoints } from '../createBreakpoints/createBreakpoints';
-import { Spacing } from '../createTheme/createSpacing';
+import { StackTypeMap, StackOwnerState } from "./StackProps.js";
+import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
+import { Spacing } from "../createTheme/createSpacing.js";
 interface StyleFunctionProps {
-    theme: {
-        breakpoints: Breakpoints;
-        spacing: Spacing;
-    };
-    ownerState: StackOwnerState;
+  theme: {
+    breakpoints: Breakpoints;
+    spacing: Spacing;
+  };
+  ownerState: StackOwnerState;
 }
-declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
+declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled/index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
 declare function useThemePropsDefault<T extends {}>(props: T): T;
-export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
+export declare const style: ({
+  ownerState,
+  theme
+}: StyleFunctionProps) => any;
 export default function createStack(options?: {
-    createStyledComponent?: typeof defaultCreateStyledComponent;
-    useThemeProps?: typeof useThemePropsDefault;
-    componentName?: string;
+  createStyledComponent?: typeof defaultCreateStyledComponent;
+  useThemeProps?: typeof useThemePropsDefault;
+  componentName?: string;
 }): OverridableComponent<StackTypeMap<{}, "div">>;
-export {};
+export {};

package/Stack/createStack.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;