@mui/material 9.0.1 → 9.1.1

package/transitions/index.js

@@ -2,15 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-var _transition = require("./transition");
-Object.keys(_transition).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _transition[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _transition[key];
-    }
-  });
 });

package/transitions/index.mjs

@@ -1 +1 @@
-export * from "./transition.mjs";
+export {};

package/transitions/transition.d.mts

@@ -1,12 +1 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-  easing: string | {
-    enter?: string | undefined;
-    exit?: string | undefined;
-  };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export type { EasingProps, EnterHandler, ExitHandler, TransitionActions, TransitionHandlerKeys, TransitionHandlerProps, TransitionKeys, TransitionProps, TransitionStatus } from "./types.mjs";

package/transitions/transition.d.ts

@@ -1,12 +1 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-  easing: string | {
-    enter?: string | undefined;
-    exit?: string | undefined;
-  };
-}
-export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export type { EasingProps, EnterHandler, ExitHandler, TransitionActions, TransitionHandlerKeys, TransitionHandlerProps, TransitionKeys, TransitionProps, TransitionStatus } from "./types.js";

package/transitions/types.d.mts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
+export interface TransitionActions {
+  appear?: boolean | undefined;
+  enter?: boolean | undefined;
+  exit?: boolean | undefined;
+}
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type ExitHandler = (node: HTMLElement) => void;
+export interface TransitionHandlerProps {
+  /**
+   * @ignore
+   */
+  onEnter?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntering?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntered?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExit?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExiting?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExited?: ExitHandler | undefined;
+}
+export interface EasingProps {
+  easing: string | {
+    enter?: string | undefined;
+    exit?: string | undefined;
+  };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | 'disablePrefersReducedMotion' | TransitionHandlerKeys;
+interface ConsumerTransitionProps extends TransitionHandlerProps {
+  in?: boolean | undefined;
+  mountOnEnter?: boolean | undefined;
+  unmountOnExit?: boolean | undefined;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  timeout?: number | {
+    appear?: number | undefined;
+    enter?: number | undefined;
+    exit?: number | undefined;
+  } | undefined;
+  /**
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
+   */
+  addEndListener?: ((node: HTMLElement, done: () => void) => void) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
+}
+export interface TransitionProps extends TransitionActions, Partial<Pick<ConsumerTransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export {};

package/transitions/types.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited' | 'unmounted';
+export interface TransitionActions {
+  appear?: boolean | undefined;
+  enter?: boolean | undefined;
+  exit?: boolean | undefined;
+}
+export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
+export type ExitHandler = (node: HTMLElement) => void;
+export interface TransitionHandlerProps {
+  /**
+   * @ignore
+   */
+  onEnter?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntering?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onEntered?: EnterHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExit?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExiting?: ExitHandler | undefined;
+  /**
+   * @ignore
+   */
+  onExited?: ExitHandler | undefined;
+}
+export interface EasingProps {
+  easing: string | {
+    enter?: string | undefined;
+    exit?: string | undefined;
+  };
+}
+export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | 'disablePrefersReducedMotion' | TransitionHandlerKeys;
+interface ConsumerTransitionProps extends TransitionHandlerProps {
+  in?: boolean | undefined;
+  mountOnEnter?: boolean | undefined;
+  unmountOnExit?: boolean | undefined;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   */
+  timeout?: number | {
+    appear?: number | undefined;
+    enter?: number | undefined;
+    exit?: number | undefined;
+  } | undefined;
+  /**
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
+   */
+  addEndListener?: ((node: HTMLElement, done: () => void) => void) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
+}
+export interface TransitionProps extends TransitionActions, Partial<Pick<ConsumerTransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {}
+export {};

package/transitions/useReducedMotion.d.mts

@@ -0,0 +1,14 @@
+import type { ReducedMotionMode } from "../styles/createMotion.mjs";
+interface TransitionTiming {
+  duration: string | number;
+  delay: string | undefined;
+}
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+export default function useReducedMotion(mode: ReducedMotionMode, disablePrefersReducedMotion: boolean | undefined): {
+  shouldReduceMotion: boolean;
+  getTransitionTiming(timing: TransitionTiming): TransitionTiming;
+};
+export {};

package/transitions/useReducedMotion.d.ts

@@ -0,0 +1,14 @@
+import type { ReducedMotionMode } from "../styles/createMotion.js";
+interface TransitionTiming {
+  duration: string | number;
+  delay: string | undefined;
+}
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+export default function useReducedMotion(mode: ReducedMotionMode, disablePrefersReducedMotion: boolean | undefined): {
+  shouldReduceMotion: boolean;
+  getTransitionTiming(timing: TransitionTiming): TransitionTiming;
+};
+export {};

package/transitions/useReducedMotion.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useReducedMotion;
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+const MEDIA_QUERY = '(prefers-reduced-motion: reduce)';
+const REDUCED_MOTION_DURATION = 0;
+const REDUCED_MOTION_DELAY = '0ms';
+const NOOP = () => {};
+const getDefaultSnapshot = () => false;
+const getReducedMotionSnapshot = () => true;
+const subscribeNoop = () => NOOP;
+/**
+ * Subscribes to the OS reduced-motion media query only when the theme mode needs it.
+ * React 17 reads the media query after mount, matching useMediaQuery's fallback path.
+ */
+function useReducedMotionMediaQueryOld(enabled) {
+  const [queryState, setQueryState] = React.useState(() => ({
+    enabled,
+    matches: enabled ? null : false
+  }));
+  let matches = queryState.matches;
+  if (queryState.enabled !== enabled) {
+    matches = null;
+    if (!enabled) {
+      matches = false;
+    }
+  }
+  (0, _useEnhancedEffect.default)(() => {
+    const setResolvedMatches = nextMatches => {
+      setQueryState(previousState => {
+        if (previousState.enabled === enabled && previousState.matches === nextMatches) {
+          return previousState;
+        }
+        return {
+          enabled,
+          matches: nextMatches
+        };
+      });
+    };
+    if (!enabled) {
+      if (queryState.enabled) {
+        setResolvedMatches(false);
+      }
+      return undefined;
+    }
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      setResolvedMatches(false);
+      return undefined;
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    const update = () => {
+      setResolvedMatches(mediaQueryList.matches);
+    };
+    update();
+    mediaQueryList.addEventListener('change', update);
+    return () => {
+      mediaQueryList.removeEventListener('change', update);
+    };
+  }, [enabled, queryState.enabled]);
+  return matches;
+}
+
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
+
+/**
+ * React 18+ can read the media query during client renders, so newly mounted
+ * transitions do not start from the SSR-safe reduced-motion default.
+ */
+function useReducedMotionMediaQueryNew(enabled) {
+  const getServerSnapshot = enabled ? getReducedMotionSnapshot : getDefaultSnapshot;
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (!enabled || typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return [getDefaultSnapshot, subscribeNoop];
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    return [() => mediaQueryList.matches, notify => {
+      mediaQueryList.addEventListener('change', notify);
+      return () => {
+        mediaQueryList.removeEventListener('change', notify);
+      };
+    }];
+  }, [enabled]);
+  return maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+const useReducedMotionMediaQuery = maybeReactUseSyncExternalStore !== undefined ? useReducedMotionMediaQueryNew : useReducedMotionMediaQueryOld;
+
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+function useReducedMotion(mode, disablePrefersReducedMotion) {
+  const prefersReducedMotion = useReducedMotionMediaQuery(!disablePrefersReducedMotion && mode === 'system');
+  const shouldReduceMotion = !disablePrefersReducedMotion && (mode === 'always' || mode === 'system' && prefersReducedMotion !== false);
+  return React.useMemo(() => ({
+    shouldReduceMotion,
+    getTransitionTiming(timing) {
+      if (!shouldReduceMotion) {
+        return timing;
+      }
+      return {
+        duration: REDUCED_MOTION_DURATION,
+        delay: REDUCED_MOTION_DELAY
+      };
+    }
+  }), [shouldReduceMotion]);
+}

package/transitions/useReducedMotion.mjs

@@ -0,0 +1,110 @@
+'use client';
+
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+const MEDIA_QUERY = '(prefers-reduced-motion: reduce)';
+const REDUCED_MOTION_DURATION = 0;
+const REDUCED_MOTION_DELAY = '0ms';
+const NOOP = () => {};
+const getDefaultSnapshot = () => false;
+const getReducedMotionSnapshot = () => true;
+const subscribeNoop = () => NOOP;
+/**
+ * Subscribes to the OS reduced-motion media query only when the theme mode needs it.
+ * React 17 reads the media query after mount, matching useMediaQuery's fallback path.
+ */
+function useReducedMotionMediaQueryOld(enabled) {
+  const [queryState, setQueryState] = React.useState(() => ({
+    enabled,
+    matches: enabled ? null : false
+  }));
+  let matches = queryState.matches;
+  if (queryState.enabled !== enabled) {
+    matches = null;
+    if (!enabled) {
+      matches = false;
+    }
+  }
+  useEnhancedEffect(() => {
+    const setResolvedMatches = nextMatches => {
+      setQueryState(previousState => {
+        if (previousState.enabled === enabled && previousState.matches === nextMatches) {
+          return previousState;
+        }
+        return {
+          enabled,
+          matches: nextMatches
+        };
+      });
+    };
+    if (!enabled) {
+      if (queryState.enabled) {
+        setResolvedMatches(false);
+      }
+      return undefined;
+    }
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      setResolvedMatches(false);
+      return undefined;
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    const update = () => {
+      setResolvedMatches(mediaQueryList.matches);
+    };
+    update();
+    mediaQueryList.addEventListener('change', update);
+    return () => {
+      mediaQueryList.removeEventListener('change', update);
+    };
+  }, [enabled, queryState.enabled]);
+  return matches;
+}
+
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
+
+/**
+ * React 18+ can read the media query during client renders, so newly mounted
+ * transitions do not start from the SSR-safe reduced-motion default.
+ */
+function useReducedMotionMediaQueryNew(enabled) {
+  const getServerSnapshot = enabled ? getReducedMotionSnapshot : getDefaultSnapshot;
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (!enabled || typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return [getDefaultSnapshot, subscribeNoop];
+    }
+    const mediaQueryList = window.matchMedia(MEDIA_QUERY);
+    return [() => mediaQueryList.matches, notify => {
+      mediaQueryList.addEventListener('change', notify);
+      return () => {
+        mediaQueryList.removeEventListener('change', notify);
+      };
+    }];
+  }, [enabled]);
+  return maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+const useReducedMotionMediaQuery = maybeReactUseSyncExternalStore !== undefined ? useReducedMotionMediaQueryNew : useReducedMotionMediaQueryOld;
+
+/**
+ * Resolves whether a Material UI transition should reduce motion and provides
+ * adjusted CSS transition timing for MUI-owned duration/delay values.
+ */
+export default function useReducedMotion(mode, disablePrefersReducedMotion) {
+  const prefersReducedMotion = useReducedMotionMediaQuery(!disablePrefersReducedMotion && mode === 'system');
+  const shouldReduceMotion = !disablePrefersReducedMotion && (mode === 'always' || mode === 'system' && prefersReducedMotion !== false);
+  return React.useMemo(() => ({
+    shouldReduceMotion,
+    getTransitionTiming(timing) {
+      if (!shouldReduceMotion) {
+        return timing;
+      }
+      return {
+        duration: REDUCED_MOTION_DURATION,
+        delay: REDUCED_MOTION_DELAY
+      };
+    }
+  }), [shouldReduceMotion]);
+}

