framer-motion 5.4.1 → 5.4.4

package/dist/{framer-motion-three.cjs.js → cjs/use-motion-value-73ed7c77.js}

@@ -1,15 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var tslib = require('tslib');
 var React = require('react');
 var heyListen = require('hey-listen');
 var sync = require('framesync');
 var popmotion = require('popmotion');
 var styleValueTypes = require('style-value-types');
-var three = require('three');
-var fiber = require('@react-three/fiber');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -321,6 +317,17 @@ function removeItem(arr, item) {
     var index = arr.indexOf(item);
     index > -1 && arr.splice(index, 1);
 }
+// Adapted from array-move
+function moveItem(_a, fromIndex, toIndex) {
+    var _b = tslib.__read(_a), arr = _b.slice(0);
+    var startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+    if (startIndex >= 0 && startIndex < arr.length) {
+        var endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
+        var _c = tslib.__read(arr.splice(fromIndex, 1), 1), item = _c[0];
+        arr.splice(endIndex, 0, item);
+    }
+    return arr;
+}
 
 var SubscriptionManager = /** @class */ (function () {
     function SubscriptionManager() {
@@ -1093,12 +1100,601 @@ function startAnimation(key, value, target, transition) {
     });
 }
 
+/**
+ * Animate a single value or a `MotionValue`.
+ *
+ * The first argument is either a `MotionValue` to animate, or an initial animation value.
+ *
+ * The second is either a value to animate to, or an array of keyframes to animate through.
+ *
+ * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
+ *
+ * Returns `AnimationPlaybackControls`, currently just a `stop` method.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ *
+ * useEffect(() => {
+ *   const controls = animate(x, 100, {
+ *     type: "spring",
+ *     stiffness: 2000,
+ *     onComplete: v => {}
+ *   })
+ *
+ *   return controls.stop
+ * })
+ * ```
+ *
+ * @public
+ */
+function animate(from, to, transition) {
+    if (transition === void 0) { transition = {}; }
+    var value = isMotionValue(from) ? from : motionValue(from);
+    startAnimation("", value, to, transition);
+    return {
+        stop: function () { return value.stop(); },
+        isAnimating: function () { return value.isAnimating(); },
+    };
+}
+
+var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
+var numBorders = borders.length;
+function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
+    var _a, _b, _c, _d;
+    if (shouldCrossfadeOpacity) {
+        target.opacity = popmotion.mix(0, 
+        // (follow?.opacity as number) ?? 0,
+        // TODO Reinstate this if only child
+        (_a = lead.opacity) !== null && _a !== void 0 ? _a : 1, easeCrossfadeIn(progress));
+        target.opacityExit = popmotion.mix((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress));
+    }
+    else if (isOnlyMember) {
+        target.opacity = popmotion.mix((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress);
+    }
+    /**
+     * Mix border radius
+     */
+    for (var i = 0; i < numBorders; i++) {
+        var borderLabel = "border".concat(borders[i], "Radius");
+        var followRadius = getRadius(follow, borderLabel);
+        var leadRadius = getRadius(lead, borderLabel);
+        if (followRadius === undefined && leadRadius === undefined)
+            continue;
+        followRadius || (followRadius = 0);
+        leadRadius || (leadRadius = 0);
+        /**
+         * Currently we're only crossfading between numerical border radius.
+         * It would be possible to crossfade between percentages for a little
+         * extra bundle size.
+         */
+        if (typeof followRadius === "number" &&
+            typeof leadRadius === "number") {
+            var radius = Math.max(popmotion.mix(followRadius, leadRadius, progress), 0);
+            target[borderLabel] = radius;
+        }
+    }
+    /**
+     * Mix rotation
+     */
+    if (follow.rotate || lead.rotate) {
+        target.rotate = popmotion.mix(follow.rotate || 0, lead.rotate || 0, progress);
+    }
+}
+function getRadius(values, radiusName) {
+    var _a;
+    return (_a = values[radiusName]) !== null && _a !== void 0 ? _a : values.borderRadius;
+}
+// /**
+//  * We only want to mix the background color if there's a follow element
+//  * that we're not crossfading opacity between. For instance with switch
+//  * AnimateSharedLayout animations, this helps the illusion of a continuous
+//  * element being animated but also cuts down on the number of paints triggered
+//  * for elements where opacity is doing that work for us.
+//  */
+// if (
+//     !hasFollowElement &&
+//     latestLeadValues.backgroundColor &&
+//     latestFollowValues.backgroundColor
+// ) {
+//     /**
+//      * This isn't ideal performance-wise as mixColor is creating a new function every frame.
+//      * We could probably create a mixer that runs at the start of the animation but
+//      * the idea behind the crossfader is that it runs dynamically between two potentially
+//      * changing targets (ie opacity or borderRadius may be animating independently via variants)
+//      */
+//     leadState.backgroundColor = followState.backgroundColor = mixColor(
+//         latestFollowValues.backgroundColor as string,
+//         latestLeadValues.backgroundColor as string
+//     )(p)
+// }
+var easeCrossfadeIn = compress(0, 0.5, popmotion.circOut);
+var easeCrossfadeOut = compress(0.5, 0.95, popmotion.linear);
+function compress(min, max, easing) {
+    return function (p) {
+        // Could replace ifs with clamp
+        if (p < min)
+            return 0;
+        if (p > max)
+            return 1;
+        return easing(popmotion.progress(min, max, p));
+    };
+}
+
+/**
+ * Reset an axis to the provided origin box.
+ *
+ * This is a mutative operation.
+ */
+function copyAxisInto(axis, originAxis) {
+    axis.min = originAxis.min;
+    axis.max = originAxis.max;
+}
+/**
+ * Reset a box to the provided origin box.
+ *
+ * This is a mutative operation.
+ */
+function copyBoxInto(box, originBox) {
+    copyAxisInto(box.x, originBox.x);
+    copyAxisInto(box.y, originBox.y);
+}
+
+function isIdentityScale(scale) {
+    return scale === undefined || scale === 1;
+}
+function hasScale(_a) {
+    var scale = _a.scale, scaleX = _a.scaleX, scaleY = _a.scaleY;
+    return (!isIdentityScale(scale) ||
+        !isIdentityScale(scaleX) ||
+        !isIdentityScale(scaleY));
+}
+function hasTransform(values) {
+    return (hasScale(values) ||
+        hasTranslate(values.x) ||
+        hasTranslate(values.y) ||
+        values.z ||
+        values.rotate ||
+        values.rotateX ||
+        values.rotateY);
+}
+function hasTranslate(value) {
+    return value && value !== "0%";
+}
+
+/**
+ * Scales a point based on a factor and an originPoint
+ */
+function scalePoint(point, scale, originPoint) {
+    var distanceFromOrigin = point - originPoint;
+    var scaled = scale * distanceFromOrigin;
+    return originPoint + scaled;
+}
+/**
+ * Applies a translate/scale delta to a point
+ */
+function applyPointDelta(point, translate, scale, originPoint, boxScale) {
+    if (boxScale !== undefined) {
+        point = scalePoint(point, boxScale, originPoint);
+    }
+    return scalePoint(point, scale, originPoint) + translate;
+}
+/**
+ * Applies a translate/scale delta to an axis
+ */
+function applyAxisDelta(axis, translate, scale, originPoint, boxScale) {
+    if (translate === void 0) { translate = 0; }
+    if (scale === void 0) { scale = 1; }
+    axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);
+    axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);
+}
+/**
+ * Applies a translate/scale delta to a box
+ */
+function applyBoxDelta(box, _a) {
+    var x = _a.x, y = _a.y;
+    applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
+    applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
+}
+/**
+ * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms
+ * in a tree upon our box before then calculating how to project it into our desired viewport-relative box
+ *
+ * This is the final nested loop within updateLayoutDelta for future refactoring
+ */
+function applyTreeDeltas(box, treeScale, treePath, isSharedTransition) {
+    var _a, _b;
+    if (isSharedTransition === void 0) { isSharedTransition = false; }
+    var treeLength = treePath.length;
+    if (!treeLength)
+        return;
+    // Reset the treeScale
+    treeScale.x = treeScale.y = 1;
+    var node;
+    var delta;
+    for (var i = 0; i < treeLength; i++) {
+        node = treePath[i];
+        delta = node.projectionDelta;
+        if (((_b = (_a = node.instance) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === "contents")
+            continue;
+        if (isSharedTransition &&
+            node.options.layoutScroll &&
+            node.scroll &&
+            node !== node.root) {
+            transformBox(box, { x: -node.scroll.x, y: -node.scroll.y });
+        }
+        if (delta) {
+            // Incoporate each ancestor's scale into a culmulative treeScale for this component
+            treeScale.x *= delta.x.scale;
+            treeScale.y *= delta.y.scale;
+            // Apply each ancestor's calculated delta into this component's recorded layout box
+            applyBoxDelta(box, delta);
+        }
+        if (isSharedTransition && hasTransform(node.latestValues)) {
+            transformBox(box, node.latestValues);
+        }
+    }
+}
+function translateAxis(axis, distance) {
+    axis.min = axis.min + distance;
+    axis.max = axis.max + distance;
+}
+/**
+ * Apply a transform to an axis from the latest resolved motion values.
+ * This function basically acts as a bridge between a flat motion value map
+ * and applyAxisDelta
+ */
+function transformAxis(axis, transforms, _a) {
+    var _b = tslib.__read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
+    var axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
+    var originPoint = popmotion.mix(axis.min, axis.max, axisOrigin);
+    // Apply the axis delta to the final axis
+    applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
+}
+/**
+ * The names of the motion values we want to apply as translation, scale and origin.
+ */
+var xKeys$1 = ["x", "scaleX", "originX"];
+var yKeys$1 = ["y", "scaleY", "originY"];
+/**
+ * Apply a transform to a box from the latest resolved motion values.
+ */
+function transformBox(box, transform) {
+    transformAxis(box.x, transform, xKeys$1);
+    transformAxis(box.y, transform, yKeys$1);
+}
+
+function calcLength(axis) {
+    return axis.max - axis.min;
+}
+function isNear(value, target, maxDistance) {
+    if (target === void 0) { target = 0; }
+    if (maxDistance === void 0) { maxDistance = 0.01; }
+    return popmotion.distance(value, target) < maxDistance;
+}
+function calcAxisDelta(delta, source, target, origin) {
+    if (origin === void 0) { origin = 0.5; }
+    delta.origin = origin;
+    delta.originPoint = popmotion.mix(source.min, source.max, delta.origin);
+    delta.scale = calcLength(target) / calcLength(source);
+    if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale))
+        delta.scale = 1;
+    delta.translate =
+        popmotion.mix(target.min, target.max, delta.origin) - delta.originPoint;
+    if (isNear(delta.translate) || isNaN(delta.translate))
+        delta.translate = 0;
+}
+function calcBoxDelta(delta, source, target, origin) {
+    calcAxisDelta(delta.x, source.x, target.x, origin === null || origin === void 0 ? void 0 : origin.originX);
+    calcAxisDelta(delta.y, source.y, target.y, origin === null || origin === void 0 ? void 0 : origin.originY);
+}
+function calcRelativeAxis(target, relative, parent) {
+    target.min = parent.min + relative.min;
+    target.max = target.min + calcLength(relative);
+}
+function calcRelativeBox(target, relative, parent) {
+    calcRelativeAxis(target.x, relative.x, parent.x);
+    calcRelativeAxis(target.y, relative.y, parent.y);
+}
+function calcRelativeAxisPosition(target, layout, parent) {
+    target.min = layout.min - parent.min;
+    target.max = target.min + calcLength(layout);
+}
+function calcRelativePosition(target, layout, parent) {
+    calcRelativeAxisPosition(target.x, layout.x, parent.x);
+    calcRelativeAxisPosition(target.y, layout.y, parent.y);
+}
+
+/**
+ * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse
+ */
+function removePointDelta(point, translate, scale, originPoint, boxScale) {
+    point -= translate;
+    point = scalePoint(point, 1 / scale, originPoint);
+    if (boxScale !== undefined) {
+        point = scalePoint(point, 1 / boxScale, originPoint);
+    }
+    return point;
+}
+/**
+ * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse
+ */
+function removeAxisDelta(axis, translate, scale, origin, boxScale, originAxis, sourceAxis) {
+    if (translate === void 0) { translate = 0; }
+    if (scale === void 0) { scale = 1; }
+    if (origin === void 0) { origin = 0.5; }
+    if (originAxis === void 0) { originAxis = axis; }
+    if (sourceAxis === void 0) { sourceAxis = axis; }
+    if (styleValueTypes.percent.test(translate)) {
+        translate = parseFloat(translate);
+        var relativeProgress = popmotion.mix(sourceAxis.min, sourceAxis.max, translate / 100);
+        translate = relativeProgress - sourceAxis.min;
+    }
+    if (typeof translate !== "number")
+        return;
+    var originPoint = popmotion.mix(originAxis.min, originAxis.max, origin);
+    if (axis === originAxis)
+        originPoint -= translate;
+    axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
+    axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);
+}
+/**
+ * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse
+ * and acts as a bridge between motion values and removeAxisDelta
+ */
+function removeAxisTransforms(axis, transforms, _a, origin, sourceAxis) {
+    var _b = tslib.__read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
+    removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);
+}
+/**
+ * The names of the motion values we want to apply as translation, scale and origin.
+ */
+var xKeys = ["x", "scaleX", "originX"];
+var yKeys = ["y", "scaleY", "originY"];
+/**
+ * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse
+ * and acts as a bridge between motion values and removeAxisDelta
+ */
+function removeBoxTransforms(box, transforms, originBox, sourceBox) {
+    removeAxisTransforms(box.x, transforms, xKeys, originBox === null || originBox === void 0 ? void 0 : originBox.x, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.x);
+    removeAxisTransforms(box.y, transforms, yKeys, originBox === null || originBox === void 0 ? void 0 : originBox.y, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.y);
+}
+
+var createAxisDelta = function () { return ({
+    translate: 0,
+    scale: 1,
+    origin: 0,
+    originPoint: 0,
+}); };
+var createDelta = function () { return ({
+    x: createAxisDelta(),
+    y: createAxisDelta(),
+}); };
 var createAxis = function () { return ({ min: 0, max: 0 }); };
 var createBox = function () { return ({
     x: createAxis(),
     y: createAxis(),
 }); };
 
