@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.1

package/legacy/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,9 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -10,12 +12,12 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
 import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiButtonGroup');
 var overridesResolver = function overridesResolver(props, styles) {
   var ownerState = props.ownerState;
   return [_defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles.grouped), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(buttonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.variant)).concat(capitalize(ownerState.color))]), _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton), styles.firstButton), _defineProperty({}, "& .".concat(buttonGroupClasses.lastButton), styles.lastButton), _defineProperty({}, "& .".concat(buttonGroupClasses.middleButton), styles.middleButton), styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
@@ -42,73 +44,166 @@ var ButtonGroupRoot = styled('div', {
   slot: 'Root',
   overridesResolver: overridesResolver
 })(function (_ref9) {
-  var theme = _ref9.theme,
-    ownerState = _ref9.ownerState;
-  return _extends({
+  var theme = _ref9.theme;
+  return _defineProperty({
     display: 'inline-flex',
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.variant === 'contained' && {
-    boxShadow: (theme.vars || theme).shadows[2]
-  }, ownerState.disableElevation && {
-    boxShadow: 'none'
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }, ownerState.orientation === 'vertical' && {
-    flexDirection: 'column'
-  }, _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.grouped), _extends({
+    borderRadius: (theme.vars || theme).shape.borderRadius,
+    variants: [{
+      props: {
+        variant: 'contained'
+      },
+      style: {
+        boxShadow: (theme.vars || theme).shadows[2]
+      }
+    }, {
+      props: {
+        disableElevation: true
+      },
+      style: {
+        boxShadow: 'none'
+      }
+    }, {
+      props: {
+        fullWidth: true
+      },
+      style: {
+        width: '100%'
+      }
+    }, {
+      props: {
+        orientation: 'vertical'
+      },
+      style: _defineProperty(_defineProperty({
+        flexDirection: 'column'
+      }, "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      }), "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      })
+    }, {
+      props: {
+        orientation: 'horizontal'
+      },
+      style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      }), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      })
+    }, {
+      props: {
+        variant: 'text',
+        orientation: 'horizontal'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderRight: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }, {
+      props: {
+        variant: 'text',
+        orientation: 'vertical'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderBottom: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref10) {
+      var _ref11 = _slicedToArray(_ref10, 2),
+        value = _ref11[1];
+      return value.main;
+    }).flatMap(function (_ref12) {
+      var _ref13 = _slicedToArray(_ref12, 1),
+        color = _ref13[0];
+      return [{
+        props: {
+          variant: 'text',
+          color: color
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+          borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.5)") : alpha(theme.palette[color].main, 0.5)
+        })
+      }];
+    })), [{
+      props: {
+        variant: 'outlined',
+        orientation: 'horizontal'
+      },
+      style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderRightColor: 'transparent',
+        '&:hover': {
+          borderRightColor: 'currentColor'
+        }
+      }), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        marginLeft: -1
+      })
+    }, {
+      props: {
+        variant: 'outlined',
+        orientation: 'vertical'
+      },
+      style: _defineProperty(_defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        borderBottomColor: 'transparent',
+        '&:hover': {
+          borderBottomColor: 'currentColor'
+        }
+      }), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), {
+        marginTop: -1
+      })
+    }, {
+      props: {
+        variant: 'contained',
+        orientation: 'horizontal'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }, {
+      props: {
+        variant: 'contained',
+        orientation: 'vertical'
+      },
+      style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _defineProperty({
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
+      }, "&.".concat(buttonGroupClasses.disabled), {
+        borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
+      }))
+    }], _toConsumableArray(Object.entries(theme.palette).filter(function (_ref14) {
+      var _ref15 = _slicedToArray(_ref14, 2),
+        value = _ref15[1];
+      return value.dark;
+    }).map(function (_ref16) {
+      var _ref17 = _slicedToArray(_ref16, 1),
+        color = _ref17[0];
+      return {
+        props: {
+          variant: 'contained',
+          color: color
+        },
+        style: _defineProperty({}, "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), {
+          borderColor: (theme.vars || theme).palette[color].dark
+        })
+      };
+    })))
+  }, "& .".concat(buttonGroupClasses.grouped), {
     minWidth: 40,
-    '&:hover': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: 'none'
-    })
-  }, ownerState.variant === 'contained' && {
-    boxShadow: 'none'
-  })), "& .".concat(buttonGroupClasses.firstButton, ",& .").concat(buttonGroupClasses.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && _defineProperty({
-    borderRight: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'text' && ownerState.orientation === 'vertical' && _defineProperty({
-    borderBottom: theme.vars ? "1px solid rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / 0.23)") : "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    borderColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : alpha(theme.palette[ownerState.color].main, 0.5)
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    borderRightColor: 'transparent'
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    borderBottomColor: 'transparent'
-  }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && _defineProperty({
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderRight: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && _defineProperty({
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.grey[400])
-  }, "&.".concat(buttonGroupClasses.disabled), {
-    borderBottom: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
-  }), ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    borderColor: (theme.vars || theme).palette[ownerState.color].dark
-  }, {
-    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'currentColor'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'currentColor'
-    })
-  })), "& .".concat(buttonGroupClasses.lastButton, ",& .").concat(buttonGroupClasses.middleButton), _extends({}, ownerState.orientation === 'horizontal' && {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    marginLeft: -1
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    marginTop: -1
-  })));
+    boxShadow: 'none',
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      '&:hover': {
+        boxShadow: 'none'
+      }
+    }
+  });
 });
 var ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
   var props = useThemeProps({

package/legacy/Grid/Grid.js

@@ -30,6 +30,9 @@ import gridClasses, { getGridUtilityClass } from './gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getOffset(val) {
   var parse = parseFloat(val);
+  if (Number.isNaN(parse)) {
+    return val;
+  }
   return "".concat(parse).concat(String(val).replace(String(parse), '') || 'px');
 }
 export function generateGrid(_ref) {

package/legacy/RadioGroup/RadioGroup.js

@@ -5,21 +5,35 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import composeClasses from '@mui/utils/composeClasses';
 import FormGroup from '../FormGroup';
+import { getRadioGroupUtilityClass } from './radioGroupClasses';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import RadioGroupContext from './RadioGroupContext';
 import useId from '../utils/useId';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useUtilityClasses = function useUtilityClasses(props) {
+  var classes = props.classes,
+    row = props.row,
+    error = props.error;
+  var slots = {
+    root: ['root', row && 'row', error && 'error']
+  };
+  return composeClasses(slots, getRadioGroupUtilityClass, classes);
+};
 var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   var actions = props.actions,
     children = props.children,
+    className = props.className,
     defaultValue = props.defaultValue,
     nameProp = props.name,
     _onChange = props.onChange,
     valueProp = props.value,
-    other = _objectWithoutProperties(props, ["actions", "children", "defaultValue", "name", "onChange", "value"]);
+    other = _objectWithoutProperties(props, ["actions", "children", "className", "defaultValue", "name", "onChange", "value"]);
   var rootRef = React.useRef(null);
+  var classes = useUtilityClasses(props);
   var _useControlled = useControlled({
       controlled: valueProp,
       default: defaultValue,
@@ -59,7 +73,8 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
     value: contextValue,
     children: /*#__PURE__*/_jsx(FormGroup, _extends({
       role: "radiogroup",
-      ref: handleRef
+      ref: handleRef,
+      className: clsx(classes.root, className)
     }, other, {
       children: children
     }))
@@ -74,6 +89,10 @@ process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes
    * The content of the component.
    */
   children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

package/legacy/RadioGroup/index.js

@@ -1,4 +1,6 @@
 'use client';
 
 export { default } from './RadioGroup';
-export { default as useRadioGroup } from './useRadioGroup';
+export { default as useRadioGroup } from './useRadioGroup';
+export { default as radioGroupClasses } from './radioGroupClasses';
+export * from './radioGroupClasses';

package/legacy/RadioGroup/radioGroupClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getRadioGroupUtilityClass(slot) {
+  return generateUtilityClass('MuiRadioGroup', slot);
+}
+var radioGroupClasses = generateUtilityClasses('MuiRadioGroup', ['root', 'row', 'error']);
+export default radioGroupClasses;

package/legacy/Slider/Slider.js

@@ -287,29 +287,7 @@ export var SliderThumb = styled('span', {
     '&:hover': {
       boxShadow: 'none'
     }
-  }), "variants", [].concat(_toConsumableArray(Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(function (key) {
-    var _theme$vars6;
-    return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
-  }).map(function (color) {
-    return {
-      props: {
-        color: color
-      },
-      style: _defineProperty(_defineProperty({}, "&:hover, &.".concat(sliderClasses.focusVisible), _extends({}, theme.vars ? {
-        boxShadow: "0px 0px 0px 8px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)")
-      } : {
-        boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[color].main, 0.16))
-      }, {
-        '@media (hover: none)': {
-          boxShadow: 'none'
-        }
-      })), "&.".concat(sliderClasses.active), _extends({}, theme.vars ? {
-        boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)}")
-      } : {
-        boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[color].main, 0.16))
-      }))
-    };
-  })), [{
+  }), "variants", [{
     props: {
       size: 'small'
     },
@@ -336,7 +314,29 @@ export var SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }]));
+  }].concat(_toConsumableArray(Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(function (key) {
+    var _theme$vars6;
+    return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
+  }).map(function (color) {
+    return {
+      props: {
+        color: color
+      },
+      style: _defineProperty(_defineProperty({}, "&:hover, &.".concat(sliderClasses.focusVisible), _extends({}, theme.vars ? {
+        boxShadow: "0px 0px 0px 8px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)")
+      } : {
+        boxShadow: "0px 0px 0px 8px ".concat(alpha(theme.palette[color].main, 0.16))
+      }, {
+        '@media (hover: none)': {
+          boxShadow: 'none'
+        }
+      })), "&.".concat(sliderClasses.active), _extends({}, theme.vars ? {
+        boxShadow: "0px 0px 0px 14px rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.16)}")
+      } : {
+        boxShadow: "0px 0px 0px 14px ".concat(alpha(theme.palette[color].main, 0.16))
+      }))
+    };
+  }))));
 });
 export var SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',

