framer-motion 6.0.0 → 6.2.1

package/dist/cjs/index.js

@@ -120,6 +120,7 @@ function useFeatures(props, visualElement, preloadedFeatures) {
 var MotionConfigContext = React.createContext({
     transformPagePoint: function (p) { return p; },
     isStatic: false,
+    reducedMotion: "never",
 });
 
 var MotionContext = React.createContext({});
@@ -136,10 +137,81 @@ var isBrowser = typeof window !== "undefined";
 
 var useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
+// Does this device prefer reduced motion? Returns `null` server-side.
+var prefersReducedMotion = { current: null };
+var hasDetected = false;
+function initPrefersReducedMotion() {
+    hasDetected = true;
+    if (typeof window === "undefined")
+        return;
+    if (window.matchMedia) {
+        var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
+        var setReducedMotionPreferences = function () {
+            return (prefersReducedMotion.current = motionMediaQuery_1.matches);
+        };
+        motionMediaQuery_1.addListener(setReducedMotionPreferences);
+        setReducedMotionPreferences();
+    }
+    else {
+        prefersReducedMotion.current = false;
+    }
+}
+/**
+ * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+ *
+ * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+ * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+ *
+ * It will actively respond to changes and re-render your components with the latest setting.
+ *
+ * ```jsx
+ * export function Sidebar({ isOpen }) {
+ *   const shouldReduceMotion = useReducedMotion()
+ *   const closedX = shouldReduceMotion ? 0 : "-100%"
+ *
+ *   return (
+ *     <motion.div animate={{
+ *       opacity: isOpen ? 1 : 0,
+ *       x: isOpen ? 0 : closedX
+ *     }} />
+ *   )
+ * }
+ * ```
+ *
+ * @return boolean
+ *
+ * @public
+ */
+function useReducedMotion() {
+    /**
+     * Lazy initialisation of prefersReducedMotion
+     */
+    !hasDetected && initPrefersReducedMotion();
+    var _a = tslib.__read(React.useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
+    /**
+     * TODO See if people miss automatically updating shouldReduceMotion setting
+     */
+    return shouldReduceMotion;
+}
+function useReducedMotionConfig() {
+    var reducedMotionPreference = useReducedMotion();
+    var reducedMotion = React.useContext(MotionConfigContext).reducedMotion;
+    if (reducedMotion === "never") {
+        return false;
+    }
+    else if (reducedMotion === "always") {
+        return true;
+    }
+    else {
+        return reducedMotionPreference;
+    }
+}
+
 function useVisualElement(Component, visualState, props, createVisualElement) {
     var lazyContext = React.useContext(LazyContext);
     var parent = useVisualElementContext();
     var presenceContext = React.useContext(PresenceContext);
+    var shouldReduceMotion = useReducedMotionConfig();
     var visualElementRef = React.useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
@@ -153,6 +225,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
             props: props,
             presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
             blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
+            shouldReduceMotion: shouldReduceMotion,
         });
     }
     var visualElement = visualElementRef.current;
@@ -1943,7 +2016,12 @@ function createProjectionNode(_a) {
                             _this.resumingFrom.resumingFrom = undefined;
                         }
                         _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                        _this.startAnimation(tslib.__assign(tslib.__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete }));
