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

package/CHANGELOG.md

@@ -1,5 +1,100 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.7
+
+<!-- generated comparing v6.0.0-alpha.6..next -->
+
+_May 16, 2024_
+
+A big thanks to the 14 contributors who made this release possible.
+
+### `@mui/material@6.0.0-alpha.7`
+
+- &#8203;<!-- 23 -->[Autocomplete] Deprecate `componentsProps` props (#42179) @lhilgert9
+- &#8203;<!-- 22 -->[Autocomplete] Improve design when there's a start adornment for small autocomplete (#41781) @TahaRhidouani
+- &#8203;<!-- 21 -->[Autocomplete] deprecate `*Component` and `*Props` for v6 (#41875) @lhilgert9
+- &#8203;<!-- 19 -->[CircularProgress] Deprecate composed classes (#42076) @sai6855
+- &#8203;<!-- 05 -->[ToggleButtonGroup] Add missing `selected` class in ToggleButtonGroupClasses type (#42243) @tarunrajput
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- &#8203;<!-- 18 -->[Divider] Only apply codemod if light prop is present (#42098) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 13 -->Fix 301 to Figma @oliviertassinari
+- &#8203;<!-- 12 -->Fix use of deprecated React API (#42118) @oliviertassinari
+- &#8203;<!-- 11 -->Remove the Base notification (#42191) @danilo-leal
+- &#8203;<!-- 07 -->[material-ui] Improve descriptions for deprecated props (#42221) @aarongarciah
+- &#8203;<!-- 06 -->[material-ui] Fix typo in composition docs (#42195) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 20 -->[blog] Introducing Pigment CSS blog post (#42198) @samuelsycamore
+- &#8203;<!-- 17 -->[core] Remove confusing comment @oliviertassinari
+- &#8203;<!-- 16 -->[core] Match other repositories and convention @oliviertassinari
+- &#8203;<!-- 15 -->[core] Fix React 18.3 warnings about spreading keys in the Material UI `Autocomplete` component (#42099) @heath-freenome
+- &#8203;<!-- 14 -->[core] Remove unecessary quotes @oliviertassinari
+- &#8203;<!-- 10 -->[docs-infra] Share code for section title (#42236) @alexfauquette
+- &#8203;<!-- 09 -->[docs-infra] Limit the copy button to the visible code block (#42115) @danilo-leal
+- &#8203;<!-- 08 -->[docs-infra] Make select components with two capital letters (#42004) @alexfauquette
+- &#8203;<!-- 08 -->[docs-infra][toolpad] Fix Page title and SERP title mismatch (#41919) @bharatkashyap
+- &#8203;<!-- 05 -->[website] Add redirection for talk @oliviertassinari
+- &#8203;<!-- 04 -->[website] Adds Arthur Balduini team info (#42193) @arthurbalduini
+- &#8203;<!-- 03 -->[website] Update the role template file (#42192) @danilo-leal
+- &#8203;<!-- 02 -->[website] Update MUI X deps and migrate TreeView demos to v7 API (#42149) @noraleonte
+- &#8203;<!-- 01 -->[website] Fix pricing casing (#42178) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @arthurbalduini, @bharatkashyap, @danilo-leal, @DiegoAndai, @heath-freenome, @lhilgert9, @noraleonte, @oliviertassinari, @sai6855, @samuelsycamore, @TahaRhidouani, @tarunrajput
+
+## v6.0.0-alpha.6
+
+<!-- generated comparing v6.0.0-alpha.5..next -->
+
+_May 8, 2024_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@6.0.0-alpha.6`
+
+- [Chip] Add colorDefault class to chipClasses (#42067) @sai6855
+- Migrate components to support CSS extraction (#42001) @siriwatknp
+- [SpeedDial] Deprecate TransitionComponent (#40698) @harry-whorlow
+
+### `@mui/codemod@6.0.0-alpha.6`
+
+- Add `theme-v6` migration (#42056) @siriwatknp
+
+### `@mui/icons-material@6.0.0-alpha.6`
+
+- Add the Emergency icon (#42080) @danilo-leal
+
+### Docs
+
+- [autocomplete] Fix duplicate autocomplete id (#42086) @oliviertassinari
+- Fix SEO redirection issues @oliviertassinari
+- [material-ui] Fix broken link (#42142) @aarongarciah
+- [material-ui][docs] Fix link on the Sync page (#42088) @danilo-leal
+
+### Core
+
+- [blog] Shorten title to fit @oliviertassinari
+- [blog] Update Sync post OG image (#42114) @danilo-leal
+- [blog] A few tweaks in introducing-sync-plugin (#42092) @oliviertassinari
+- [code-infra] Add canary release scripts (#41949) @michaldudak
+- [code-infra] Move ComponentLinkHeader to @mui/docs (#42061) @Janpot
+- [code-infra] Bump node image used by CI in docker (#42079) @LukasTy
+- [core] Restrict import path with ESLint (#41970) @oliviertassinari
+- [docs-infra] Add design and formatting improvements (#42063) @danilo-leal
+- [docs-infra] Fix HTML structure violations (#42085) @oliviertassinari
+- [website] Componentize a few Careers page sections (#42102) @danilo-leal
+- [website] Refine the InfoCard design (#42116) @danilo-leal
+- [website] Fix home page slider's track position (#42141) @aarongarciah
+- [website] Closing the survey @oliviertassinari
+- [website] Remove Survey banner from website and Core docs (#42104) @joserodolfofreitas
+
+All contributors of this release in alphabetical order: @aarongarciah, @danilo-leal, @harry-whorlow, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp
+
 ## v6.0.0-alpha.5
 
 <!-- generated comparing v6.0.0-alpha.4..next -->

package/LoadingButton/LoadingButton.js

@@ -8,13 +8,14 @@ import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import { ButtonGroupContext } from '@mui/material/ButtonGroup';
 import CircularProgress from '@mui/material/CircularProgress';
 import resolveProps from '@mui/utils/resolveProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiLoadingButton');
 const useUtilityClasses = ownerState => {
   const {
     loading,
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
   return _extends({}, classes, composedClasses);
 };
 
-// TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
+// TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
 const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
 const LoadingButtonRoot = styled(Button, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -45,38 +46,53 @@ const LoadingButtonRoot = styled(Button, {
     }];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
     transition: theme.transitions.create(['opacity'], {
       duration: theme.transitions.duration.short
     }),
     opacity: 0
-  }
-}, ownerState.loadingPosition === 'center' && {
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-    duration: theme.transitions.duration.short
-  }),
-  [`&.${loadingButtonClasses.loading}`]: {
-    color: 'transparent'
-  }
-}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
-  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginRight: -8
-  }
-}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
-  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginLeft: -8
-  }
+  },
+  variants: [{
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      [`&.${loadingButtonClasses.loading}`]: {
+        color: 'transparent'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+    style: {
+      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(['opacity'], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginRight: -8
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+    style: {
+      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(['opacity'], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginLeft: -8
+      }
+    }
+  }]
 }));
 const LoadingButtonLoadingIndicator = styled('span', {
   name: 'MuiLoadingButton',
@@ -88,30 +104,85 @@ const LoadingButtonLoadingIndicator = styled('span', {
     return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'absolute',
   visibility: 'visible',
-  display: 'flex'
-}, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-  left: ownerState.size === 'small' ? 10 : 14
-}, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
-  left: 6
-}, ownerState.loadingPosition === 'center' && {
-  left: '50%',
-  transform: 'translate(-50%)',
-  color: (theme.vars || theme).palette.action.disabled
-}, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-  right: ownerState.size === 'small' ? 10 : 14
-}, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
-  right: 6
-}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
-  position: 'relative',
-  left: -10
-}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
-  position: 'relative',
-  right: -10
+  display: 'flex',
+  variants: [{
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === 'start' && ownerState.size !== 'small',
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === 'end' && ownerState.size !== 'small',
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
 }));
 const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
   const contextProps = React.useContext(ButtonGroupContext);

package/index.js

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

package/modern/LoadingButton/LoadingButton.js

@@ -8,13 +8,14 @@ import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
 import { capitalize, unstable_useId as useId } from '@mui/material/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { styled, useThemeProps } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import { ButtonGroupContext } from '@mui/material/ButtonGroup';
 import CircularProgress from '@mui/material/CircularProgress';
 import resolveProps from '@mui/utils/resolveProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiLoadingButton');
 const useUtilityClasses = ownerState => {
   const {
     loading,
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
   return _extends({}, classes, composedClasses);
 };
 
-// TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
+// TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
 const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
 const LoadingButtonRoot = styled(Button, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -45,38 +46,53 @@ const LoadingButtonRoot = styled(Button, {
     }];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
     transition: theme.transitions.create(['opacity'], {
       duration: theme.transitions.duration.short
     }),
     opacity: 0
-  }
-}, ownerState.loadingPosition === 'center' && {
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-    duration: theme.transitions.duration.short
-  }),
-  [`&.${loadingButtonClasses.loading}`]: {
-    color: 'transparent'
-  }
-}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
-  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginRight: -8
-  }
-}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
-  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginLeft: -8
-  }
+  },
+  variants: [{
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      [`&.${loadingButtonClasses.loading}`]: {
+        color: 'transparent'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+    style: {
+      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(['opacity'], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginRight: -8
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+    style: {
+      [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(['opacity'], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginLeft: -8
+      }
+    }
+  }]
 }));
 const LoadingButtonLoadingIndicator = styled('span', {
   name: 'MuiLoadingButton',
@@ -88,30 +104,85 @@ const LoadingButtonLoadingIndicator = styled('span', {
     return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'absolute',
   visibility: 'visible',
-  display: 'flex'
-}, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-  left: ownerState.size === 'small' ? 10 : 14
-}, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
-  left: 6
-}, ownerState.loadingPosition === 'center' && {
-  left: '50%',
-  transform: 'translate(-50%)',
-  color: (theme.vars || theme).palette.action.disabled
-}, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-  right: ownerState.size === 'small' ? 10 : 14
-}, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
-  right: 6
-}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
-  position: 'relative',
-  left: -10
-}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
-  position: 'relative',
-  right: -10
+  display: 'flex',
+  variants: [{
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === 'start' && ownerState.size !== 'small',
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === 'end' && ownerState.size !== 'small',
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
 }));
 const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
   const contextProps = React.useContext(ButtonGroupContext);

package/modern/index.js

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

package/modern/zero-styled/index.js

@@ -0,0 +1,7 @@
+import { useThemeProps } from '@mui/material/styles';
+export { styled } from '@mui/material/styles';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name) {
+  return useThemeProps;
+}

package/node/LoadingButton/LoadingButton.js

@@ -13,16 +13,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _utils2 = require("@mui/material/utils");
 var _base = require("@mui/base");
-var _styles = require("@mui/material/styles");
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _ButtonGroup = require("@mui/material/ButtonGroup");
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var _zeroStyled = require("../zero-styled");
 var _loadingButtonClasses = _interopRequireWildcard(require("./loadingButtonClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "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 useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiLoadingButton');
 const useUtilityClasses = ownerState => {
   const {
     loading,
@@ -39,9 +40,9 @@ const useUtilityClasses = ownerState => {
   return (0, _extends2.default)({}, classes, composedClasses);
 };
 
-// TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
+// TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
 const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
-const LoadingButtonRoot = (0, _styles.styled)(_Button.default, {
+const LoadingButtonRoot = (0, _zeroStyled.styled)(_Button.default, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
   name: 'MuiLoadingButton',
   slot: 'Root',
@@ -53,40 +54,55 @@ const LoadingButtonRoot = (0, _styles.styled)(_Button.default, {
     }];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
     transition: theme.transitions.create(['opacity'], {
       duration: theme.transitions.duration.short
     }),
     opacity: 0
-  }
-}, ownerState.loadingPosition === 'center' && {
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-    duration: theme.transitions.duration.short
-  }),
-  [`&.${_loadingButtonClasses.default.loading}`]: {
-    color: 'transparent'
-  }
-}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
-  [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginRight: -8
-  }
-}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
-  [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
-    transition: theme.transitions.create(['opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    marginLeft: -8
-  }
+  },
+  variants: [{
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      [`&.${_loadingButtonClasses.default.loading}`]: {
+        color: 'transparent'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+    style: {
+      [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(['opacity'], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginRight: -8
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+    style: {
+      [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
+        transition: theme.transitions.create(['opacity'], {
+          duration: theme.transitions.duration.short
+        }),
+        opacity: 0,
+        marginLeft: -8
+      }
+    }
+  }]
 }));
-const LoadingButtonLoadingIndicator = (0, _styles.styled)('span', {
+const LoadingButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
   name: 'MuiLoadingButton',
   slot: 'LoadingIndicator',
   overridesResolver: (props, styles) => {
@@ -96,35 +112,90 @@ const LoadingButtonLoadingIndicator = (0, _styles.styled)('span', {
     return [styles.loadingIndicator, styles[`loadingIndicator${(0, _utils2.capitalize)(ownerState.loadingPosition)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   position: 'absolute',
   visibility: 'visible',
-  display: 'flex'
-}, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-  left: ownerState.size === 'small' ? 10 : 14
-}, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
-  left: 6
-}, ownerState.loadingPosition === 'center' && {
-  left: '50%',
-  transform: 'translate(-50%)',
-  color: (theme.vars || theme).palette.action.disabled
-}, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
-  right: ownerState.size === 'small' ? 10 : 14
-}, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
-  right: 6
-}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
-  position: 'relative',
-  left: -10
-}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
-  position: 'relative',
-  right: -10
+  display: 'flex',
+  variants: [{
+    props: {
+      loadingPosition: 'start',
+      size: 'small'
+    },
+    style: {
+      left: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === 'start' && ownerState.size !== 'small',
+    style: {
+      left: 14
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'start'
+    },
+    style: {
+      left: 6
+    }
+  }, {
+    props: {
+      loadingPosition: 'center'
+    },
+    style: {
+      left: '50%',
+      transform: 'translate(-50%)',
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      loadingPosition: 'end',
+      size: 'small'
+    },
+    style: {
+      right: 10
+    }
+  }, {
+    props: ({
+      loadingPosition,
+      ownerState
+    }) => loadingPosition === 'end' && ownerState.size !== 'small',
+    style: {
+      right: 14
+    }
+  }, {
+    props: {
+      variant: 'text',
+      loadingPosition: 'end'
+    },
+    style: {
+      right: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
+    style: {
+      position: 'relative',
+      left: -10
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
+    style: {
+      position: 'relative',
+      right: -10
+    }
+  }]
 }));
 const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
   const contextProps = React.useContext(_ButtonGroup.ButtonGroupContext);
   const resolvedProps = (0, _resolveProps.default)(contextProps, inProps);