package/legacy/Table/Table.js

@@ -119,8 +119,6 @@ process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ =
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**
    * Set the header sticky.
-   *
-   * ⚠️ It doesn't work with IE11.
    * @default false
    */
   stickyHeader: PropTypes.bool,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.0
+ * @mui/material v6.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styles/experimental_extendTheme.js

@@ -4,7 +4,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import deepmerge from '@mui/utils/deepmerge';
-import { unstable_createGetCssVar as systemCreateGetCssVar, unstable_prepareCssVars as prepareCssVars } from '@mui/system';
+import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
+import { createUnarySpacing } from '@mui/system/spacing';
+import { prepareCssVars } from '@mui/system/cssVars';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
@@ -43,6 +45,21 @@ function setColorChannel(obj, key) {
     obj["".concat(key, "Channel")] = safeColorChannel(toRgb(obj[key]), "MUI: Can't create `palette.".concat(key, "Channel` because `palette.").concat(key, "` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") + '\n' + "To suppress this warning, you need to explicitly provide the `palette.".concat(key, "Channel` as a string (in rgb format, for example \"12 12 12\") or undefined if you want to remove the channel token."));
   }
 }
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === 'number') {
+    return "".concat(spacingInput, "px");
+  }
+  if (typeof spacingInput === 'string') {
+    return spacingInput;
+  }
+  if (typeof spacingInput === 'function') {
+    return getSpacingVal(spacingInput(1));
+  }
+  if (Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return '8px';
+}
 var silent = function silent(fn) {
   try {
     return fn();
@@ -104,7 +121,8 @@ export default function extendTheme() {
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
-    })
+    }),
+    spacing: getSpacingVal(input.spacing)
   });
   Object.keys(theme.colorSchemes).forEach(function (key) {
     var palette = theme.colorSchemes[key].palette;
@@ -340,9 +358,13 @@ export default function extendTheme() {
   });
   theme.generateThemeVars = generateThemeVars;
   theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
+    return createSpacing(input.spacing, createUnarySpacing(this));
+  };
   theme.getColorSchemeSelector = function (colorScheme) {
     return "[".concat(theme.attribute, "=\"").concat(colorScheme, "\"] &");
   };
+  theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = _extends({}, defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {

package/legacy/zero-styled/index.js

@@ -1,4 +1,5 @@
 import useThemeProps from '../styles/useThemeProps';
+export { keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars