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

package/TableBody/TableBody.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableBodyUtilityClass } from './tableBodyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableBody');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -38,23 +35,25 @@ const TableBody = /*#__PURE__*/React.forwardRef(function TableBody(inProps, ref)
     name: 'MuiTableBody'
   });
   const {
-      className,
-      component = defaultComponent
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = defaultComponent,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(Tablelvl2Context.Provider, {
     value: tablelvl2,
-    children: /*#__PURE__*/_jsx(TableBodyRoot, _extends({
+    children: /*#__PURE__*/_jsx(TableBodyRoot, {
       className: clsx(classes.root, className),
       as: component,
       ref: ref,
       role: component === defaultComponent ? null : 'rowgroup',
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? TableBody.propTypes /* remove-proptypes */ = {

package/TableCell/TableCell.d.ts

@@ -83,4 +83,4 @@ export type SortDirection = 'asc' | 'desc' | false;
  *
  * - [TableCell API](https://mui.com/material-ui/api/table-cell/)
  */
-export default function TableCell(props: TableCellProps): JSX.Element;
+export default function TableCell(props: TableCellProps): React.JSX.Element;

package/TableCell/TableCell.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,10 +8,10 @@ import { darken, alpha, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import TableContext from '../Table/TableContext';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableCell');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,9 +36,9 @@ const TableCellRoot = styled('td', {
     return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.padding !== 'normal' && styles[`padding${capitalize(ownerState.padding)}`], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({}, theme.typography.body2, {
+  theme
+}) => ({
+  ...theme.typography.body2,
   display: 'table-cell',
   verticalAlign: 'inherit',
   // Workaround for a rendering bug with spanned columns in Chrome 62.0.
@@ -49,47 +46,103 @@ const TableCellRoot = styled('td', {
   borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
-  padding: 16
-}, ownerState.variant === 'head' && {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: theme.typography.pxToRem(24),
-  fontWeight: theme.typography.fontWeightMedium
-}, ownerState.variant === 'body' && {
-  color: (theme.vars || theme).palette.text.primary
-}, ownerState.variant === 'footer' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  lineHeight: theme.typography.pxToRem(21),
-  fontSize: theme.typography.pxToRem(12)
-}, ownerState.size === 'small' && {
-  padding: '6px 16px',
-  [`&.${tableCellClasses.paddingCheckbox}`]: {
-    width: 24,
-    // prevent the checkbox column from growing
-    padding: '0 12px 0 16px',
-    '& > *': {
+  padding: 16,
+  variants: [{
+    props: {
+      variant: 'head'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary,
+      lineHeight: theme.typography.pxToRem(24),
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: {
+      variant: 'body'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary
+    }
+  }, {
+    props: {
+      variant: 'footer'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      lineHeight: theme.typography.pxToRem(21),
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '6px 16px',
+      [`&.${tableCellClasses.paddingCheckbox}`]: {
+        width: 24,
+        // prevent the checkbox column from growing
+        padding: '0 12px 0 16px',
+        '& > *': {
+          padding: 0
+        }
+      }
+    }
+  }, {
+    props: {
+      padding: 'checkbox'
+    },
+    style: {
+      width: 48,
+      // prevent the checkbox column from growing
+      padding: '0 0 0 4px'
+    }
+  }, {
+    props: {
+      padding: 'none'
+    },
+    style: {
       padding: 0
     }
-  }
-}, ownerState.padding === 'checkbox' && {
-  width: 48,
-  // prevent the checkbox column from growing
-  padding: '0 0 0 4px'
-}, ownerState.padding === 'none' && {
-  padding: 0
-}, ownerState.align === 'left' && {
-  textAlign: 'left'
-}, ownerState.align === 'center' && {
-  textAlign: 'center'
-}, ownerState.align === 'right' && {
-  textAlign: 'right',
-  flexDirection: 'row-reverse'
-}, ownerState.align === 'justify' && {
-  textAlign: 'justify'
-}, ownerState.stickyHeader && {
-  position: 'sticky',
-  top: 0,
-  zIndex: 2,
-  backgroundColor: (theme.vars || theme).palette.background.default
+  }, {
+    props: {
+      align: 'left'
+    },
+    style: {
+      textAlign: 'left'
+    }
+  }, {
+    props: {
+      align: 'center'
+    },
+    style: {
+      textAlign: 'center'
+    }
+  }, {
+    props: {
+      align: 'right'
+    },
+    style: {
+      textAlign: 'right',
+      flexDirection: 'row-reverse'
+    }
+  }, {
+    props: {
+      align: 'justify'
+    },
+    style: {
+      textAlign: 'justify'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 2,
+      backgroundColor: (theme.vars || theme).palette.background.default
+    }
+  }]
 }));
 
 /**
@@ -102,16 +155,16 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     name: 'MuiTableCell'
   });
   const {
-      align = 'inherit',
-      className,
-      component: componentProp,
-      padding: paddingProp,
-      scope: scopeProp,
-      size: sizeProp,
-      sortDirection,
-      variant: variantProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    align = 'inherit',
+    className,
+    component: componentProp,
+    padding: paddingProp,
+    scope: scopeProp,
+    size: sizeProp,
+    sortDirection,
+    variant: variantProp,
+    ...other
+  } = props;
   const table = React.useContext(TableContext);
   const tablelvl2 = React.useContext(Tablelvl2Context);
   const isHeadCell = tablelvl2 && tablelvl2.variant === 'head';
@@ -130,7 +183,8 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     scope = 'col';
   }
   const variant = variantProp || tablelvl2 && tablelvl2.variant;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     align,
     component,
     padding: paddingProp || (table && table.padding ? table.padding : 'normal'),
@@ -138,20 +192,21 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     sortDirection,
     stickyHeader: variant === 'head' && table && table.stickyHeader,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   let ariaSort = null;
   if (sortDirection) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  return /*#__PURE__*/_jsx(TableCellRoot, _extends({
+  return /*#__PURE__*/_jsx(TableCellRoot, {
     as: component,
     ref: ref,
     className: clsx(classes.root, className),
     "aria-sort": ariaSort,
     scope: scope,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TableCell.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/TableContainer/TableContainer.js

@@ -1,16 +1,13 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component"];
 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 { getTableContainerUtilityClass } from './tableContainerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableContainer');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -34,20 +31,22 @@ const TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(inP
     name: 'MuiTableContainer'
   });
   const {
-      className,
-      component = 'div'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TableContainerRoot, _extends({
+  return /*#__PURE__*/_jsx(TableContainerRoot, {
     ref: ref,
     as: component,
     className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? TableContainer.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/TableFooter/TableFooter.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableFooterUtilityClass } from './tableFooterClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableFooter');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -38,23 +35,25 @@ const TableFooter = /*#__PURE__*/React.forwardRef(function TableFooter(inProps,
     name: 'MuiTableFooter'
   });
   const {
-      className,
-      component = defaultComponent
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = defaultComponent,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(Tablelvl2Context.Provider, {
     value: tablelvl2,
-    children: /*#__PURE__*/_jsx(TableFooterRoot, _extends({
+    children: /*#__PURE__*/_jsx(TableFooterRoot, {
       as: component,
       className: clsx(classes.root, className),
       ref: ref,
       role: component === defaultComponent ? null : 'rowgroup',
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? TableFooter.propTypes /* remove-proptypes */ = {

package/TableHead/TableHead.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableHeadUtilityClass } from './tableHeadClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableHead');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -38,23 +35,25 @@ const TableHead = /*#__PURE__*/React.forwardRef(function TableHead(inProps, ref)
     name: 'MuiTableHead'
   });
   const {
-      className,
-      component = defaultComponent
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = defaultComponent,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(Tablelvl2Context.Provider, {
     value: tablelvl2,
-    children: /*#__PURE__*/_jsx(TableHeadRoot, _extends({
+    children: /*#__PURE__*/_jsx(TableHeadRoot, {
       as: component,
       className: clsx(classes.root, className),
       ref: ref,
       role: component === defaultComponent ? null : 'rowgroup',
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? TableHead.propTypes /* remove-proptypes */ = {

package/TablePagination/TablePagination.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _InputBase;
-const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,8 +8,7 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import InputBase from '../InputBase';
 import MenuItem from '../MenuItem';
 import Select from '../Select';
@@ -23,6 +19,7 @@ import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+const useThemeProps = createUseThemeProps('MuiTablePagination');
 const TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',
@@ -41,9 +38,10 @@ const TablePaginationRoot = styled(TableCell, {
 const TablePaginationToolbar = styled(Toolbar, {
   name: 'MuiTablePagination',
   slot: 'Toolbar',
-  overridesResolver: (props, styles) => _extends({
-    [`& .${tablePaginationClasses.actions}`]: styles.actions
-  }, styles.toolbar)
+  overridesResolver: (props, styles) => ({
+    [`& .${tablePaginationClasses.actions}`]: styles.actions,
+    ...styles.toolbar
+  })
 })(({
   theme
 }) => ({
@@ -74,16 +72,19 @@ const TablePaginationSelectLabel = styled('p', {
   overridesResolver: (props, styles) => styles.selectLabel
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   flexShrink: 0
 }));
 const TablePaginationSelect = styled(Select, {
   name: 'MuiTablePagination',
   slot: 'Select',
-  overridesResolver: (props, styles) => _extends({
+  overridesResolver: (props, styles) => ({
     [`& .${tablePaginationClasses.selectIcon}`]: styles.selectIcon,
-    [`& .${tablePaginationClasses.select}`]: styles.select
-  }, styles.input, styles.selectRoot)
+    [`& .${tablePaginationClasses.select}`]: styles.select,
+    ...styles.input,
+    ...styles.selectRoot
+  })
 })({
   color: 'inherit',
   fontSize: 'inherit',
@@ -108,7 +109,8 @@ const TablePaginationDisplayedRows = styled('p', {
   overridesResolver: (props, styles) => styles.displayedRows
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   flexShrink: 0
 }));
 function defaultLabelDisplayedRows({
@@ -149,29 +151,29 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
     name: 'MuiTablePagination'
   });
   const {
-      ActionsComponent = TablePaginationActions,
-      backIconButtonProps,
-      className,
-      colSpan: colSpanProp,
-      component = TableCell,
-      count,
-      disabled = false,
-      getItemAriaLabel = defaultGetAriaLabel,
-      labelDisplayedRows = defaultLabelDisplayedRows,
-      labelRowsPerPage = 'Rows per page:',
-      nextIconButtonProps,
-      onPageChange,
-      onRowsPerPageChange,
-      page,
-      rowsPerPage,
-      rowsPerPageOptions = [10, 25, 50, 100],
-      SelectProps = {},
-      showFirstButton = false,
-      showLastButton = false,
-      slotProps = {},
-      slots = {}
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    ActionsComponent = TablePaginationActions,
+    backIconButtonProps,
+    className,
+    colSpan: colSpanProp,
+    component = TableCell,
+    count,
+    disabled = false,
+    getItemAriaLabel = defaultGetAriaLabel,
+    labelDisplayedRows = defaultLabelDisplayedRows,
+    labelRowsPerPage = 'Rows per page:',
+    nextIconButtonProps,
+    onPageChange,
+    onRowsPerPageChange,
+    page,
+    rowsPerPage,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    SelectProps = {},
+    showFirstButton = false,
+    showLastButton = false,
+    slotProps = {},
+    slots = {},
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const selectProps = slotProps?.select ?? SelectProps;
@@ -188,13 +190,13 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
     }
     return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
   };
-  return /*#__PURE__*/_jsx(TablePaginationRoot, _extends({
+  return /*#__PURE__*/_jsx(TablePaginationRoot, {
     colSpan: colSpan,
     ref: ref,
     as: component,
     ownerState: ownerState,
-    className: clsx(classes.root, className)
-  }, other, {
+    className: clsx(classes.root, className),
+    ...other,
     children: /*#__PURE__*/_jsxs(TablePaginationToolbar, {
       className: classes.toolbar,
       children: [/*#__PURE__*/_jsx(TablePaginationSpacer, {
@@ -203,32 +205,34 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         className: classes.selectLabel,
         id: labelId,
         children: labelRowsPerPage
-      }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
-        variant: "standard"
-      }, !selectProps.variant && {
-        input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
-      }, {
+      }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, {
+        variant: "standard",
+        ...(!selectProps.variant && {
+          input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
+        }),
         value: rowsPerPage,
         onChange: onRowsPerPageChange,
         id: selectId,
-        labelId: labelId
-      }, selectProps, {
-        classes: _extends({}, selectProps.classes, {
+        labelId: labelId,
+        ...selectProps,
+        classes: {
+          ...selectProps.classes,
           // TODO v5 remove `classes.input`
           root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
           select: clsx(classes.select, (selectProps.classes || {}).select),
           // TODO v5 remove `selectIcon`
           icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
-        }),
+        },
         disabled: disabled,
-        children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/_createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
-          ownerState
-        }, {
+        children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/_createElement(MenuItemComponent, {
+          ...(!isHostComponent(MenuItemComponent) && {
+            ownerState
+          }),
           className: classes.menuItem,
           key: rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption,
           value: rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption
-        }), rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption))
-      })), /*#__PURE__*/_jsx(TablePaginationDisplayedRows, {
+        }, rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption))
+      }), /*#__PURE__*/_jsx(TablePaginationDisplayedRows, {
         className: classes.displayedRows,
         children: labelDisplayedRows({
           from: count === 0 ? 0 : page * rowsPerPage + 1,
@@ -252,7 +256,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
         disabled: disabled
       })]
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