+function isAxisDeltaZero(delta) {
+    return delta.translate === 0 && delta.scale === 1;
+}
+function isDeltaZero(delta) {
+    return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
+}
+function boxEquals(a, b) {
+    return (a.x.min === b.x.min &&
+        a.x.max === b.x.max &&
+        a.y.min === b.y.min &&
+        a.y.max === b.y.max);
+}
+
+var NodeStack = /** @class */ (function () {
+    function NodeStack() {
+        this.members = [];
+    }
+    NodeStack.prototype.add = function (node) {
+        addUniqueItem(this.members, node);
+        node.scheduleRender();
+    };
+    NodeStack.prototype.remove = function (node) {
+        removeItem(this.members, node);
+        if (node === this.prevLead) {
+            this.prevLead = undefined;
+        }
+        if (node === this.lead) {
+            var prevLead = this.members[this.members.length - 1];
+            if (prevLead) {
+                this.promote(prevLead);
+            }
+        }
+    };
+    NodeStack.prototype.relegate = function (node) {
+        var indexOfNode = this.members.findIndex(function (member) { return node === member; });
+        if (indexOfNode === 0)
+            return false;
+        /**
+         * Find the next projection node that is present
+         */
+        var prevLead;
+        for (var i = indexOfNode; i >= 0; i--) {
+            var member = this.members[i];
+            if (member.isPresent !== false) {
+                prevLead = member;
+                break;
+            }
+        }
+        if (prevLead) {
+            this.promote(prevLead);
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    NodeStack.prototype.promote = function (node, preserveFollowOpacity) {
+        var _a;
+        var prevLead = this.lead;
+        if (node === prevLead)
+            return;
+        this.prevLead = prevLead;
+        this.lead = node;
+        node.show();
+        if (prevLead) {
+            prevLead.instance && prevLead.scheduleRender();
+            node.scheduleRender();
+            node.resumeFrom = prevLead;
+            if (preserveFollowOpacity) {
+                node.resumeFrom.preserveOpacity = true;
+            }
+            if (prevLead.snapshot) {
+                node.snapshot = prevLead.snapshot;
+                node.snapshot.latestValues =
+                    prevLead.animationValues || prevLead.latestValues;
+                node.snapshot.isShared = true;
+            }
+            if ((_a = node.root) === null || _a === void 0 ? void 0 : _a.isUpdating) {
+                node.isLayoutDirty = true;
+            }
+            var crossfade = node.options.crossfade;
+            if (crossfade === false) {
+                prevLead.hide();
+            }
+            /**
+             * TODO:
+             *   - Test border radius when previous node was deleted
+             *   - boxShadow mixing
+             *   - Shared between element A in scrolled container and element B (scroll stays the same or changes)
+             *   - Shared between element A in transformed container and element B (transform stays the same or changes)
+             *   - Shared between element A in scrolled page and element B (scroll stays the same or changes)
+             * ---
+             *   - Crossfade opacity of root nodes
+             *   - layoutId changes after animation
+             *   - layoutId changes mid animation
+             */
+        }
+    };
+    NodeStack.prototype.exitAnimationComplete = function () {
+        this.members.forEach(function (node) {
+            var _a, _b, _c, _d, _e;
+            (_b = (_a = node.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_e = (_c = node.resumingFrom) === null || _c === void 0 ? void 0 : (_d = _c.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d);
+        });
+    };
+    NodeStack.prototype.scheduleRender = function () {
+        this.members.forEach(function (node) {
+            node.instance && node.scheduleRender(false);
+        });
+    };
+    /**
+     * Clear any leads that have been removed this render to prevent them from being
+     * used in future animations and to prevent memory leaks
+     */
+    NodeStack.prototype.removeLeadSnapshot = function () {
+        if (this.lead && this.lead.snapshot) {
+            this.lead.snapshot = undefined;
+        }
+    };
+    return NodeStack;
+}());
+
+var scaleCorrectors = {};
+function addScaleCorrector(correctors) {
+    Object.assign(scaleCorrectors, correctors);
+}
+
+var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1)";
+function buildProjectionTransform(delta, treeScale, latestTransform) {
+    /**
+     * The translations we use to calculate are always relative to the viewport coordinate space.
+     * But when we apply scales, we also scale the coordinate space of an element and its children.
+     * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need
+     * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.
+     */
+    var xTranslate = delta.x.translate / treeScale.x;
+    var yTranslate = delta.y.translate / treeScale.y;
+    var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
+    if (latestTransform) {
+        var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
+        if (rotate)
+            transform += "rotate(".concat(rotate, "deg) ");
+        if (rotateX)
+            transform += "rotateX(".concat(rotateX, "deg) ");
+        if (rotateY)
+            transform += "rotateY(".concat(rotateY, "deg) ");
+    }
+    transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
+    return transform === identityProjection ? "none" : transform;
+}
+
+function eachAxis(callback) {
+    return [callback("x"), callback("y")];
+}
+
+/**
+ * A list of all transformable axes. We'll use this list to generated a version
+ * of each axes for each transform.
+ */
+var transformAxes = ["", "X", "Y", "Z"];
+/**
+ * An ordered array of each transformable value. By default, transform values
+ * will be sorted to this order.
+ */
+var order = ["translate", "scale", "rotate", "skew"];
+/**
+ * Generate a list of every possible transform key.
+ */
+var transformProps = ["transformPerspective", "x", "y", "z"];
+order.forEach(function (operationKey) {
+    return transformAxes.forEach(function (axesKey) {
+        return transformProps.push(operationKey + axesKey);
+    });
+});
+/**
+ * A function to use with Array.sort to sort transform keys by their default order.
+ */
+function sortTransformProps(a, b) {
+    return transformProps.indexOf(a) - transformProps.indexOf(b);
+}
+/**
+ * A quick lookup for transform props.
+ */
+var transformPropSet = new Set(transformProps);
+function isTransformProp(key) {
+    return transformPropSet.has(key);
+}
+/**
+ * A quick lookup for transform origin props
+ */
+var transformOriginProps = new Set(["originX", "originY", "originZ"]);
+function isTransformOriginProp(key) {
+    return transformOriginProps.has(key);
+}
+
+var compareByDepth = function (a, b) {
+    return a.depth - b.depth;
+};
+
+var FlatTree = /** @class */ (function () {
+    function FlatTree() {
+        this.children = [];
+        this.isDirty = false;
+    }
+    FlatTree.prototype.add = function (child) {
+        addUniqueItem(this.children, child);
+        this.isDirty = true;
+    };
+    FlatTree.prototype.remove = function (child) {
+        removeItem(this.children, child);
+        this.isDirty = true;
+    };
+    FlatTree.prototype.forEach = function (callback) {
+        this.isDirty && this.children.sort(compareByDepth);
+        this.isDirty = false;
+        this.children.forEach(callback);
+    };
+    return FlatTree;
+}());
+
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
@@ -1113,6 +1709,11 @@ function resolveMotionValue(value) {
         : unwrappedValue;
 }
 
+/**
+ * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
+ * which has a noticeable difference in spring animations
+ */
+var animationTarget = 1000;
 /**
  * This should only ever be modified on the client otherwise it'll
  * persist through server requests. If we need instanced states we
@@ -1130,450 +1731,1492 @@ var globalProjectionState = {
      */
     hasEverUpdated: false,
 };
-
-var id = 1;
-function useProjectionId() {
-    return useConstant(function () {
-        if (globalProjectionState.hasEverUpdated) {
-            return id++;
+function createProjectionNode(_a) {
+    var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, resetTransform = _a.resetTransform;
+    return /** @class */ (function () {
+        function ProjectionNode(id, latestValues, parent) {
+            var _this = this;
+            if (latestValues === void 0) { latestValues = {}; }
+            if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
+            /**
+             * A Set containing all this component's children. This is used to iterate
+             * through the children.
+             *
+             * TODO: This could be faster to iterate as a flat array stored on the root node.
+             */
+            this.children = new Set();
+            /**
+             * Options for the node. We use this to configure what kind of layout animations
+             * we should perform (if any).
+             */
+            this.options = {};
+            /**
+             * We use this to detect when its safe to shut down part of a projection tree.
+             * We have to keep projecting children for scale correction and relative projection
+             * until all their parents stop performing layout animations.
+             */
+            this.isTreeAnimating = false;
+            this.isAnimationBlocked = false;
+            /**
+             * Flag to true if we think this layout has been changed. We can't always know this,
+             * currently we set it to true every time a component renders, or if it has a layoutDependency
+             * if that has changed between renders. Additionally, components can be grouped by LayoutGroup
+             * and if one node is dirtied, they all are.
+             */
+            this.isLayoutDirty = false;
+            /**
+             * Block layout updates for instant layout transitions throughout the tree.
+             */
+            this.updateManuallyBlocked = false;
+            this.updateBlockedByResize = false;
+            /**
+             * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`
+             * call.
+             */
+            this.isUpdating = false;
+            /**
+             * If this is an SVG element we currently disable projection transforms
+             */
+            this.isSVG = false;
+            /**
+             * Flag to true (during promotion) if a node doing an instant layout transition needs to reset
+             * its projection styles.
+             */
+            this.needsReset = false;
+            /**
+             * Flags whether this node should have its transform reset prior to measuring.
+             */
+            this.shouldResetTransform = false;
+            /**
+             * An object representing the calculated contextual/accumulated/tree scale.
+             * This will be used to scale calculcated projection transforms, as these are
+             * calculated in screen-space but need to be scaled for elements to actually
+             * make it to their calculated destinations.
+             *
+             * TODO: Lazy-init
+             */
+            this.treeScale = { x: 1, y: 1 };
+            /**
+             *
+             */
+            this.eventHandlers = new Map();
+            // Note: Currently only running on root node
+            this.potentialNodes = new Map();
+            this.checkUpdateFailed = function () {
+                if (_this.isUpdating) {
+                    _this.isUpdating = false;
+                    _this.clearAllSnapshots();
+                }
+            };
+            this.updateProjection = function () {
+                _this.nodes.forEach(resolveTargetDelta);
+                _this.nodes.forEach(calcProjection);
+            };
+            this.hasProjected = false;
+            this.isVisible = true;
+            /**
+             * Animation
+             */
+            this.animationProgress = 0;
+            /**
+             * Shared layout
+             */
+            // TODO Only running on root node
+            this.sharedNodes = new Map();
+            this.id = id;
+            this.latestValues = latestValues;
+            this.root = parent ? parent.root || parent : this;
+            this.path = parent ? tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(parent.path), false), [parent], false) : [];
+            this.parent = parent;
+            this.depth = parent ? parent.depth + 1 : 0;
+            id && this.root.registerPotentialNode(id, this);
+            for (var i = 0; i < this.path.length; i++) {
+                this.path[i].shouldResetTransform = true;
+            }
+            if (this.root === this)
+                this.nodes = new FlatTree();
         }
-    });
-}
-
-/**
- * @internal
- */
-var LayoutGroupContext = React.createContext({});
-
-/**
- * @internal
- */
-var SwitchLayoutGroupContext = React.createContext({});
-
-function useProjection(projectionId, _a, visualElement, ProjectionNodeConstructor) {
-    var _b;
-    var layoutId = _a.layoutId, layout = _a.layout, drag = _a.drag, dragConstraints = _a.dragConstraints, layoutScroll = _a.layoutScroll;
-    var initialPromotionConfig = React.useContext(SwitchLayoutGroupContext);
-    if (!ProjectionNodeConstructor ||
-        !visualElement ||
-        (visualElement === null || visualElement === void 0 ? void 0 : visualElement.projection)) {
-        return;
-    }
-    visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_b = visualElement.parent) === null || _b === void 0 ? void 0 : _b.projection);
-    visualElement.projection.setOptions({
-        layoutId: layoutId,
-        layout: layout,
-        alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
-        visualElement: visualElement,
-        scheduleRender: function () { return visualElement.scheduleRender(); },
+        ProjectionNode.prototype.addEventListener = function (name, handler) {
+            if (!this.eventHandlers.has(name)) {
+                this.eventHandlers.set(name, new SubscriptionManager());
+            }
+            return this.eventHandlers.get(name).add(handler);
+        };
+        ProjectionNode.prototype.notifyListeners = function (name) {
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            var subscriptionManager = this.eventHandlers.get(name);
+            subscriptionManager === null || subscriptionManager === void 0 ? void 0 : subscriptionManager.notify.apply(subscriptionManager, tslib.__spreadArray([], tslib.__read(args), false));
+        };
+        ProjectionNode.prototype.hasListeners = function (name) {
+            return this.eventHandlers.has(name);
+        };
+        ProjectionNode.prototype.registerPotentialNode = function (id, node) {
+            this.potentialNodes.set(id, node);
+        };
         /**
-         * TODO: Update options in an effect. This could be tricky as it'll be too late
-         * to update by the time layout animations run.
-         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
-         * ensuring it gets called if there's no potential layout animations.
-         *
+         * Lifecycles
          */
-        animationType: typeof layout === "string" ? layout : "both",
-        initialPromotionConfig: initialPromotionConfig,
-        layoutScroll: layoutScroll,
-    });
-}
-
-var VisualElementHandler = /** @class */ (function (_super) {
-    tslib.__extends(VisualElementHandler, _super);
-    function VisualElementHandler() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * Update visual element props as soon as we know this update is going to be commited.
-     */
-    VisualElementHandler.prototype.getSnapshotBeforeUpdate = function () {
-        this.updateProps();
-        return null;
-    };
-    VisualElementHandler.prototype.componentDidUpdate = function () { };
-    VisualElementHandler.prototype.updateProps = function () {
-        var _a = this.props, visualElement = _a.visualElement, props = _a.props;
-        if (visualElement)
-            visualElement.setProps(props);
-    };
-    VisualElementHandler.prototype.render = function () {
-        return this.props.children;
-    };
-    return VisualElementHandler;
-}(React__default["default"].Component));
-
-/**
- * Create a `motion` component.
- *
- * This function accepts a Component argument, which can be either a string (ie "div"
- * for `motion.div`), or an actual React component.
- *
- * Alongside this is a config option which provides a way of rendering the provided
- * component "offline", or outside the React render cycle.
- *
- * @internal
- */
-function createMotionComponent(_a) {
-    var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;
-    preloadedFeatures && loadFeatures(preloadedFeatures);
-    function MotionComponent(props, externalRef) {
-        var layoutId = useLayoutId(props);
-        props = tslib.__assign(tslib.__assign({}, props), { layoutId: layoutId });
+        ProjectionNode.prototype.mount = function (instance, isLayoutDirty) {
+            var _this = this;
+            var _a;
+            if (isLayoutDirty === void 0) { isLayoutDirty = false; }
+            if (this.instance)
+                return;
+            this.isSVG =
+                instance instanceof SVGElement && instance.tagName !== "svg";
+            this.instance = instance;
+            var _b = this.options, layoutId = _b.layoutId, layout = _b.layout, visualElement = _b.visualElement;
+            if (visualElement && !visualElement.getInstance()) {
+                visualElement.mount(instance);
+            }
+            this.root.nodes.add(this);
+            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this);
+            this.id && this.root.potentialNodes.delete(this.id);
+            if (isLayoutDirty && (layout || layoutId)) {
+                this.isLayoutDirty = true;
+            }
+            if (attachResizeListener) {
+                var unblockTimeout_1;
+                var resizeUnblockUpdate_1 = function () {
+                    return (_this.root.updateBlockedByResize = false);
+                };
+                attachResizeListener(instance, function () {
+                    _this.root.updateBlockedByResize = true;
+                    clearTimeout(unblockTimeout_1);
+                    unblockTimeout_1 = setTimeout(resizeUnblockUpdate_1, 250);
+                    if (globalProjectionState.hasAnimatedSinceResize) {
+                        globalProjectionState.hasAnimatedSinceResize = false;
+                        _this.nodes.forEach(finishAnimation);
+                    }
+                });
+            }
+            if (layoutId) {
+                this.root.registerSharedNode(layoutId, this);
+            }
+            // Only register the handler if it requires layout animation
+            if (this.options.animate !== false &&
+                visualElement &&
+                (layoutId || layout)) {
+                this.addEventListener("didUpdate", function (_a) {
+                    var _b, _c, _d, _e, _f;
+                    var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged, hasRelativeTargetChanged = _a.hasRelativeTargetChanged, newLayout = _a.layout;
+                    if (_this.isTreeAnimationBlocked()) {
+                        _this.target = undefined;
+                        _this.relativeTarget = undefined;
+                        return;
+                    }
+                    // TODO: Check here if an animation exists
+                    var layoutTransition = (_c = (_b = _this.options.transition) !== null && _b !== void 0 ? _b : visualElement.getDefaultTransition()) !== null && _c !== void 0 ? _c : defaultLayoutTransition;
+                    var onLayoutAnimationComplete = visualElement.getProps().onLayoutAnimationComplete;
+                    /**
+                     * The target layout of the element might stay the same,
+                     * but its position relative to its parent has changed.
+                     */
+                    var targetChanged = !_this.targetLayout ||
+                        !boxEquals(_this.targetLayout, newLayout) ||
+                        hasRelativeTargetChanged;
+                    /**
+                     * If the layout hasn't seemed to have changed, it might be that the
+                     * element is visually in the same place in the document but its position
+                     * relative to its parent has indeed changed. So here we check for that.
+                     */
+                    var hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
+                    if (((_d = _this.resumeFrom) === null || _d === void 0 ? void 0 : _d.instance) ||
+                        hasOnlyRelativeTargetChanged ||
+                        (hasLayoutChanged &&
+                            (targetChanged || !_this.currentAnimation))) {
+                        if (_this.resumeFrom) {
+                            _this.resumingFrom = _this.resumeFrom;
+                            _this.resumingFrom.resumingFrom = undefined;
+                        }
+                        _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
+                        _this.startAnimation(tslib.__assign(tslib.__assign({}, getValueTransition(layoutTransition, "layout")), { onComplete: onLayoutAnimationComplete }));
+                    }
+                    else {
+                        _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
+                    }
+                    _this.targetLayout = newLayout;
+                });
+            }
+        };
+        ProjectionNode.prototype.unmount = function () {
+            var _a, _b;
+            this.options.layoutId && this.willUpdate();
+            this.root.nodes.remove(this);
+            (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.remove(this);
+            (_b = this.parent) === null || _b === void 0 ? void 0 : _b.children.delete(this);
+            this.instance = undefined;
+            sync.cancelSync.preRender(this.updateProjection);
+        };
+        // only on the root
+        ProjectionNode.prototype.blockUpdate = function () {
+            this.updateManuallyBlocked = true;
+        };
+        ProjectionNode.prototype.unblockUpdate = function () {
+            this.updateManuallyBlocked = false;
+        };
+        ProjectionNode.prototype.isUpdateBlocked = function () {
+            return this.updateManuallyBlocked || this.updateBlockedByResize;
+        };
+        ProjectionNode.prototype.isTreeAnimationBlocked = function () {
+            var _a;
+            return (this.isAnimationBlocked ||
+                ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimationBlocked()) ||
+                false);
+        };
+        // Note: currently only running on root node
+        ProjectionNode.prototype.startUpdate = function () {
+            var _a;
+            if (this.isUpdateBlocked())
+                return;
+            this.isUpdating = true;
+            (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation);
+        };
+        ProjectionNode.prototype.willUpdate = function (shouldNotifyListeners) {
+            var _a, _b, _c;
+            if (shouldNotifyListeners === void 0) { shouldNotifyListeners = true; }
+            if (this.root.isUpdateBlocked()) {
+                (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a);
+                return;
+            }
+            !this.root.isUpdating && this.root.startUpdate();
+            if (this.isLayoutDirty)
+                return;
+            this.isLayoutDirty = true;
+            for (var i = 0; i < this.path.length; i++) {
+                var node = this.path[i];
+                node.shouldResetTransform = true;
+                /**
+                 * TODO: Check we haven't updated the scroll
+                 * since the last didUpdate
+                 */
+                node.updateScroll();
+            }
+            var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
+            if (layoutId === undefined && !layout)
+                return;
+            var transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
+            this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+            this.updateSnapshot();
+            shouldNotifyListeners && this.notifyListeners("willUpdate");
+        };
+        // Note: Currently only running on root node
+        ProjectionNode.prototype.didUpdate = function () {
+            var updateWasBlocked = this.isUpdateBlocked();
+            // When doing an instant transition, we skip the layout update,
+            // but should still clean up the measurements so that the next
+            // snapshot could be taken correctly.
+            if (updateWasBlocked) {
+                this.unblockUpdate();
+                this.clearAllSnapshots();
+                this.nodes.forEach(clearMeasurements);
+                return;
+            }
+            if (!this.isUpdating)
+                return;
+            this.isUpdating = false;
+            /**
+             * Search for and mount newly-added projection elements.
+             *
+             * TODO: Every time a new component is rendered we could search up the tree for
+             * the closest mounted node and query from there rather than document.
+             */
+            if (this.potentialNodes.size) {
+                this.potentialNodes.forEach(mountNodeEarly);
+                this.potentialNodes.clear();
+            }
+            /**
+             * Write
+             */
+            this.nodes.forEach(resetTransformStyle);
+            /**
+             * Read ==================
+             */
+            // Update layout measurements of updated children
+            this.nodes.forEach(updateLayout);
+            /**
+             * Write
+             */
+            // Notify listeners that the layout is updated
+            this.nodes.forEach(notifyLayoutUpdate);
+            this.clearAllSnapshots();
+            // Flush any scheduled updates
+            sync.flushSync.update();
+            sync.flushSync.preRender();
+            sync.flushSync.render();
+        };
+        ProjectionNode.prototype.clearAllSnapshots = function () {
+            this.nodes.forEach(clearSnapshot);
+            this.sharedNodes.forEach(removeLeadSnapshots);
+        };
+        ProjectionNode.prototype.scheduleUpdateProjection = function () {
+            sync__default["default"].preRender(this.updateProjection, false, true);
+        };
+        ProjectionNode.prototype.scheduleCheckAfterUnmount = function () {
+            var _this = this;
+            /**
+             * If the unmounting node is in a layoutGroup and did trigger a willUpdate,
+             * we manually call didUpdate to give a chance to the siblings to animate.
+             * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
+             */
+            sync__default["default"].postRender(function () {
+                if (_this.isLayoutDirty) {
+                    _this.root.didUpdate();
+                }
+                else {
+                    _this.root.checkUpdateFailed();
+                }
+            });
+        };
         /**
-         * If we're rendering in a static environment, we only visually update the component
-         * as a result of a React-rerender rather than interactions or animations. This
-         * means we don't need to load additional memory structures like VisualElement,
-         * or any gesture/animation features.
+         * Update measurements
          */
-        var config = React.useContext(MotionConfigContext);
-        var features = null;
-        var context = useCreateMotionContext(props);
+        ProjectionNode.prototype.updateSnapshot = function () {
+            if (this.snapshot || !this.instance)
+                return;
+            var measured = this.measure();
+            var layout = this.removeTransform(this.removeElementScroll(measured));
+            roundBox(layout);
+            this.snapshot = {
+                measured: measured,
+                layout: layout,
+                latestValues: {},
+            };
+        };
+        ProjectionNode.prototype.updateLayout = function () {
+            var _a;
+            if (!this.instance)
+                return;
+            // TODO: Incorporate into a forwarded scroll offset
+            this.updateScroll();
+            if (!(this.options.alwaysMeasureLayout && this.isLead()) &&
+                !this.isLayoutDirty) {
+                return;
+            }
+            /**
+             * When a node is mounted, it simply resumes from the prevLead's
+             * snapshot instead of taking a new one, but the ancestors scroll
+             * might have updated while the prevLead is unmounted. We need to
+             * update the scroll again to make sure the layout we measure is
+             * up to date.
+             */
+            if (this.resumeFrom && !this.resumeFrom.instance) {
+                for (var i = 0; i < this.path.length; i++) {
+                    var node = this.path[i];
+                    node.updateScroll();
+                }
+            }
+            var measured = this.measure();
+            roundBox(measured);
+            var prevLayout = this.layout;
+            this.layout = {
+                measured: measured,
+                actual: this.removeElementScroll(measured),
+            };
+            this.layoutCorrected = createBox();
+            this.isLayoutDirty = false;
+            this.projectionDelta = undefined;
+            this.notifyListeners("measure");
+            (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notifyLayoutMeasure(this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
+        };
+        ProjectionNode.prototype.updateScroll = function () {
+            if (this.options.layoutScroll && this.instance) {
+                this.scroll = measureScroll(this.instance);
+            }
+        };
+        ProjectionNode.prototype.resetTransform = function () {
+            var _a;
+            if (!resetTransform)
+                return;
+            var isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
+            var hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
+            var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            var transformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+            var transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
+            if (isResetRequested &&
+                (hasProjection ||
+                    hasTransform(this.latestValues) ||
+                    transformTemplateHasChanged)) {
+                resetTransform(this.instance, transformTemplateValue);
+                this.shouldResetTransform = false;
+                this.scheduleRender();
+            }
+        };
+        ProjectionNode.prototype.measure = function () {
+            var visualElement = this.options.visualElement;
+            if (!visualElement)
+                return createBox();
+            var box = visualElement.measureViewportBox();
+            // Remove viewport scroll to give page-relative coordinates
+            var scroll = this.root.scroll;
+            if (scroll) {
+                translateAxis(box.x, scroll.x);
+                translateAxis(box.y, scroll.y);
+            }
+            return box;
+        };
+        ProjectionNode.prototype.removeElementScroll = function (box) {
+            var boxWithoutScroll = createBox();
+            copyBoxInto(boxWithoutScroll, box);
+            /**
+             * Performance TODO: Keep a cumulative scroll offset down the tree
+             * rather than loop back up the path.
+             */
+            for (var i = 0; i < this.path.length; i++) {
+                var node = this.path[i];
+                var scroll_1 = node.scroll, options = node.options;
+                if (node !== this.root && scroll_1 && options.layoutScroll) {
+                    translateAxis(boxWithoutScroll.x, scroll_1.x);
+                    translateAxis(boxWithoutScroll.y, scroll_1.y);
+                }
+            }
+            return boxWithoutScroll;
+        };
+        ProjectionNode.prototype.applyTransform = function (box, transformOnly) {
+            if (transformOnly === void 0) { transformOnly = false; }
+            var withTransforms = createBox();
+            copyBoxInto(withTransforms, box);
+            for (var i = 0; i < this.path.length; i++) {
+                var node = this.path[i];
+                if (!transformOnly &&
+                    node.options.layoutScroll &&
+                    node.scroll &&
+                    node !== node.root) {
+                    transformBox(withTransforms, {
+                        x: -node.scroll.x,
+                        y: -node.scroll.y,
+                    });
+                }
+                if (!hasTransform(node.latestValues))
+                    continue;
+                transformBox(withTransforms, node.latestValues);
+            }
+            if (hasTransform(this.latestValues)) {
+                transformBox(withTransforms, this.latestValues);
+            }
+            return withTransforms;
+        };
+        ProjectionNode.prototype.removeTransform = function (box) {
+            var _a;
+            var boxWithoutTransform = createBox();
+            copyBoxInto(boxWithoutTransform, box);
+            for (var i = 0; i < this.path.length; i++) {
+                var node = this.path[i];
+                if (!node.instance)
+                    continue;
+                if (!hasTransform(node.latestValues))
+                    continue;
+                hasScale(node.latestValues) && node.updateSnapshot();
+                var sourceBox = createBox();
+                var nodeBox = node.measure();
+                copyBoxInto(sourceBox, nodeBox);
+                removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox);
+            }
+            if (hasTransform(this.latestValues)) {
+                removeBoxTransforms(boxWithoutTransform, this.latestValues);
+            }
+            return boxWithoutTransform;
+        };
         /**
-         * Create a unique projection ID for this component. If a new component is added
-         * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing
-         * us to measure it as soon as any layout effect flushes pending layout animations.
          *
-         * Performance note: It'd be better not to have to search the DOM for these elements.
-         * For newly-entering components it could be enough to only correct treeScale, in which
-         * case we could mount in a scale-correction mode. This wouldn't be enough for
-         * shared element transitions however. Perhaps for those we could revert to a root node
-         * that gets forceRendered and layout animations are triggered on its layout effect.
          */
-        var projectionId = useProjectionId();
+        ProjectionNode.prototype.setTargetDelta = function (delta) {
+            this.targetDelta = delta;
+            this.root.scheduleUpdateProjection();
+        };
+        ProjectionNode.prototype.setOptions = function (options) {
+            var _a;
+            this.options = tslib.__assign(tslib.__assign(tslib.__assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true });
+        };
+        ProjectionNode.prototype.clearMeasurements = function () {
+            this.scroll = undefined;
+            this.layout = undefined;
+            this.snapshot = undefined;
+            this.prevTransformTemplateValue = undefined;
+            this.targetDelta = undefined;
+            this.target = undefined;
+            this.isLayoutDirty = false;
+        };
         /**
-         *
+         * Frame calculations
          */
-        var visualState = useVisualState(props, config.isStatic);
-        if (!config.isStatic && isBrowser) {
+        ProjectionNode.prototype.resolveTargetDelta = function () {
+            var _a;
+            var _b = this.options, layout = _b.layout, layoutId = _b.layoutId;
             /**
-             * Create a VisualElement for this component. A VisualElement provides a common
-             * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
-             * providing a way of rendering to these APIs outside of the React render loop
-             * for more performant animations and interactions
+             * If we have no layout, we can't perform projection, so early return
              */
-            context.visualElement = useVisualElement(Component, visualState, tslib.__assign(tslib.__assign({}, config), props), createVisualElement);
-            useProjection(projectionId, props, context.visualElement, projectionNodeConstructor ||
-                featureDefinitions.projectionNodeConstructor);
+            if (!this.layout || !(layout || layoutId))
+                return;
             /**
-             * Load Motion gesture and animation features. These are rendered as renderless
-             * components so each feature can optionally make use of React lifecycle methods.
+             * If we don't have a targetDelta but do have a layout, we can attempt to resolve
+             * a relativeParent. This will allow a component to perform scale correction
+             * even if no animation has started.
              */
-            features = useFeatures(props, context.visualElement, preloadedFeatures);
-        }
-        /**
-         * The mount order and hierarchy is specific to ensure our element ref
-         * is hydrated by the time features fire their effects.
-         */
-        return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: tslib.__assign(tslib.__assign({}, config), props) },
-            features,
-            React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
-    }
-    return React.forwardRef(MotionComponent);
-}
-function useLayoutId(_a) {
-    var _b;
-    var layoutId = _a.layoutId;
-    var layoutGroupId = (_b = React.useContext(LayoutGroupContext)) === null || _b === void 0 ? void 0 : _b.id;
-    return layoutGroupId && layoutId !== undefined
-        ? layoutGroupId + "-" + layoutId
-        : layoutId;
-}
-
-function isAnimationControls(v) {
-    return typeof v === "object" && typeof v.start === "function";
-}
-
-/**
- * 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.
- *
- * ```jsx
- * import { usePresence } from "framer-motion"
- *
- * export const Component = () => {
- *   const [isPresent, safeToRemove] = usePresence()
- *
- *   useEffect(() => {
- *     !isPresent && setTimeout(safeToRemove, 1000)
- *   }, [isPresent])
- *
- *   return <div />
- * }
- * ```
- *
- * If `isPresent` is `false`, it means that a component has been removed the tree, but
- * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
- *
- * @public
- */
-function usePresence() {
-    var context = React.useContext(PresenceContext);
-    if (context === null)
-        return [true, null];
-    var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
-    // It's safe to call the following hooks conditionally (after an early return) because the context will always
-    // either be null or non-null for the lifespan of the component.
-    // Replace with useOpaqueId when released in React
-    var id = useUniqueId();
-    React.useEffect(function () { return register(id); }, []);
-    var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
-    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
-}
-var counter = 0;
-var incrementId = function () { return counter++; };
-var useUniqueId = function () { return useConstant(incrementId); };
-
-function shallowCompare(next, prev) {
-    if (!Array.isArray(prev))
-        return false;
-    var prevLength = prev.length;
-    if (prevLength !== next.length)
-        return false;
-    for (var i = 0; i < prevLength; i++) {
-        if (prev[i] !== next[i])
-            return false;
+            // TODO If this is unsuccessful this currently happens every frame
+            if (!this.targetDelta && !this.relativeTarget) {
+                // TODO: This is a semi-repetition of further down this function, make DRY
+                this.relativeParent = this.getClosestProjectingParent();
+                if (this.relativeParent && this.relativeParent.layout) {
+                    this.relativeTarget = createBox();
+                    this.relativeTargetOrigin = createBox();
+                    calcRelativePosition(this.relativeTargetOrigin, this.layout.actual, this.relativeParent.layout.actual);
+                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                }
+            }
+            /**
+             * If we have no relative target or no target delta our target isn't valid
+             * for this frame.
+             */
+            if (!this.relativeTarget && !this.targetDelta)
+                return;
+            /**
+             * Lazy-init target data structure
+             */
+            if (!this.target) {
+                this.target = createBox();
+                this.targetWithTransforms = createBox();
+            }
+            /**
+             * If we've got a relative box for this component, resolve it into a target relative to the parent.
+             */
+            if (this.relativeTarget &&
+                this.relativeTargetOrigin &&
+                ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.target)) {
+                calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
+                /**
+                 * If we've only got a targetDelta, resolve it into a target
+                 */
+            }
+            else if (this.targetDelta) {
+                if (Boolean(this.resumingFrom)) {
+                    // TODO: This is creating a new object every frame
+                    this.target = this.applyTransform(this.layout.actual);
+                }
+                else {
+                    copyBoxInto(this.target, this.layout.actual);
+                }
+                applyBoxDelta(this.target, this.targetDelta);
+            }
+            else {
+                /**
+                 * If no target, use own layout as target
+                 */
+                copyBoxInto(this.target, this.layout.actual);
+            }
+            /**
+             * If we've been told to attempt to resolve a relative target, do so.
+             */
+            if (this.attemptToResolveRelativeTarget) {
+                this.attemptToResolveRelativeTarget = false;
+                this.relativeParent = this.getClosestProjectingParent();
+                if (this.relativeParent &&
+                    Boolean(this.relativeParent.resumingFrom) ===
+                        Boolean(this.resumingFrom) &&
+                    !this.relativeParent.options.layoutScroll &&
+                    this.relativeParent.target) {
+                    this.relativeTarget = createBox();
+                    this.relativeTargetOrigin = createBox();
+                    calcRelativePosition(this.relativeTargetOrigin, this.target, this.relativeParent.target);
+                    copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+                }
+            }
+        };
+        ProjectionNode.prototype.getClosestProjectingParent = function () {
+            if (!this.parent || hasTransform(this.parent.latestValues))
+                return undefined;
+            if ((this.parent.relativeTarget || this.parent.targetDelta) &&
+                this.parent.layout) {
+                return this.parent;
+            }
+            else {
+                return this.parent.getClosestProjectingParent();
+            }
+        };
+        ProjectionNode.prototype.calcProjection = function () {
+            var _a;
+            var _b = this.options, layout = _b.layout, layoutId = _b.layoutId;
+            /**
+             * If this section of the tree isn't animating we can
+             * delete our target sources for the following frame.
+             */
+            this.isTreeAnimating = Boolean(((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimating) ||
+                this.currentAnimation ||
+                this.pendingAnimation);
+            if (!this.isTreeAnimating) {
+                this.targetDelta = this.relativeTarget = undefined;
+            }
+            if (!this.layout || !(layout || layoutId))
+                return;
+            var lead = this.getLead();
+            /**
+             * Reset the corrected box with the latest values from box, as we're then going
+             * to perform mutative operations on it.
+             */
+            copyBoxInto(this.layoutCorrected, this.layout.actual);
+            /**
+             * Apply all the parent deltas to this box to produce the corrected box. This
+             * is the layout box, as it will appear on screen as a result of the transforms of its parents.
+             */
+            applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, Boolean(this.resumingFrom) || this !== lead);
+            var target = lead.target;
+            if (!target)
+                return;
+            if (!this.projectionDelta) {
+                this.projectionDelta = createDelta();
+                this.projectionDeltaWithTransform = createDelta();
+            }
+            var prevTreeScaleX = this.treeScale.x;
+            var prevTreeScaleY = this.treeScale.y;
+            var prevProjectionTransform = this.projectionTransform;
+            /**
+             * Update the delta between the corrected box and the target box before user-set transforms were applied.
+             * This will allow us to calculate the corrected borderRadius and boxShadow to compensate
+             * for our layout reprojection, but still allow them to be scaled correctly by the user.
+             * It might be that to simplify this we may want to accept that user-set scale is also corrected
+             * and we wouldn't have to keep and calc both deltas, OR we could support a user setting
+             * to allow people to choose whether these styles are corrected based on just the
+             * layout reprojection or the final bounding box.
+             */
+            calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
+            this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale);
+            if (this.projectionTransform !== prevProjectionTransform ||
+                this.treeScale.x !== prevTreeScaleX ||
+                this.treeScale.y !== prevTreeScaleY) {
+                this.hasProjected = true;
+                this.scheduleRender();
+            }
+        };
+        ProjectionNode.prototype.hide = function () {
+            this.isVisible = false;
+            // TODO: Schedule render
+        };
+        ProjectionNode.prototype.show = function () {
+            this.isVisible = true;
+            // TODO: Schedule render
+        };
+        ProjectionNode.prototype.scheduleRender = function (notifyAll) {
+            var _a, _b, _c;
+            if (notifyAll === void 0) { notifyAll = true; }
+            (_b = (_a = this.options).scheduleRender) === null || _b === void 0 ? void 0 : _b.call(_a);
+            notifyAll && ((_c = this.getStack()) === null || _c === void 0 ? void 0 : _c.scheduleRender());
+            if (this.resumingFrom && !this.resumingFrom.instance) {
+                this.resumingFrom = undefined;
+            }
+        };
+        ProjectionNode.prototype.setAnimationOrigin = function (delta, hasOnlyRelativeTargetChanged) {
+            var _this = this;
+            var _a;
+            if (hasOnlyRelativeTargetChanged === void 0) { hasOnlyRelativeTargetChanged = false; }
+            var snapshot = this.snapshot;
+            var snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
+            var mixedValues = tslib.__assign({}, this.latestValues);
+            var targetDelta = createDelta();
+            this.relativeTarget = this.relativeTargetOrigin = undefined;
+            this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
+            var relativeLayout = createBox();
+            var isSharedLayoutAnimation = snapshot === null || snapshot === void 0 ? void 0 : snapshot.isShared;
+            var isOnlyMember = (((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.members.length) || 0) <= 1;
+            var shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
+                !isOnlyMember &&
+                this.options.crossfade === true &&
+                !this.path.some(hasOpacityCrossfade));
+            this.mixTargetDelta = function (latest) {
+                var _a;
+                var progress = latest / 1000;
+                mixAxisDelta(targetDelta.x, delta.x, progress);
+                mixAxisDelta(targetDelta.y, delta.y, progress);
+                _this.setTargetDelta(targetDelta);
+                if (_this.relativeTarget &&
+                    _this.relativeTargetOrigin &&
+                    _this.layout &&
+                    ((_a = _this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
+                    calcRelativePosition(relativeLayout, _this.layout.actual, _this.relativeParent.layout.actual);
+                    mixBox(_this.relativeTarget, _this.relativeTargetOrigin, relativeLayout, progress);
+                }
+                if (isSharedLayoutAnimation) {
+                    _this.animationValues = mixedValues;
+                    mixValues(mixedValues, snapshotLatestValues, _this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
+                }
+                _this.root.scheduleUpdateProjection();
+                _this.scheduleRender();
+            };
+            this.mixTargetDelta(0);
+        };
+        ProjectionNode.prototype.startAnimation = function (options) {
+            var _this = this;
+            var _a, _b;
+            (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
+            if (this.resumingFrom) {
+                (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop();
+            }
+            if (this.pendingAnimation) {
+                sync.cancelSync.update(this.pendingAnimation);
+                this.pendingAnimation = undefined;
+            }
+            /**
+             * Start the animation in the next frame to have a frame with progress 0,
+             * where the target is the same as when the animation started, so we can
+             * calculate the relative positions correctly for instant transitions.
+             */
+            this.pendingAnimation = sync__default["default"].update(function () {
+                globalProjectionState.hasAnimatedSinceResize = true;
+                _this.currentAnimation = animate(0, animationTarget, tslib.__assign(tslib.__assign({}, options), { onUpdate: function (latest) {
+                        var _a;
+                        _this.mixTargetDelta(latest);
+                        (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, latest);
+                    }, onComplete: function () {
+                        var _a;
+                        (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
+                        _this.completeAnimation();
+                    } }));
+                if (_this.resumingFrom) {
+                    _this.resumingFrom.currentAnimation = _this.currentAnimation;
+                }
+                _this.pendingAnimation = undefined;
+            });
+        };
+        ProjectionNode.prototype.completeAnimation = function () {
+            var _a;
+            if (this.resumingFrom) {
+                this.resumingFrom.currentAnimation = undefined;
+                this.resumingFrom.preserveOpacity = undefined;
+            }
+            (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.exitAnimationComplete();
+            this.resumingFrom =
+                this.currentAnimation =
+                    this.animationValues =
+                        undefined;
+        };
+        ProjectionNode.prototype.finishAnimation = function () {
+            var _a;
+            if (this.currentAnimation) {
+                (_a = this.mixTargetDelta) === null || _a === void 0 ? void 0 : _a.call(this, animationTarget);
+                this.currentAnimation.stop();
+            }
+            this.completeAnimation();
+        };
+        ProjectionNode.prototype.applyTransformsToTarget = function () {
+            var _a = this.getLead(), targetWithTransforms = _a.targetWithTransforms, target = _a.target, layout = _a.layout, latestValues = _a.latestValues;
+            if (!targetWithTransforms || !target || !layout)
+                return;
+            copyBoxInto(targetWithTransforms, target);
+            /**
+             * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
+             * This is the final box that we will then project into by calculating a transform delta and
+             * applying it to the corrected box.
+             */
+            transformBox(targetWithTransforms, latestValues);
+            /**
+             * Update the delta between the corrected box and the final target box, after
+             * user-set transforms are applied to it. This will be used by the renderer to
+             * create a transform style that will reproject the element from its actual layout
+             * into the desired bounding box.
+             */
+            calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
+        };
+        ProjectionNode.prototype.registerSharedNode = function (layoutId, node) {
+            var _a, _b, _c;
+            if (!this.sharedNodes.has(layoutId)) {
+                this.sharedNodes.set(layoutId, new NodeStack());
+            }
+            var stack = this.sharedNodes.get(layoutId);
+            stack.add(node);
+            node.promote({
+                transition: (_a = node.options.initialPromotionConfig) === null || _a === void 0 ? void 0 : _a.transition,
+                preserveFollowOpacity: (_c = (_b = node.options.initialPromotionConfig) === null || _b === void 0 ? void 0 : _b.shouldPreserveFollowOpacity) === null || _c === void 0 ? void 0 : _c.call(_b, node),
+            });
+        };
+        ProjectionNode.prototype.isLead = function () {
+            var stack = this.getStack();
+            return stack ? stack.lead === this : true;
+        };
+        ProjectionNode.prototype.getLead = function () {
+            var _a;
+            var layoutId = this.options.layoutId;
+            return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
+        };
+        ProjectionNode.prototype.getPrevLead = function () {
+            var _a;
+            var layoutId = this.options.layoutId;
+            return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
+        };
+        ProjectionNode.prototype.getStack = function () {
+            var layoutId = this.options.layoutId;
+            if (layoutId)
+                return this.root.sharedNodes.get(layoutId);
+        };
+        ProjectionNode.prototype.promote = function (_a) {
+            var _b = _a === void 0 ? {} : _a, needsReset = _b.needsReset, transition = _b.transition, preserveFollowOpacity = _b.preserveFollowOpacity;
+            var stack = this.getStack();
+            if (stack)
+                stack.promote(this, preserveFollowOpacity);
+            if (needsReset) {
+                this.projectionDelta = undefined;
+                this.needsReset = true;
+            }
+            if (transition)
+                this.setOptions({ transition: transition });
+        };
+        ProjectionNode.prototype.relegate = function () {
+            var stack = this.getStack();
+            if (stack) {
+                return stack.relegate(this);
+            }
+            else {
+                return false;
+            }
+        };
+        ProjectionNode.prototype.resetRotation = function () {
+            var visualElement = this.options.visualElement;
+            if (!visualElement)
+                return;
+            // If there's no detected rotation values, we can early return without a forced render.
+            var hasRotate = false;
+            // Keep a record of all the values we've reset
+            var resetValues = {};
+            // Check the rotate value of all axes and reset to 0
+            for (var i = 0; i < transformAxes.length; i++) {
+                var axis = transformAxes[i];
+                var key = "rotate" + axis;
+                // If this rotation doesn't exist as a motion value, then we don't
+                // need to reset it
+                if (!visualElement.getStaticValue(key)) {
+                    continue;
+                }
+                hasRotate = true;
+                // Record the rotation and then temporarily set it to 0
+                resetValues[key] = visualElement.getStaticValue(key);
+                visualElement.setStaticValue(key, 0);
+            }
+            // If there's no rotation values, we don't need to do any more.
+            if (!hasRotate)
+                return;
+            // Force a render of this element to apply the transform with all rotations
+            // set to 0.
+            visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
+            // Put back all the values we reset
+            for (var key in resetValues) {
+                visualElement.setStaticValue(key, resetValues[key]);
+            }
+            // Schedule a render for the next frame. This ensures we won't visually
+            // see the element with the reset rotate value applied.
+            visualElement.scheduleRender();
+        };
+        ProjectionNode.prototype.getProjectionStyles = function (styleProp) {
+            var _a, _b, _c, _d, _e, _f;
+            if (styleProp === void 0) { styleProp = {}; }
+            // TODO: Return lifecycle-persistent object
+            var styles = {};
+            if (!this.instance || this.isSVG)
+                return styles;
+            if (!this.isVisible) {
+                return { visibility: "hidden" };
+            }
+            else {
+                styles.visibility = "";
+            }
+            var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+            if (this.needsReset) {
+                this.needsReset = false;
+                styles.opacity = "";
+                styles.pointerEvents =
+                    resolveMotionValue(styleProp.pointerEvents) || "";
+                styles.transform = transformTemplate
+                    ? transformTemplate(this.latestValues, "")
+                    : "none";
+                return styles;
+            }
+            var lead = this.getLead();
+            if (!this.projectionDelta || !this.layout || !lead.target) {
+                var emptyStyles = {};
+                if (this.options.layoutId) {
+                    emptyStyles.opacity = (_b = this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1;
+                    emptyStyles.pointerEvents =
+                        resolveMotionValue(styleProp.pointerEvents) || "";
+                }
+                if (this.hasProjected && !hasTransform(this.latestValues)) {
+                    emptyStyles.transform = transformTemplate
+                        ? transformTemplate({}, "")
+                        : "none";
+                    this.hasProjected = false;
+                }
+                return emptyStyles;
+            }
+            var valuesToRender = lead.animationValues || lead.latestValues;
+            this.applyTransformsToTarget();
+            styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
+            if (transformTemplate) {
+                styles.transform = transformTemplate(valuesToRender, styles.transform);
+            }
+            var _g = this.projectionDelta, x = _g.x, y = _g.y;
+            styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
+            if (lead.animationValues) {
+                /**
+                 * If the lead component is animating, assign this either the entering/leaving
+                 * opacity
+                 */
+                styles.opacity =
+                    lead === this
+                        ? (_d = (_c = valuesToRender.opacity) !== null && _c !== void 0 ? _c : this.latestValues.opacity) !== null && _d !== void 0 ? _d : 1
+                        : this.preserveOpacity
+                            ? this.latestValues.opacity
+                            : valuesToRender.opacityExit;
+            }
+            else {
+                /**
+                 * Or we're not animating at all, set the lead component to its actual
+                 * opacity and other components to hidden.
+                 */
+                styles.opacity =
+                    lead === this
+                        ? (_e = valuesToRender.opacity) !== null && _e !== void 0 ? _e : ""
+                        : (_f = valuesToRender.opacityExit) !== null && _f !== void 0 ? _f : 0;
+            }
+            /**
+             * Apply scale correction
+             */
+            for (var key in scaleCorrectors) {
+                if (valuesToRender[key] === undefined)
+                    continue;
+                var _h = scaleCorrectors[key], correct = _h.correct, applyTo = _h.applyTo;
+                var corrected = correct(valuesToRender[key], lead);
+                if (applyTo) {
+                    var num = applyTo.length;
+                    for (var i = 0; i < num; i++) {
+                        styles[applyTo[i]] = corrected;
+                    }
+                }
+                else {
+                    styles[key] = corrected;
+                }
+            }
+            /**
+             * Disable pointer events on follow components. This is to ensure
+             * that if a follow component covers a lead component it doesn't block
+             * pointer events on the lead.
+             */
+            if (this.options.layoutId) {
+                styles.pointerEvents =
+                    lead === this
+                        ? resolveMotionValue(styleProp.pointerEvents) || ""
+                        : "none";
+            }
+            return styles;
+        };
+        ProjectionNode.prototype.clearSnapshot = function () {
+            this.resumeFrom = this.snapshot = undefined;
+        };
+        // Only run on root
+        ProjectionNode.prototype.resetTree = function () {
+            this.root.nodes.forEach(function (node) { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
+            this.root.nodes.forEach(clearMeasurements);
+            this.root.sharedNodes.clear();
+        };
+        return ProjectionNode;
+    }());
+}
+function updateLayout(node) {
+    node.updateLayout();
+}
+function notifyLayoutUpdate(node) {
+    var _a, _b, _c, _d;
+    var snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
+    if (node.isLead() &&
+        node.layout &&
+        snapshot &&
+        node.hasListeners("didUpdate")) {
+        var _e = node.layout, layout_1 = _e.actual, measuredLayout = _e.measured;
+        // TODO Maybe we want to also resize the layout snapshot so we don't trigger
+        // animations for instance if layout="size" and an element has only changed position
+        if (node.options.animationType === "size") {
+            eachAxis(function (axis) {
+                var axisSnapshot = snapshot.isShared
+                    ? snapshot.measured[axis]
+                    : snapshot.layout[axis];
+                var length = calcLength(axisSnapshot);
+                axisSnapshot.min = layout_1[axis].min;
+                axisSnapshot.max = axisSnapshot.min + length;
+            });
+        }
+        else if (node.options.animationType === "position") {
+            eachAxis(function (axis) {
+                var axisSnapshot = snapshot.isShared
+                    ? snapshot.measured[axis]
+                    : snapshot.layout[axis];
+                var length = calcLength(layout_1[axis]);
+                axisSnapshot.max = axisSnapshot.min + length;
+            });
+        }
+        var layoutDelta = createDelta();
+        calcBoxDelta(layoutDelta, layout_1, snapshot.layout);
+        var visualDelta = createDelta();
+        if (snapshot.isShared) {
+            calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured);
+        }
+        else {
+            calcBoxDelta(visualDelta, layout_1, snapshot.layout);
+        }
+        var hasLayoutChanged = !isDeltaZero(layoutDelta);
+        var hasRelativeTargetChanged = false;
+        if (!node.resumeFrom) {
+            node.relativeParent = node.getClosestProjectingParent();
+            /**
+             * If the relativeParent is itself resuming from a different element then
+             * the relative snapshot is not relavent
+             */
+            if (node.relativeParent && !node.relativeParent.resumeFrom) {
+                var _f = node.relativeParent, parentSnapshot = _f.snapshot, parentLayout = _f.layout;
+                if (parentSnapshot && parentLayout) {
+                    var relativeSnapshot = createBox();
+                    calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
+                    var relativeLayout = createBox();
+                    calcRelativePosition(relativeLayout, layout_1, parentLayout.actual);
+                    if (!boxEquals(relativeSnapshot, relativeLayout)) {
+                        hasRelativeTargetChanged = true;
+                    }
+                }
+            }
+        }
+        node.notifyListeners("didUpdate", {
+            layout: layout_1,
+            snapshot: snapshot,
+            delta: visualDelta,
+            layoutDelta: layoutDelta,
+            hasLayoutChanged: hasLayoutChanged,
+            hasRelativeTargetChanged: hasRelativeTargetChanged,
+        });
     }
-    return true;
+    else if (node.isLead()) {
+        (_d = (_c = node.options).onExitComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
+    /**
+     * Clearing transition
+     * TODO: Investigate why this transition is being passed in as {type: false } from Framer
+     * and why we need it at all
+     */
+    node.options.transition = undefined;
 }
-
-/**
- * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
- */
-var isNumericalString = function (v) { return /^\-?\d*\.?\d+$/.test(v); };
-
-/**
- * Check if the value is a zero value string like "0px" or "0%"
- */
-var isZeroValueString = function (v) { return /^0[^.\s]+$/.test(v); };
-
-/**
- * Tests a provided value against a ValueType
- */
-var testValueType = function (v) { return function (type) { return type.test(v); }; };
-
-/**
- * ValueType for "auto"
- */
-var auto = {
-    test: function (v) { return v === "auto"; },
-    parse: function (v) { return v; },
+function clearSnapshot(node) {
+    node.clearSnapshot();
+}
+function clearMeasurements(node) {
+    node.clearMeasurements();
+}
+function resetTransformStyle(node) {
+    node.resetTransform();
+}
+function finishAnimation(node) {
+    node.finishAnimation();
+    node.targetDelta = node.relativeTarget = node.target = undefined;
+}
+function resolveTargetDelta(node) {
+    node.resolveTargetDelta();
+}
+function calcProjection(node) {
+    node.calcProjection();
+}
+function resetRotation(node) {
+    node.resetRotation();
+}
+function removeLeadSnapshots(stack) {
+    stack.removeLeadSnapshot();
+}
+function mixAxisDelta(output, delta, p) {
+    output.translate = popmotion.mix(delta.translate, 0, p);
+    output.scale = popmotion.mix(delta.scale, 1, p);
+    output.origin = delta.origin;
+    output.originPoint = delta.originPoint;
+}
+function mixAxis(output, from, to, p) {
+    output.min = popmotion.mix(from.min, to.min, p);
+    output.max = popmotion.mix(from.max, to.max, p);
+}
+function mixBox(output, from, to, p) {
+    mixAxis(output.x, from.x, to.x, p);
+    mixAxis(output.y, from.y, to.y, p);
+}
+function hasOpacityCrossfade(node) {
+    return (node.animationValues && node.animationValues.opacityExit !== undefined);
+}
+var defaultLayoutTransition = {
+    duration: 0.45,
+    ease: [0.4, 0, 0.1, 1],
 };
+function mountNodeEarly(node, id) {
+    /**
+     * Rather than searching the DOM from document we can search the
+     * path for the deepest mounted ancestor and search from there
+     */
+    var searchNode = node.root;
+    for (var i = node.path.length - 1; i >= 0; i--) {
+        if (Boolean(node.path[i].instance)) {
+            searchNode = node.path[i];
+            break;
+        }
+    }
+    var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
+    var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
+    if (element)
+        node.mount(element, true);
+}
+function roundAxis(axis) {
+    axis.min = Math.round(axis.min);
+    axis.max = Math.round(axis.max);
+}
+function roundBox(box) {
+    roundAxis(box.x);
+    roundAxis(box.y);
+}
 
-/**
- * A list of value types commonly used for dimensions
- */
-var dimensionValueTypes = [styleValueTypes.number, styleValueTypes.px, styleValueTypes.percent, styleValueTypes.degrees, styleValueTypes.vw, styleValueTypes.vh, auto];
+var id = 1;
+function useProjectionId() {
+    return useConstant(function () {
+        if (globalProjectionState.hasEverUpdated) {
+            return id++;
+        }
+    });
+}
 
 /**
- * A list of all ValueTypes
- */
-var valueTypes = tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(dimensionValueTypes), false), [styleValueTypes.color, styleValueTypes.complex], false);
-/**
- * Tests a value against the list of ValueTypes
+ * @internal
  */
-var findValueType = function (v) { return valueTypes.find(testValueType(v)); };
+var LayoutGroupContext = React.createContext({});
 
 /**
- * Set VisualElement's MotionValue, creating a new MotionValue for it if
- * it doesn't exist.
+ * @internal
  */
-function setMotionValue(visualElement, key, value) {
-    if (visualElement.hasValue(key)) {
-        visualElement.getValue(key).set(value);
-    }
-    else {
-        visualElement.addValue(key, motionValue(value));
-    }
-}
-function setTarget(visualElement, definition) {
-    var resolved = resolveVariant(visualElement, definition);
-    var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = tslib.__rest(_a, ["transitionEnd", "transition"]);
-    target = tslib.__assign(tslib.__assign({}, target), transitionEnd);
-    for (var key in target) {
-        var value = resolveFinalValueInKeyframes(target[key]);
-        setMotionValue(visualElement, key, value);
-    }
-}
-function checkTargetForNewValues(visualElement, target, origin) {
-    var _a, _b, _c;
-    var _d;
-    var newValueKeys = Object.keys(target).filter(function (key) { return !visualElement.hasValue(key); });
-    var numNewValues = newValueKeys.length;
-    if (!numNewValues)
+var SwitchLayoutGroupContext = React.createContext({});
+
+function useProjection(projectionId, _a, visualElement, ProjectionNodeConstructor) {
+    var _b;
+    var layoutId = _a.layoutId, layout = _a.layout, drag = _a.drag, dragConstraints = _a.dragConstraints, layoutScroll = _a.layoutScroll;
+    var initialPromotionConfig = React.useContext(SwitchLayoutGroupContext);
+    if (!ProjectionNodeConstructor ||
+        !visualElement ||
+        (visualElement === null || visualElement === void 0 ? void 0 : visualElement.projection)) {
         return;
-    for (var i = 0; i < numNewValues; i++) {
-        var key = newValueKeys[i];
-        var targetValue = target[key];
-        var value = null;
-        /**
-         * If the target is a series of keyframes, we can use the first value
-         * in the array. If this first value is null, we'll still need to read from the DOM.
-         */
-        if (Array.isArray(targetValue)) {
-            value = targetValue[0];
-        }
-        /**
-         * If the target isn't keyframes, or the first keyframe was null, we need to
-         * first check if an origin value was explicitly defined in the transition as "from",
-         * if not read the value from the DOM. As an absolute fallback, take the defined target value.
-         */
-        if (value === null) {
-            value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
-        }
+    }
+    visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_b = visualElement.parent) === null || _b === void 0 ? void 0 : _b.projection);
+    visualElement.projection.setOptions({
+        layoutId: layoutId,
+        layout: layout,
+        alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
+        visualElement: visualElement,
+        scheduleRender: function () { return visualElement.scheduleRender(); },
         /**
-         * If value is still undefined or null, ignore it. Preferably this would throw,
-         * but this was causing issues in Framer.
+         * TODO: Update options in an effect. This could be tricky as it'll be too late
+         * to update by the time layout animations run.
+         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+         * ensuring it gets called if there's no potential layout animations.
+         *
          */
-        if (value === undefined || value === null)
-            continue;
-        if (typeof value === "string" &&
-            (isNumericalString(value) || isZeroValueString(value))) {
-            // If this is a number read as a string, ie "0" or "200", convert it to a number
-            value = parseFloat(value);
-        }
-        else if (!findValueType(value) && styleValueTypes.complex.test(targetValue)) {
-            value = getAnimatableNone(key, targetValue);
-        }
-        visualElement.addValue(key, motionValue(value));
-        (_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : (_d[key] = value);
-        visualElement.setBaseTarget(key, value);
-    }
-}
-
-/**
- * @internal
- */
-function animateVisualElement(visualElement, definition, options) {
-    if (options === void 0) { options = {}; }
-    visualElement.notifyAnimationStart(definition);
-    var animation;
-    if (Array.isArray(definition)) {
-        var animations = definition.map(function (variant) {
-            return animateVariant(visualElement, variant, options);
-        });
-        animation = Promise.all(animations);
-    }
-    else if (typeof definition === "string") {
-        animation = animateVariant(visualElement, definition, options);
-    }
-    else {
-        var resolvedDefinition = typeof definition === "function"
-            ? resolveVariant(visualElement, definition, options.custom)
-            : definition;
-        animation = animateTarget(visualElement, resolvedDefinition, options);
-    }
-    return animation.then(function () {
-        return visualElement.notifyAnimationComplete(definition);
+        animationType: typeof layout === "string" ? layout : "both",
+        initialPromotionConfig: initialPromotionConfig,
+        layoutScroll: layoutScroll,
     });
 }
-function animateVariant(visualElement, variant, options) {
-    var _a;
-    if (options === void 0) { options = {}; }
-    var resolved = resolveVariant(visualElement, variant, options.custom);
-    var _b = (resolved || {}).transition, transition = _b === void 0 ? visualElement.getDefaultTransition() || {} : _b;
-    if (options.transitionOverride) {
-        transition = options.transitionOverride;
+
+var VisualElementHandler = /** @class */ (function (_super) {
+    tslib.__extends(VisualElementHandler, _super);
+    function VisualElementHandler() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     /**
-     * If we have a variant, create a callback that runs it as an animation.
-     * Otherwise, we resolve a Promise immediately for a composable no-op.
-     */
-    var getAnimation = resolved
-        ? function () { return animateTarget(visualElement, resolved, options); }
-        : function () { return Promise.resolve(); };
-    /**
-     * If we have children, create a callback that runs all their animations.
-     * Otherwise, we resolve a Promise immediately for a composable no-op.
-     */
-    var getChildAnimations = ((_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.size)
-        ? function (forwardDelay) {
-            if (forwardDelay === void 0) { forwardDelay = 0; }
-            var _a = transition.delayChildren, delayChildren = _a === void 0 ? 0 : _a, staggerChildren = transition.staggerChildren, staggerDirection = transition.staggerDirection;
-            return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
-        }
-        : function () { return Promise.resolve(); };
-    /**
-     * If the transition explicitly defines a "when" option, we need to resolve either
-     * this animation or all children animations before playing the other.
+     * Update visual element props as soon as we know this update is going to be commited.
      */
-    var when = transition.when;
-    if (when) {
-        var _c = tslib.__read(when === "beforeChildren"
-            ? [getAnimation, getChildAnimations]
-            : [getChildAnimations, getAnimation], 2), first = _c[0], last = _c[1];
-        return first().then(last);
-    }
-    else {
-        return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
-    }
-}
+    VisualElementHandler.prototype.getSnapshotBeforeUpdate = function () {
+        this.updateProps();
+        return null;
+    };
+    VisualElementHandler.prototype.componentDidUpdate = function () { };
+    VisualElementHandler.prototype.updateProps = function () {
+        var _a = this.props, visualElement = _a.visualElement, props = _a.props;
+        if (visualElement)
+            visualElement.setProps(props);
+    };
+    VisualElementHandler.prototype.render = function () {
+        return this.props.children;
+    };
+    return VisualElementHandler;
+}(React__default["default"].Component));
+
 /**
+ * Create a `motion` component.
+ *
+ * This function accepts a Component argument, which can be either a string (ie "div"
+ * for `motion.div`), or an actual React component.
+ *
+ * Alongside this is a config option which provides a way of rendering the provided
+ * component "offline", or outside the React render cycle.
+ *
  * @internal
  */
-function animateTarget(visualElement, definition, _a) {
-    var _b;
-    var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
-    var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = tslib.__rest(_e, ["transition", "transitionEnd"]);
-    if (transitionOverride)
-        transition = transitionOverride;
-    var animations = [];
-    var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);
-    for (var key in target) {
-        var value = visualElement.getValue(key);
-        var valueTarget = target[key];
-        if (!value ||
-            valueTarget === undefined ||
-            (animationTypeState &&
-                shouldBlockAnimation(animationTypeState, key))) {
-            continue;
+function createMotionComponent(_a) {
+    var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;
+    preloadedFeatures && loadFeatures(preloadedFeatures);
+    function MotionComponent(props, externalRef) {
+        var layoutId = useLayoutId(props);
+        props = tslib.__assign(tslib.__assign({}, props), { layoutId: layoutId });
+        /**
+         * If we're rendering in a static environment, we only visually update the component
+         * as a result of a React-rerender rather than interactions or animations. This
+         * means we don't need to load additional memory structures like VisualElement,
+         * or any gesture/animation features.
+         */
+        var config = React.useContext(MotionConfigContext);
+        var features = null;
+        var context = useCreateMotionContext(props);
+        /**
+         * Create a unique projection ID for this component. If a new component is added
+         * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing
+         * us to measure it as soon as any layout effect flushes pending layout animations.
+         *
+         * Performance note: It'd be better not to have to search the DOM for these elements.
+         * For newly-entering components it could be enough to only correct treeScale, in which
+         * case we could mount in a scale-correction mode. This wouldn't be enough for
+         * shared element transitions however. Perhaps for those we could revert to a root node
+         * that gets forceRendered and layout animations are triggered on its layout effect.
+         */
+        var projectionId = useProjectionId();
+        /**
+         *
+         */
+        var visualState = useVisualState(props, config.isStatic);
+        if (!config.isStatic && isBrowser) {
+            /**
+             * Create a VisualElement for this component. A VisualElement provides a common
+             * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
+             * providing a way of rendering to these APIs outside of the React render loop
+             * for more performant animations and interactions
+             */
+            context.visualElement = useVisualElement(Component, visualState, tslib.__assign(tslib.__assign({}, config), props), createVisualElement);
+            useProjection(projectionId, props, context.visualElement, projectionNodeConstructor ||
+                featureDefinitions.projectionNodeConstructor);
+            /**
+             * Load Motion gesture and animation features. These are rendered as renderless
+             * components so each feature can optionally make use of React lifecycle methods.
+             */
+            features = useFeatures(props, context.visualElement, preloadedFeatures);
         }
-        var animation = startAnimation(key, value, valueTarget, tslib.__assign({ delay: delay }, transition));
-        animations.push(animation);
+        /**
+         * The mount order and hierarchy is specific to ensure our element ref
+         * is hydrated by the time features fire their effects.
+         */
+        return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: tslib.__assign(tslib.__assign({}, config), props) },
+            features,
+            React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
     }
-    return Promise.all(animations).then(function () {
-        transitionEnd && setTarget(visualElement, transitionEnd);
-    });
-}
-function animateChildren(visualElement, variant, delayChildren, staggerChildren, staggerDirection, options) {
-    if (delayChildren === void 0) { delayChildren = 0; }
-    if (staggerChildren === void 0) { staggerChildren = 0; }
-    if (staggerDirection === void 0) { staggerDirection = 1; }
-    var animations = [];
-    var maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
-    var generateStaggerDuration = staggerDirection === 1
-        ? function (i) {
-            if (i === void 0) { i = 0; }
-            return i * staggerChildren;
-        }
-        : function (i) {
-            if (i === void 0) { i = 0; }
-            return maxStaggerDuration - i * staggerChildren;
-        };
-    Array.from(visualElement.variantChildren)
-        .sort(sortByTreeOrder)
-        .forEach(function (child, i) {
-        animations.push(animateVariant(child, variant, tslib.__assign(tslib.__assign({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function () { return child.notifyAnimationComplete(variant); }));
-    });
-    return Promise.all(animations);
+    return React.forwardRef(MotionComponent);
 }
-function sortByTreeOrder(a, b) {
-    return a.sortNodePosition(b);
+function useLayoutId(_a) {
+    var _b;
+    var layoutId = _a.layoutId;
+    var layoutGroupId = (_b = React.useContext(LayoutGroupContext)) === null || _b === void 0 ? void 0 : _b.id;
+    return layoutGroupId && layoutId !== undefined
+        ? layoutGroupId + "-" + layoutId
+        : layoutId;
 }
+
 /**
- * Decide whether we should block this animation. Previously, we achieved this
- * just by checking whether the key was listed in protectedKeys, but this
- * posed problems if an animation was triggered by afterChildren and protectedKeys
- * had been set to true in the meantime.
- */
-function shouldBlockAnimation(_a, key) {
-    var protectedKeys = _a.protectedKeys, needsAnimating = _a.needsAnimating;
-    var shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
-    needsAnimating[key] = false;
-    return shouldBlock;
+ * A list of all valid MotionProps.
+ *
+ * @internalremarks
+ * This doesn't throw if a `MotionProp` name is missing - it should.
+ */
+var validMotionProps = new Set([
+    "initial",
+    "animate",
+    "exit",
+    "style",
+    "variants",
+    "transition",
+    "transformTemplate",
+    "transformValues",
+    "custom",
+    "inherit",
+    "layout",
+    "layoutId",
+    "layoutDependency",
+    "onLayoutAnimationComplete",
+    "onLayoutMeasure",
+    "onBeforeLayoutMeasure",
+    "onAnimationStart",
+    "onAnimationComplete",
+    "onUpdate",
+    "onDragStart",
+    "onDrag",
+    "onDragEnd",
+    "onMeasureDragConstraints",
+    "onDirectionLock",
+    "onDragTransitionEnd",
+    "drag",
+    "dragControls",
+    "dragListener",
+    "dragConstraints",
+    "dragDirectionLock",
+    "dragSnapToOrigin",
+    "_dragX",
+    "_dragY",
+    "dragElastic",
+    "dragMomentum",
+    "dragPropagation",
+    "dragTransition",
+    "whileDrag",
+    "onPan",
+    "onPanStart",
+    "onPanEnd",
+    "onPanSessionStart",
+    "onTap",
+    "onTapStart",
+    "onTapCancel",
+    "onHoverStart",
+    "onHoverEnd",
+    "whileFocus",
+    "whileTap",
+    "whileHover",
+    "whileInView",
+    "onViewportEnter",
+    "onViewportLeave",
+    "viewport",
+    "layoutScroll",
+]);
+/**
+ * Check whether a prop name is a valid `MotionProp` key.
+ *
+ * @param key - Name of the property to check
+ * @returns `true` is key is a valid `MotionProp`.
+ *
+ * @public
+ */
+function isValidMotionProp(key) {
+    return validMotionProps.has(key);
+}
+
+var shouldForward = function (key) { return !isValidMotionProp(key); };
+/**
+ * Emotion and Styled Components both allow users to pass through arbitrary props to their components
+ * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
+ * of these should be passed to the underlying DOM node.
+ *
+ * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
+ * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
+ * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
+ * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
+ *
+ * By making it an optionalDependency we can offer this functionality only in the situations where it's
+ * actually required.
+ */
+try {
+    var emotionIsPropValid_1 = require("@emotion/is-prop-valid").default;
+    shouldForward = function (key) {
+        // Handle events explicitly as Emotion validates them all as true
+        if (key.startsWith("on")) {
+            return !isValidMotionProp(key);
+        }
+        else {
+            return emotionIsPropValid_1(key);
+        }
+    };
+}
+catch (_a) {
+    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+}
+function filterProps(props, isDom, forwardMotionProps) {
+    var filteredProps = {};
+    for (var key in props) {
+        if (shouldForward(key) ||
+            (forwardMotionProps === true && isValidMotionProp(key)) ||
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] && key.startsWith("onDrag"))) {
+            filteredProps[key] = props[key];
+        }
+    }
+    return filteredProps;
+}
+
+function isAnimationControls(v) {
+    return typeof v === "object" && typeof v.start === "function";
+}
+
+function makeState(_a, props, context, presenceContext) {
+    var scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps, createRenderState = _a.createRenderState, onMount = _a.onMount;
+    var state = {
+        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
+        renderState: createRenderState(),
+    };
+    if (onMount) {
+        state.mount = function (instance) { return onMount(props, instance, state); };
+    }
+    return state;
+}
+var makeUseVisualState = function (config) {
+    return function (props, isStatic) {
+        var context = React.useContext(MotionContext);
+        var presenceContext = React.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;
+    var motionValues = scrapeMotionValues(props);
+    for (var key in motionValues) {
+        values[key] = resolveMotionValue(motionValues[key]);
+    }
+    var initial = props.initial, animate = props.animate;
+    var isControllingVariants = checkIfControllingVariants(props);
+    var isVariantNode = checkIfVariantNode(props);
+    if (context &&
+        isVariantNode &&
+        !isControllingVariants &&
+        props.inherit !== false) {
+        initial !== null && initial !== void 0 ? initial : (initial = context.initial);
+        animate !== null && animate !== void 0 ? animate : (animate = context.animate);
+    }
+    var initialAnimationIsBlocked = blockInitialAnimation || initial === false;
+    var variantToSet = initialAnimationIsBlocked ? animate : initial;
+    if (variantToSet &&
+        typeof variantToSet !== "boolean" &&
+        !isAnimationControls(variantToSet)) {
+        var list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+        list.forEach(function (definition) {
+            var resolved = resolveVariantFromProps(props, definition);
+            if (!resolved)
+                return;
+            var transitionEnd = resolved.transitionEnd; resolved.transition; var target = tslib.__rest(resolved, ["transitionEnd", "transition"]);
+            for (var key in target) {
+                var valueTarget = target[key];
+                if (Array.isArray(valueTarget)) {
+                    /**
+                     * Take final keyframe if the initial animation is blocked because
+                     * we want to initialise at the end of that blocked animation.
+                     */
+                    var index = initialAnimationIsBlocked
+                        ? valueTarget.length - 1
+                        : 0;
+                    valueTarget = valueTarget[index];
+                }
+                if (valueTarget !== null) {
+                    values[key] = valueTarget;
+                }
+            }
+            for (var key in transitionEnd)
+                values[key] = transitionEnd[key];
+        });
+    }
+    return values;
 }
 
-var AnimationType;
+exports.AnimationType = void 0;
 (function (AnimationType) {
     AnimationType["Animate"] = "animate";
     AnimationType["Hover"] = "whileHover";
@@ -1582,785 +3225,923 @@ var AnimationType;
     AnimationType["Focus"] = "whileFocus";
     AnimationType["InView"] = "whileInView";
     AnimationType["Exit"] = "exit";
-})(AnimationType || (AnimationType = {}));
+})(exports.AnimationType || (exports.AnimationType = {}));
 
-var variantPriorityOrder = [
-    AnimationType.Animate,
-    AnimationType.InView,
-    AnimationType.Focus,
-    AnimationType.Hover,
-    AnimationType.Tap,
-    AnimationType.Drag,
-    AnimationType.Exit,
-];
-var reversePriorityOrder = tslib.__spreadArray([], tslib.__read(variantPriorityOrder), false).reverse();
-var numAnimationTypes = variantPriorityOrder.length;
-function animateList(visualElement) {
-    return function (animations) {
-        return Promise.all(animations.map(function (_a) {
-            var animation = _a.animation, options = _a.options;
-            return animateVisualElement(visualElement, animation, options);
-        }));
-    };
+function addDomEvent(target, eventName, handler, options) {
+    target.addEventListener(eventName, handler, options);
+    return function () { return target.removeEventListener(eventName, handler, options); };
 }
-function createAnimationState(visualElement) {
-    var animate = animateList(visualElement);
-    var state = createState();
-    var allAnimatedKeys = {};
-    var isInitialRender = true;
-    /**
-     * This function will be used to reduce the animation definitions for
-     * each active animation type into an object of resolved values for it.
-     */
-    var buildResolvedTypeValues = function (acc, definition) {
-        var resolved = resolveVariant(visualElement, definition);
-        if (resolved) {
-            resolved.transition; var transitionEnd = resolved.transitionEnd, target = tslib.__rest(resolved, ["transition", "transitionEnd"]);
-            acc = tslib.__assign(tslib.__assign(tslib.__assign({}, acc), target), transitionEnd);
+/**
+ * Attaches an event listener directly to the provided DOM element.
+ *
+ * Bypassing React's event system can be desirable, for instance when attaching non-passive
+ * event handlers.
+ *
+ * ```jsx
+ * const ref = useRef(null)
+ *
+ * useDomEvent(ref, 'wheel', onWheel, { passive: false })
+ *
+ * return <div ref={ref} />
+ * ```
+ *
+ * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
+ * @param eventName - Name of the event you want listen for.
+ * @param handler - Function to fire when receiving the event.
+ * @param options - Options to pass to `Event.addEventListener`.
+ *
+ * @public
+ */
+function useDomEvent(ref, eventName, handler, options) {
+    React.useEffect(function () {
+        var element = ref.current;
+        if (handler && element) {
+            return addDomEvent(element, eventName, handler, options);
         }
-        return acc;
-    };
-    function isAnimated(key) {
-        return allAnimatedKeys[key] !== undefined;
-    }
-    /**
-     * This just allows us to inject mocked animation functions
-     * @internal
-     */
-    function setAnimateFunction(makeAnimator) {
-        animate = makeAnimator(visualElement);
+    }, [ref, eventName, handler, options]);
+}
+
+function isMouseEvent(event) {
+    // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
+    if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) {
+        return !!(event.pointerType === "mouse");
     }
-    /**
-     * When we receive new props, we need to:
-     * 1. Create a list of protected keys for each type. This is a directory of
-     *    value keys that are currently being "handled" by types of a higher priority
-     *    so that whenever an animation is played of a given type, these values are
-     *    protected from being animated.
-     * 2. Determine if an animation type needs animating.
-     * 3. Determine if any values have been removed from a type and figure out
-     *    what to animate those to.
-     */
-    function animateChanges(options, changedActiveType) {
-        var _a;
-        var props = visualElement.getProps();
-        var context = visualElement.getVariantContext(true) || {};
-        /**
-         * A list of animations that we'll build into as we iterate through the animation
-         * types. This will get executed at the end of the function.
-         */
-        var animations = [];
-        /**
-         * Keep track of which values have been removed. Then, as we hit lower priority
-         * animation types, we can check if they contain removed values and animate to that.
-         */
-        var removedKeys = new Set();
-        /**
-         * A dictionary of all encountered keys. This is an object to let us build into and
-         * copy it without iteration. Each time we hit an animation type we set its protected
-         * keys - the keys its not allowed to animate - to the latest version of this object.
-         */
-        var encounteredKeys = {};
-        /**
-         * If a variant has been removed at a given index, and this component is controlling
-         * variant animations, we want to ensure lower-priority variants are forced to animate.
-         */
-        var removedVariantIndex = Infinity;
-        var _loop_1 = function (i) {
-            var type = reversePriorityOrder[i];
-            var typeState = state[type];
-            var prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];
-            var propIsVariant = isVariantLabel(prop);
-            /**
-             * If this type has *just* changed isActive status, set activeDelta
-             * to that status. Otherwise set to null.
-             */
-            var activeDelta = type === changedActiveType ? typeState.isActive : null;
-            if (activeDelta === false)
-                removedVariantIndex = i;
-            /**
-             * If this prop is an inherited variant, rather than been set directly on the
-             * component itself, we want to make sure we allow the parent to trigger animations.
-             *
-             * TODO: Can probably change this to a !isControllingVariants check
-             */
-            var isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
-            /**
-             *
-             */
-            if (isInherited &&
-                isInitialRender &&
-                visualElement.manuallyAnimateOnMount) {
-                isInherited = false;
-            }
-            /**
-             * Set all encountered keys so far as the protected keys for this type. This will
-             * be any key that has been animated or otherwise handled by active, higher-priortiy types.
-             */
-            typeState.protectedKeys = tslib.__assign({}, encounteredKeys);
-            // Check if we can skip analysing this prop early
-            if (
-            // If it isn't active and hasn't *just* been set as inactive
-            (!typeState.isActive && activeDelta === null) ||
-                // If we didn't and don't have any defined prop for this animation type
-                (!prop && !typeState.prevProp) ||
-                // Or if the prop doesn't define an animation
-                isAnimationControls(prop) ||
-                typeof prop === "boolean") {
-                return "continue";
-            }
-            /**
-             * As we go look through the values defined on this type, if we detect
-             * a changed value or a value that was removed in a higher priority, we set
-             * this to true and add this prop to the animation list.
-             */
-            var variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
-            var shouldAnimateType = variantDidChange ||
-                // If we're making this variant active, we want to always make it active
-                (type === changedActiveType &&
-                    typeState.isActive &&
-                    !isInherited &&
-                    propIsVariant) ||
-                // If we removed a higher-priority variant (i is in reverse order)
-                (i > removedVariantIndex && propIsVariant);
-            /**
-             * As animations can be set as variant lists, variants or target objects, we
-             * coerce everything to an array if it isn't one already
-             */
-            var definitionList = Array.isArray(prop) ? prop : [prop];
-            /**
-             * Build an object of all the resolved values. We'll use this in the subsequent
-             * animateChanges calls to determine whether a value has changed.
-             */
-            var resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});
-            if (activeDelta === false)
-                resolvedValues = {};
-            /**
-             * Now we need to loop through all the keys in the prev prop and this prop,
-             * and decide:
-             * 1. If the value has changed, and needs animating
-             * 2. If it has been removed, and needs adding to the removedKeys set
-             * 3. If it has been removed in a higher priority type and needs animating
-             * 4. If it hasn't been removed in a higher priority but hasn't changed, and
-             *    needs adding to the type's protectedKeys list.
-             */
-            var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
-            var allKeys = tslib.__assign(tslib.__assign({}, prevResolvedValues), resolvedValues);
-            var markToAnimate = function (key) {
-                shouldAnimateType = true;
-                removedKeys.delete(key);
-                typeState.needsAnimating[key] = true;
-            };
-            for (var key in allKeys) {
-                var next = resolvedValues[key];
-                var prev = prevResolvedValues[key];
-                // If we've already handled this we can just skip ahead
-                if (encounteredKeys.hasOwnProperty(key))
-                    continue;
-                /**
-                 * If the value has changed, we probably want to animate it.
-                 */
-                if (next !== prev) {
-                    /**
-                     * If both values are keyframes, we need to shallow compare them to
-                     * detect whether any value has changed. If it has, we animate it.
-                     */
-                    if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
-                        if (!shallowCompare(next, prev) || variantDidChange) {
-                            markToAnimate(key);
-                        }
-                        else {
-                            /**
-                             * If it hasn't changed, we want to ensure it doesn't animate by
-                             * adding it to the list of protected keys.
-                             */
-                            typeState.protectedKeys[key] = true;
-                        }
-                    }
-                    else if (next !== undefined) {
-                        // If next is defined and doesn't equal prev, it needs animating
-                        markToAnimate(key);
-                    }
-                    else {
-                        // If it's undefined, it's been removed.
-                        removedKeys.add(key);
-                    }
-                }
-                else if (next !== undefined && removedKeys.has(key)) {
-                    /**
-                     * If next hasn't changed and it isn't undefined, we want to check if it's
-                     * been removed by a higher priority
-                     */
-                    markToAnimate(key);
-                }
-                else {
-                    /**
-                     * If it hasn't changed, we add it to the list of protected values
-                     * to ensure it doesn't get animated.
-                     */
-                    typeState.protectedKeys[key] = true;
-                }
-            }
-            /**
-             * Update the typeState so next time animateChanges is called we can compare the
-             * latest prop and resolvedValues to these.
-             */
-            typeState.prevProp = prop;
-            typeState.prevResolvedValues = resolvedValues;
-            /**
-             *
-             */
-            if (typeState.isActive) {
-                encounteredKeys = tslib.__assign(tslib.__assign({}, encounteredKeys), resolvedValues);
-            }
-            if (isInitialRender && visualElement.blockInitialAnimation) {
-                shouldAnimateType = false;
-            }
-            /**
-             * If this is an inherited prop we want to hard-block animations
-             * TODO: Test as this should probably still handle animations triggered
-             * by removed values?
-             */
-            if (shouldAnimateType && !isInherited) {
-                animations.push.apply(animations, tslib.__spreadArray([], tslib.__read(definitionList.map(function (animation) { return ({
-                    animation: animation,
-                    options: tslib.__assign({ type: type }, options),
-                }); })), false));
-            }
-        };
-        /**
-         * Iterate through all animation types in reverse priority order. For each, we want to
-         * detect which values it's handling and whether or not they've changed (and therefore
-         * need to be animated). If any values have been removed, we want to detect those in
-         * lower priority props and flag for animation.
-         */
-        for (var i = 0; i < numAnimationTypes; i++) {
-            _loop_1(i);
-        }
-        allAnimatedKeys = tslib.__assign({}, encounteredKeys);
-        /**
-         * If there are some removed value that haven't been dealt with,
-         * we need to create a new animation that falls back either to the value
-         * defined in the style prop, or the last read value.
-         */
-        if (removedKeys.size) {
-            var fallbackAnimation_1 = {};
-            removedKeys.forEach(function (key) {
-                var fallbackTarget = visualElement.getBaseTarget(key);
-                if (fallbackTarget !== undefined) {
-                    fallbackAnimation_1[key] = fallbackTarget;
-                }
-            });
-            animations.push({ animation: fallbackAnimation_1 });
-        }
-        var shouldAnimate = Boolean(animations.length);
-        if (isInitialRender &&
-            props.initial === false &&
-            !visualElement.manuallyAnimateOnMount) {
-            shouldAnimate = false;
+    return event instanceof MouseEvent;
+}
+function isTouchEvent(event) {
+    var hasTouches = !!event.touches;
+    return hasTouches;
+}
+
+/**
+ * Filters out events not attached to the primary pointer (currently left mouse button)
+ * @param eventHandler
+ */
+function filterPrimaryPointer(eventHandler) {
+    return function (event) {
+        var isMouseEvent = event instanceof MouseEvent;
+        var isPrimaryPointer = !isMouseEvent ||
+            (isMouseEvent && event.button === 0);
+        if (isPrimaryPointer) {
+            eventHandler(event);
         }
-        isInitialRender = false;
-        return shouldAnimate ? animate(animations) : Promise.resolve();
-    }
-    /**
-     * Change whether a certain animation type is active.
-     */
-    function setActive(type, isActive, options) {
-        var _a;
-        // If the active state hasn't changed, we can safely do nothing here
-        if (state[type].isActive === isActive)
-            return Promise.resolve();
-        // Propagate active change to children
-        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
-        state[type].isActive = isActive;
-        return animateChanges(options, type);
-    }
-    return {
-        isAnimated: isAnimated,
-        animateChanges: animateChanges,
-        setActive: setActive,
-        setAnimateFunction: setAnimateFunction,
-        getState: function () { return state; },
     };
 }
-function checkVariantsDidChange(prev, next) {
-    if (typeof next === "string") {
-        return next !== prev;
-    }
-    else if (isVariantLabels(next)) {
-        return !shallowCompare(next, prev);
-    }
-    return false;
+var defaultPagePoint = { pageX: 0, pageY: 0 };
+function pointFromTouch(e, pointType) {
+    if (pointType === void 0) { pointType = "page"; }
+    var primaryTouch = e.touches[0] || e.changedTouches[0];
+    var point = primaryTouch || defaultPagePoint;
+    return {
+        x: point[pointType + "X"],
+        y: point[pointType + "Y"],
+    };
 }
-function createTypeState(isActive) {
-    if (isActive === void 0) { isActive = false; }
+function pointFromMouse(point, pointType) {
+    if (pointType === void 0) { pointType = "page"; }
     return {
-        isActive: isActive,
-        protectedKeys: {},
-        needsAnimating: {},
-        prevResolvedValues: {},
+        x: point[pointType + "X"],
+        y: point[pointType + "Y"],
     };
 }
-function createState() {
-    var _a;
-    return _a = {},
-        _a[AnimationType.Animate] = createTypeState(true),
-        _a[AnimationType.InView] = createTypeState(),
-        _a[AnimationType.Hover] = createTypeState(),
-        _a[AnimationType.Tap] = createTypeState(),
-        _a[AnimationType.Drag] = createTypeState(),
-        _a[AnimationType.Focus] = createTypeState(),
-        _a[AnimationType.Exit] = createTypeState(),
-        _a;
+function extractEventInfo(event, pointType) {
+    if (pointType === void 0) { pointType = "page"; }
+    return {
+        point: isTouchEvent(event)
+            ? pointFromTouch(event, pointType)
+            : pointFromMouse(event, pointType),
+    };
 }
+var wrapHandler = function (handler, shouldFilterPrimaryPointer) {
+    if (shouldFilterPrimaryPointer === void 0) { shouldFilterPrimaryPointer = false; }
+    var listener = function (event) {
+        return handler(event, extractEventInfo(event));
+    };
+    return shouldFilterPrimaryPointer
+        ? filterPrimaryPointer(listener)
+        : listener;
+};
 
-var makeRenderlessComponent = function (hook) { return function (props) {
-    hook(props);
-    return null;
-}; };
-
-var animations = {
-    animation: makeRenderlessComponent(function (_a) {
-        var visualElement = _a.visualElement, animate = _a.animate;
-        /**
-         * We dynamically generate the AnimationState manager as it contains a reference
-         * to the underlying animation library. We only want to load that if we load this,
-         * so people can optionally code split it out using the `m` component.
-         */
-        visualElement.animationState || (visualElement.animationState = createAnimationState(visualElement));
-        /**
-         * Subscribe any provided AnimationControls to the component's VisualElement
-         */
-        if (isAnimationControls(animate)) {
-            React.useEffect(function () { return animate.subscribe(visualElement); }, [animate]);
-        }
-    }),
-    exit: makeRenderlessComponent(function (props) {
-        var custom = props.custom, visualElement = props.visualElement;
-        var _a = tslib.__read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
-        var presenceContext = React.useContext(PresenceContext);
-        React.useEffect(function () {
-            var _a, _b;
-            visualElement.isPresent = isPresent;
-            var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });
-            !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(safeToRemove));
-        }, [isPresent]);
-    }),
+// We check for event support via functions in case they've been mocked by a testing suite.
+var supportsPointerEvents = function () {
+    return isBrowser && window.onpointerdown === null;
+};
+var supportsTouchEvents = function () {
+    return isBrowser && window.ontouchstart === null;
+};
+var supportsMouseEvents = function () {
+    return isBrowser && window.onmousedown === null;
 };
 
-function makeState(_a, props, context, presenceContext) {
-    var scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps, createRenderState = _a.createRenderState, onMount = _a.onMount;
-    var state = {
-        latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
-        renderState: createRenderState(),
-    };
-    if (onMount) {
-        state.mount = function (instance) { return onMount(props, instance, state); };
+var mouseEventNames = {
+    pointerdown: "mousedown",
+    pointermove: "mousemove",
+    pointerup: "mouseup",
+    pointercancel: "mousecancel",
+    pointerover: "mouseover",
+    pointerout: "mouseout",
+    pointerenter: "mouseenter",
+    pointerleave: "mouseleave",
+};
+var touchEventNames = {
+    pointerdown: "touchstart",
+    pointermove: "touchmove",
+    pointerup: "touchend",
+    pointercancel: "touchcancel",
+};
+function getPointerEventName(name) {
+    if (supportsPointerEvents()) {
+        return name;
     }
-    return state;
+    else if (supportsTouchEvents()) {
+        return touchEventNames[name];
+    }
+    else if (supportsMouseEvents()) {
+        return mouseEventNames[name];
+    }
+    return name;
 }
-var makeUseVisualState = function (config) {
-    return function (props, isStatic) {
-        var context = React.useContext(MotionContext);
-        var presenceContext = React.useContext(PresenceContext);
-        return isStatic
-            ? makeState(config, props, context, presenceContext)
-            : useConstant(function () {
-                return makeState(config, props, context, presenceContext);
-            });
+function addPointerEvent(target, eventName, handler, options) {
+    return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
+}
+function usePointerEvent(ref, eventName, handler, options) {
+    return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === "pointerdown"), options);
+}
+
+function createLock(name) {
+    var lock = null;
+    return function () {
+        var openLock = function () {
+            lock = null;
+        };
+        if (lock === null) {
+            lock = name;
+            return openLock;
+        }
+        return false;
     };
-};
-function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
-    var values = {};
-    var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;
-    var motionValues = scrapeMotionValues(props);
-    for (var key in motionValues) {
-        values[key] = resolveMotionValue(motionValues[key]);
+}
+var globalHorizontalLock = createLock("dragHorizontal");
+var globalVerticalLock = createLock("dragVertical");
+function getGlobalLock(drag) {
+    var lock = false;
+    if (drag === "y") {
+        lock = globalVerticalLock();
     }
-    var initial = props.initial, animate = props.animate;
-    var isControllingVariants = checkIfControllingVariants(props);
-    var isVariantNode = checkIfVariantNode(props);
-    if (context &&
-        isVariantNode &&
-        !isControllingVariants &&
-        props.inherit !== false) {
-        initial !== null && initial !== void 0 ? initial : (initial = context.initial);
-        animate !== null && animate !== void 0 ? animate : (animate = context.animate);
+    else if (drag === "x") {
+        lock = globalHorizontalLock();
     }
-    var initialAnimationIsBlocked = blockInitialAnimation || initial === false;
-    var variantToSet = initialAnimationIsBlocked ? animate : initial;
-    if (variantToSet &&
-        typeof variantToSet !== "boolean" &&
-        !isAnimationControls(variantToSet)) {
-        var list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
-        list.forEach(function (definition) {
-            var resolved = resolveVariantFromProps(props, definition);
-            if (!resolved)
-                return;
-            var transitionEnd = resolved.transitionEnd; resolved.transition; var target = tslib.__rest(resolved, ["transitionEnd", "transition"]);
-            for (var key in target) {
-                var valueTarget = target[key];
-                if (Array.isArray(valueTarget)) {
-                    /**
-                     * Take final keyframe if the initial animation is blocked because
-                     * we want to initialise at the end of that blocked animation.
-                     */
-                    var index = initialAnimationIsBlocked
-                        ? valueTarget.length - 1
-                        : 0;
-                    valueTarget = valueTarget[index];
-                }
-                if (valueTarget !== null) {
-                    values[key] = valueTarget;
-                }
-            }
-            for (var key in transitionEnd)
-                values[key] = transitionEnd[key];
-        });
+    else {
+        var openHorizontal_1 = globalHorizontalLock();
+        var openVertical_1 = globalVerticalLock();
+        if (openHorizontal_1 && openVertical_1) {
+            lock = function () {
+                openHorizontal_1();
+                openVertical_1();
+            };
+        }
+        else {
+            // Release the locks because we don't use them
+            if (openHorizontal_1)
+                openHorizontal_1();
+            if (openVertical_1)
+                openVertical_1();
+        }
     }
-    return values;
+    return lock;
+}
+function isDragActive() {
+    // Check the gesture lock - if we get it, it means no drag gesture is active
+    // and we can safely fire the tap gesture.
+    var openGestureLock = getGlobalLock(true);
+    if (!openGestureLock)
+        return true;
+    openGestureLock();
+    return false;
 }
 
+var makeRenderlessComponent = function (hook) { return function (props) {
+    hook(props);
+    return null;
+}; };
+
 /**
- * A list of all valid MotionProps.
+ * 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.
  *
- * @internalremarks
- * This doesn't throw if a `MotionProp` name is missing - it should.
+ * ```jsx
+ * import { usePresence } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const [isPresent, safeToRemove] = usePresence()
+ *
+ *   useEffect(() => {
+ *     !isPresent && setTimeout(safeToRemove, 1000)
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * If `isPresent` is `false`, it means that a component has been removed the tree, but
+ * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+ *
+ * @public
  */
-var validMotionProps = new Set([
-    "initial",
-    "animate",
-    "exit",
-    "style",
-    "variants",
-    "transition",
-    "transformTemplate",
-    "transformValues",
-    "custom",
-    "inherit",
-    "layout",
-    "layoutId",
-    "layoutDependency",
-    "onLayoutAnimationComplete",
-    "onLayoutMeasure",
-    "onBeforeLayoutMeasure",
-    "onAnimationStart",
-    "onAnimationComplete",
-    "onUpdate",
-    "onDragStart",
-    "onDrag",
-    "onDragEnd",
-    "onMeasureDragConstraints",
-    "onDirectionLock",
-    "onDragTransitionEnd",
-    "drag",
-    "dragControls",
-    "dragListener",
-    "dragConstraints",
-    "dragDirectionLock",
-    "dragSnapToOrigin",
-    "_dragX",
-    "_dragY",
-    "dragElastic",
-    "dragMomentum",
-    "dragPropagation",
-    "dragTransition",
-    "whileDrag",
-    "onPan",
-    "onPanStart",
-    "onPanEnd",
-    "onPanSessionStart",
-    "onTap",
-    "onTapStart",
-    "onTapCancel",
-    "onHoverStart",
-    "onHoverEnd",
-    "whileFocus",
-    "whileTap",
-    "whileHover",
-    "whileInView",
-    "onViewportEnter",
-    "onViewportLeave",
-    "viewport",
-    "layoutScroll",
-]);
+function usePresence() {
+    var context = React.useContext(PresenceContext);
+    if (context === null)
+        return [true, null];
+    var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
+    // It's safe to call the following hooks conditionally (after an early return) because the context will always
+    // either be null or non-null for the lifespan of the component.
+    // Replace with useOpaqueId when released in React
+    var id = useUniqueId();
+    React.useEffect(function () { return register(id); }, []);
+    var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
+    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
+}
 /**
- * Check whether a prop name is a valid `MotionProp` key.
+ * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
+ * There is no `safeToRemove` function.
  *
- * @param key - Name of the property to check
- * @returns `true` is key is a valid `MotionProp`.
+ * ```jsx
+ * import { useIsPresent } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const isPresent = useIsPresent()
+ *
+ *   useEffect(() => {
+ *     !isPresent && console.log("I've been removed!")
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
  *
  * @public
  */
-function isValidMotionProp(key) {
-    return validMotionProps.has(key);
-}
+function useIsPresent() {
+    return isPresent(React.useContext(PresenceContext));
+}
+function isPresent(context) {
+    return context === null ? true : context.isPresent;
+}
+var counter = 0;
+var incrementId = function () { return counter++; };
+var useUniqueId = function () { return useConstant(incrementId); };
+
+function shallowCompare(next, prev) {
+    if (!Array.isArray(prev))
+        return false;
+    var prevLength = prev.length;
+    if (prevLength !== next.length)
+        return false;
+    for (var i = 0; i < prevLength; i++) {
+        if (prev[i] !== next[i])
+            return false;
+    }
+    return true;
+}
+
+/**
+ * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
+ */
+var isNumericalString = function (v) { return /^\-?\d*\.?\d+$/.test(v); };
+
+/**
+ * Check if the value is a zero value string like "0px" or "0%"
+ */
+var isZeroValueString = function (v) { return /^0[^.\s]+$/.test(v); };
+
+/**
+ * Tests a provided value against a ValueType
+ */
+var testValueType = function (v) { return function (type) { return type.test(v); }; };
+
+/**
+ * ValueType for "auto"
+ */
+var auto = {
+    test: function (v) { return v === "auto"; },
+    parse: function (v) { return v; },
+};
+
+/**
+ * A list of value types commonly used for dimensions
+ */
+var dimensionValueTypes = [styleValueTypes.number, styleValueTypes.px, styleValueTypes.percent, styleValueTypes.degrees, styleValueTypes.vw, styleValueTypes.vh, auto];
+/**
+ * Tests a dimensional value against the list of dimension ValueTypes
+ */
+var findDimensionValueType = function (v) {
+    return dimensionValueTypes.find(testValueType(v));
+};
+
+/**
+ * A list of all ValueTypes
+ */
+var valueTypes = tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(dimensionValueTypes), false), [styleValueTypes.color, styleValueTypes.complex], false);
+/**
+ * Tests a value against the list of ValueTypes
+ */
+var findValueType = function (v) { return valueTypes.find(testValueType(v)); };
 
-var shouldForward = function (key) { return !isValidMotionProp(key); };
 /**
- * Emotion and Styled Components both allow users to pass through arbitrary props to their components
- * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
- * of these should be passed to the underlying DOM node.
- *
- * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
- * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
- * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
- * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
- *
- * By making it an optionalDependency we can offer this functionality only in the situations where it's
- * actually required.
+ * Set VisualElement's MotionValue, creating a new MotionValue for it if
+ * it doesn't exist.
  */
-try {
-    var emotionIsPropValid_1 = require("@emotion/is-prop-valid").default;
-    shouldForward = function (key) {
-        // Handle events explicitly as Emotion validates them all as true
-        if (key.startsWith("on")) {
-            return !isValidMotionProp(key);
+function setMotionValue(visualElement, key, value) {
+    if (visualElement.hasValue(key)) {
+        visualElement.getValue(key).set(value);
+    }
+    else {
+        visualElement.addValue(key, motionValue(value));
+    }
+}
+function setTarget(visualElement, definition) {
+    var resolved = resolveVariant(visualElement, definition);
+    var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = tslib.__rest(_a, ["transitionEnd", "transition"]);
+    target = tslib.__assign(tslib.__assign({}, target), transitionEnd);
+    for (var key in target) {
+        var value = resolveFinalValueInKeyframes(target[key]);
+        setMotionValue(visualElement, key, value);
+    }
+}
+function setVariants(visualElement, variantLabels) {
+    var reversedLabels = tslib.__spreadArray([], tslib.__read(variantLabels), false).reverse();
+    reversedLabels.forEach(function (key) {
+        var _a;
+        var variant = visualElement.getVariant(key);
+        variant && setTarget(visualElement, variant);
+        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {
+            setVariants(child, variantLabels);
+        });
+    });
+}
+function setValues(visualElement, definition) {
+    if (Array.isArray(definition)) {
+        return setVariants(visualElement, definition);
+    }
+    else if (typeof definition === "string") {
+        return setVariants(visualElement, [definition]);
+    }
+    else {
+        setTarget(visualElement, definition);
+    }
+}
+function checkTargetForNewValues(visualElement, target, origin) {
+    var _a, _b, _c;
+    var _d;
+    var newValueKeys = Object.keys(target).filter(function (key) { return !visualElement.hasValue(key); });
+    var numNewValues = newValueKeys.length;
+    if (!numNewValues)
+        return;
+    for (var i = 0; i < numNewValues; i++) {
+        var key = newValueKeys[i];
+        var targetValue = target[key];
+        var value = null;
+        /**
+         * If the target is a series of keyframes, we can use the first value
+         * in the array. If this first value is null, we'll still need to read from the DOM.
+         */
+        if (Array.isArray(targetValue)) {
+            value = targetValue[0];
         }
-        else {
-            return emotionIsPropValid_1(key);
+        /**
+         * If the target isn't keyframes, or the first keyframe was null, we need to
+         * first check if an origin value was explicitly defined in the transition as "from",
+         * if not read the value from the DOM. As an absolute fallback, take the defined target value.
+         */
+        if (value === null) {
+            value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];
         }
-    };
+        /**
+         * If value is still undefined or null, ignore it. Preferably this would throw,
+         * but this was causing issues in Framer.
+         */
+        if (value === undefined || value === null)
+            continue;
+        if (typeof value === "string" &&
+            (isNumericalString(value) || isZeroValueString(value))) {
+            // If this is a number read as a string, ie "0" or "200", convert it to a number
+            value = parseFloat(value);
+        }
+        else if (!findValueType(value) && styleValueTypes.complex.test(targetValue)) {
+            value = getAnimatableNone(key, targetValue);
+        }
+        visualElement.addValue(key, motionValue(value));
+        (_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : (_d[key] = value);
+        visualElement.setBaseTarget(key, value);
+    }
 }
-catch (_a) {
-    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+function getOriginFromTransition(key, transition) {
+    if (!transition)
+        return;
+    var valueTransition = transition[key] || transition["default"] || transition;
+    return valueTransition.from;
 }
-function filterProps(props, isDom, forwardMotionProps) {
-    var filteredProps = {};
-    for (var key in props) {
-        if (shouldForward(key) ||
-            (forwardMotionProps === true && isValidMotionProp(key)) ||
-            (!isDom && !isValidMotionProp(key)) ||
-            // If trying to use native HTML drag events, forward drag listeners
-            (props["draggable"] && key.startsWith("onDrag"))) {
-            filteredProps[key] = props[key];
-        }
+function getOrigin(target, transition, visualElement) {
+    var _a, _b;
+    var origin = {};
+    for (var key in target) {
+        origin[key] =
+            (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();
     }
-    return filteredProps;
+    return origin;
 }
 
-function useHover(isStatic, _a, visualElement) {
-    var whileHover = _a.whileHover, onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, onPointerOver = _a.onPointerOver, onPointerOut = _a.onPointerOut;
-    var isHoverEnabled = whileHover || onHoverStart || onHoverEnd;
-    if (isStatic || !visualElement || !isHoverEnabled)
-        return {};
-    return {
-        onPointerOver: function (event) {
-            var _a;
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, true);
-            onPointerOver === null || onPointerOver === void 0 ? void 0 : onPointerOver(event);
-        },
-        onPointerOut: function (event) {
-            var _a;
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, false);
-            onPointerOut === null || onPointerOut === void 0 ? void 0 : onPointerOut(event);
-        },
-    };
+/**
+ * @internal
+ */
+function animateVisualElement(visualElement, definition, options) {
+    if (options === void 0) { options = {}; }
+    visualElement.notifyAnimationStart(definition);
+    var animation;
+    if (Array.isArray(definition)) {
+        var animations = definition.map(function (variant) {
+            return animateVariant(visualElement, variant, options);
+        });
+        animation = Promise.all(animations);
+    }
+    else if (typeof definition === "string") {
+        animation = animateVariant(visualElement, definition, options);
+    }
+    else {
+        var resolvedDefinition = typeof definition === "function"
+            ? resolveVariant(visualElement, definition, options.custom)
+            : definition;
+        animation = animateTarget(visualElement, resolvedDefinition, options);
+    }
+    return animation.then(function () {
+        return visualElement.notifyAnimationComplete(definition);
+    });
 }
-
-function isTouchEvent(event) {
-    var hasTouches = !!event.touches;
-    return hasTouches;
+function animateVariant(visualElement, variant, options) {
+    var _a;
+    if (options === void 0) { options = {}; }
+    var resolved = resolveVariant(visualElement, variant, options.custom);
+    var _b = (resolved || {}).transition, transition = _b === void 0 ? visualElement.getDefaultTransition() || {} : _b;
+    if (options.transitionOverride) {
+        transition = options.transitionOverride;
+    }
+    /**
+     * If we have a variant, create a callback that runs it as an animation.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    var getAnimation = resolved
+        ? function () { return animateTarget(visualElement, resolved, options); }
+        : function () { return Promise.resolve(); };
+    /**
+     * If we have children, create a callback that runs all their animations.
+     * Otherwise, we resolve a Promise immediately for a composable no-op.
+     */
+    var getChildAnimations = ((_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.size)
+        ? function (forwardDelay) {
+            if (forwardDelay === void 0) { forwardDelay = 0; }
+            var _a = transition.delayChildren, delayChildren = _a === void 0 ? 0 : _a, staggerChildren = transition.staggerChildren, staggerDirection = transition.staggerDirection;
+            return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
+        }
+        : function () { return Promise.resolve(); };
+    /**
+     * If the transition explicitly defines a "when" option, we need to resolve either
+     * this animation or all children animations before playing the other.
+     */
+    var when = transition.when;
+    if (when) {
+        var _c = tslib.__read(when === "beforeChildren"
+            ? [getAnimation, getChildAnimations]
+            : [getChildAnimations, getAnimation], 2), first = _c[0], last = _c[1];
+        return first().then(last);
+    }
+    else {
+        return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
+    }
 }
-
 /**
- * Filters out events not attached to the primary pointer (currently left mouse button)
- * @param eventHandler
+ * @internal
  */
-function filterPrimaryPointer(eventHandler) {
-    return function (event) {
-        var isMouseEvent = event instanceof MouseEvent;
-        var isPrimaryPointer = !isMouseEvent ||
-            (isMouseEvent && event.button === 0);
-        if (isPrimaryPointer) {
-            eventHandler(event);
+function animateTarget(visualElement, definition, _a) {
+    var _b;
+    var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;
+    var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = tslib.__rest(_e, ["transition", "transitionEnd"]);
+    if (transitionOverride)
+        transition = transitionOverride;
+    var animations = [];
+    var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);
+    for (var key in target) {
+        var value = visualElement.getValue(key);
+        var valueTarget = target[key];
+        if (!value ||
+            valueTarget === undefined ||
+            (animationTypeState &&
+                shouldBlockAnimation(animationTypeState, key))) {
+            continue;
         }
-    };
+        var animation = startAnimation(key, value, valueTarget, tslib.__assign({ delay: delay }, transition));
+        animations.push(animation);
+    }
+    return Promise.all(animations).then(function () {
+        transitionEnd && setTarget(visualElement, transitionEnd);
+    });
 }
-var defaultPagePoint = { pageX: 0, pageY: 0 };
-function pointFromTouch(e, pointType) {
-    if (pointType === void 0) { pointType = "page"; }
-    var primaryTouch = e.touches[0] || e.changedTouches[0];
-    var point = primaryTouch || defaultPagePoint;
-    return {
-        x: point[pointType + "X"],
-        y: point[pointType + "Y"],
-    };
+function animateChildren(visualElement, variant, delayChildren, staggerChildren, staggerDirection, options) {
+    if (delayChildren === void 0) { delayChildren = 0; }
+    if (staggerChildren === void 0) { staggerChildren = 0; }
+    if (staggerDirection === void 0) { staggerDirection = 1; }
+    var animations = [];
+    var maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
+    var generateStaggerDuration = staggerDirection === 1
+        ? function (i) {
+            if (i === void 0) { i = 0; }
+            return i * staggerChildren;
+        }
+        : function (i) {
+            if (i === void 0) { i = 0; }
+            return maxStaggerDuration - i * staggerChildren;
+        };
+    Array.from(visualElement.variantChildren)
+        .sort(sortByTreeOrder)
+        .forEach(function (child, i) {
+        animations.push(animateVariant(child, variant, tslib.__assign(tslib.__assign({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function () { return child.notifyAnimationComplete(variant); }));
+    });
+    return Promise.all(animations);
 }
-function pointFromMouse(point, pointType) {
-    if (pointType === void 0) { pointType = "page"; }
-    return {
-        x: point[pointType + "X"],
-        y: point[pointType + "Y"],
-    };
+function stopAnimation(visualElement) {
+    visualElement.forEachValue(function (value) { return value.stop(); });
 }
-function extractEventInfo(event, pointType) {
-    if (pointType === void 0) { pointType = "page"; }
-    return {
-        point: isTouchEvent(event)
-            ? pointFromTouch(event, pointType)
-            : pointFromMouse(event, pointType),
-    };
+function sortByTreeOrder(a, b) {
+    return a.sortNodePosition(b);
 }
-var wrapHandler = function (handler, shouldFilterPrimaryPointer) {
-    if (shouldFilterPrimaryPointer === void 0) { shouldFilterPrimaryPointer = false; }
-    var listener = function (event) {
-        return handler(event, extractEventInfo(event));
-    };
-    return shouldFilterPrimaryPointer
-        ? filterPrimaryPointer(listener)
-        : listener;
-};
-
-function addDomEvent(target, eventName, handler, options) {
-    target.addEventListener(eventName, handler, options);
-    return function () { return target.removeEventListener(eventName, handler, options); };
+/**
+ * Decide whether we should block this animation. Previously, we achieved this
+ * just by checking whether the key was listed in protectedKeys, but this
+ * posed problems if an animation was triggered by afterChildren and protectedKeys
+ * had been set to true in the meantime.
+ */
+function shouldBlockAnimation(_a, key) {
+    var protectedKeys = _a.protectedKeys, needsAnimating = _a.needsAnimating;
+    var shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
+    needsAnimating[key] = false;
+    return shouldBlock;
 }
 
-// We check for event support via functions in case they've been mocked by a testing suite.
-var supportsPointerEvents = function () {
-    return isBrowser && window.onpointerdown === null;
-};
-var supportsTouchEvents = function () {
-    return isBrowser && window.ontouchstart === null;
-};
-var supportsMouseEvents = function () {
-    return isBrowser && window.onmousedown === null;
-};
-
-var mouseEventNames = {
-    pointerdown: "mousedown",
-    pointermove: "mousemove",
-    pointerup: "mouseup",
-    pointercancel: "mousecancel",
-    pointerover: "mouseover",
-    pointerout: "mouseout",
-    pointerenter: "mouseenter",
-    pointerleave: "mouseleave",
-};
-var touchEventNames = {
-    pointerdown: "touchstart",
-    pointermove: "touchmove",
-    pointerup: "touchend",
-    pointercancel: "touchcancel",
-};
-function getPointerEventName(name) {
-    if (supportsPointerEvents()) {
-        return name;
-    }
-    else if (supportsTouchEvents()) {
-        return touchEventNames[name];
+var variantPriorityOrder = [
+    exports.AnimationType.Animate,
+    exports.AnimationType.InView,
+    exports.AnimationType.Focus,
+    exports.AnimationType.Hover,
+    exports.AnimationType.Tap,
+    exports.AnimationType.Drag,
+    exports.AnimationType.Exit,
+];
+var reversePriorityOrder = tslib.__spreadArray([], tslib.__read(variantPriorityOrder), false).reverse();
+var numAnimationTypes = variantPriorityOrder.length;
+function animateList(visualElement) {
+    return function (animations) {
+        return Promise.all(animations.map(function (_a) {
+            var animation = _a.animation, options = _a.options;
+            return animateVisualElement(visualElement, animation, options);
+        }));
+    };
+}
+function createAnimationState(visualElement) {
+    var animate = animateList(visualElement);
+    var state = createState();
+    var allAnimatedKeys = {};
+    var isInitialRender = true;
+    /**
+     * This function will be used to reduce the animation definitions for
+     * each active animation type into an object of resolved values for it.
+     */
+    var buildResolvedTypeValues = function (acc, definition) {
+        var resolved = resolveVariant(visualElement, definition);
+        if (resolved) {
+            resolved.transition; var transitionEnd = resolved.transitionEnd, target = tslib.__rest(resolved, ["transition", "transitionEnd"]);
+            acc = tslib.__assign(tslib.__assign(tslib.__assign({}, acc), target), transitionEnd);
+        }
+        return acc;
+    };
+    function isAnimated(key) {
+        return allAnimatedKeys[key] !== undefined;
     }
-    else if (supportsMouseEvents()) {
-        return mouseEventNames[name];
+    /**
+     * This just allows us to inject mocked animation functions
+     * @internal
+     */
+    function setAnimateFunction(makeAnimator) {
+        animate = makeAnimator(visualElement);
     }
-    return name;
-}
-function addPointerEvent(target, eventName, handler, options) {
-    return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options);
-}
-
-function createLock(name) {
-    var lock = null;
-    return function () {
-        var openLock = function () {
-            lock = null;
+    /**
+     * When we receive new props, we need to:
+     * 1. Create a list of protected keys for each type. This is a directory of
+     *    value keys that are currently being "handled" by types of a higher priority
+     *    so that whenever an animation is played of a given type, these values are
+     *    protected from being animated.
+     * 2. Determine if an animation type needs animating.
+     * 3. Determine if any values have been removed from a type and figure out
+     *    what to animate those to.
+     */
+    function animateChanges(options, changedActiveType) {
+        var _a;
+        var props = visualElement.getProps();
+        var context = visualElement.getVariantContext(true) || {};
+        /**
+         * A list of animations that we'll build into as we iterate through the animation
+         * types. This will get executed at the end of the function.
+         */
+        var animations = [];
+        /**
+         * Keep track of which values have been removed. Then, as we hit lower priority
+         * animation types, we can check if they contain removed values and animate to that.
+         */
+        var removedKeys = new Set();
+        /**
+         * A dictionary of all encountered keys. This is an object to let us build into and
+         * copy it without iteration. Each time we hit an animation type we set its protected
+         * keys - the keys its not allowed to animate - to the latest version of this object.
+         */
+        var encounteredKeys = {};
+        /**
+         * If a variant has been removed at a given index, and this component is controlling
+         * variant animations, we want to ensure lower-priority variants are forced to animate.
+         */
+        var removedVariantIndex = Infinity;
+        var _loop_1 = function (i) {
+            var type = reversePriorityOrder[i];
+            var typeState = state[type];
+            var prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];
+            var propIsVariant = isVariantLabel(prop);
+            /**
+             * If this type has *just* changed isActive status, set activeDelta
+             * to that status. Otherwise set to null.
+             */
+            var activeDelta = type === changedActiveType ? typeState.isActive : null;
+            if (activeDelta === false)
+                removedVariantIndex = i;
+            /**
+             * If this prop is an inherited variant, rather than been set directly on the
+             * component itself, we want to make sure we allow the parent to trigger animations.
+             *
+             * TODO: Can probably change this to a !isControllingVariants check
+             */
+            var isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
+            /**
+             *
+             */
+            if (isInherited &&
+                isInitialRender &&
+                visualElement.manuallyAnimateOnMount) {
+                isInherited = false;
+            }
+            /**
+             * Set all encountered keys so far as the protected keys for this type. This will
+             * be any key that has been animated or otherwise handled by active, higher-priortiy types.
+             */
+            typeState.protectedKeys = tslib.__assign({}, encounteredKeys);
+            // Check if we can skip analysing this prop early
+            if (
+            // If it isn't active and hasn't *just* been set as inactive
+            (!typeState.isActive && activeDelta === null) ||
+                // If we didn't and don't have any defined prop for this animation type
+                (!prop && !typeState.prevProp) ||
+                // Or if the prop doesn't define an animation
+                isAnimationControls(prop) ||
+                typeof prop === "boolean") {
+                return "continue";
+            }
+            /**
+             * As we go look through the values defined on this type, if we detect
+             * a changed value or a value that was removed in a higher priority, we set
+             * this to true and add this prop to the animation list.
+             */
+            var variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
+            var shouldAnimateType = variantDidChange ||
+                // If we're making this variant active, we want to always make it active
+                (type === changedActiveType &&
+                    typeState.isActive &&
+                    !isInherited &&
+                    propIsVariant) ||
+                // If we removed a higher-priority variant (i is in reverse order)
+                (i > removedVariantIndex && propIsVariant);
+            /**
+             * As animations can be set as variant lists, variants or target objects, we
+             * coerce everything to an array if it isn't one already
+             */
+            var definitionList = Array.isArray(prop) ? prop : [prop];
+            /**
+             * Build an object of all the resolved values. We'll use this in the subsequent
+             * animateChanges calls to determine whether a value has changed.
+             */
+            var resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});
+            if (activeDelta === false)
+                resolvedValues = {};
+            /**
+             * Now we need to loop through all the keys in the prev prop and this prop,
+             * and decide:
+             * 1. If the value has changed, and needs animating
+             * 2. If it has been removed, and needs adding to the removedKeys set
+             * 3. If it has been removed in a higher priority type and needs animating
+             * 4. If it hasn't been removed in a higher priority but hasn't changed, and
+             *    needs adding to the type's protectedKeys list.
+             */
+            var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
+            var allKeys = tslib.__assign(tslib.__assign({}, prevResolvedValues), resolvedValues);
+            var markToAnimate = function (key) {
+                shouldAnimateType = true;
+                removedKeys.delete(key);
+                typeState.needsAnimating[key] = true;
+            };
+            for (var key in allKeys) {
+                var next = resolvedValues[key];
+                var prev = prevResolvedValues[key];
+                // If we've already handled this we can just skip ahead
+                if (encounteredKeys.hasOwnProperty(key))
+                    continue;
+                /**
+                 * If the value has changed, we probably want to animate it.
+                 */
+                if (next !== prev) {
+                    /**
+                     * If both values are keyframes, we need to shallow compare them to
+                     * detect whether any value has changed. If it has, we animate it.
+                     */
+                    if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
+                        if (!shallowCompare(next, prev) || variantDidChange) {
+                            markToAnimate(key);
+                        }
+                        else {
+                            /**
+                             * If it hasn't changed, we want to ensure it doesn't animate by
+                             * adding it to the list of protected keys.
+                             */
+                            typeState.protectedKeys[key] = true;
+                        }
+                    }
+                    else if (next !== undefined) {
+                        // If next is defined and doesn't equal prev, it needs animating
+                        markToAnimate(key);
+                    }
+                    else {
+                        // If it's undefined, it's been removed.
+                        removedKeys.add(key);
+                    }
+                }
+                else if (next !== undefined && removedKeys.has(key)) {
+                    /**
+                     * If next hasn't changed and it isn't undefined, we want to check if it's
+                     * been removed by a higher priority
+                     */
+                    markToAnimate(key);
+                }
+                else {
+                    /**
+                     * If it hasn't changed, we add it to the list of protected values
+                     * to ensure it doesn't get animated.
+                     */
+                    typeState.protectedKeys[key] = true;
+                }
+            }
+            /**
+             * Update the typeState so next time animateChanges is called we can compare the
+             * latest prop and resolvedValues to these.
+             */
+            typeState.prevProp = prop;
+            typeState.prevResolvedValues = resolvedValues;
+            /**
+             *
+             */
+            if (typeState.isActive) {
+                encounteredKeys = tslib.__assign(tslib.__assign({}, encounteredKeys), resolvedValues);
+            }
+            if (isInitialRender && visualElement.blockInitialAnimation) {
+                shouldAnimateType = false;
+            }
+            /**
+             * If this is an inherited prop we want to hard-block animations
+             * TODO: Test as this should probably still handle animations triggered
+             * by removed values?
+             */
+            if (shouldAnimateType && !isInherited) {
+                animations.push.apply(animations, tslib.__spreadArray([], tslib.__read(definitionList.map(function (animation) { return ({
+                    animation: animation,
+                    options: tslib.__assign({ type: type }, options),
+                }); })), false));
+            }
         };
-        if (lock === null) {
-            lock = name;
-            return openLock;
+        /**
+         * Iterate through all animation types in reverse priority order. For each, we want to
+         * detect which values it's handling and whether or not they've changed (and therefore
+         * need to be animated). If any values have been removed, we want to detect those in
+         * lower priority props and flag for animation.
+         */
+        for (var i = 0; i < numAnimationTypes; i++) {
+            _loop_1(i);
         }
-        return false;
-    };
-}
-var globalHorizontalLock = createLock("dragHorizontal");
-var globalVerticalLock = createLock("dragVertical");
-function getGlobalLock(drag) {
-    var lock = false;
-    if (drag === "y") {
-        lock = globalVerticalLock();
-    }
-    else if (drag === "x") {
-        lock = globalHorizontalLock();
-    }
-    else {
-        var openHorizontal_1 = globalHorizontalLock();
-        var openVertical_1 = globalVerticalLock();
-        if (openHorizontal_1 && openVertical_1) {
-            lock = function () {
-                openHorizontal_1();
-                openVertical_1();
-            };
+        allAnimatedKeys = tslib.__assign({}, encounteredKeys);
+        /**
+         * If there are some removed value that haven't been dealt with,
+         * we need to create a new animation that falls back either to the value
+         * defined in the style prop, or the last read value.
+         */
+        if (removedKeys.size) {
+            var fallbackAnimation_1 = {};
+            removedKeys.forEach(function (key) {
+                var fallbackTarget = visualElement.getBaseTarget(key);
+                if (fallbackTarget !== undefined) {
+                    fallbackAnimation_1[key] = fallbackTarget;
+                }
+            });
+            animations.push({ animation: fallbackAnimation_1 });
         }
-        else {
-            // Release the locks because we don't use them
-            if (openHorizontal_1)
-                openHorizontal_1();
-            if (openVertical_1)
-                openVertical_1();
+        var shouldAnimate = Boolean(animations.length);
+        if (isInitialRender &&
+            props.initial === false &&
+            !visualElement.manuallyAnimateOnMount) {
+            shouldAnimate = false;
         }
+        isInitialRender = false;
+        return shouldAnimate ? animate(animations) : Promise.resolve();
     }
-    return lock;
-}
-function isDragActive() {
-    // Check the gesture lock - if we get it, it means no drag gesture is active
-    // and we can safely fire the tap gesture.
-    var openGestureLock = getGlobalLock(true);
-    if (!openGestureLock)
-        return true;
-    openGestureLock();
-    return false;
-}
-
-function useTap(isStatic, _a, visualElement) {
-    var whileTap = _a.whileTap, onTapStart = _a.onTapStart, onTap = _a.onTap, onTapCancel = _a.onTapCancel, onPointerDown = _a.onPointerDown;
-    var isTapEnabled = onTap || onTapStart || onTapCancel || whileTap;
-    var isPressing = React.useRef(false);
-    var cancelPointerEndListeners = React.useRef(null);
-    if (isStatic || !visualElement || !isTapEnabled)
-        return {};
-    function removePointerEndListener() {
-        var _a;
-        (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
-        cancelPointerEndListeners.current = null;
-    }
-    function checkPointerEnd() {
+    /**
+     * Change whether a certain animation type is active.
+     */
+    function setActive(type, isActive, options) {
         var _a;
-        removePointerEndListener();
-        isPressing.current = false;
-        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, false);
-        return !isDragActive();
+        // If the active state hasn't changed, we can safely do nothing here
+        if (state[type].isActive === isActive)
+            return Promise.resolve();
+        // Propagate active change to children
+        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
+        state[type].isActive = isActive;
+        return animateChanges(options, type);
     }
-    function onPointerUp(event, info) {
-        if (!checkPointerEnd())
-            return;
-        /**
-         * We only count this as a tap gesture if the event.target is the same
-         * as, or a child of, this component's element
-         */
-        onTap === null || onTap === void 0 ? void 0 : onTap(event, info);
+    return {
+        isAnimated: isAnimated,
+        animateChanges: animateChanges,
+        setActive: setActive,
+        setAnimateFunction: setAnimateFunction,
+        getState: function () { return state; },
+    };
+}
+function checkVariantsDidChange(prev, next) {
+    if (typeof next === "string") {
+        return next !== prev;
     }
-    function onPointerCancel(event, info) {
-        if (!checkPointerEnd())
-            return;
-        onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);
+    else if (isVariantLabels(next)) {
+        return !shallowCompare(next, prev);
     }
+    return false;
+}
+function createTypeState(isActive) {
+    if (isActive === void 0) { isActive = false; }
     return {
-        onPointerDown: wrapHandler(function (event, info) {
-            var _a;
-            removePointerEndListener();
-            if (isPressing.current)
-                return;
-            isPressing.current = true;
-            cancelPointerEndListeners.current = popmotion.pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);
-            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
-            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
-        }, true),
+        isActive: isActive,
+        protectedKeys: {},
+        needsAnimating: {},
+        prevResolvedValues: {},
     };
 }
+function createState() {
+    var _a;
+    return _a = {},
+        _a[exports.AnimationType.Animate] = createTypeState(true),
+        _a[exports.AnimationType.InView] = createTypeState(),
+        _a[exports.AnimationType.Hover] = createTypeState(),
+        _a[exports.AnimationType.Tap] = createTypeState(),
+        _a[exports.AnimationType.Drag] = createTypeState(),
+        _a[exports.AnimationType.Focus] = createTypeState(),
+        _a[exports.AnimationType.Exit] = createTypeState(),
+        _a;
+}
 
-var useRender = function (Component, props, _projectionId, ref, _state, isStatic, visualElement) {
-    return React.createElement(Component, tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ ref: ref }, filterProps(props, false, false)), { onUpdate: props.onInstanceUpdate }), useHover(isStatic, props, visualElement)), useTap(isStatic, props, visualElement)));
+var animations = {
+    animation: makeRenderlessComponent(function (_a) {
+        var visualElement = _a.visualElement, animate = _a.animate;
+        /**
+         * We dynamically generate the AnimationState manager as it contains a reference
+         * to the underlying animation library. We only want to load that if we load this,
+         * so people can optionally code split it out using the `m` component.
+         */
+        visualElement.animationState || (visualElement.animationState = createAnimationState(visualElement));
+        /**
+         * Subscribe any provided AnimationControls to the component's VisualElement
+         */
+        if (isAnimationControls(animate)) {
+            React.useEffect(function () { return animate.subscribe(visualElement); }, [animate]);
+        }
+    }),
+    exit: makeRenderlessComponent(function (props) {
+        var custom = props.custom, visualElement = props.visualElement;
+        var _a = tslib.__read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
+        var presenceContext = React.useContext(PresenceContext);
+        React.useEffect(function () {
+            var _a, _b;
+            visualElement.isPresent = isPresent;
+            var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });
+            !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(safeToRemove));
+        }, [isPresent]);
+    }),
 };
 
 var names = [
@@ -2838,197 +4619,6 @@ var visualElement = function (_a) {
 var variantProps = tslib.__spreadArray(["initial"], tslib.__read(variantPriorityOrder), false);
 var numVariantProps = variantProps.length;
 
-var setVector = function (name, defaultValue) {
-    return function (i) {
-        return function (instance, value) {
-            var _a;
-            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Vector3(defaultValue));
-            var vector = instance[name];
-            vector.setComponent(i, value);
-        };
-    };
-};
-var setEuler = function (name, defaultValue) {
-    return function (axis) {
-        return function (instance, value) {
-            var _a;
-            (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Euler(defaultValue));
-            var euler = instance[name];
-            euler[axis] = value;
-        };
-    };
-};
-var setColor = function (name) { return function (instance, value) {
-    var _a;
-    (_a = instance[name]) !== null && _a !== void 0 ? _a : (instance[name] = new three.Color(value));
-    instance[name].set(value);
-}; };
-var setScale = setVector("scale", 1);
-var setPosition = setVector("position", 0);
-var setRotation = setEuler("rotation", 0);
-var setters = {
-    x: setPosition(0),
-    y: setPosition(1),
-    z: setPosition(2),
-    scale: function (instance, value) {
-        var _a;
-        (_a = instance.scale) !== null && _a !== void 0 ? _a : (instance.scale = new three.Vector3(1));
-        var scale = instance.scale;
-        scale.set(value, value, value);
-    },
-    scaleX: setScale(0),
-    scaleY: setScale(1),
-    scaleZ: setScale(2),
-    rotateX: setRotation("x"),
-    rotateY: setRotation("y"),
-    rotateZ: setRotation("z"),
-    color: setColor("color"),
-    specular: setColor("specular"),
-};
-function setThreeValue(instance, key, values) {
-    if (setters[key]) {
-        setters[key](instance, values[key]);
-    }
-    else {
-        instance[key] = values[key];
-    }
-}
-
-var readVector = function (name, defaultValue) {
-    return function (axis) {
-        return function (instance) {
-            var value = instance[name];
-            return value ? value[axis] : defaultValue;
-        };
-    };
-};
-var readPosition = readVector("position", 0);
-var readScale = readVector("scale", 1);
-var readRotation = readVector("rotation", 0);
-var readers = {
-    x: readPosition("x"),
-    y: readPosition("y"),
-    z: readPosition("z"),
-    scale: readScale("x"),
-    scaleX: readScale("x"),
-    scaleY: readScale("y"),
-    scaleZ: readScale("z"),
-    rotateX: readRotation("x"),
-    rotateY: readRotation("y"),
-    rotateZ: readRotation("z"),
-};
-function readAnimatableValue(value) {
-    if (!value)
-        return;
-    if (value instanceof three.Color) {
-        return value.getStyle();
-    }
-    else {
-        return value;
-    }
-}
-function readThreeValue(instance, name) {
-    var _a;
-    return readers[name]
-        ? readers[name](instance)
-        : (_a = readAnimatableValue(instance[name])) !== null && _a !== void 0 ? _a : 0;
-}
-
-var axes = ["x", "y", "z"];
-var valueMap = {
-    "position-x": "x",
-    "position-y": "y",
-    "position-z": "z",
-    "rotation-x": "rotateX",
-    "rotation-y": "rotateY",
-    "rotation-z": "rotateZ",
-    "scale-x": "scaleX",
-    "scale-y": "scaleY",
-    "scale-z": "scaleZ",
-};
-var scrapeMotionValuesFromProps = function (props) {
-    var motionValues = {};
-    for (var key in props) {
-        var prop = props[key];
-        if (isMotionValue(prop)) {
-            motionValues[valueMap[key] || key] = prop;
-        }
-        else if (Array.isArray(prop)) {
-            for (var i = 0; i < prop.length; i++) {
-                var value = prop[i];
-                if (isMotionValue(value)) {
-                    var name_1 = valueMap[key + "-" + axes[i]];
-                    motionValues[name_1] = value;
-                }
-            }
-        }
-    }
-    return motionValues;
-};
-
-var createRenderState = function () { return ({}); };
-var threeVisualElement = visualElement({
-    treeType: "three",
-    readValueFromInstance: readThreeValue,
-    getBaseTarget: function () {
-        return undefined;
-    },
-    sortNodePosition: function (a, b) {
-        return a.id - b.id;
-    },
-    makeTargetAnimatable: function (element, target) {
-        checkTargetForNewValues(element, target, {});
-        return target;
-    },
-    restoreTransform: function () { },
-    resetTransform: function () { },
-    removeValueFromRenderState: function (_key, _renderState) { },
-    measureViewportBox: createBox,
-    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
-    build: function (_element, state, latestValues) {
-        for (var key in latestValues) {
-            state[key] = latestValues[key];
-        }
-    },
-    render: function (instance, renderState) {
-        for (var key in renderState) {
-            setThreeValue(instance, key, renderState);
-        }
-    },
-});
-var createVisualElement = function (_, options) {
-    return threeVisualElement(options);
-};
-
-var useVisualState = makeUseVisualState({
-    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
-    createRenderState: createRenderState,
-});
-var preloadedFeatures = tslib.__assign({}, animations);
-function custom(Component) {
-    return createMotionComponent({
-        Component: Component,
-        preloadedFeatures: preloadedFeatures,
-        useRender: useRender,
-        useVisualState: useVisualState,
-        createVisualElement: createVisualElement,
-    });
-}
-var componentCache = new Map();
-var motion = new Proxy(custom, {
-    get: function (_, key) {
-        !componentCache.has(key) && componentCache.set(key, custom(key));
-        return componentCache.get(key);
-    },
-});
-
-function MotionCanvas(_a) {
-    var children = _a.children, props = tslib.__rest(_a, ["children"]);
-    var motionContext = React.useContext(MotionContext);
-    return (React__namespace.createElement(fiber.Canvas, tslib.__assign({}, props),
-        React__namespace.createElement(MotionContext.Provider, { value: motionContext }, children)));
-}
-
 /**
  * Creates a `MotionValue` to track the state and velocity of a value.
  *
@@ -3061,12 +4651,65 @@ function useMotionValue(initial) {
     return value;
 }
 
-function useTime() {
-    var time = useMotionValue(0);
-    fiber.useFrame(function (state) { return time.set(state.clock.getElapsedTime()); });
-    return time;
-}
-
-exports.MotionCanvas = MotionCanvas;
-exports.motion = motion;
-exports.useTime = useTime;
+exports.FlatTree = FlatTree;
+exports.LayoutGroupContext = LayoutGroupContext;
+exports.LazyContext = LazyContext;
+exports.MotionConfigContext = MotionConfigContext;
+exports.MotionContext = MotionContext;
+exports.MotionValue = MotionValue;
+exports.PresenceContext = PresenceContext;
+exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
+exports.addDomEvent = addDomEvent;
+exports.addPointerEvent = addPointerEvent;
+exports.addScaleCorrector = addScaleCorrector;
+exports.animate = animate;
+exports.animateVisualElement = animateVisualElement;
+exports.animations = animations;
+exports.calcLength = calcLength;
+exports.checkTargetForNewValues = checkTargetForNewValues;
+exports.createBox = createBox;
+exports.createMotionComponent = createMotionComponent;
+exports.createProjectionNode = createProjectionNode;
+exports.eachAxis = eachAxis;
+exports.extractEventInfo = extractEventInfo;
+exports.filterProps = filterProps;
+exports.findDimensionValueType = findDimensionValueType;
+exports.getDefaultValueType = getDefaultValueType;
+exports.getGlobalLock = getGlobalLock;
+exports.getOrigin = getOrigin;
+exports.globalProjectionState = globalProjectionState;
+exports.instantAnimationState = instantAnimationState;
+exports.isDragActive = isDragActive;
+exports.isKeyframesTarget = isKeyframesTarget;
+exports.isMotionValue = isMotionValue;
+exports.isMouseEvent = isMouseEvent;
+exports.isRefObject = isRefObject;
+exports.isTouchEvent = isTouchEvent;
+exports.isTransformOriginProp = isTransformOriginProp;
+exports.isTransformProp = isTransformProp;
+exports.isValidMotionProp = isValidMotionProp;
+exports.loadFeatures = loadFeatures;
+exports.makeRenderlessComponent = makeRenderlessComponent;
+exports.makeUseVisualState = makeUseVisualState;
+exports.motionValue = motionValue;
+exports.moveItem = moveItem;
+exports.numberValueTypes = numberValueTypes;
+exports.resolveMotionValue = resolveMotionValue;
+exports.scaleCorrectors = scaleCorrectors;
+exports.secondsToMilliseconds = secondsToMilliseconds;
+exports.setValues = setValues;
+exports.sortTransformProps = sortTransformProps;
+exports.startAnimation = startAnimation;
+exports.stopAnimation = stopAnimation;
+exports.transformProps = transformProps;
+exports.translateAxis = translateAxis;
+exports.useConstant = useConstant;
+exports.useDomEvent = useDomEvent;
+exports.useIsPresent = useIsPresent;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useMotionValue = useMotionValue;
+exports.usePointerEvent = usePointerEvent;
+exports.usePresence = usePresence;
+exports.useVisualElementContext = useVisualElementContext;
+exports.visualElement = visualElement;
+exports.wrapHandler = wrapHandler;