+                        var animationOptions = tslib.__assign(tslib.__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete });
+                        if (visualElement.shouldReduceMotion) {
+                            animationOptions.delay = 0;
+                            animationOptions.type = false;
+                        }
+                        _this.startAnimation(animationOptions);
                     }
                     else {
                         _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
@@ -4221,9 +4299,10 @@ function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
  * on mount. This way, the page will be in the state the author expects users
  * to see it in for everyone.
  */
-function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
+function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a) {
+    var _b = _a.fallback, fallback = _b === void 0 ? true : _b;
     React.useEffect(function () {
-        if (!shouldObserve)
+        if (!shouldObserve || !fallback)
             return;
         if (process.env.NODE_ENV !== "production") {
             warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
@@ -4571,7 +4650,14 @@ function animateTarget(visualElement, definition, _a) {
                 shouldBlockAnimation(animationTypeState, key))) {
             continue;
         }
-        var animation = startAnimation(key, value, valueTarget, tslib.__assign({ delay: delay }, transition));
+        var valueTransition = tslib.__assign({ delay: delay }, transition);
+        /**
+         * Make animation instant if this is a transform prop and we should reduce motion.
+         */
+        if (visualElement.shouldReduceMotion && isTransformProp(key)) {
+            valueTransition = tslib.__assign(tslib.__assign({}, valueTransition), { type: false, delay: 0 });
+        }
+        var animation = startAnimation(key, value, valueTarget, valueTransition);
         animations.push(animation);
     }
     return Promise.all(animations).then(function () {
@@ -5869,7 +5955,7 @@ function updateMotionValuesFromProps(element, next, prev) {
 var visualElement = function (_a) {
     var _b = _a.treeType, treeType = _b === void 0 ? "" : _b, build = _a.build, getBaseTarget = _a.getBaseTarget, makeTargetAnimatable = _a.makeTargetAnimatable, measureViewportBox = _a.measureViewportBox, renderInstance = _a.render, readValueFromInstance = _a.readValueFromInstance, removeValueFromRenderState = _a.removeValueFromRenderState, sortNodePosition = _a.sortNodePosition, scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps;
     return function (_a, options) {
-        var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState;
+        var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState, shouldReduceMotion = _a.shouldReduceMotion;
         if (options === void 0) { options = {}; }
         var isMounted = false;
         var latestValues = visualState.latestValues, renderState = visualState.renderState;
@@ -5978,7 +6064,7 @@ var visualElement = function (_a) {
             /**
              *
              */
-            presenceId: presenceId, 
+            presenceId: presenceId, shouldReduceMotion: shouldReduceMotion, 
             /**
              * If this component is part of the variant tree, it should track
              * any children that are also part of the tree. This is essentially
@@ -7874,60 +7960,6 @@ function useTime() {
     return time;
 }
 
-// Does this device prefer reduced motion? Returns `null` server-side.
-var prefersReducedMotion;
-function initPrefersReducedMotion() {
-    prefersReducedMotion = motionValue(null);
-    if (typeof window === "undefined")
-        return;
-    if (window.matchMedia) {
-        var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
-        var setReducedMotionPreferences = function () {
-            return prefersReducedMotion.set(motionMediaQuery_1.matches);
-        };
-        motionMediaQuery_1.addListener(setReducedMotionPreferences);
-        setReducedMotionPreferences();
-    }
-    else {
-        prefersReducedMotion.set(false);
-    }
-}
-/**
- * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
- *
- * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
- * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
- *
- * It will actively respond to changes and re-render your components with the latest setting.
- *
- * ```jsx
- * export function Sidebar({ isOpen }) {
- *   const shouldReduceMotion = useReducedMotion()
- *   const closedX = shouldReduceMotion ? 0 : "-100%"
- *
- *   return (
- *     <motion.div animate={{
- *       opacity: isOpen ? 1 : 0,
- *       x: isOpen ? 0 : closedX
- *     }} />
- *   )
- * }
- * ```
- *
- * @return boolean
- *
- * @public
- */
-function useReducedMotion() {
-    /**
-     * Lazy initialisation of prefersReducedMotion
-     */
-    !prefersReducedMotion && initPrefersReducedMotion();
-    var _a = tslib.__read(React.useState(prefersReducedMotion.get()), 2), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
-    useOnChange(prefersReducedMotion, setShouldReduceMotion);
-    return shouldReduceMotion;
-}
-
 /**
  * @public
  */

package/dist/es/context/MotionConfigContext.mjs

@@ -6,6 +6,7 @@ import { createContext } from 'react';
 var MotionConfigContext = createContext({
     transformPagePoint: function (p) { return p; },
     isStatic: false,
+    reducedMotion: "never",
 });
 
 export { MotionConfigContext };

package/dist/es/motion/features/viewport/use-viewport.mjs

@@ -69,9 +69,10 @@ function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
  * on mount. This way, the page will be in the state the author expects users
  * to see it in for everyone.
  */
-function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
+function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a) {
+    var _b = _a.fallback, fallback = _b === void 0 ? true : _b;
     useEffect(function () {
-        if (!shouldObserve)
+        if (!shouldObserve || !fallback)
             return;
         if (process.env.NODE_ENV !== "production") {
             warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");

package/dist/es/motion/utils/use-visual-element.mjs

@@ -3,11 +3,13 @@ import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
 import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 import { LazyContext } from '../../context/LazyContext.mjs';
+import { useReducedMotionConfig } from '../../utils/use-reduced-motion.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement) {
     var lazyContext = useContext(LazyContext);
     var parent = useVisualElementContext();
     var presenceContext = useContext(PresenceContext);
+    var shouldReduceMotion = useReducedMotionConfig();
     var visualElementRef = useRef(undefined);
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
@@ -21,6 +23,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
             props: props,
             presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
             blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
+            shouldReduceMotion: shouldReduceMotion,
         });
     }
     var visualElement = visualElementRef.current;

package/dist/es/projection/node/create-projection-node.mjs

@@ -244,7 +244,12 @@ function createProjectionNode(_a) {
                             _this.resumingFrom.resumingFrom = undefined;
                         }
                         _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                        _this.startAnimation(__assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete }));
+                        var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete });
+                        if (visualElement.shouldReduceMotion) {
+                            animationOptions.delay = 0;
+                            animationOptions.type = false;
+                        }
+                        _this.startAnimation(animationOptions);
                     }
                     else {
                         _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));

package/dist/es/render/index.mjs

@@ -10,7 +10,7 @@ import { checkIfControllingVariants, checkIfVariantNode, isVariantLabel } from '
 var visualElement = function (_a) {
     var _b = _a.treeType, treeType = _b === void 0 ? "" : _b, build = _a.build, getBaseTarget = _a.getBaseTarget, makeTargetAnimatable = _a.makeTargetAnimatable, measureViewportBox = _a.measureViewportBox, renderInstance = _a.render, readValueFromInstance = _a.readValueFromInstance, removeValueFromRenderState = _a.removeValueFromRenderState, sortNodePosition = _a.sortNodePosition, scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps;
     return function (_a, options) {
-        var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState;
+        var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState, shouldReduceMotion = _a.shouldReduceMotion;
         if (options === void 0) { options = {}; }
         var isMounted = false;
         var latestValues = visualState.latestValues, renderState = visualState.renderState;
@@ -119,7 +119,7 @@ var visualElement = function (_a) {
             /**
              *
              */
-            presenceId: presenceId, 
+            presenceId: presenceId, shouldReduceMotion: shouldReduceMotion, 
             /**
              * If this component is part of the variant tree, it should track
              * any children that are also part of the tree. This is essentially

package/dist/es/render/utils/animation.mjs

@@ -2,6 +2,7 @@ import { __read, __rest, __assign } from 'tslib';
 import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { setTarget } from './setters.mjs';
 import { resolveVariant } from './variants.mjs';
+import { isTransformProp } from '../html/utils/transform.mjs';
 
 /**
  * @internal
@@ -90,7 +91,14 @@ function animateTarget(visualElement, definition, _a) {
                 shouldBlockAnimation(animationTypeState, key))) {
             continue;
         }
-        var animation = startAnimation(key, value, valueTarget, __assign({ delay: delay }, transition));
+        var valueTransition = __assign({ delay: delay }, transition);
+        /**
+         * Make animation instant if this is a transform prop and we should reduce motion.
+         */
+        if (visualElement.shouldReduceMotion && isTransformProp(key)) {
+            valueTransition = __assign(__assign({}, valueTransition), { type: false, delay: 0 });
+        }
+        var animation = startAnimation(key, value, valueTarget, valueTransition);
         animations.push(animation);
     }
     return Promise.all(animations).then(function () {

package/dist/es/utils/use-reduced-motion.mjs

@@ -1,24 +1,24 @@
 import { __read } from 'tslib';
-import { useState } from 'react';
-import { motionValue } from '../value/index.mjs';
-import { useOnChange } from '../value/use-on-change.mjs';
+import { useState, useContext } from 'react';
+import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 
 // Does this device prefer reduced motion? Returns `null` server-side.
-var prefersReducedMotion;
+var prefersReducedMotion = { current: null };
+var hasDetected = false;
 function initPrefersReducedMotion() {
-    prefersReducedMotion = motionValue(null);
+    hasDetected = true;
     if (typeof window === "undefined")
         return;
     if (window.matchMedia) {
         var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
         var setReducedMotionPreferences = function () {
-            return prefersReducedMotion.set(motionMediaQuery_1.matches);
+            return (prefersReducedMotion.current = motionMediaQuery_1.matches);
         };
         motionMediaQuery_1.addListener(setReducedMotionPreferences);
         setReducedMotionPreferences();
     }
     else {
-        prefersReducedMotion.set(false);
+        prefersReducedMotion.current = false;
     }
 }
 /**
@@ -51,10 +51,25 @@ function useReducedMotion() {
     /**
      * Lazy initialisation of prefersReducedMotion
      */
-    !prefersReducedMotion && initPrefersReducedMotion();
-    var _a = __read(useState(prefersReducedMotion.get()), 2), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
-    useOnChange(prefersReducedMotion, setShouldReduceMotion);
+    !hasDetected && initPrefersReducedMotion();
+    var _a = __read(useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
+    /**
+     * TODO See if people miss automatically updating shouldReduceMotion setting
+     */
     return shouldReduceMotion;
 }
+function useReducedMotionConfig() {
+    var reducedMotionPreference = useReducedMotion();
+    var reducedMotion = useContext(MotionConfigContext).reducedMotion;
+    if (reducedMotion === "never") {
+        return false;
+    }
+    else if (reducedMotion === "always") {
+        return true;
+    }
+    else {
+        return reducedMotionPreference;
+    }
+}
 
-export { useReducedMotion };
+export { useReducedMotion, useReducedMotionConfig };

package/dist/framer-motion.dev.js

@@ -221,6 +221,7 @@
     var MotionConfigContext = React.createContext({
         transformPagePoint: function (p) { return p; },
         isStatic: false,
+        reducedMotion: "never",
     });
 
     var MotionContext = React.createContext({});
@@ -237,10 +238,81 @@
 
     var useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
+    // Does this device prefer reduced motion? Returns `null` server-side.
+    var prefersReducedMotion = { current: null };
+    var hasDetected = false;
+    function initPrefersReducedMotion() {
+        hasDetected = true;
+        if (typeof window === "undefined")
+            return;
+        if (window.matchMedia) {
+            var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
+            var setReducedMotionPreferences = function () {
+                return (prefersReducedMotion.current = motionMediaQuery_1.matches);
+            };
+            motionMediaQuery_1.addListener(setReducedMotionPreferences);
+            setReducedMotionPreferences();
+        }
+        else {
+            prefersReducedMotion.current = false;
+        }
+    }
+    /**
+     * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+     *
+     * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+     * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+     *
+     * It will actively respond to changes and re-render your components with the latest setting.
+     *
+     * ```jsx
+     * export function Sidebar({ isOpen }) {
+     *   const shouldReduceMotion = useReducedMotion()
+     *   const closedX = shouldReduceMotion ? 0 : "-100%"
+     *
+     *   return (
+     *     <motion.div animate={{
+     *       opacity: isOpen ? 1 : 0,
+     *       x: isOpen ? 0 : closedX
+     *     }} />
+     *   )
+     * }
+     * ```
+     *
+     * @return boolean
+     *
+     * @public
+     */
+    function useReducedMotion() {
+        /**
+         * Lazy initialisation of prefersReducedMotion
+         */
+        !hasDetected && initPrefersReducedMotion();
+        var _a = __read(React.useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
+        /**
+         * TODO See if people miss automatically updating shouldReduceMotion setting
+         */
+        return shouldReduceMotion;
+    }
+    function useReducedMotionConfig() {
+        var reducedMotionPreference = useReducedMotion();
+        var reducedMotion = React.useContext(MotionConfigContext).reducedMotion;
+        if (reducedMotion === "never") {
+            return false;
+        }
+        else if (reducedMotion === "always") {
+            return true;
+        }
+        else {
+            return reducedMotionPreference;
+        }
+    }
+
     function useVisualElement(Component, visualState, props, createVisualElement) {
         var lazyContext = React.useContext(LazyContext);
         var parent = useVisualElementContext();
         var presenceContext = React.useContext(PresenceContext);
+        var shouldReduceMotion = useReducedMotionConfig();
         var visualElementRef = React.useRef(undefined);
         /**
          * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
@@ -254,6 +326,7 @@
                 props: props,
                 presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
                 blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
+                shouldReduceMotion: shouldReduceMotion,
             });
         }
         var visualElement = visualElementRef.current;
@@ -3176,7 +3249,12 @@
                                 _this.resumingFrom.resumingFrom = undefined;
                             }
                             _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                            _this.startAnimation(__assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete }));
+                            var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete });
+                            if (visualElement.shouldReduceMotion) {
+                                animationOptions.delay = 0;
+                                animationOptions.type = false;
+                            }
+                            _this.startAnimation(animationOptions);
                         }
                         else {
                             _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
@@ -5454,9 +5532,10 @@
      * on mount. This way, the page will be in the state the author expects users
      * to see it in for everyone.
      */
-    function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
+    function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a) {
+        var _b = _a.fallback, fallback = _b === void 0 ? true : _b;
         React.useEffect(function () {
-            if (!shouldObserve)
+            if (!shouldObserve || !fallback)
                 return;
             {
                 warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
@@ -5804,7 +5883,14 @@
                     shouldBlockAnimation(animationTypeState, key))) {
                 continue;
             }
-            var animation = startAnimation(key, value, valueTarget, __assign({ delay: delay }, transition));
+            var valueTransition = __assign({ delay: delay }, transition);
+            /**
+             * Make animation instant if this is a transform prop and we should reduce motion.
+             */
+            if (visualElement.shouldReduceMotion && isTransformProp(key)) {
+                valueTransition = __assign(__assign({}, valueTransition), { type: false, delay: 0 });
+            }
+            var animation = startAnimation(key, value, valueTarget, valueTransition);
             animations.push(animation);
         }
         return Promise.all(animations).then(function () {
@@ -7102,7 +7188,7 @@
     var visualElement = function (_a) {
         var _b = _a.treeType, treeType = _b === void 0 ? "" : _b, build = _a.build, getBaseTarget = _a.getBaseTarget, makeTargetAnimatable = _a.makeTargetAnimatable, measureViewportBox = _a.measureViewportBox, renderInstance = _a.render, readValueFromInstance = _a.readValueFromInstance, removeValueFromRenderState = _a.removeValueFromRenderState, sortNodePosition = _a.sortNodePosition, scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps;
         return function (_a, options) {
-            var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState;
+            var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState, shouldReduceMotion = _a.shouldReduceMotion;
             if (options === void 0) { options = {}; }
             var isMounted = false;
             var latestValues = visualState.latestValues, renderState = visualState.renderState;
@@ -7211,7 +7297,7 @@
                 /**
                  *
                  */
-                presenceId: presenceId, 
+                presenceId: presenceId, shouldReduceMotion: shouldReduceMotion, 
                 /**
                  * If this component is part of the variant tree, it should track
                  * any children that are also part of the tree. This is essentially
@@ -9106,60 +9192,6 @@
         return time;
     }
 
-    // Does this device prefer reduced motion? Returns `null` server-side.
-    var prefersReducedMotion;
-    function initPrefersReducedMotion() {
-        prefersReducedMotion = motionValue(null);
-        if (typeof window === "undefined")
-            return;
-        if (window.matchMedia) {
-            var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
-            var setReducedMotionPreferences = function () {
-                return prefersReducedMotion.set(motionMediaQuery_1.matches);
-            };
-            motionMediaQuery_1.addListener(setReducedMotionPreferences);
-            setReducedMotionPreferences();
-        }
-        else {
-            prefersReducedMotion.set(false);
-        }
-    }
-    /**
-     * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
-     *
-     * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
-     * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
-     *
-     * It will actively respond to changes and re-render your components with the latest setting.
-     *
-     * ```jsx
-     * export function Sidebar({ isOpen }) {
-     *   const shouldReduceMotion = useReducedMotion()
-     *   const closedX = shouldReduceMotion ? 0 : "-100%"
-     *
-     *   return (
-     *     <motion.div animate={{
-     *       opacity: isOpen ? 1 : 0,
-     *       x: isOpen ? 0 : closedX
-     *     }} />
-     *   )
-     * }
-     * ```
-     *
-     * @return boolean
-     *
-     * @public
-     */
-    function useReducedMotion() {
-        /**
-         * Lazy initialisation of prefersReducedMotion
-         */
-        !prefersReducedMotion && initPrefersReducedMotion();
-        var _a = __read(React.useState(prefersReducedMotion.get()), 2), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
-        useOnChange(prefersReducedMotion, setShouldReduceMotion);
-        return shouldReduceMotion;
-    }
-
     /**
      * @public
      */