@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/Backdrop/Backdrop.js

@@ -1,18 +1,15 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import useSlot from '../utils/useSlot';
-import Fade from '../Fade';
-import { getBackdropUtilityClass } from './backdropClasses';
+import { styled } from "../zero-styled/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import useSlot from "../utils/useSlot.js";
+import Fade from "../Fade/index.js";
+import { getBackdropUtilityClass } from "./backdropClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiBackdrop');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -53,34 +50,39 @@ const BackdropRoot = styled('div', {
   }]
 });
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBackdrop'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      invisible = false,
-      open,
-      components = {},
-      componentsProps = {},
-      slotProps = {},
-      slots = {},
-      TransitionComponent: TransitionComponentProp,
-      transitionDuration
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    component = 'div',
+    invisible = false,
+    open,
+    components = {},
+    componentsProps = {},
+    slotProps = {},
+    slots = {},
+    TransitionComponent: TransitionComponentProp,
+    transitionDuration,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     invisible
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const backwardCompatibleSlots = _extends({
+  const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
-    root: components.Root
-  }, slots);
-  const backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+    root: components.Root,
+    ...slots
+  };
+  const backwardCompatibleSlotProps = {
+    ...componentsProps,
+    ...slotProps
+  };
   const externalForwardedProps = {
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps
@@ -97,18 +99,19 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     ownerState
   });
   delete transitionProps.ownerState;
-  return /*#__PURE__*/_jsx(TransitionSlot, _extends({
+  return /*#__PURE__*/_jsx(TransitionSlot, {
     in: open,
-    timeout: transitionDuration
-  }, other, transitionProps, {
-    children: /*#__PURE__*/_jsx(RootSlot, _extends({
-      "aria-hidden": true
-    }, rootProps, {
+    timeout: transitionDuration,
+    ...other,
+    ...transitionProps,
+    children: /*#__PURE__*/_jsx(RootSlot, {
+      "aria-hidden": true,
+      ...rootProps,
       classes: classes,
       ref: ref,
       children: children
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -135,8 +138,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.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 {}
    */
@@ -147,8 +149,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.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 {}
    */
@@ -189,7 +190,6 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
-   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent: PropTypes.elementType,
   /**

package/Backdrop/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Backdrop';
-export { default as backdropClasses } from './backdropClasses';
-export * from './backdropClasses';
+export { default } from "./Backdrop.js";
+export { default as backdropClasses } from "./backdropClasses.js";
+export * from "./backdropClasses.js";

package/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion, Simplify } from '@mui/types';
-import { SlotComponentProps } from '@mui/base/utils';
+import { SlotComponentProps } from '../utils/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BadgeClasses } from './badgeClasses';
@@ -72,7 +72,7 @@ export interface BadgeOwnProps {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @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 {}
    */
@@ -80,7 +80,7 @@ export interface BadgeOwnProps {
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @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 {}
    */

package/Badge/Badge.js

@@ -1,22 +1,20 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { useBadge } from '@mui/base/useBadge';
-import { useSlotProps } from '@mui/base/utils';
-import { styled, createUseThemeProps } from '../zero-styled';
-import capitalize from '../utils/capitalize';
-import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import useBadge from "./useBadge.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import capitalize from "../utils/capitalize.js";
+import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
-const useThemeProps = createUseThemeProps('MuiBadge');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -52,7 +50,7 @@ const BadgeBadge = styled('span', {
     } = props;
     return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   display: 'flex',
@@ -77,7 +75,7 @@ const BadgeBadge = styled('span', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
-  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main && (theme.vars ?? theme).palette[key].contrastText).map(color => ({
+  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
     props: {
       color
     },
@@ -210,33 +208,34 @@ const BadgeBadge = styled('span', {
       })
     }
   }]
-}));
+})));
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBadge'
   });
   const {
-      anchorOrigin: anchorOriginProp = {
-        vertical: 'top',
-        horizontal: 'right'
-      },
-      className,
-      component,
-      components = {},
-      componentsProps = {},
-      children,
-      overlap: overlapProp = 'rectangular',
-      color: colorProp = 'default',
-      invisible: invisibleProp = false,
-      max: maxProp = 99,
-      badgeContent: badgeContentProp,
-      slots,
-      slotProps,
-      showZero = false,
-      variant: variantProp = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchorOrigin: anchorOriginProp = {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    className,
+    classes: classesProp,
+    component,
+    components = {},
+    componentsProps = {},
+    children,
+    overlap: overlapProp = 'rectangular',
+    color: colorProp = 'default',
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    badgeContent: badgeContentProp,
+    slots,
+    slotProps,
+    showZero = false,
+    variant: variantProp = 'standard',
+    ...other
+  } = props;
   const {
     badgeContent,
     invisible: invisibleFromHook,
@@ -263,7 +262,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     variant = variantProp
   } = invisible ? prevProps : props;
   const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     badgeContent,
     invisible,
     max,
@@ -273,7 +273,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     color,
     overlap,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
@@ -298,11 +298,13 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     ownerState,
     className: clsx(classes.badge, badgeSlotProps?.className)
   });
-  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
-    children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, {
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [children, /*#__PURE__*/_jsx(BadgeSlot, {
+      ...badgeProps,
       children: displayValue
-    }))]
-  }));
+    })]
+  });
 });
 process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -351,7 +353,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @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 {}
    */
@@ -363,7 +365,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @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 {}
    */

package/Badge/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Badge';
-export { default as badgeClasses } from './badgeClasses';
-export * from './badgeClasses';
+export { default } from "./Badge.js";
+export { default as badgeClasses } from "./badgeClasses.js";
+export * from "./badgeClasses.js";

package/Badge/useBadge.d.ts

