@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.10

package/ImageListItemBar/ImageListItemBar.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["actionIcon", "actionPosition", "className", "subtitle", "title", "position"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getImageListItemBarUtilityClass } from './imageListItemBarClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiImageListItemBar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,26 +35,41 @@ const ImageListItemBarRoot = styled('div', {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     position: 'absolute',
     left: 0,
     right: 0,
     background: 'rgba(0, 0, 0, 0.5)',
     display: 'flex',
     alignItems: 'center',
-    fontFamily: theme.typography.fontFamily
-  }, ownerState.position === 'bottom' && {
-    bottom: 0
-  }, ownerState.position === 'top' && {
-    top: 0
-  }, ownerState.position === 'below' && {
-    position: 'relative',
-    background: 'transparent',
-    alignItems: 'normal'
-  });
+    fontFamily: theme.typography.fontFamily,
+    variants: [{
+      props: {
+        position: 'bottom'
+      },
+      style: {
+        bottom: 0
+      }
+    }, {
+      props: {
+        position: 'top'
+      },
+      style: {
+        top: 0
+      }
+    }, {
+      props: {
+        position: 'below'
+      },
+      style: {
+        position: 'relative',
+        background: 'transparent',
+        alignItems: 'normal'
+      }
+    }]
+  };
 });
 const ImageListItemBarTitleWrap = styled('div', {
   name: 'MuiImageListItemBar',
@@ -69,22 +81,37 @@ const ImageListItemBarTitleWrap = styled('div', {
     return [styles.titleWrap, styles[`titleWrap${capitalize(ownerState.position)}`], ownerState.actionIcon && styles[`titleWrapActionPos${capitalize(ownerState.actionPosition)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     flexGrow: 1,
     padding: '12px 16px',
     color: (theme.vars || theme).palette.common.white,
-    overflow: 'hidden'
-  }, ownerState.position === 'below' && {
-    padding: '6px 0 12px',
-    color: 'inherit'
-  }, ownerState.actionIcon && ownerState.actionPosition === 'left' && {
-    paddingLeft: 0
-  }, ownerState.actionIcon && ownerState.actionPosition === 'right' && {
-    paddingRight: 0
-  });
+    overflow: 'hidden',
+    variants: [{
+      props: {
+        position: 'below'
+      },
+      style: {
+        padding: '6px 0 12px',
+        color: 'inherit'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'left',
+      style: {
+        paddingLeft: 0
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'right',
+      style: {
+        paddingRight: 0
+      }
+    }]
+  };
 });
 const ImageListItemBarTitle = styled('div', {
   name: 'MuiImageListItemBar',
@@ -125,12 +152,15 @@ const ImageListItemBarActionIcon = styled('div', {
     } = props;
     return [styles.actionIcon, styles[`actionIconActionPos${capitalize(ownerState.actionPosition)}`]];
   }
-})(({
-  ownerState
-}) => {
-  return _extends({}, ownerState.actionPosition === 'left' && {
-    order: -1
-  });
+})({
+  variants: [{
+    props: {
+      actionPosition: 'left'
+    },
+    style: {
+      order: -1
+    }
+  }]
 });
 const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar(inProps, ref) {
   const props = useThemeProps({
@@ -138,24 +168,25 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
     name: 'MuiImageListItemBar'
   });
   const {
-      actionIcon,
-      actionPosition = 'right',
-      className,
-      subtitle,
-      title,
-      position = 'bottom'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    actionIcon,
+    actionPosition = 'right',
+    className,
+    subtitle,
+    title,
+    position = 'bottom',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     position,
     actionPosition
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(ImageListItemBarRoot, _extends({
+  return /*#__PURE__*/_jsxs(ImageListItemBarRoot, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [/*#__PURE__*/_jsxs(ImageListItemBarTitleWrap, {
       ownerState: ownerState,
       className: classes.titleWrap,
@@ -171,7 +202,7 @@ const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar
       className: classes.actionIcon,
       children: actionIcon
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ImageListItemBar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Input/Input.d.ts

@@ -10,6 +10,7 @@ export interface InputProps extends StandardProps<InputBaseProps> {
   classes?: Partial<InputClasses>;
   /**
    * If `true`, the `input` will not have an underline.
+   * @default false
    */
   disableUnderline?: boolean;
   /**
@@ -29,6 +30,6 @@ export interface InputProps extends StandardProps<InputBaseProps> {
  * - [Input API](https://mui.com/material-ui/api/input/)
  * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-declare const Input: ((props: InputProps) => JSX.Element) & { muiName: string };
+declare const Input: ((props: InputProps) => React.JSX.Element) & { muiName: string };
 
 export default Input;

package/Input/Input.js

@@ -1,19 +1,17 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "inputComponent", "multiline", "slotProps", "slots", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import deepmerge from '@mui/utils/deepmerge';
 import refType from '@mui/utils/refType';
 import InputBase from '../InputBase';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import inputClasses, { getInputUtilityClass } from './inputClasses';
-import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
+import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiInput');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -24,7 +22,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getInputUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const InputRoot = styled(InputBaseRoot, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -37,70 +39,87 @@ const InputRoot = styled(InputBaseRoot, {
     return [...inputBaseRootOverridesResolver(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 _extends({
-    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.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.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.disabled}, .${inputClasses.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,
+          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.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.error}`]: {
+          '&::before, &::after': {
+            borderBottomColor: (theme.vars || theme).palette.error.main
+          }
+        },
+        '&::before': {
+          borderBottom: `1px solid ${bottomLineColor}`,
+          left: 0,
+          bottom: 0,
+          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.disabled}, .${inputClasses.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.disabled}:before`]: {
+          borderBottomStyle: 'dotted'
+        }
       }
-    },
-    [`&.${inputClasses.disabled}:before`]: {
-      borderBottomStyle: 'dotted'
-    }
-  });
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+      props: {
+        color,
+        disableUnderline: false
+      },
+      style: {
+        '&::after': {
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color].main}`
+        }
+      }
+    }))]
+  };
 });
 const InputInput = styled(InputBaseInput, {
   name: 'MuiInput',
@@ -113,17 +132,17 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     name: 'MuiInput'
   });
   const {
-      disableUnderline,
-      components = {},
-      componentsProps: componentsPropsProp,
-      fullWidth = false,
-      inputComponent = 'input',
-      multiline = false,
-      slotProps,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    disableUnderline = false,
+    components = {},
+    componentsProps: componentsPropsProp,
+    fullWidth = false,
+    inputComponent = 'input',
+    multiline = false,
+    slotProps,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
   const classes = useUtilityClasses(props);
   const ownerState = {
     disableUnderline
@@ -136,7 +155,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
   const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, inputComponentsProps) : inputComponentsProps;
   const RootSlot = slots.root ?? components.Root ?? InputRoot;
   const InputSlot = slots.input ?? components.Input ?? InputInput;
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(InputBase, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -146,10 +165,10 @@ const Input = /*#__PURE__*/React.forwardRef(function Input(inProps, ref) {
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -180,8 +199,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -193,8 +211,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -213,6 +230,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
   disabled: PropTypes.bool,
   /**
    * If `true`, the `input` will not have an underline.
+   * @default false
    */
   disableUnderline: PropTypes.bool,
   /**
@@ -337,5 +355,7 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
    */
   value: PropTypes.any
 } : void 0;
-Input.muiName = 'Input';
+if (Input) {
+  Input.muiName = 'Input';
+}
 export default Input;

package/Input/inputClasses.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { inputBaseClasses } from '../InputBase';
 export function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);
 }
-const inputClasses = _extends({}, inputBaseClasses, generateUtilityClasses('MuiInput', ['root', 'underline', 'input']));
+const inputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiInput', ['root', 'underline', 'input'])
+};
 export default inputClasses;

