@mui/material 6.0.0-alpha.4 → 6.0.0-alpha.6

package/node/Icon/Icon.js

@@ -12,14 +12,14 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _zeroStyled = require("../zero-styled");
 var _iconClasses = require("./iconClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["baseClassName", "className", "color", "component", "fontSize"];
 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)('MuiIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _iconClasses.getIconUtilityClass, classes);
 };
-const IconRoot = (0, _styled.default)('span', {
+const IconRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiIcon',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -41,8 +41,7 @@ const IconRoot = (0, _styled.default)('span', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], styles[`fontSize${(0, _capitalize.default)(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
@@ -55,27 +54,66 @@ const IconRoot = (0, _styled.default)('span', {
   textAlign: 'center',
   // support non-square icon
   flexShrink: 0,
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography.pxToRem(20),
-    medium: theme.typography.pxToRem(24),
-    large: theme.typography.pxToRem(36)
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: {
-    primary: (theme.vars || theme).palette.primary.main,
-    secondary: (theme.vars || theme).palette.secondary.main,
-    info: (theme.vars || theme).palette.info.main,
-    success: (theme.vars || theme).palette.success.main,
-    warning: (theme.vars || theme).palette.warning.main,
-    action: (theme.vars || theme).palette.action.active,
-    error: (theme.vars || theme).palette.error.main,
-    disabled: (theme.vars || theme).palette.action.disabled,
-    inherit: undefined
-  }[ownerState.color]
+  variants: [{
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(20)
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(24)
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(36)
+    }
+  }, {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
 }));
 const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiIcon'
   });
@@ -150,5 +188,7 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
-Icon.muiName = 'Icon';
+if (Icon) {
+  Icon.muiName = 'Icon';
+}
 var _default = exports.default = Icon;

package/node/ImageList/ImageList.js

@@ -13,14 +13,14 @@ var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropTyp
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _imageListClasses = require("./imageListClasses");
 var _ImageListContext = _interopRequireDefault(require("./ImageListContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "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)('MuiImageList');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,7 +31,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _imageListClasses.getImageListUtilityClass, classes);
 };
-const ImageListRoot = (0, _styled.default)('ul', {
+const ImageListRoot = (0, _zeroStyled.styled)('ul', {
   name: 'MuiImageList',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -57,7 +57,7 @@ const ImageListRoot = (0, _styled.default)('ul', {
   }]
 });
 const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiImageList'
   });

package/node/ImageListItem/ImageListItem.js

@@ -15,14 +15,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _reactIs = require("react-is");
 var _ImageListContext = _interopRequireDefault(require("../ImageList/ImageListContext"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
 var _imageListItemClasses = _interopRequireWildcard(require("./imageListItemClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "cols", "component", "rows", "style"];
 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)('MuiImageListItem');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,7 +34,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _imageListItemClasses.getImageListItemUtilityClass, classes);
 };
-const ImageListItemRoot = (0, _styled.default)('li', {
+const ImageListItemRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiImageListItem',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -87,7 +87,7 @@ const ImageListItemRoot = (0, _styled.default)('li', {
   }]
 });
 const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiImageListItem'
   });

package/node/ImageListItemBar/ImageListItemBar.js

@@ -12,14 +12,14 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _imageListItemBarClasses = require("./imageListItemBarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["actionIcon", "actionPosition", "className", "subtitle", "title", "position"];
 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)('MuiImageListItemBar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _imageListItemBarClasses.getImageListItemBarUtilityClass, classes);
 };
-const ImageListItemBarRoot = (0, _styled.default)('div', {
+const ImageListItemBarRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiImageListItemBar',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -82,7 +82,7 @@ const ImageListItemBarRoot = (0, _styled.default)('div', {
     }]
   };
 });
