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

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'
   });

package/node/InputBase/InputBase.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseComponent = void 0;
+exports.rootOverridesResolver = exports.inputOverridesResolver = exports.default = exports.InputBaseRoot = exports.InputBaseInput = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
@@ -20,8 +20,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _FormControlContext = _interopRequireDefault(require("../FormControl/FormControlContext"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("../utils/useEnhancedEffect"));
@@ -32,6 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "slotProps", "slots", "startAdornment", "type", "value"];
 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)('MuiInputBase');
 const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -69,13 +69,12 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _inputBaseClasses.getInputBaseUtilityClass, classes);
 };
-const InputBaseRoot = exports.InputBaseRoot = (0, _styled.default)('div', {
+const InputBaseRoot = exports.InputBaseRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiInputBase',
   slot: 'Root',
   overridesResolver: rootOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
   color: (theme.vars || theme).palette.text.primary,
   lineHeight: '1.4375em',
@@ -89,21 +88,37 @@ const InputBaseRoot = exports.InputBaseRoot = (0, _styled.default)('div', {
   [`&.${_inputBaseClasses.default.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled,
     cursor: 'default'
-  }
-}, ownerState.multiline && (0, _extends2.default)({
-  padding: '4px 0 5px'
-}, ownerState.size === 'small' && {
-  paddingTop: 1
-}), ownerState.fullWidth && {
-  width: '100%'
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      padding: '4px 0 5px'
+    }
+  }, {
+    props: ({
+      ownerState,
+      size
+    }) => ownerState.multiline && size === 'small',
+    style: {
+      paddingTop: 1
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      width: '100%'
+    }
+  }]
 }));
-const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('input', {
+const InputBaseInput = exports.InputBaseInput = (0, _zeroStyled.styled)('input', {
   name: 'MuiInputBase',
   slot: 'Input',
   overridesResolver: inputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const light = theme.palette.mode === 'light';
   const placeholder = (0, _extends2.default)({
@@ -125,7 +140,7 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
   } : {
     opacity: light ? 0.42 : 0.5
   };
-  return (0, _extends2.default)({
+  return {
     font: 'inherit',
     letterSpacing: 'inherit',
     color: 'currentColor',
@@ -187,18 +202,33 @@ const InputBaseComponent = exports.InputBaseComponent = (0, _styled.default)('in
     '&:-webkit-autofill': {
       animationDuration: '5000s',
       animationName: 'mui-auto-fill'
-    }
-  }, ownerState.size === 'small' && {
-    paddingTop: 1
-  }, ownerState.multiline && {
-    height: 'auto',
-    resize: 'none',
-    padding: 0,
-    paddingTop: 0
-  }, ownerState.type === 'search' && {
-    // Improve type search style.
-    MozAppearance: 'textfield'
-  });
+    },
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        paddingTop: 1
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        height: 'auto',
+        resize: 'none',
+        padding: 0,
+        paddingTop: 0
+      }
+    }, {
+      props: {
+        type: 'search'
+      },
+      style: {
+        MozAppearance: 'textfield' // Improve type search style.
+      }
+    }]
+  };
 });
 const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.default, {
   styles: {
@@ -222,7 +252,7 @@ const inputGlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles.defaul
  */
 const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref) {
   var _slotProps$input;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiInputBase'
   });
@@ -439,7 +469,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   const classes = useUtilityClasses(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
-  const Input = slots.input || components.Input || InputBaseComponent;
+  const Input = slots.input || components.Input || InputBaseInput;
   inputProps = (0, _extends2.default)({}, inputProps, (_slotProps$input = slotProps.input) != null ? _slotProps$input : componentsProps.input);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, !(0, _utils.isHostComponent)(Root) && {