framer-motion 5.0.0 → 5.0.1-rc.1

package/dist/es/animation/use-animated-state.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign, __read } from 'tslib';
-import { useState, useEffect } from 'react';
+import React from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { getOrigin, checkTargetForNewValues } from '../render/utils/setters.mjs';
 import { visualElement } from '../render/index.mjs';
@@ -7,6 +7,7 @@ import { animateVisualElement } from '../render/utils/animation.mjs';
 import { makeUseVisualState } from '../motion/utils/use-visual-state.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 
+var useEffect = React.useEffect, useState = React.useState;
 var createObject = function () { return ({}); };
 var stateVisualElement = visualElement({
     build: function () { },

package/dist/es/animation/use-animation.mjs

@@ -1,7 +1,8 @@
+import React from 'react';
 import { animationControls } from './animation-controls.mjs';
-import { useEffect } from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 
+var useEffect = React.useEffect;
 /**
  * Creates `AnimationControls`, which can be used to manually start, stop
  * and sequence animations on one or more components.

package/dist/es/components/AnimatePresence/PresenceChild.mjs

@@ -1,9 +1,9 @@
 import { __values } from 'tslib';
-import * as React from 'react';
-import { useMemo } from 'react';
+import React from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 
+var useMemo = React.useMemo;
 var presenceId = 0;
 function getPresenceId() {
     var id = presenceId;

package/dist/es/components/AnimatePresence/index.mjs

@@ -1,10 +1,10 @@
 import { __read, __spreadArray } from 'tslib';
-import * as React from 'react';
-import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
+import React from 'react';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
 
+var Children = React.Children, useRef = React.useRef, isValidElement = React.isValidElement, cloneElement = React.cloneElement, useContext = React.useContext;
 function getChildKey(child) {
     return child.key || "";
 }

package/dist/es/components/AnimatePresence/use-presence.mjs

@@ -1,7 +1,8 @@
-import { useContext, useEffect } from 'react';
+import React from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 
+var useContext = React.useContext, useEffect = React.useEffect;
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
  * to access information about whether it's still present in the React tree.

package/dist/es/components/AnimateSharedLayout.mjs

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { useConstant } from '../utils/use-constant.mjs';
 import { LayoutGroup } from './LayoutGroup/index.mjs';
 

package/dist/es/components/LayoutGroup/index.mjs

@@ -1,11 +1,11 @@
 import { __read, __assign } from 'tslib';
-import * as React from 'react';
-import { useContext, useRef, useMemo } from 'react';
+import React from 'react';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
 import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { nodeGroup } from '../../projection/node/group.mjs';
 
+var useContext = React.useContext, useMemo = React.useMemo, useRef = React.useRef;
 var LayoutGroup = function (_a) {
     var _b, _c;
     var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;

package/dist/es/components/LazyMotion/index.mjs

@@ -1,9 +1,9 @@
 import { __read, __rest } from 'tslib';
-import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
+import React from 'react';
 import { LazyContext } from '../../context/LazyContext.mjs';
 import { loadFeatures } from '../../motion/features/definitions.mjs';
 
+var useEffect = React.useEffect, useRef = React.useRef, useState = React.useState;
 /**
  * Used in conjunction with the `m` component to reduce bundle size.
  *

package/dist/es/components/MotionConfig/index.mjs

@@ -1,9 +1,9 @@
 import { __rest, __assign } from 'tslib';
-import * as React from 'react';
-import { useContext, useMemo } from 'react';
+import React from 'react';
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 
+var useContext = React.useContext, useMemo = React.useMemo;
 /**
  * `MotionConfig` is used to set configuration options for all children `motion` components.
  *
@@ -39,10 +39,7 @@ function MotionConfig(_a) {
     var transitionDependency = typeof config.transition === "object"
         ? config.transition.toString()
         : "";
-    var context = useMemo(function () { return config; }, [
-        transitionDependency,
-        config.transformPagePoint,
-    ]);
+    var context = useMemo(function () { return config; }, [transitionDependency, config.transformPagePoint]);
     return (React.createElement(MotionConfigContext.Provider, { value: context }, children));
 }
 

package/dist/es/components/Reorder/Group.mjs

@@ -1,12 +1,12 @@
 import { __rest, __assign } from 'tslib';
 import { invariant } from 'hey-listen';
-import * as React from 'react';
-import { forwardRef, useRef, useEffect } from 'react';
+import React from 'react';
 import { ReorderContext } from '../../context/ReorderContext.mjs';
 import { motion } from '../../render/dom/motion.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { checkReorder } from './utils/check-reorder.mjs';
 
+var forwardRef = React.forwardRef, useEffect = React.useEffect, useRef = React.useRef;
 function ReorderGroup(_a, externalRef) {
     var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, values = _a.values, props = __rest(_a, ["children", "as", "axis", "onReorder", "values"]);
     var Component = useConstant(function () { return motion(as); });

package/dist/es/components/Reorder/Item.mjs

@@ -1,7 +1,6 @@
 import { __rest, __read, __assign } from 'tslib';
 import { invariant } from 'hey-listen';
-import * as React from 'react';
-import { forwardRef, useContext, useRef, useEffect } from 'react';
+import React from 'react';
 import { ReorderContext } from '../../context/ReorderContext.mjs';
 import { motion } from '../../render/dom/motion.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
@@ -9,6 +8,7 @@ import { useMotionValue } from '../../value/use-motion-value.mjs';
 import { useTransform } from '../../value/use-transform.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
+var useContext = React.useContext, useEffect = React.useEffect, useRef = React.useRef, forwardRef = React.forwardRef;
 function useDefaultMotionValue(value, defaultValue) {
     if (defaultValue === void 0) { defaultValue = 0; }
     return isMotionValue(value) ? value : useMotionValue(defaultValue);

package/dist/es/context/DeprecatedLayoutGroupContext.mjs

@@ -1,9 +1,9 @@
-import { createContext } from 'react';
+import React from 'react';
 
 /**
  * @internal
  * @deprecated
  */
-var DeprecatedLayoutGroupContext = createContext(null);
+var DeprecatedLayoutGroupContext = React.createContext(null);
 
 export { DeprecatedLayoutGroupContext };

package/dist/es/context/LayoutGroupContext.mjs

@@ -1,8 +1,8 @@
-import { createContext } from 'react';
+import React from 'react';
 
 /**
  * @internal
  */
-var LayoutGroupContext = createContext({});
+var LayoutGroupContext = React.createContext({});
 
 export { LayoutGroupContext };

package/dist/es/context/LazyContext.mjs

@@ -1,5 +1,7 @@
-import { createContext } from 'react';
+import React from 'react';
 
-var LazyContext = createContext({ strict: false });
+var LazyContext = React.createContext({
+    strict: false,
+});
 
 export { LazyContext };

package/dist/es/context/MotionConfigContext.mjs

@@ -1,9 +1,9 @@
-import { createContext } from 'react';
+import React from 'react';
 
 /**
  * @public
  */
-var MotionConfigContext = createContext({
+var MotionConfigContext = React.createContext({
     transformPagePoint: function (p) { return p; },
     isStatic: false,
 });

package/dist/es/context/MotionContext/create.mjs

@@ -1,7 +1,8 @@
-import { useMemo, useContext } from 'react';
+import React from 'react';
 import { MotionContext } from './index.mjs';
 import { getCurrentTreeVariants } from './utils.mjs';
 
+var useContext = React.useContext, useMemo = React.useMemo;
 function useCreateMotionContext(props, isStatic) {
     var _a = getCurrentTreeVariants(props, useContext(MotionContext)), initial = _a.initial, animate = _a.animate;
     return useMemo(function () { return ({ initial: initial, animate: animate }); }, 

package/dist/es/context/MotionContext/index.mjs

@@ -1,8 +1,8 @@
-import { useContext, createContext } from 'react';
+import React from 'react';
 
-var MotionContext = createContext({});
+var MotionContext = React.createContext({});
 function useVisualElementContext() {
-    return useContext(MotionContext).visualElement;
+    return React.useContext(MotionContext).visualElement;
 }
 
 export { MotionContext, useVisualElementContext };

package/dist/es/context/PresenceContext.mjs

@@ -1,8 +1,8 @@
-import { createContext } from 'react';
+import React from 'react';
 
 /**
  * @public
  */
-var PresenceContext = createContext(null);
+var PresenceContext = React.createContext(null);
 
 export { PresenceContext };

package/dist/es/context/ReorderContext.mjs

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
+import React from 'react';
 
-var ReorderContext = createContext(null);
+var ReorderContext = React.createContext(null);
 
 export { ReorderContext };

package/dist/es/context/SwitchLayoutGroupContext.mjs

@@ -1,8 +1,8 @@
-import { createContext } from 'react';
+import React from 'react';
 
 /**
  * @internal
  */
-var SwitchLayoutGroupContext = createContext({});
+var SwitchLayoutGroupContext = React.createContext({});
 
 export { SwitchLayoutGroupContext };

package/dist/es/events/use-dom-event.mjs

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React from 'react';
 
 function addDomEvent(target, eventName, handler, options) {
     target.addEventListener(eventName, handler, options);
@@ -26,7 +26,7 @@ function addDomEvent(target, eventName, handler, options) {
  * @public
  */
 function useDomEvent(ref, eventName, handler, options) {
-    useEffect(function () {
+    React.useEffect(function () {
         var element = ref.current;
         if (handler && element) {
             return addDomEvent(element, eventName, handler, options);

package/dist/es/gestures/drag/use-drag.mjs

@@ -1,7 +1,8 @@
-import { useEffect } from 'react';
+import React from 'react';
 import { VisualElementDragControls } from './VisualElementDragControls.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 
+var useEffect = React.useEffect;
 /**
  * A hook that allows an element to be dragged.
  *

package/dist/es/gestures/use-pan-gesture.mjs

@@ -1,9 +1,10 @@
-import { useRef, useContext, useEffect } from 'react';
+import React from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { useUnmountEffect } from '../utils/use-unmount-effect.mjs';
 import { usePointerEvent } from '../events/use-pointer-event.mjs';
 import { PanSession } from './PanSession.mjs';
 
+var useRef = React.useRef, useContext = React.useContext, useEffect = React.useEffect;
 /**
  *
  * @param handlers -

package/dist/es/gestures/use-tap-gesture.mjs

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React from 'react';
 import { isNodeOrChild } from './utils/is-node-or-child.mjs';
 import { usePointerEvent, addPointerEvent } from '../events/use-pointer-event.mjs';
 import { useUnmountEffect } from '../utils/use-unmount-effect.mjs';
@@ -6,6 +6,7 @@ import { pipe } from 'popmotion';
 import { AnimationType } from '../render/utils/types.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 
+var useRef = React.useRef;
 /**
  * @param handlers -
  * @internal

package/dist/es/motion/features/animations.mjs

@@ -1,5 +1,5 @@
 import { __read } from 'tslib';
-import { useEffect, useContext } from 'react';
+import React from 'react';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { usePresence } from '../../components/AnimatePresence/use-presence.mjs';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
@@ -7,6 +7,7 @@ import { createAnimationState } from '../../render/utils/animation-state.mjs';
 import { AnimationType } from '../../render/utils/types.mjs';
 import { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';
 
+var useContext = React.useContext, useEffect = React.useEffect;
 var animations = {
     animation: makeRenderlessComponent(function (_a) {
         var visualElement = _a.visualElement, animate = _a.animate;

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -1,6 +1,6 @@
 import { __extends, __assign, __read } from 'tslib';
 import sync from 'framesync';
-import React__default, { useContext } from 'react';
+import React from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';
 import { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext.mjs';
@@ -9,6 +9,7 @@ import { correctBorderRadius } from '../../../projection/styles/scale-border-rad
 import { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';
 import { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';
 
+var useContext = React.useContext;
 var MeasureLayoutWithContext = /** @class */ (function (_super) {
     __extends(MeasureLayoutWithContext, _super);
     function MeasureLayoutWithContext() {
@@ -108,11 +109,11 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
         return null;
     };
     return MeasureLayoutWithContext;
-}(React__default.Component));
+}(React.Component));
 function MeasureLayout(props) {
     var _a = __read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
     var layoutGroup = useContext(LayoutGroupContext);
-    return (React__default.createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+    return (React.createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
 }
 var defaultScaleCorrectors = {
     borderRadius: __assign(__assign({}, correctBorderRadius), { applyTo: [

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

@@ -1,10 +1,10 @@
 import { __assign } from 'tslib';
-import * as React from 'react';
-import { useContext } from 'react';
+import React from 'react';
 import { featureDefinitions } from './definitions.mjs';
 import { invariant } from 'hey-listen';
 import { LazyContext } from '../../context/LazyContext.mjs';
 
+var useContext = React.useContext;
 var featureNames = Object.keys(featureDefinitions);
 var numFeatures = featureNames.length;
 /**

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

@@ -1,7 +1,8 @@
 import { isRefObject } from '../../utils/is-ref-object.mjs';
-import { useContext } from 'react';
+import React from 'react';
 import { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';
 
+var useContext = React.useContext;
 function useProjection(projectionId, _a, visualElement, ProjectionNodeConstructor) {
     var _b;
     var layoutId = _a.layoutId, layout = _a.layout, drag = _a.drag, dragConstraints = _a.dragConstraints, layoutScroll = _a.layoutScroll;

package/dist/es/motion/index.mjs

@@ -1,6 +1,5 @@
 import { __assign } from 'tslib';
-import * as React from 'react';
-import { forwardRef, useContext } from 'react';
+import React from 'react';
 import { useFeatures } from './features/use-features.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { MotionContext } from '../context/MotionContext/index.mjs';
@@ -14,6 +13,7 @@ import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
 import { useProjection } from './features/use-projection.mjs';
 import { VisualElementHandler } from './utils/VisualElementHandler.mjs';
 
+var forwardRef = React.forwardRef, useContext = React.useContext;
 /**
  * Create a `motion` component.
  *

package/dist/es/motion/utils/VisualElementHandler.mjs

@@ -1,5 +1,5 @@
 import { __extends } from 'tslib';
-import React__default from 'react';
+import React from 'react';
 
 var VisualElementHandler = /** @class */ (function (_super) {
     __extends(VisualElementHandler, _super);
@@ -23,6 +23,6 @@ var VisualElementHandler = /** @class */ (function (_super) {
         return this.props.children;
     };
     return VisualElementHandler;
-}(React__default.Component));
+}(React.Component));
 
 export { VisualElementHandler };

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

@@ -1,6 +1,7 @@
-import { useCallback } from 'react';
+import React from 'react';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
 
+var useCallback = React.useCallback;
 /**
  * Creates a ref function that, when called, hydrates the provided
  * external ref and VisualElement.

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

@@ -1,9 +1,10 @@
-import { useContext, useRef, useEffect } from 'react';
+import React from 'react';
 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';
 
+var useContext = React.useContext, useEffect = React.useEffect, useRef = React.useRef;
 function useVisualElement(Component, visualState, props, createVisualElement) {
     var lazyContext = useContext(LazyContext);
     var parent = useVisualElementContext();

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

@@ -1,5 +1,5 @@
 import { __rest } from 'tslib';
-import { useContext } from 'react';
+import React from 'react';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { checkIfControllingVariants, checkIfVariantNode, resolveVariantFromProps } from '../../render/utils/variants.mjs';
@@ -7,6 +7,7 @@ import { useConstant } from '../../utils/use-constant.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { MotionContext } from '../../context/MotionContext/index.mjs';
 
+var useContext = React.useContext;
 function makeState(_a, props, context, presenceContext) {
     var scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps, createRenderState = _a.createRenderState, onMount = _a.onMount;
     var state = {
@@ -18,13 +19,17 @@ function makeState(_a, props, context, presenceContext) {
     }
     return state;
 }
-var makeUseVisualState = function (config) { return function (props, isStatic) {
-    var context = useContext(MotionContext);
-    var presenceContext = useContext(PresenceContext);
-    return isStatic
-        ? makeState(config, props, context, presenceContext)
-        : useConstant(function () { return makeState(config, props, context, presenceContext); });
-}; };
+var makeUseVisualState = function (config) {
+    return function (props, isStatic) {
+        var context = useContext(MotionContext);
+        var presenceContext = useContext(PresenceContext);
+        return isStatic
+            ? makeState(config, props, context, presenceContext)
+            : useConstant(function () {
+                return makeState(config, props, context, presenceContext);
+            });
+    };
+};
 function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     var values = {};
     var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;

package/dist/es/projection/use-reset-projection.mjs

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { rootProjectionNode } from './node/HTMLProjectionNode.mjs';
 
 function useResetProjection() {

package/dist/es/render/dom/use-render.mjs

@@ -1,10 +1,11 @@
 import { __assign } from 'tslib';
-import { createElement } from 'react';
+import React from 'react';
 import { useHTMLProps } from '../html/use-props.mjs';
 import { filterProps } from './utils/filter-props.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 import { useSVGProps } from '../svg/use-props.mjs';
 
+var createElement = React.createElement;
 function createUseRender(forwardMotionProps) {
     if (forwardMotionProps === void 0) { forwardMotionProps = false; }
     var useRender = function (Component, props, projectionId, ref, _a, isStatic) {

package/dist/es/render/html/use-props.mjs

@@ -1,10 +1,11 @@
 import { __assign } from 'tslib';
-import { useMemo } from 'react';
+import React from 'react';
 import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { buildHTMLStyles } from './utils/build-styles.mjs';
 import { createHtmlRenderState } from './utils/create-render-state.mjs';
 
+var useMemo = React.useMemo;
 function copyRawValuesOnly(target, source, props) {
     for (var key in source) {
         if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
@@ -42,8 +43,10 @@ function useHTMLProps(props, visualState, isStatic) {
         // Disable the ghost element when a user drags
         htmlProps.draggable = false;
         // Disable text selection
-        style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout =
-            "none";
+        style.userSelect =
+            style.WebkitUserSelect =
+                style.WebkitTouchCallout =
+                    "none";
         // Disable scrolling on the draggable direction
         style.touchAction =
             props.drag === true

package/dist/es/render/svg/use-props.mjs

@@ -1,9 +1,10 @@
 import { __assign } from 'tslib';
-import { useMemo } from 'react';
+import React from 'react';
 import { copyRawValuesOnly } from '../html/use-props.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
 
+var useMemo = React.useMemo;
 function useSVGProps(props, visualState) {
     var visualProps = useMemo(function () {
         var state = createSvgRenderState();

package/dist/es/utils/use-constant.mjs

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React from 'react';
 
 /**
  * Creates a constant value over the lifecycle of a component.
@@ -8,7 +8,7 @@ import { useRef } from 'react';
  * you can ensure that initialisers don't execute twice or more.
  */
 function useConstant(init) {
-    var ref = useRef(null);
+    var ref = React.useRef(null);
     if (ref.current === null) {
         ref.current = init();
     }

package/dist/es/utils/use-cycle.mjs

@@ -1,7 +1,8 @@
 import { __read } from 'tslib';
-import { useRef, useState } from 'react';
+import React from 'react';
 import { wrap } from 'popmotion';
 
+var useState = React.useState, useRef = React.useRef;
 /**
  * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
  *

package/dist/es/utils/use-force-update.mjs

@@ -1,7 +1,8 @@
 import { __read } from 'tslib';
-import { useCallback, useRef, useState } from 'react';
+import React from 'react';
 import { useUnmountEffect } from './use-unmount-effect.mjs';
 
+var useState = React.useState, useCallback = React.useCallback, useRef = React.useRef;
 function useForceUpdate() {
     var unloadingRef = useRef(false);
     var _a = __read(useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];

package/dist/es/utils/use-isomorphic-effect.mjs

@@ -1,6 +1,7 @@
-import { useLayoutEffect, useEffect } from 'react';
+import React from 'react';
 import { isBrowser } from './is-browser.mjs';
 
+var useEffect = React.useEffect, useLayoutEffect = React.useLayoutEffect;
 var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 
 export { useIsomorphicLayoutEffect };

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

@@ -1,8 +1,9 @@
 import { __read } from 'tslib';
-import { useState } from 'react';
+import React from 'react';
 import { motionValue } from '../value/index.mjs';
 import { useOnChange } from '../value/use-on-change.mjs';
 
+var useState = React.useState;
 // Does this device prefer reduced motion? Returns `null` server-side.
 var prefersReducedMotion;
 function initPrefersReducedMotion() {

package/dist/es/utils/use-unmount-effect.mjs

@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
+import React from 'react';
 
 function useUnmountEffect(callback) {
-    return useEffect(function () { return function () { return callback(); }; }, []);
+    return React.useEffect(function () { return function () { return callback(); }; }, []);
 }
 
 export { useUnmountEffect };

package/dist/es/value/use-motion-value.mjs

@@ -1,9 +1,10 @@
 import { __read } from 'tslib';
-import { useContext, useState, useEffect } from 'react';
+import React from 'react';
 import { motionValue } from './index.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 
+var useContext = React.useContext, useEffect = React.useEffect, useState = React.useState;
 /**
  * Creates a `MotionValue` to track the state and velocity of a value.
  *