-const ImageListItemBarTitleWrap = (0, _styled.default)('div', {
+const ImageListItemBarTitleWrap = (0, _zeroStyled.styled)('div', {
   name: 'MuiImageListItemBar',
   slot: 'TitleWrap',
   overridesResolver: (props, styles) => {
@@ -124,7 +124,7 @@ const ImageListItemBarTitleWrap = (0, _styled.default)('div', {
     }]
   };
 });
-const ImageListItemBarTitle = (0, _styled.default)('div', {
+const ImageListItemBarTitle = (0, _zeroStyled.styled)('div', {
   name: 'MuiImageListItemBar',
   slot: 'Title',
   overridesResolver: (props, styles) => styles.title
@@ -139,7 +139,7 @@ const ImageListItemBarTitle = (0, _styled.default)('div', {
     whiteSpace: 'nowrap'
   };
 });
-const ImageListItemBarSubtitle = (0, _styled.default)('div', {
+const ImageListItemBarSubtitle = (0, _zeroStyled.styled)('div', {
   name: 'MuiImageListItemBar',
   slot: 'Subtitle',
   overridesResolver: (props, styles) => styles.subtitle
@@ -154,7 +154,7 @@ const ImageListItemBarSubtitle = (0, _styled.default)('div', {
     whiteSpace: 'nowrap'
   };
 });
-const ImageListItemBarActionIcon = (0, _styled.default)('div', {
+const ImageListItemBarActionIcon = (0, _zeroStyled.styled)('div', {
   name: 'MuiImageListItemBar',
   slot: 'ActionIcon',
   overridesResolver: (props, styles) => {
@@ -174,7 +174,7 @@ const ImageListItemBarActionIcon = (0, _styled.default)('div', {
   }]
 });
 const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiImageListItemBar'
   });

package/node/Input/Input.js

@@ -14,14 +14,15 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _InputBase = _interopRequireDefault(require("../InputBase"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _inputClasses = _interopRequireWildcard(require("./inputClasses"));
 var _InputBase2 = require("../InputBase/InputBase");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 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)('MuiInput');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,8 +35,8 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _inputClasses.getInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiInput',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -45,84 +46,103 @@ const InputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
     return [...(0, _InputBase2.rootOverridesResolver)(props, styles), !ownerState.disableUnderline && styles.underline];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
     bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
   }
-  return (0, _extends2.default)({
-    position: 'relative'
-  }, ownerState.formControl && {
-    'label + &': {
-      marginTop: 16
-    }
-  }, !ownerState.disableUnderline && {
-    '&::after': {
-      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '""',
-      position: 'absolute',
-      right: 0,
-      transform: 'scaleX(0)',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&.${_inputClasses.default.focused}:after`]: {
-      // translateX(0) is a workaround for Safari transform scale bug
-      // See https://github.com/mui/material-ui/issues/31766
-      transform: 'scaleX(1) translateX(0)'
-    },
-    [`&.${_inputClasses.default.error}`]: {
-      '&::before, &::after': {
-        borderBottomColor: (theme.vars || theme).palette.error.main
+  return {
+    position: 'relative',
+    variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.formControl,
+      style: {
+        'label + &': {
+          marginTop: 16
+        }
       }
-    },
-    '&::before': {
-      borderBottom: `1px solid ${bottomLineColor}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '"\\00a0"',
-      position: 'absolute',
-      right: 0,
-      transition: theme.transitions.create('border-bottom-color', {
-        duration: theme.transitions.duration.shorter
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&:hover:not(.${_inputClasses.default.disabled}, .${_inputClasses.default.error}):before`]: {
-      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        borderBottom: `1px solid ${bottomLineColor}`
+    }, {
+      props: ({
+        ownerState
+      }) => !ownerState.disableUnderline,
+      style: {
+        '&::after': {
+          left: 0,
+          bottom: 0,
+          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          content: '""',
+          position: 'absolute',
+          right: 0,
+          transform: 'scaleX(0)',
+          transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&.${_inputClasses.default.focused}:after`]: {
+          // translateX(0) is a workaround for Safari transform scale bug
+          // See https://github.com/mui/material-ui/issues/31766
+          transform: 'scaleX(1) translateX(0)'
+        },
+        [`&.${_inputClasses.default.error}`]: {
+          '&::before, &::after': {
+            borderBottomColor: (theme.vars || theme).palette.error.main
+          }
+        },
+        '&::before': {
+          borderBottom: `1px solid ${bottomLineColor}`,
+          left: 0,
+          bottom: 0,
+          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          content: '"\\00a0"',
+          position: 'absolute',
+          right: 0,
+          transition: theme.transitions.create('border-bottom-color', {
+            duration: theme.transitions.duration.shorter
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&:hover:not(.${_inputClasses.default.disabled}, .${_inputClasses.default.error}):before`]: {
+          borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            borderBottom: `1px solid ${bottomLineColor}`
+          }
+        },
+        [`&.${_inputClasses.default.disabled}:before`]: {
+          borderBottomStyle: 'dotted'
+        }
       }
-    },
-    [`&.${_inputClasses.default.disabled}:before`]: {
-      borderBottomStyle: 'dotted'
-    }
-  });
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+      props: {
+        color,
+        disableUnderline: false
+      },
+      style: {
+        '&::after': {
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color].main}`
+        }
+      }
+    }))]
+  };
 });
-const InputInput = (0, _styled.default)(_InputBase2.InputBaseComponent, {
+const InputInput = (0, _zeroStyled.styled)(_InputBase2.InputBaseInput, {
   name: 'MuiInput',
   slot: 'Input',
   overridesResolver: _InputBase2.inputOverridesResolver
 })({});
 const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$input;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiInput'
   });
   const {
-      disableUnderline,
+      disableUnderline = false,
       components = {},
       componentsProps: componentsPropsProp,
       fullWidth = false,
@@ -222,6 +242,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
   disabled: _propTypes.default.bool,
   /**
    * If `true`, the `input` will not have an underline.
+   * @default false
    */
   disableUnderline: _propTypes.default.bool,
   /**
@@ -346,5 +367,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    */
   value: _propTypes.default.any
 } : void 0;
-Input.muiName = 'Input';
+if (Input) {
+  Input.muiName = 'Input';
+}
 var _default = exports.default = Input;

package/node/InputAdornment/InputAdornment.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -16,14 +16,14 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Typography = _interopRequireDefault(require("../Typography"));
 var _FormControlContext = _interopRequireDefault(require("../FormControl/FormControlContext"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _inputAdornmentClasses = _interopRequireWildcard(require("./inputAdornmentClasses"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const _excluded = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "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)('MuiInputAdornment');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -44,38 +44,54 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _inputAdornmentClasses.getInputAdornmentUtilityClass, classes);
 };
-const InputAdornmentRoot = (0, _styled.default)('div', {
+const InputAdornmentRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiInputAdornment',
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'flex',
   height: '0.01em',
   // Fix IE11 flexbox alignment. To remove at some point.
   maxHeight: '2em',
   alignItems: 'center',
   whiteSpace: 'nowrap',
-  color: (theme.vars || theme).palette.action.active
-}, ownerState.variant === 'filled' && {
-  // Styles applied to the root element if `variant="filled"`.
-  [`&.${_inputAdornmentClasses.default.positionStart}&:not(.${_inputAdornmentClasses.default.hiddenLabel})`]: {
-    marginTop: 16
-  }
-}, ownerState.position === 'start' && {
-  // Styles applied to the root element if `position="start"`.
-  marginRight: 8
-}, ownerState.position === 'end' && {
-  // Styles applied to the root element if `position="end"`.
-  marginLeft: 8
-}, ownerState.disablePointerEvents === true && {
-  // Styles applied to the root element if `disablePointerEvents={true}`.
-  pointerEvents: 'none'
+  color: (theme.vars || theme).palette.action.active,
+  variants: [{
+    props: {
+      variant: 'filled'
+    },
+    style: {
+      [`&.${_inputAdornmentClasses.default.positionStart}&:not(.${_inputAdornmentClasses.default.hiddenLabel})`]: {
+        marginTop: 16
+      }
+    }
+  }, {
+    props: {
+      position: 'start'
+    },
+    style: {
+      marginRight: 8
+    }
+  }, {
+    props: {
+      position: 'end'
+    },
+    style: {
+      marginLeft: 8
+    }
+  }, {
+    props: {
+      disablePointerEvents: true
+    },
+    style: {
+      pointerEvents: 'none'
+    }
+  }]
 }));
 const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiInputAdornment'
   });