package/InputAdornment/InputAdornment.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _span;
-const _excluded = ["children", "className", "component", "disablePointerEvents", "disableTypography", "position", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,10 +9,10 @@ import capitalize from '../utils/capitalize';
 import Typography from '../Typography';
 import FormControlContext from '../FormControl/FormControlContext';
 import useFormControl from '../FormControl/useFormControl';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import inputAdornmentClasses, { getInputAdornmentUtilityClass } from './inputAdornmentClasses';
-import useThemeProps from '../styles/useThemeProps';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiInputAdornment');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -41,30 +38,44 @@ const InputAdornmentRoot = styled('div', {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  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.positionStart}&:not(.${inputAdornmentClasses.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.positionStart}&:not(.${inputAdornmentClasses.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 = useThemeProps({
@@ -72,15 +83,15 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
     name: 'MuiInputAdornment'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      disablePointerEvents = false,
-      disableTypography = false,
-      position,
-      variant: variantProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'div',
+    disablePointerEvents = false,
+    disableTypography = false,
+    position,
+    variant: variantProp,
+    ...other
+  } = props;
   const muiFormControl = useFormControl() || {};
   let variant = variantProp;
   if (variantProp && muiFormControl.variant) {
@@ -93,22 +104,23 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
   if (muiFormControl && !variant) {
     variant = muiFormControl.variant;
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     hiddenLabel: muiFormControl.hiddenLabel,
     size: muiFormControl.size,
     disablePointerEvents,
     position,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: null,
-    children: /*#__PURE__*/_jsx(InputAdornmentRoot, _extends({
+    children: /*#__PURE__*/_jsx(InputAdornmentRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: typeof children === 'string' && !disableTypography ? /*#__PURE__*/_jsx(Typography, {
         color: "text.secondary",
         children: children
@@ -118,7 +130,7 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
           children: "\u200B"
         }))) : null, children]
       })
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? InputAdornment.propTypes /* remove-proptypes */ = {

package/InputBase/InputBase.d.ts

@@ -56,8 +56,7 @@ export interface InputBaseProps
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -69,8 +68,7 @@ export interface InputBaseProps
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -263,4 +261,4 @@ export interface InputBaseComponentProps
  *
  * - [InputBase API](https://mui.com/material-ui/api/input-base/)
  */
-export default function InputBase(props: InputBaseProps): JSX.Element;
+export default function InputBase(props: InputBaseProps): React.JSX.Element;