-  const props = (0, _styles.useThemeProps)({
+  const props = useThemeProps({
     props: resolvedProps,
     name: 'MuiLoadingButton'
   });

package/node/index.js

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

package/node/zero-styled/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUseThemeProps = createUseThemeProps;
+Object.defineProperty(exports, "styled", {
+  enumerable: true,
+  get: function () {
+    return _styles.styled;
+  }
+});
+var _styles = require("@mui/material/styles");
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function createUseThemeProps(name) {
+  return _styles.useThemeProps;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/lab",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.7",
   "private": false,
   "author": "MUI Team",
   "description": "Laboratory for new MUI modules.",
@@ -28,13 +28,13 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
+    "@babel/runtime": "^7.24.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/base": "5.0.0-beta.43",
-    "@mui/system": "^6.0.0-alpha.5",
-    "@mui/types": "^7.2.14",
-    "@mui/utils": "^6.0.0-alpha.5"
+    "@mui/base": "5.0.0-beta.45",
+    "@mui/system": "^6.0.0-alpha.6",
+    "@mui/utils": "^6.0.0-alpha.6",
+    "@mui/types": "^7.2.14"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -42,7 +42,7 @@
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "@mui/material": "^6.0.0-alpha.5"
+    "@mui/material": "^6.0.0-alpha.7"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/zero-styled/index.d.ts

@@ -0,0 +1,3 @@
+import { useThemeProps } from '@mui/material/styles';
+export { styled } from '@mui/material/styles';
+export declare function createUseThemeProps(name: string): typeof useThemeProps;

package/zero-styled/index.js

@@ -0,0 +1,7 @@
+import { useThemeProps } from '@mui/material/styles';
+export { styled } from '@mui/material/styles';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createUseThemeProps(name) {
+  return useThemeProps;
+}

package/zero-styled/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/zero-styled/index.js",
+  "types": "./index.d.ts"
+}