@@ -0,0 +1,13 @@
+import { UseBadgeParameters, UseBadgeReturnValue } from './useBadge.types';
+/**
+ *
+ * Demos:
+ *
+ * - [Badge](https://mui.com/base-ui/react-badge/#hook)
+ *
+ * API:
+ *
+ * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
+ */
+declare function useBadge(parameters: UseBadgeParameters): UseBadgeReturnValue;
+export default useBadge;

package/Badge/useBadge.js

@@ -0,0 +1,41 @@
+'use client';
+
+import { usePreviousProps } from '@mui/utils';
+/**
+ *
+ * Demos:
+ *
+ * - [Badge](https://mui.com/base-ui/react-badge/#hook)
+ *
+ * API:
+ *
+ * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)
+ */
+function useBadge(parameters) {
+  const {
+    badgeContent: badgeContentProp,
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    showZero = false
+  } = parameters;
+  const prevProps = usePreviousProps({
+    badgeContent: badgeContentProp,
+    max: maxProp
+  });
+  let invisible = invisibleProp;
+  if (invisibleProp === false && badgeContentProp === 0 && !showZero) {
+    invisible = true;
+  }
+  const {
+    badgeContent,
+    max = maxProp
+  } = invisible ? prevProps : parameters;
+  const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;
+  return {
+    badgeContent,
+    invisible,
+    max,
+    displayValue
+  };
+}
+export default useBadge;

package/Badge/useBadge.types.d.ts

@@ -0,0 +1,39 @@
+export interface UseBadgeParameters {
+    /**
+     * The content rendered within the badge.
+     */
+    badgeContent?: React.ReactNode;
+    /**
+     * If `true`, the badge is invisible.
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Max count to show.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Controls whether the badge is hidden when `badgeContent` is zero.
+     * @default false
+     */
+    showZero?: boolean;
+}
+export interface UseBadgeReturnValue {
+    /**
+     * Defines the content that's displayed inside the badge.
+     */
+    badgeContent: React.ReactNode;
+    /**
+     * If `true`, the component will not be visible.
+     */
+    invisible: boolean;
+    /**
+     * Maximum number to be displayed in the badge.
+     */
+    max: number;
+    /**
+     * Value to be displayed in the badge. If `badgeContent` is greater than `max`, it will return `max+`.
+     */
+    displayValue: React.ReactNode;
+}

package/BottomNavigation/BottomNavigation.js

@@ -1,17 +1,15 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "onChange", "showLabels", "value"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import { getBottomNavigationUtilityClass } from './bottomNavigationClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import { getBottomNavigationUtilityClass } from "./bottomNavigationClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiBottomNavigation');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -25,39 +23,40 @@ const BottomNavigationRoot = styled('div', {
   name: 'MuiBottomNavigation',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(({
+})(memoTheme(({
   theme
 }) => ({
   display: 'flex',
   justifyContent: 'center',
   height: 56,
   backgroundColor: (theme.vars || theme).palette.background.paper
-}));
+})));
 const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBottomNavigation'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      onChange,
-      showLabels = false,
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    component = 'div',
+    onChange,
+    showLabels = false,
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     showLabels
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(BottomNavigationRoot, _extends({
+  return /*#__PURE__*/_jsx(BottomNavigationRoot, {
     as: component,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: React.Children.map(children, (child, childIndex) => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return null;
@@ -75,7 +74,7 @@ const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation
         onChange
       });
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/BottomNavigation/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './BottomNavigation';
-export { default as bottomNavigationClasses } from './bottomNavigationClasses';
-export * from './bottomNavigationClasses';
+export { default } from "./BottomNavigation.js";
+export { default as bottomNavigationClasses } from "./bottomNavigationClasses.js";
+export * from "./bottomNavigationClasses.js";

package/BottomNavigationAction/BottomNavigationAction.js

@@ -1,18 +1,16 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import ButtonBase from '../ButtonBase';
-import unsupportedProp from '../utils/unsupportedProp';
-import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from './bottomNavigationActionClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import ButtonBase from "../ButtonBase/index.js";
+import unsupportedProp from "../utils/unsupportedProp.js";
+import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from "./bottomNavigationActionClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiBottomNavigationAction');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,7 +32,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
     } = props;
     return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   transition: theme.transitions.create(['color', 'padding-top'], {
@@ -67,12 +65,12 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
       paddingTop: 0
     }
   }]
-}));
+})));
 const BottomNavigationActionLabel = styled('span', {
   name: 'MuiBottomNavigationAction',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
-})(({
+})(memoTheme(({
   theme
 }) => ({
   fontFamily: theme.typography.fontFamily,
@@ -93,24 +91,24 @@ const BottomNavigationActionLabel = styled('span', {
       transitionDelay: '0s'
     }
   }]
-}));
+})));
 const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiBottomNavigationAction'
   });
   const {
-      className,
-      icon,
-      label,
-      onChange,
-      onClick
-      // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
-      ,
-
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    icon,
+    label,
+    onChange,
+    onClick,
+    // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
+    selected,
+    showLabel,
+    value,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleChange = event => {
@@ -121,19 +119,19 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, _extends({
+  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, {
     ref: ref,
     className: clsx(classes.root, className),
     focusRipple: true,
     onClick: handleChange,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
       className: classes.label,
       ownerState: ownerState,
       children: label
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/BottomNavigationAction/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './BottomNavigationAction';
-export { default as bottomNavigationActionClasses } from './bottomNavigationActionClasses';
-export * from './bottomNavigationActionClasses';
+export { default } from "./BottomNavigationAction.js";
+export { default as bottomNavigationActionClasses } from "./bottomNavigationActionClasses.js";
+export * from "./bottomNavigationActionClasses.js";