@mui/material 5.15.13 → 6.0.0-alpha.0

package/Modal/Modal.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,12 +13,11 @@ import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiModal');
 const useUtilityClasses = ownerState => {
   const {
     open,
@@ -41,17 +40,22 @@ const ModalRoot = styled('div', {
     return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'fixed',
   zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,
-  left: 0
-}, !ownerState.open && ownerState.exited && {
-  visibility: 'hidden'
+  left: 0,
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.open && ownerState.exited,
+    style: {
+      visibility: 'hidden'
+    }
+  }]
 }));
 const ModalBackdrop = styled(Backdrop, {
   name: 'MuiModal',
@@ -77,7 +81,6 @@ const ModalBackdrop = styled(Backdrop, {
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
   const props = useThemeProps({
     name: 'MuiModal',
     props: inProps
@@ -147,10 +150,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     childProps.onEnter = onEnter;
     childProps.onExited = onExited;
   }
-  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
-  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
-  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
-  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
+  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
+  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
+  const rootSlotProps = slotProps?.root ?? componentsProps.root;
+  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
   const rootProps = useSlotProps({
     elementType: RootSlot,
     externalSlotProps: rootSlotProps,
@@ -161,7 +164,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       as: component
     },
     ownerState,
-    className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+    className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
   });
   const backdropProps = useSlotProps({
     elementType: BackdropSlot,
@@ -173,13 +176,13 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
           if (onBackdropClick) {
             onBackdropClick(e);
           }
-          if (otherHandlers != null && otherHandlers.onClick) {
+          if (otherHandlers?.onClick) {
             otherHandlers.onClick(e);
           }
         }
       }));
     },
-    className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+    className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop),
     ownerState
   });
   if (!keepMounted && !open && (!hasTransition || exited)) {

package/NativeSelect/NativeSelectInput.js

@@ -11,8 +11,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
 import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSelectClasses';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/OutlinedInput/OutlinedInput.js

@@ -14,8 +14,7 @@ import styled, { rootShouldForwardProp } from '../styles/styled';
 import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
 import InputBase, { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
 import useThemeProps from '../styles/useThemeProps';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -119,7 +118,7 @@ const OutlinedInputInput = styled(InputBaseInput, {
   paddingRight: 0
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
+  var _React$Fragment;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiOutlinedInput'
@@ -154,8 +153,8 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
     size: fcs.size,
     type
   });
-  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : OutlinedInputRoot;
-  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : OutlinedInputInput;
+  const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
+  const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
     slots: {
       root: RootSlot,

package/OverridableComponent.d.ts

@@ -11,7 +11,7 @@ export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
   // If you make any changes to this interface, please make sure to update the
   // `OverridableComponent` type in `mui-types/index.d.ts` as well.
   // Also, there are types in Base UI that have a similar shape to this interface
-  // (e.g. SelectType, OptionType, etc.).
+  // (for example SelectType, OptionType, etc.).
   <RootComponent extends React.ElementType>(
     props: {
       /**

package/PaginationItem/PaginationItem.js

@@ -18,8 +18,7 @@ import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
 import styled from '../styles/styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
     ownerState

package/Paper/Paper.js

@@ -40,24 +40,21 @@ const PaperRoot = styled('div', {
 })(({
   theme,
   ownerState
-}) => {
-  var _theme$vars$overlays;
-  return _extends({
-    backgroundColor: (theme.vars || theme).palette.background.paper,
-    color: (theme.vars || theme).palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && _extends({
-    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-  }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
-  }, theme.vars && {
-    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
-  }));
-});
+}) => _extends({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow')
+}, !ownerState.square && {
+  borderRadius: theme.shape.borderRadius
+}, ownerState.variant === 'outlined' && {
+  border: `1px solid ${(theme.vars || theme).palette.divider}`
+}, ownerState.variant === 'elevation' && _extends({
+  boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
+}, !theme.vars && theme.palette.mode === 'dark' && {
+  backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`
+}, theme.vars && {
+  backgroundImage: theme.vars.overlays?.[ownerState.elevation]
+})));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/Popover/Popover.js

@@ -15,8 +15,7 @@ import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import debounce from '../utils/debounce';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
@@ -26,6 +25,7 @@ import Modal from '../Modal';
 import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPopover');
 export function getOffsetTop(rect, vertical) {
   let offset = 0;
   if (typeof vertical === 'number') {
@@ -87,7 +87,6 @@ export const PopoverPaper = styled(PaperBase, {
   outline: 0
 });
 const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
-  var _slotProps$paper, _slots$root, _slots$paper;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPopover'
@@ -123,7 +122,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
+  const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
   const paperRef = React.useRef();
   const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
   const ownerState = _extends({}, props, {
@@ -302,8 +301,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   // If the anchorEl prop is provided, use its parent body element as the container
   // If neither are provided let the Modal take care of choosing the container
   const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-  const RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
-  const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
+  const RootSlot = slots?.root ?? PopoverRoot;
+  const PaperSlot = slots?.paper ?? PopoverPaper;
   const paperProps = useSlotProps({
     elementType: PaperSlot,
     externalSlotProps: _extends({}, externalPaperSlotProps, {
@@ -316,11 +315,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       ref: handlePaperRef
     },
     ownerState,
-    className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+    className: clsx(classes.paper, externalPaperSlotProps?.className)
   });
   const _useSlotProps = useSlotProps({
       elementType: RootSlot,
-      externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
+      externalSlotProps: slotProps?.root || {},
       externalForwardedProps: other,
       additionalProps: {
         ref,

package/Popper/Popper.d.ts

@@ -2,7 +2,7 @@ import { PopperProps as BasePopperProps } from '@mui/base/Popper';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 import { Theme } from '../styles';
-export type PopperProps = Omit<BasePopperProps, 'direction'> & {
+export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
     /**
      * The component used for the root node.
      * Either a string to use a HTML element or a component.
@@ -25,7 +25,7 @@ export type PopperProps = Omit<BasePopperProps, 'direction'> & {
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
-};
+}
 /**
  *
  * Demos:
@@ -38,28 +38,5 @@ export type PopperProps = Omit<BasePopperProps, 'direction'> & {
  *
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
-declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps, "direction"> & {
-    /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
-     */
-    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    /**
-     * The components used for each slot inside the Popper.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components?: {
-        Root?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
-    } | undefined;
-    /**
-     * The props used for each slot inside the Popper.
-     * @default {}
-     */
-    componentsProps?: BasePopperProps['slotProps'];
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme> | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+declare const Popper: React.ForwardRefExoticComponent<PopperProps & React.RefAttributes<HTMLDivElement>>;
 export default Popper;

package/Popper/Popper.js

@@ -30,7 +30,6 @@ const PopperRoot = styled(BasePopper, {
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
-  var _slots$root;
   const theme = useTheme();
   const props = useThemeProps({
     props: inProps,
@@ -54,7 +53,7 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
       slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+  const RootComponent = slots?.root ?? components?.Root;
   const otherProps = _extends({
     anchorEl,
     container,
@@ -69,11 +68,11 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
     as: component,
-    direction: theme == null ? void 0 : theme.direction,
+    direction: theme?.direction,
     slots: {
       root: RootComponent
     },
-    slotProps: slotProps != null ? slotProps : componentsProps
+    slotProps: slotProps ?? componentsProps
   }, otherProps, {
     ref: ref
   }));

package/README.md

@@ -11,8 +11,10 @@ Material UI is an open-source React component library that implements Google's
 
 Install the package in your project directory with:
 
+<!-- #default-branch-switch -->
+
 ```bash
-npm install @mui/material @emotion/react @emotion/styled
+npm install @mui/material@next @emotion/react @emotion/styled
 ```
 
 ## Documentation
@@ -33,7 +35,7 @@ Our documentation features [a collection of example projects using Material UI]
 Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
 Contributing to Material UI is about more than just issues and pull requests!
-There are many other ways to [support MUI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
+There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
 
 ## Changelog
 
@@ -41,7 +43,7 @@ The [changelog](https://github.com/mui/material-ui/releases) is regularly update
 
 ## Roadmap
 
-Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/material-ui/discover-more/roadmap/).
+Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/material-ui/discover-more/roadmap/).
 
 ## License
 

package/Radio/Radio.js

@@ -74,7 +74,6 @@ const defaultCheckedIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {
 });
 const defaultIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {});
 const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
-  var _defaultIcon$props$fo, _defaultCheckedIcon$p;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiRadio'
@@ -110,10 +109,10 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
   return /*#__PURE__*/_jsx(RadioRoot, _extends({
     type: "radio",
     icon: /*#__PURE__*/React.cloneElement(icon, {
-      fontSize: (_defaultIcon$props$fo = defaultIcon.props.fontSize) != null ? _defaultIcon$props$fo : size
+      fontSize: defaultIcon.props.fontSize ?? size
     }),
     checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
-      fontSize: (_defaultCheckedIcon$p = defaultCheckedIcon.props.fontSize) != null ? _defaultCheckedIcon$p : size
+      fontSize: defaultCheckedIcon.props.fontSize ?? size
     }),
     ownerState: ownerState,
     classes: classes,

package/Radio/RadioButtonIcon.js

@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
 import styled, { rootShouldForwardProp } from '../styles/styled';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
   shouldForwardProp: rootShouldForwardProp
 })({

package/Rating/Rating.js

@@ -18,8 +18,7 @@ import StarBorder from '../internal/svg-icons/StarBorder';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;

package/ScopedCssBaseline/ScopedCssBaseline.js

@@ -32,9 +32,8 @@ const ScopedCssBaselineRoot = styled('div', {
   const colorSchemeStyles = {};
   if (ownerState.enableColorScheme && theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      var _scheme$palette;
       colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
-        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+        colorScheme: scheme.palette?.mode
       };
     });
   }

package/Select/Select.d.ts

@@ -148,7 +148,7 @@ export interface BaseSelectProps<Value = unknown>
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: 'filled' | 'standard' | 'outlined';
+  variant?: SelectVariants;
 }
 
 export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onChange'> {
@@ -172,20 +172,15 @@ export interface OutlinedSelectProps extends Omit<OutlinedInputProps, 'value' |
    * The variant to use.
    * @default 'outlined'
    */
-  variant: 'outlined';
+  variant?: 'outlined';
 }
 
 export type SelectVariants = 'outlined' | 'standard' | 'filled';
 
-export type SelectProps<
-  Value = unknown,
-  Variant extends SelectVariants = SelectVariants,
-> = BaseSelectProps<Value> &
-  (Variant extends 'filled'
-    ? FilledSelectProps
-    : Variant extends 'standard'
-      ? StandardSelectProps
-      : OutlinedSelectProps);
+export type SelectProps<Value = unknown> =
+  | (FilledSelectProps & BaseSelectProps<Value>)
+  | (StandardSelectProps & BaseSelectProps<Value>)
+  | (OutlinedSelectProps & BaseSelectProps<Value>);
 
 /**
  *
@@ -198,15 +193,8 @@ export type SelectProps<
  * - [Select API](https://mui.com/material-ui/api/select/)
  * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  */
-
-export default function Select<Value = unknown, Variant extends SelectVariants = 'outlined'>(
-  props: {
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    variant?: Variant;
-  } & Omit<SelectProps<Value, Variant>, 'variant'>,
+export default function Select<Value = unknown>(
+  props: SelectProps<Value>,
 ): JSX.Element & {
   muiName: string;
 };

package/Select/SelectInput.js

@@ -21,8 +21,7 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
 import useForkRef from '../utils/useForkRef';
 import useControlled from '../utils/useControlled';
 import selectClasses, { getSelectUtilityClasses } from './selectClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SelectSelect = styled('div', {
   name: 'MuiSelect',
   slot: 'Select',
@@ -110,7 +109,6 @@ const useUtilityClasses = ownerState => {
  * @ignore - internal component.
  */
 const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {
-  var _MenuProps$slotProps;
   const {
       'aria-describedby': ariaDescribedby,
       'aria-label': ariaLabel,
@@ -170,7 +168,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       setDisplayNode(node);
     }
   }, []);
-  const anchorElement = displayNode == null ? void 0 : displayNode.parentNode;
+  const anchorElement = displayNode?.parentNode;
   React.useImperativeHandle(handleRef, () => ({
     focus: () => {
       displayRef.current.focus();
@@ -433,7 +431,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     error
   });
   const classes = useUtilityClasses(ownerState);
-  const paperProps = _extends({}, MenuProps.PaperProps, (_MenuProps$slotProps = MenuProps.slotProps) == null ? void 0 : _MenuProps$slotProps.paper);
+  const paperProps = _extends({}, MenuProps.PaperProps, MenuProps.slotProps?.paper);
   const listboxId = useId();
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(SelectSelect, _extends({

package/Skeleton/Skeleton.js

@@ -3,11 +3,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["animation", "className", "component", "height", "style", "variant", "width"];
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -32,7 +27,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSkeletonUtilityClass, classes);
 };
-const pulseKeyframe = keyframes(_t || (_t = _`
+const pulseKeyframe = keyframes`
   0% {
     opacity: 1;
   }
@@ -44,8 +39,8 @@ const pulseKeyframe = keyframes(_t || (_t = _`
   100% {
     opacity: 1;
   }
-`));
-const waveKeyframe = keyframes(_t2 || (_t2 = _`
+`;
+const waveKeyframe = keyframes`
   0% {
     transform: translateX(-100%);
   }
@@ -58,7 +53,7 @@ const waveKeyframe = keyframes(_t2 || (_t2 = _`
   100% {
     transform: translateX(100%);
   }
-`));
+`;
 const SkeletonRoot = styled('span', {
   name: 'MuiSkeleton',
   slot: 'Root',
@@ -104,12 +99,12 @@ const SkeletonRoot = styled('span', {
   });
 }, ({
   ownerState
-}) => ownerState.animation === 'pulse' && css(_t3 || (_t3 = _`
-      animation: ${0} 2s ease-in-out 0.5s infinite;
-    `), pulseKeyframe), ({
+}) => ownerState.animation === 'pulse' && css`
+      animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
+    `, ({
   ownerState,
   theme
-}) => ownerState.animation === 'wave' && css(_t4 || (_t4 = _`
+}) => ownerState.animation === 'wave' && css`
       position: relative;
       overflow: hidden;
 
@@ -117,11 +112,11 @@ const SkeletonRoot = styled('span', {
       -webkit-mask-image: -webkit-radial-gradient(white, black);
 
       &::after {
-        animation: ${0} 2s linear 0.5s infinite;
+        animation: ${waveKeyframe} 2s linear 0.5s infinite;
         background: linear-gradient(
           90deg,
           transparent,
-          ${0},
+          ${(theme.vars || theme).palette.action.hover},
           transparent
         );
         content: '';
@@ -132,7 +127,7 @@ const SkeletonRoot = styled('span', {
         right: 0;
         top: 0;
       }
-    `), waveKeyframe, (theme.vars || theme).palette.action.hover));
+    `);
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,