@mui/material 5.15.15 → 6.0.0-alpha.1

package/modern/FormControl/FormControl.js

@@ -7,14 +7,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { isFilled, isAdornedStart } from '../InputBase/utils';
 import capitalize from '../utils/capitalize';
 import isMuiElement from '../utils/isMuiElement';
 import FormControlContext from './FormControlContext';
 import { getFormControlUtilityClasses } from './formControlClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormControl');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,9 +34,7 @@ const FormControlRoot = styled('div', {
   }, styles) => {
     return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'inline-flex',
   flexDirection: 'column',
   position: 'relative',
@@ -45,16 +43,33 @@ const FormControlRoot = styled('div', {
   padding: 0,
   margin: 0,
   border: 0,
-  verticalAlign: 'top'
-}, ownerState.margin === 'normal' && {
-  marginTop: 16,
-  marginBottom: 8
-}, ownerState.margin === 'dense' && {
-  marginTop: 8,
-  marginBottom: 4
-}, ownerState.fullWidth && {
-  width: '100%'
-}));
+  verticalAlign: 'top',
+  // Fix alignment issue on Safari.
+  variants: [{
+    props: {
+      margin: 'normal'
+    },
+    style: {
+      marginTop: 16,
+      marginBottom: 8
+    }
+  }, {
+    props: {
+      margin: 'dense'
+    },
+    style: {
+      marginTop: 8,
+      marginBottom: 4
+    }
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }]
+});
 
 /**
  * Provides context such as filled/focused/error/required for form inputs.

package/modern/FormControlLabel/FormControlLabel.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 = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,15 +9,14 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { useFormControl } from '../FormControl';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
 import formControlState from '../FormControl/formControlState';
-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('MuiFormControlLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,9 +44,8 @@ export const FormControlLabelRoot = styled('label', {
     }, styles.root, styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'inline-flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -59,24 +57,42 @@ export const FormControlLabelRoot = styled('label', {
   // used for row presentation of radio/checkbox
   [`&.${formControlLabelClasses.disabled}`]: {
     cursor: 'default'
-  }
-}, ownerState.labelPlacement === 'start' && {
-  flexDirection: 'row-reverse',
-  marginLeft: 16,
-  // used for row presentation of radio/checkbox
-  marginRight: -11
-}, ownerState.labelPlacement === 'top' && {
-  flexDirection: 'column-reverse',
-  marginLeft: 16
-}, ownerState.labelPlacement === 'bottom' && {
-  flexDirection: 'column',
-  marginLeft: 16
-}, {
+  },
   [`& .${formControlLabelClasses.label}`]: {
     [`&.${formControlLabelClasses.disabled}`]: {
       color: (theme.vars || theme).palette.text.disabled
     }
-  }
+  },
+  variants: [{
+    props: {
+      labelPlacement: 'start'
+    },
+    style: {
+      flexDirection: 'row-reverse',
+      marginRight: -11
+    }
+  }, {
+    props: {
+      labelPlacement: 'top'
+    },
+    style: {
+      flexDirection: 'column-reverse'
+    }
+  }, {
+    props: {
+      labelPlacement: 'bottom'
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      labelPlacement
+    }) => labelPlacement === 'start' || labelPlacement === 'top' || labelPlacement === 'bottom',
+    style: {
+      marginLeft: 16 // used for row presentation of radio/checkbox
+    }
+  }]
 }));
 const AsteriskComponent = styled('span', {
   name: 'MuiFormControlLabel',

package/modern/FormGroup/FormGroup.js

@@ -1,18 +1,18 @@
 '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 = ["className", "row"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getFormGroupUtilityClass } from './formGroupClasses';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,15 +33,19 @@ const FormGroupRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.row && styles.row];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'flex',
   flexDirection: 'column',
-  flexWrap: 'wrap'
-}, ownerState.row && {
-  flexDirection: 'row'
-}));
+  flexWrap: 'wrap',
+  variants: [{
+    props: {
+      row: true
+    },
+    style: {
+      flexDirection: 'row'
+    }
+  }]
+});
 
 /**
  * `FormGroup` wraps controls such as `Checkbox` and `Switch`.

package/modern/Grid/Grid.js

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

package/modern/ImageListItemBar/ImageListItemBar.js

@@ -11,8 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
 import { getImageListItemBarUtilityClass } from './imageListItemBarClasses';
-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/modern/InputAdornment/InputAdornment.js

@@ -15,8 +15,7 @@ import useFormControl from '../FormControl/useFormControl';
 import styled from '../styles/styled';
 import inputAdornmentClasses, { getInputAdornmentUtilityClass } from './inputAdornmentClasses';
 import useThemeProps from '../styles/useThemeProps';
-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/modern/InputBase/InputBase.js

@@ -23,8 +23,7 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
 import GlobalStyles from '../GlobalStyles';
 import { isFilled } from './utils';
 import inputBaseClasses, { getInputBaseUtilityClass } from './inputBaseClasses';
-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";
 export const rootOverridesResolver = (props, styles) => {
   const {
     ownerState

package/modern/LinearProgress/LinearProgress.js

@@ -14,8 +14,7 @@ import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
-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 TRANSITION_DURATION = 4; // seconds
 const indeterminate1Keyframe = keyframes`
   0% {

package/modern/List/List.js

@@ -11,8 +11,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import ListContext from './ListContext';
 import { getListUtilityClass } from './listClasses';
-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,

package/modern/ListItem/ListItem.js

@@ -22,8 +22,7 @@ import ListContext from '../List/ListContext';
 import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 import { listItemButtonClasses } from '../ListItemButton';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
-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";
 export const overridesResolver = (props, styles) => {
   const {
     ownerState

package/modern/ListItemText/ListItemText.js

@@ -12,8 +12,7 @@ import ListContext from '../List/ListContext';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
-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/modern/MobileStepper/MobileStepper.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 = ["activeStep", "backButton", "className", "LinearProgressProps", "nextButton", "position", "steps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -11,11 +11,11 @@ import composeClasses from '@mui/utils/composeClasses';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
 import LinearProgress from '../LinearProgress';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import { getMobileStepperUtilityClass } from './mobileStepperClasses';
-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 useThemeProps = createUseThemeProps('MuiMobileStepper');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,38 +40,55 @@ const MobileStepperRoot = styled(Paper, {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
   background: (theme.vars || theme).palette.background.default,
-  padding: 8
-}, ownerState.position === 'bottom' && {
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  zIndex: (theme.vars || theme).zIndex.mobileStepper
-}, ownerState.position === 'top' && {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  zIndex: (theme.vars || theme).zIndex.mobileStepper
+  padding: 8,
+  variants: [{
+    props: ({
+      position
+    }) => position === 'top' || position === 'bottom',
+    style: {
+      position: 'fixed',
+      left: 0,
+      right: 0,
+      zIndex: (theme.vars || theme).zIndex.mobileStepper
+    }
+  }, {
+    props: {
+      position: 'top'
+    },
+    style: {
+      top: 0
+    }
+  }, {
+    props: {
+      position: 'bottom'
+    },
+    style: {
+      bottom: 0
+    }
+  }]
 }));
 const MobileStepperDots = styled('div', {
   name: 'MuiMobileStepper',
   slot: 'Dots',
   overridesResolver: (props, styles) => styles.dots
-})(({
-  ownerState
-}) => _extends({}, ownerState.variant === 'dots' && {
-  display: 'flex',
-  flexDirection: 'row'
-}));
+})({
+  variants: [{
+    props: {
+      variant: 'dots'
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  }]
+});
 const MobileStepperDot = styled('div', {
   name: 'MuiMobileStepper',
   slot: 'Dot',
@@ -83,30 +100,46 @@ const MobileStepperDot = styled('div', {
     return [styles.dot, dotActive && styles.dotActive];
   }
 })(({
-  theme,
-  ownerState,
-  dotActive
-}) => _extends({}, ownerState.variant === 'dots' && _extends({
-  transition: theme.transitions.create('background-color', {
-    duration: theme.transitions.duration.shortest
-  }),
-  backgroundColor: (theme.vars || theme).palette.action.disabled,
-  borderRadius: '50%',
-  width: 8,
-  height: 8,
-  margin: '0 2px'
-}, dotActive && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-})));
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'dots'
+    },
+    style: {
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shortest
+      }),
+      backgroundColor: (theme.vars || theme).palette.action.disabled,
+      borderRadius: '50%',
+      width: 8,
+      height: 8,
+      margin: '0 2px'
+    }
+  }, {
+    props: {
+      variant: 'dots',
+      dotActive: true
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main
+    }
+  }]
+}));
 const MobileStepperProgress = styled(LinearProgress, {
   name: 'MuiMobileStepper',
   slot: 'Progress',
   overridesResolver: (props, styles) => styles.progress
-})(({
-  ownerState
-}) => _extends({}, ownerState.variant === 'progress' && {
-  width: '50%'
-}));
+})({
+  variants: [{
+    props: {
+      variant: 'progress'
+    },
+    style: {
+      width: '50%'
+    }
+  }]
+});
 const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/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',

package/modern/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/modern/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

package/modern/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/modern/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') {

package/modern/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/modern/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/modern/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',