@mui/system 5.9.3 → 5.10.0

package/Box/Box.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.10.0
+
+<!-- generated comparing v5.9.3..master -->
+
+_Aug 8, 2022_
+
+A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ [Stack](https://mui.com/system/react-stack/) component is added to MUI System and Joy UI #33760 #33800 @mnajdova
+- ✨ [Breadcrumbs](https://mui.com/joy-ui/react-breadcrumbs/) component is added to Joy UI (#32697) @hbjORbj
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements
+
+### `@mui/material@5.10.0`
+
+- [Grid] Prevent crash if spacing is set to zero in theme (#33777) @PunitSoniME
+- [Grid] Export interface `RegularBreakpoints` to fix type error (#33751) @ZeeshanTamboli
+- [Skeleton] Add `rounded` variant (#33687) @siriwatknp
+- [Stepper] Fix classes for icon container (#33734) @pratikkarad
+- [TableCell] Enable size prop overrides via module augmentation (#33816) @brentertz
+- [Tooltip] Fix tooltip arrow css var background (#33753) @TimoWilhelm
+- [useScrollTrigger] Add passive flag to scroll trigger event listener #32437 (#33749) @Dsalazar1685
+
+### `@mui/system@5.10.0`
+
+- Fix unnecessary styles created from `sx` (#33752) @siriwatknp
+- Fix duplicated styles in Box (#33774) @iamxukai
+- Don't spread props to DOM for string tags (#33761) @siriwatknp
+- Add `Stack` component (#33760) @mnajdova
+
+### `@mui/joy@5.0.0-alpha.40`
+
+- [Stack] Add new component (#33800) @mnajdova
+- [Breadcrumbs] Add `Breadcrumbs` component (#32697) @hbjORbj
+- [Card] Fix wrong api description for `size` prop (#33862) @hbjORbj
+- Miscellaneous fixes (#33796, #33750) @siriwatknp
+
+### Docs
+
+- [docs] Create, revise, and expand System "Getting started" docs (#33503) @samuelsycamore
+- [docs] Test new image best practice @oliviertassinari
+- [docs] Fix typo in the ClickAwayListerner name (#33813) @pawelsmigielski
+- [docs] Fix link to `Basics` section in `Trap Focus` docs (#33772) @ZeeshanTamboli
+- [docs] z-index added in popper when used by split button (#33763) @PunitSoniME
+- [docs] Improve the guide for using @mui/base with Tailwind CSS (#33670) @mnajdova
+- [docs] Fix warnings related to Next.js' links (#33693) @mnajdova
+- [docs] Add notification to aggregation blogpost (#33745) @joserodolfofreitas
+- [docs] Add Grid version 2 docs (#33554) @siriwatknp
+- [examples] Fix `NextLinkComposedProps` type error (#33842) @adham618
+
+### Core
+
+- [blog] Add social card to Tenerife retreat post (#33764)
+- [blog] Fix blue outline bug (#33707) @oliviertassinari
+- [blog] Improve the width of the layout (#33706) @oliviertassinari@samuelsycamore
+- [core] Remove unnecessary packageName attribute from pages (#33488) @cherniavskii
+- [core] Remove duplicated CODE_OF_CONDUCT (#33702) @oliviertassinari
+- [core] Update Playwright packages together (#33737) @michaldudak
+- [website] Fix notifications not being marked as read in production (#33756) @cherniavskii
+
+All contributors of this release in alphabetical order: @adham618, @brentertz, @cherniavskii, @Dsalazar1685, @hbjORbj, @iamxukai, @joserodolfofreitas, @michaldudak, @mnajdova, @oliviertassinari, @pawelsmigielski, @pratikkarad, @PunitSoniME, @siriwatknp, @TimoWilhelm, @ZeeshanTamboli
+
 ## 5.9.3
 
 <!-- generated comparing v5.9.2..master -->
@@ -6880,7 +6941,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
 
   While the source code is currently hosted in the [main repository](https://github.com/mui/material-ui), we might move it to the [x repository](https://github.com/mui/mui-x) in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what.
 
-- 📚 Revamp the documentation for [the system](https://mui.com/system/basics/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page.
+- 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/overview/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page.
 - 👩‍🎨 Upgrade emotion to v11 (#23007) @mnajdova.
 - And many more 🐛 bug fixes and 📚 improvements.
 
@@ -7282,7 +7343,7 @@ Here are some highlights ✨:
   If you target IE11, you need to use the new bundle (`legacy`). We are treating IE11 as a second class-citizen, which is a continuation of the direction taken in #22873.
 
 - 🚀 Improve the internal benchmark suite (#22923, #23058) @mnajdova.
-  This was a prerequisite step to improve the [system](https://mui.com/system/basics/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4.
+  This was a prerequisite step to improve the [system](https://mui.com/system/getting-started/overview/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4.
 - ✏️ A new blog post: [Q3 2020 Update](https://mui.com/blog/2020-q3-update/) (#23055) @oliviertassinari.
 - 🐙 Migrate more tests to react-testing-library @deiga, @Morteza-Jenabzadeh, @nicholas-l.
 - And many more 🐛 bug fixes and 📚 improvements.
@@ -7623,7 +7684,7 @@ Here are some highlights ✨:
 
   The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.
 
-  Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/basics/)).
+  Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/getting-started/overview/)).
 
   This change has been in our roadmap for more than a year.
   We announced it in the [v4 release blog post](https://mui.com/blog/material-ui-v4-is-out/) as a direction v5 would take.
@@ -8876,7 +8937,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som
   />
   ```
 
-- [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/basics/) (#21413) @mnajdova.
+- [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/overview/) (#21413) @mnajdova.
 
   ```diff
   -import Typography from '@material-ui/core/Typography';

package/Container/Container.d.ts

@@ -1,13 +1,13 @@
-/**
- *
- * Demos:
- *
- * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
- * - [Container (MUI System)](https://mui.com/system/react-container/)
- *
- * API:
- *
- * - [Container API](https://mui.com/system/api/container/)
- */
-declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps").ContainerTypeMap<{}, "div">>;
-export default Container;
+/**
+ *
+ * Demos:
+ *
+ * - [Container (Material UI)](https://mui.com/material-ui/react-container/)
+ * - [Container (MUI System)](https://mui.com/system/react-container/)
+ *
+ * API:
+ *
+ * - [Container API](https://mui.com/system/api/container/)
+ */
+declare const Container: import("@mui/types").OverridableComponent<import("./ContainerProps").ContainerTypeMap<{}, "div">>;
+export default Container;

package/Container/ContainerProps.d.ts

@@ -1,40 +1,40 @@
-import * as React from 'react';
-import { OverrideProps } from '@mui/types';
-import { SxProps } from '../styleFunctionSx';
-import { Theme, Breakpoint } from '../createTheme';
-import { ContainerClasses } from './containerClasses';
-export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & {
-        children?: React.ReactNode;
-        /**
-         * Override or extend the styles applied to the component.
-         */
-        classes?: Partial<ContainerClasses>;
-        /**
-         * If `true`, the left and right padding is removed.
-         * @default false
-         */
-        disableGutters?: boolean;
-        /**
-         * Set the max-width to match the min-width of the current breakpoint.
-         * This is useful if you'd prefer to design for a fixed set of sizes
-         * instead of trying to accommodate a fully fluid viewport.
-         * It's fluid by default.
-         * @default false
-         */
-        fixed?: boolean;
-        /**
-         * Determine the max-width of the container.
-         * The container width grows with the size of the screen.
-         * Set to `false` to disable `maxWidth`.
-         * @default 'lg'
-         */
-        maxWidth?: Breakpoint | false;
-        /**
-         * The system prop that allows defining system overrides as well as additional CSS styles.
-         */
-        sx?: SxProps<Theme>;
-    };
-    defaultComponent: D;
-}
-export declare type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { SxProps } from '../styleFunctionSx';
+import { Theme, Breakpoint } from '../createTheme';
+import { ContainerClasses } from './containerClasses';
+export interface ContainerTypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & {
+        children?: React.ReactNode;
+        /**
+         * Override or extend the styles applied to the component.
+         */
+        classes?: Partial<ContainerClasses>;
+        /**
+         * If `true`, the left and right padding is removed.
+         * @default false
+         */
+        disableGutters?: boolean;
+        /**
+         * Set the max-width to match the min-width of the current breakpoint.
+         * This is useful if you'd prefer to design for a fixed set of sizes
+         * instead of trying to accommodate a fully fluid viewport.
+         * It's fluid by default.
+         * @default false
+         */
+        fixed?: boolean;
+        /**
+         * Determine the max-width of the container.
+         * The container width grows with the size of the screen.
+         * Set to `false` to disable `maxWidth`.
+         * @default 'lg'
+         */
+        maxWidth?: Breakpoint | false;
+        /**
+         * The system prop that allows defining system overrides as well as additional CSS styles.
+         */
+        sx?: SxProps<Theme>;
+    };
+    defaultComponent: D;
+}
+export declare type ContainerProps<D extends React.ElementType = ContainerTypeMap['defaultComponent'], P = {}> = OverrideProps<ContainerTypeMap<P, D>, D>;

package/Container/containerClasses.d.ts

@@ -1,22 +1,22 @@
-export interface ContainerClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `disableGutters={true}`. */
-    disableGutters: string;
-    /** Styles applied to the root element if `fixed={true}`. */
-    fixed: string;
-    /** Styles applied to the root element if `maxWidth="xs"`. */
-    maxWidthXs: string;
-    /** Styles applied to the root element if `maxWidth="sm"`. */
-    maxWidthSm: string;
-    /** Styles applied to the root element if `maxWidth="md"`. */
-    maxWidthMd: string;
-    /** Styles applied to the root element if `maxWidth="lg"`. */
-    maxWidthLg: string;
-    /** Styles applied to the root element if `maxWidth="xl"`. */
-    maxWidthXl: string;
-}
-export declare type ContainerClassKey = keyof ContainerClasses;
-export declare function getContainerUtilityClass(slot: string): string;
-declare const containerClasses: ContainerClasses;
-export default containerClasses;
+export interface ContainerClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `disableGutters={true}`. */
+    disableGutters: string;
+    /** Styles applied to the root element if `fixed={true}`. */
+    fixed: string;
+    /** Styles applied to the root element if `maxWidth="xs"`. */
+    maxWidthXs: string;
+    /** Styles applied to the root element if `maxWidth="sm"`. */
+    maxWidthSm: string;
+    /** Styles applied to the root element if `maxWidth="md"`. */
+    maxWidthMd: string;
+    /** Styles applied to the root element if `maxWidth="lg"`. */
+    maxWidthLg: string;
+    /** Styles applied to the root element if `maxWidth="xl"`. */
+    maxWidthXl: string;
+}
+export declare type ContainerClassKey = keyof ContainerClasses;
+export declare function getContainerUtilityClass(slot: string): string;
+declare const containerClasses: ContainerClasses;
+export default containerClasses;

package/Container/createContainer.d.ts

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { Interpolation, StyledComponent } from '@mui/styled-engine';
-import { OverridableComponent } from '@mui/types';
-import { ContainerProps, ContainerTypeMap } from './ContainerProps';
-import { Theme as DefaultTheme } from '../createTheme';
-interface StyleFnProps<Theme> extends ContainerProps {
-    theme: Theme;
-    ownerState: ContainerProps;
-}
-declare type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
-export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
-    createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
-    useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
-        component?: React.ElementType;
-    };
-    componentName?: string;
-}): OverridableComponent<ContainerTypeMap<{}, "div">>;
-export {};
+import * as React from 'react';
+import { Interpolation, StyledComponent } from '@mui/styled-engine';
+import { OverridableComponent } from '@mui/types';
+import { ContainerProps, ContainerTypeMap } from './ContainerProps';
+import { Theme as DefaultTheme } from '../createTheme';
+interface StyleFnProps<Theme> extends ContainerProps {
+    theme: Theme;
+    ownerState: ContainerProps;
+}
+declare type RequiredThemeStructure = Pick<DefaultTheme, 'breakpoints' | 'spacing'>;
+export default function createContainer<Theme extends RequiredThemeStructure = DefaultTheme>(options?: {
+    createStyledComponent?: (...styles: Array<Interpolation<StyleFnProps<Theme>>>) => StyledComponent<ContainerProps>;
+    useThemeProps?: (inProps: ContainerProps) => ContainerProps & {
+        component?: React.ElementType;
+    };
+    componentName?: string;
+}): OverridableComponent<ContainerTypeMap<{}, "div">>;
+export {};

package/README.md

@@ -20,4 +20,4 @@ yarn add @mui/system @emotion/react @emotion/styled
 
 <!-- #default-branch-switch -->
 
-[The documentation](https://mui.com/system/basics/)
+[The documentation](https://mui.com/system/getting-started/overview/)

package/Stack/Stack.d.ts

@@ -0,0 +1,12 @@
+/**
+ *
+ * Demos:
+ *
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ *
+ * API:
+ *
+ * - [Stack API](https://mui.com/system/api/stack/)
+ */
+declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps").StackTypeMap<{}, "div">>;
+export default Stack;

package/Stack/Stack.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _createStack = _interopRequireDefault(require("./createStack"));
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ *
+ * API:
+ *
+ * - [Stack API](https://mui.com/system/api/stack/)
+ */
+const Stack = (0, _createStack.default)();
+process.env.NODE_ENV !== "production" ? Stack.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+
+  /**
+   * Add an element between each child.
+   */
+  divider: _propTypes.default.node,
+
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = Stack;
+exports.default = _default;

package/Stack/StackProps.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
+import { SystemProps } from '../Box';
+import { Theme } from '../createTheme';
+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;
+}
+export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
+    props: P & StackBaseProps & {
+        /**
+         * The system prop, which allows defining system overrides as well as additional CSS styles.
+         */
+        sx?: SxProps<Theme>;
+    } & SystemProps<Theme>;
+    defaultComponent: D;
+}
+export declare type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
+    component?: React.ElementType;
+}> = OverrideProps<StackTypeMap<P, D>, D>;
+export interface StackOwnerState {
+    direction: StackProps['direction'];
+    spacing: StackProps['spacing'];
+}

package/Stack/StackProps.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/Stack/createStack.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { OverridableComponent } from '@mui/types';
+import { StackTypeMap, StackOwnerState } from './StackProps';
+import { Breakpoints } from '../createTheme/createBreakpoints';
+import { Spacing } from '../createTheme/createSpacing';
+interface StyleFunctionProps {
+    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 function useThemePropsDefault<T>(props: T): T & {};
+export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
+export default function createStack(options?: {
+    createStyledComponent?: typeof defaultCreateStyledComponent;
+    useThemeProps?: typeof useThemePropsDefault;
+    componentName?: string;
+}): OverridableComponent<StackTypeMap<{}, "div">>;
+export {};

package/Stack/createStack.js

@@ -0,0 +1,209 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createStack;
+exports.style = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _utils = require("@mui/utils");
+
+var _styled = _interopRequireDefault(require("../styled"));
+
+var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
+
+var _styleFunctionSx = require("../styleFunctionSx");
+
+var _createTheme = _interopRequireDefault(require("../createTheme"));
+
+var _breakpoints = require("../breakpoints");
+
+var _spacing = require("../spacing");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["component", "direction", "spacing", "divider", "children", "className"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultTheme = (0, _createTheme.default)();
+// widening Theme to any so that the consumer can own the theme structure.
+const defaultCreateStyledComponent = (0, _styled.default)('div', {
+  name: 'MuiStack',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+});
+
+function useThemePropsDefault(props) {
+  return (0, _useThemeProps.default)({
+    props,
+    name: 'MuiStack',
+    defaultTheme
+  });
+}
+/**
+ * Return an array with the separator React element interspersed between
+ * each React node of the input children.
+ *
+ * > joinChildren([1,2,3], 0)
+ * [1,0,2,0,3]
+ */
+
+
+function joinChildren(children, separator) {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  return childrenArray.reduce((output, child, index) => {
+    output.push(child);
+
+    if (index < childrenArray.length - 1) {
+      output.push( /*#__PURE__*/React.cloneElement(separator, {
+        key: `separator-${index}`
+      }));
+    }
+
+    return output;
+  }, []);
+}
+
+const getSideFromDirection = direction => {
+  return {
+    row: 'Left',
+    'row-reverse': 'Right',
+    column: 'Top',
+    'column-reverse': 'Bottom'
+  }[direction];
+};
+
+const style = ({
+  ownerState,
+  theme
+}) => {
+  let styles = (0, _extends2.default)({
+    display: 'flex',
+    flexDirection: 'column'
+  }, (0, _breakpoints.handleBreakpoints)({
+    theme
+  }, (0, _breakpoints.resolveBreakpointValues)({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), propValue => ({
+    flexDirection: propValue
+  })));
+
+  if (ownerState.spacing) {
+    const transformer = (0, _spacing.createUnarySpacing)(theme);
+    const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
+      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
+        acc[breakpoint] = true;
+      }
+
+      return acc;
+    }, {});
+    const directionValues = (0, _breakpoints.resolveBreakpointValues)({
+      values: ownerState.direction,
+      base
+    });
+    const spacingValues = (0, _breakpoints.resolveBreakpointValues)({
+      values: ownerState.spacing,
+      base
+    });
+
+    if (typeof directionValues === 'object') {
+      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+        const directionValue = directionValues[breakpoint];
+
+        if (!directionValue) {
+          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+
+    const styleFromPropValue = (propValue, breakpoint) => {
+      return {
+        '& > :not(style) + :not(style)': {
+          margin: 0,
+          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: (0, _spacing.getValue)(transformer, propValue)
+        }
+      };
+    };
+
+    styles = (0, _utils.deepmerge)(styles, (0, _breakpoints.handleBreakpoints)({
+      theme
+    }, spacingValues, styleFromPropValue));
+  }
+
+  styles = (0, _breakpoints.mergeBreakpointsInOrder)(theme.breakpoints, styles);
+  return styles;
+};
+
+exports.style = style;
+
+function createStack(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiStack'
+  } = options;
+
+  const useUtilityClasses = () => {
+    const slots = {
+      root: ['root']
+    };
+    return (0, _utils.unstable_composeClasses)(slots, slot => (0, _utils.unstable_generateUtilityClass)(componentName, slot), {});
+  };
+
+  const StackRoot = createStyledComponent(style);
+  const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+    const themeProps = useThemeProps(inProps);
+    const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
+
+    const {
+      component = 'div',
+      direction = 'column',
+      spacing = 0,
+      divider,
+      children,
+      className
+    } = props,
+          other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    const ownerState = {
+      direction,
+      spacing
+    };
+    const classes = useUtilityClasses();
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, (0, _extends2.default)({
+      as: component,
+      ownerState: ownerState,
+      ref: ref,
+      className: (0, _clsx.default)(classes.root, className)
+    }, other, {
+      children: divider ? joinChildren(children, divider) : children
+    }));
+  });
+  process.env.NODE_ENV !== "production" ? Stack.propTypes
+  /* remove-proptypes */
+  = {
+    children: _propTypes.default.node,
+    direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+    divider: _propTypes.default.node,
+    spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+  } : void 0;
+  return Stack;
+}