package/transitions/utils.d.mts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { defaultStyles } from "../styles/reducedMotion.mjs";
+import type { ReducedMotionMode } from "../styles/createMotion.mjs";
 export declare const reflow: (node: Element) => number;
 interface ComponentProps {
   easing: string | {
@@ -19,6 +21,11 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+interface TransitionCreateOptions {
+  duration: number | string;
+  easing: string;
+  delay: number | string;
+}
 interface TranslateOffset {
   offsetX: number;
   offsetY: number;
@@ -39,9 +46,34 @@ export declare function getTranslateOffsets(transform: string | undefined): Tran
 export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
 type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+export declare function getReducedMotionStyles<Styles extends object = typeof defaultStyles>(theme: {
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, styles?: Styles): Styles | {
+  '@media (prefers-reduced-motion: reduce)': Styles;
+} | null;
+export declare function getTransitionStyles(theme: {
+  transitions?: {
+    create: (props?: string | string[], options?: Partial<TransitionCreateOptions>) => string;
+  } | undefined;
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, props?: string | string[], options?: Partial<TransitionCreateOptions>): React.CSSProperties | {
+  transition: string;
+} | {
+  '@media (prefers-reduced-motion: reduce)': {
+    transition: string;
+  };
+};
 export {};

package/transitions/utils.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { defaultStyles } from "../styles/reducedMotion.js";
+import type { ReducedMotionMode } from "../styles/createMotion.js";
 export declare const reflow: (node: Element) => number;
 interface ComponentProps {
   easing: string | {
@@ -19,6 +21,11 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+interface TransitionCreateOptions {
+  duration: number | string;
+  easing: string;
+  delay: number | string;
+}
 interface TranslateOffset {
   offsetX: number;
   offsetY: number;
@@ -39,9 +46,34 @@ export declare function getTranslateOffsets(transform: string | undefined): Tran
 export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
 type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+export declare function getReducedMotionStyles<Styles extends object = typeof defaultStyles>(theme: {
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, styles?: Styles): Styles | {
+  '@media (prefers-reduced-motion: reduce)': Styles;
+} | null;
+export declare function getTransitionStyles(theme: {
+  transitions?: {
+    create: (props?: string | string[], options?: Partial<TransitionCreateOptions>) => string;
+  } | undefined;
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, props?: string | string[], options?: Partial<TransitionCreateOptions>): React.CSSProperties | {
+  transition: string;
+} | {
+  '@media (prefers-reduced-motion: reduce)': {
+    transition: string;
+  };
+};
 export {};

package/transitions/utils.js

@@ -3,17 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getReducedMotionStyles = getReducedMotionStyles;
 exports.getTransitionChildStyle = getTransitionChildStyle;
 exports.getTransitionProps = getTransitionProps;
+exports.getTransitionStyles = getTransitionStyles;
 exports.getTranslateOffsets = getTranslateOffsets;
 exports.normalizedTransitionCallback = normalizedTransitionCallback;
 exports.reflow = void 0;
+var _reducedMotion = require("../styles/reducedMotion");
 const reflow = node => node.scrollTop;
 exports.reflow = reflow;
 const DEFAULT_TRANSLATE_OFFSET = {
   offsetX: 0,
   offsetY: 0
 };
+const EMPTY_STYLE = {};
+const DEFAULT_TRANSITION_PROPS = ['all'];
+const EMPTY_OPTIONS = {};
 const transformOffsetIndexes = {
   matrix: [4, 5],
   matrix3d: [12, 13],
@@ -77,7 +83,7 @@ function normalizedTransitionCallback(nodeRef, callback) {
   return maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      // Enter callbacks receive isAppearing; exit callbacks do not.
       if (maybeIsAppearing === undefined) {
         callback(node);
       } else {
@@ -87,8 +93,8 @@ function normalizedTransitionCallback(nodeRef, callback) {
   };
 }
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
   const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
@@ -102,11 +108,34 @@ function getTransitionProps(props, options) {
   const {
     timeout,
     easing,
-    style = {}
+    style = EMPTY_STYLE
   } = props;
   return {
     duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout[options.mode] || 0),
     easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
     delay: style.transitionDelay
   };
+}
+
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+function getReducedMotionStyles(theme, styles) {
+  const resolvedStyles = styles ?? _reducedMotion.defaultStyles;
+  return (0, _reducedMotion.resolveReducedMotionStyles)(theme.motion?.reducedMotion, resolvedStyles);
+}
+function getTransitionStyles(theme, props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) {
+  const transition = theme.transitions?.create?.(props, options);
+  const reducedMotionStyles = getReducedMotionStyles(theme);
+  if (transition === undefined) {
+    return reducedMotionStyles ?? EMPTY_STYLE;
+  }
+  const transitionStyles = {
+    transition
+  };
+  return reducedMotionStyles ? {
+    ...transitionStyles,
+    ...reducedMotionStyles
+  } : transitionStyles;
 }