@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.7

package/node/Rating/Rating.js

@@ -19,14 +19,15 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../utils");
 var _Star = _interopRequireDefault(require("../internal/svg-icons/Star"));
 var _StarBorder = _interopRequireDefault(require("../internal/svg-icons/StarBorder"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _ratingClasses = _interopRequireWildcard(require("./ratingClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value"],
   _excluded2 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRating');
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
@@ -62,7 +63,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _ratingClasses.getRatingUtilityClass, classes);
 };
-const RatingRoot = (0, _styled.default)('span', {
+const RatingRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -117,7 +118,7 @@ const RatingRoot = (0, _styled.default)('span', {
     }
   }]
 }));
-const RatingLabel = (0, _styled.default)('label', {
+const RatingLabel = (0, _zeroStyled.styled)('label', {
   name: 'MuiRating',
   slot: 'Label',
   overridesResolver: ({
@@ -138,7 +139,7 @@ const RatingLabel = (0, _styled.default)('label', {
     }
   }]
 });
-const RatingIcon = (0, _styled.default)('span', {
+const RatingIcon = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -174,10 +175,10 @@ const RatingIcon = (0, _styled.default)('span', {
     }
   }]
 }));
-const RatingDecimal = (0, _styled.default)('span', {
+const RatingDecimal = (0, _zeroStyled.styled)('span', {
   name: 'MuiRating',
   slot: 'Decimal',
-  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'iconActive',
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'iconActive',
   overridesResolver: (props, styles) => {
     const {
       iconActive
@@ -308,7 +309,7 @@ function defaultLabelText(value) {
   return `${value} Star${value !== 1 ? 's' : ''}`;
 }
 const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     name: 'MuiRating',
     props: inProps
   });

package/node/Select/Select.js

@@ -22,7 +22,8 @@ var _FilledInput = _interopRequireDefault(require("../FilledInput"));
 var _OutlinedInput = _interopRequireDefault(require("../OutlinedInput"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
   _excluded2 = ["root"];
@@ -37,12 +38,12 @@ const useUtilityClasses = ownerState => {
 const styledRootConfig = {
   name: 'MuiSelect',
   overridesResolver: (props, styles) => styles.root,
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) && prop !== 'variant',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) && prop !== 'variant',
   slot: 'Root'
 };
-const StyledInput = (0, _styled.default)(_Input.default, styledRootConfig)('');
-const StyledOutlinedInput = (0, _styled.default)(_OutlinedInput.default, styledRootConfig)('');
-const StyledFilledInput = (0, _styled.default)(_FilledInput.default, styledRootConfig)('');
+const StyledInput = (0, _zeroStyled.styled)(_Input.default, styledRootConfig)('');
+const StyledOutlinedInput = (0, _zeroStyled.styled)(_OutlinedInput.default, styledRootConfig)('');
+const StyledFilledInput = (0, _zeroStyled.styled)(_FilledInput.default, styledRootConfig)('');
 const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     name: 'MuiSelect',

package/node/Select/SelectInput.js

@@ -21,7 +21,8 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Menu = _interopRequireDefault(require("../Menu/Menu"));
 var _NativeSelectInput = require("../NativeSelect/NativeSelectInput");
 var _utils = require("../InputBase/utils");
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
@@ -30,7 +31,7 @@ var _span;
 const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const SelectSelect = (0, _styled.default)('div', {
+const SelectSelect = (0, _zeroStyled.styled)(_NativeSelectInput.StyledSelectSelect, {
   name: 'MuiSelect',
   slot: 'Select',
   overridesResolver: (props, styles) => {
@@ -49,7 +50,7 @@ const SelectSelect = (0, _styled.default)('div', {
       [`&.${_selectClasses.default.multiple}`]: styles.multiple
     }];
   }
-})(_NativeSelectInput.nativeSelectSelectStyles, {
+})({
   // Win specificity over the input base
   [`&.${_selectClasses.default.select}`]: {
     height: 'auto',
@@ -61,7 +62,7 @@ const SelectSelect = (0, _styled.default)('div', {
     overflow: 'hidden'
   }
 });
-const SelectIcon = (0, _styled.default)('svg', {
+const SelectIcon = (0, _zeroStyled.styled)(_NativeSelectInput.StyledSelectIcon, {
   name: 'MuiSelect',
   slot: 'Icon',
   overridesResolver: (props, styles) => {
@@ -70,9 +71,9 @@ const SelectIcon = (0, _styled.default)('svg', {
     } = props;
     return [styles.icon, ownerState.variant && styles[`icon${(0, _capitalize.default)(ownerState.variant)}`], ownerState.open && styles.iconOpen];
   }
-})(_NativeSelectInput.nativeSelectIconStyles);
-const SelectNativeInput = (0, _styled.default)('input', {
-  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'classes',
+})({});
+const SelectNativeInput = (0, _zeroStyled.styled)('input', {
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'classes',
   name: 'MuiSelect',
   slot: 'NativeInput',
   overridesResolver: (props, styles) => styles.nativeInput
@@ -444,6 +445,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const listboxId = (0, _useId.default)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SelectSelect, (0, _extends2.default)({
+      as: "div",
       ref: handleDisplayRef,
       tabIndex: tabIndex,
       role: "combobox",

package/node/Skeleton/Skeleton.js

@@ -6,21 +6,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("../styles");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _skeletonClasses = require("./skeletonClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["animation", "className", "component", "height", "style", "variant", "width"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSkeleton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -35,7 +34,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _skeletonClasses.getSkeletonUtilityClass, classes);
 };
-const pulseKeyframe = (0, _system.keyframes)`
+const pulseKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     opacity: 1;
   }
@@ -48,7 +47,7 @@ const pulseKeyframe = (0, _system.keyframes)`
     opacity: 1;
   }
 `;
-const waveKeyframe = (0, _system.keyframes)`
+const waveKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     transform: translateX(-100%);
   }
@@ -62,7 +61,17 @@ const waveKeyframe = (0, _system.keyframes)`
     transform: translateX(100%);
   }
 `;
-const SkeletonRoot = (0, _styled.default)('span', {
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const pulseAnimation = typeof pulseKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
+      ` : null;
+const waveAnimation = typeof waveKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${waveKeyframe} 2s linear 0.5s infinite;
+      ` : null;
+const SkeletonRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSkeleton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -72,72 +81,111 @@ const SkeletonRoot = (0, _styled.default)('span', {
     return [styles.root, styles[ownerState.variant], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, ownerState.hasChildren && !ownerState.height && styles.heightAuto];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const radiusUnit = (0, _styles.unstable_getUnit)(theme.shape.borderRadius) || 'px';
   const radiusValue = (0, _styles.unstable_toUnitless)(theme.shape.borderRadius);
-  return (0, _extends2.default)({
+  return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
     backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
-    height: '1.2em'
-  }, ownerState.variant === 'text' && {
-    marginTop: 0,
-    marginBottom: 0,
-    height: 'auto',
-    transformOrigin: '0 55%',
-    transform: 'scale(1, 0.60)',
-    borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
-    '&:empty:before': {
-      content: '"\\00a0"'
-    }
-  }, ownerState.variant === 'circular' && {
-    borderRadius: '50%'
-  }, ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.hasChildren && {
-    '& > *': {
-      visibility: 'hidden'
-    }
-  }, ownerState.hasChildren && !ownerState.width && {
-    maxWidth: 'fit-content'
-  }, ownerState.hasChildren && !ownerState.height && {
-    height: 'auto'
-  });
-}, ({
-  ownerState
-}) => ownerState.animation === 'pulse' && (0, _system.css)`
-      animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
-    `, ({
-  ownerState,
-  theme
-}) => ownerState.animation === 'wave' && (0, _system.css)`
-      position: relative;
-      overflow: hidden;
-
-      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
-      -webkit-mask-image: -webkit-radial-gradient(white, black);
-
-      &::after {
-        animation: ${waveKeyframe} 2s linear 0.5s infinite;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          ${(theme.vars || theme).palette.action.hover},
-          transparent
-        );
-        content: '';
-        position: absolute;
-        transform: translateX(-100%); /* Avoid flash during server-side hydration */
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
+    height: '1.2em',
+    variants: [{
+      props: {
+        variant: 'text'
+      },
+      style: {
+        marginTop: 0,
+        marginBottom: 0,
+        height: 'auto',
+        transformOrigin: '0 55%',
+        transform: 'scale(1, 0.60)',
+        borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
+        '&:empty:before': {
+          content: '"\\00a0"'
+        }
       }
-    `);
+    }, {
+      props: {
+        variant: 'circular'
+      },
+      style: {
+        borderRadius: '50%'
+      }
+    }, {
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren,
+      style: {
+        '& > *': {
+          visibility: 'hidden'
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.width,
+      style: {
+        maxWidth: 'fit-content'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.height,
+      style: {
+        height: 'auto'
+      }
+    }, {
+      props: {
+        animation: 'pulse'
+      },
+      style: pulseAnimation || {
+        animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: {
+        position: 'relative',
+        overflow: 'hidden',
+        /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+        WebkitMaskImage: '-webkit-radial-gradient(white, black)',
+        '&::after': {
+          background: `linear-gradient(
+                90deg,
+                transparent,
+                ${(theme.vars || theme).palette.action.hover},
+                transparent
+              )`,
+          content: '""',
+          position: 'absolute',
+          transform: 'translateX(-100%)' /* Avoid flash during server-side hydration */,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        }
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: waveAnimation || {
+        animation: `${waveKeyframe} 2s linear 0.5s infinite`
+      }
+    }]
+  };
+});
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSkeleton'
   });

package/node/Slider/Slider.js

@@ -820,7 +820,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -838,7 +838,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/node/Snackbar/Snackbar.js

@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ClickAwayListener = require("@mui/base/ClickAwayListener");
 var _useSnackbar = require("@mui/base/useSnackbar");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _SnackbarContent = _interopRequireDefault(require("../SnackbarContent"));
@@ -26,6 +25,7 @@ const _excluded = ["onEnter", "onExited"],
   _excluded2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSnackbar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _snackbarClasses.getSnackbarUtilityClass, classes);
 };
-const SnackbarRoot = (0, _styled.default)('div', {
+const SnackbarRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiSnackbar',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -46,46 +46,72 @@ const SnackbarRoot = (0, _styled.default)('div', {
     return [styles.root, styles[`anchorOrigin${(0, _capitalize.default)(ownerState.anchorOrigin.vertical)}${(0, _capitalize.default)(ownerState.anchorOrigin.horizontal)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  const center = {
-    left: '50%',
-    right: 'auto',
-    transform: 'translateX(-50%)'
-  };
-  return (0, _extends2.default)({
-    zIndex: (theme.vars || theme).zIndex.snackbar,
-    position: 'fixed',
-    display: 'flex',
-    left: 8,
-    right: 8,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }, ownerState.anchorOrigin.vertical === 'top' ? {
-    top: 8
-  } : {
-    bottom: 8
-  }, ownerState.anchorOrigin.horizontal === 'left' && {
-    justifyContent: 'flex-start'
-  }, ownerState.anchorOrigin.horizontal === 'right' && {
-    justifyContent: 'flex-end'
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.snackbar,
+  position: 'fixed',
+  display: 'flex',
+  left: 8,
+  right: 8,
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top',
+    style: {
+      top: 8,
+      [theme.breakpoints.up('sm')]: {
+        top: 24
+      }
+    }
   }, {
-    [theme.breakpoints.up('sm')]: (0, _extends2.default)({}, ownerState.anchorOrigin.vertical === 'top' ? {
-      top: 24
-    } : {
-      bottom: 24
-    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
-      left: 24,
-      right: 'auto'
-    }, ownerState.anchorOrigin.horizontal === 'right' && {
-      right: 24,
-      left: 'auto'
-    })
-  });
-});
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical !== 'top',
+    style: {
+      bottom: 8,
+      [theme.breakpoints.up('sm')]: {
+        bottom: 24
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'left',
+    style: {
+      justifyContent: 'flex-start',
+      [theme.breakpoints.up('sm')]: {
+        left: 24,
+        right: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'right',
+    style: {
+      justifyContent: 'flex-end',
+      [theme.breakpoints.up('sm')]: {
+        right: 24,
+        left: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'center',
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        left: '50%',
+        right: 'auto',
+        transform: 'translateX(-50%)'
+      }
+    }
+  }]
+}));
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSnackbar'
   });

package/node/SnackbarContent/SnackbarContent.js

@@ -13,14 +13,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _snackbarContentClasses = require("./snackbarContentClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["action", "className", "message", "role"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSnackbarContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _snackbarContentClasses.getSnackbarContentUtilityClass, classes);
 };
-const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
+const SnackbarContentRoot = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiSnackbarContent',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -56,14 +56,14 @@ const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
     }
   });
 });
-const SnackbarContentMessage = (0, _styled.default)('div', {
+const SnackbarContentMessage = (0, _zeroStyled.styled)('div', {
   name: 'MuiSnackbarContent',
   slot: 'Message',
   overridesResolver: (props, styles) => styles.message
 })({
   padding: '8px 0'
 });
-const SnackbarContentAction = (0, _styled.default)('div', {
+const SnackbarContentAction = (0, _zeroStyled.styled)('div', {
   name: 'MuiSnackbarContent',
   slot: 'Action',
   overridesResolver: (props, styles) => styles.action
@@ -75,7 +75,7 @@ const SnackbarContentAction = (0, _styled.default)('div', {
   marginRight: -8
 });
 const SnackbarContent = /*#__PURE__*/React.forwardRef(function SnackbarContent(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSnackbarContent'
   });