framer-motion 7.0.3 → 7.1.2

package/dist/projection.dev.js

@@ -4,71 +4,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Projection = {}));
 })(this, (function (exports) { 'use strict';
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    var __assign = function() {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m) return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-        }
-        catch (error) { e = { error: error }; }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"])) m.call(i);
-            }
-            finally { if (e) throw e.error; }
-        }
-        return ar;
-    }
-
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-            if (ar || !(i in from)) {
-                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-                ar[i] = from[i];
-            }
-        }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-
     const defaultTimestep = (1 / 60) * 1000;
     const getCurrentTime = typeof performance !== "undefined"
         ? () => performance.now()
@@ -191,6 +126,33 @@
     };
     const getFrameData = () => frame;
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
     var warning = function () { };
     var invariant = function () { };
     {
@@ -1212,24 +1174,25 @@
     }
 
     function addUniqueItem(arr, item) {
-        arr.indexOf(item) === -1 && arr.push(item);
+        if (arr.indexOf(item) === -1)
+            arr.push(item);
     }
     function removeItem(arr, item) {
-        var index = arr.indexOf(item);
-        index > -1 && arr.splice(index, 1);
+        const index = arr.indexOf(item);
+        if (index > -1)
+            arr.splice(index, 1);
     }
 
-    var SubscriptionManager = /** @class */ (function () {
-        function SubscriptionManager() {
+    class SubscriptionManager {
+        constructor() {
             this.subscriptions = [];
         }
-        SubscriptionManager.prototype.add = function (handler) {
-            var _this = this;
+        add(handler) {
             addUniqueItem(this.subscriptions, handler);
-            return function () { return removeItem(_this.subscriptions, handler); };
-        };
-        SubscriptionManager.prototype.notify = function (a, b, c) {
-            var numSubscriptions = this.subscriptions.length;
+            return () => removeItem(this.subscriptions, handler);
+        }
+        notify(a, b, c) {
+            const numSubscriptions = this.subscriptions.length;
             if (!numSubscriptions)
                 return;
             if (numSubscriptions === 1) {
@@ -1239,26 +1202,25 @@
                 this.subscriptions[0](a, b, c);
             }
             else {
-                for (var i = 0; i < numSubscriptions; i++) {
+                for (let i = 0; i < numSubscriptions; i++) {
                     /**
                      * Check whether the handler exists before firing as it's possible
                      * the subscriptions were modified during this loop running.
                      */
-                    var handler = this.subscriptions[i];
+                    const handler = this.subscriptions[i];
                     handler && handler(a, b, c);
                 }
             }
-        };
-        SubscriptionManager.prototype.getSize = function () {
+        }
+        getSize() {
             return this.subscriptions.length;
-        };
-        SubscriptionManager.prototype.clear = function () {
+        }
+        clear() {
             this.subscriptions.length = 0;
-        };
-        return SubscriptionManager;
-    }());
+        }
+    }
 
-    var isFloat = function (value) {
+    const isFloat = (value) => {
         return !isNaN(parseFloat(value));
     };
     /**
@@ -1266,7 +1228,7 @@
      *
      * @public
      */
-    var MotionValue = /** @class */ (function () {
+    class MotionValue {
         /**
          * @param init - The initiating value
          * @param config - Optional configuration options
@@ -1275,13 +1237,12 @@
          *
          * @internal
          */
-        function MotionValue(init) {
-            var _this = this;
+        constructor(init) {
             /**
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "7.0.3";
+            this.version = "7.1.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -1320,28 +1281,27 @@
              * @internal
              */
             this.canTrackVelocity = false;
-            this.updateAndNotify = function (v, render) {
-                if (render === void 0) { render = true; }
-                _this.prev = _this.current;
-                _this.current = v;
+            this.updateAndNotify = (v, render = true) => {
+                this.prev = this.current;
+                this.current = v;
                 // Update timestamp
-                var _a = getFrameData(), delta = _a.delta, timestamp = _a.timestamp;
-                if (_this.lastUpdated !== timestamp) {
-                    _this.timeDelta = delta;
-                    _this.lastUpdated = timestamp;
-                    sync.postRender(_this.scheduleVelocityCheck);
+                const { delta, timestamp } = getFrameData();
+                if (this.lastUpdated !== timestamp) {
+                    this.timeDelta = delta;
+                    this.lastUpdated = timestamp;
+                    sync.postRender(this.scheduleVelocityCheck);
                 }
                 // Update update subscribers
-                if (_this.prev !== _this.current) {
-                    _this.updateSubscribers.notify(_this.current);
+                if (this.prev !== this.current) {
+                    this.updateSubscribers.notify(this.current);
                 }
                 // Update velocity subscribers
-                if (_this.velocityUpdateSubscribers.getSize()) {
-                    _this.velocityUpdateSubscribers.notify(_this.getVelocity());
+                if (this.velocityUpdateSubscribers.getSize()) {
+                    this.velocityUpdateSubscribers.notify(this.getVelocity());
                 }
                 // Update render subscribers
                 if (render) {
-                    _this.renderSubscribers.notify(_this.current);
+                    this.renderSubscribers.notify(this.current);
                 }
             };
             /**
@@ -1352,7 +1312,7 @@
              *
              * @internal
              */
-            this.scheduleVelocityCheck = function () { return sync.postRender(_this.velocityCheck); };
+            this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);
             /**
              * Updates `prev` with `current` if the value hasn't been updated this frame.
              * This ensures velocity calculations return `0`.
@@ -1362,11 +1322,10 @@
              *
              * @internal
              */
-            this.velocityCheck = function (_a) {
-                var timestamp = _a.timestamp;
-                if (timestamp !== _this.lastUpdated) {
-                    _this.prev = _this.current;
-                    _this.velocityUpdateSubscribers.notify(_this.getVelocity());
+            this.velocityCheck = ({ timestamp }) => {
+                if (timestamp !== this.lastUpdated) {
+                    this.prev = this.current;
+                    this.velocityUpdateSubscribers.notify(this.getVelocity());
                 }
             };
             this.hasAnimated = false;
@@ -1421,12 +1380,12 @@
          *
          * @public
          */
-        MotionValue.prototype.onChange = function (subscription) {
+        onChange(subscription) {
             return this.updateSubscribers.add(subscription);
-        };
-        MotionValue.prototype.clearListeners = function () {
+        }
+        clearListeners() {
             this.updateSubscribers.clear();
-        };
+        }
         /**
          * Adds a function that will be notified when the `MotionValue` requests a render.
          *
@@ -1435,19 +1394,19 @@
          *
          * @internal
          */
-        MotionValue.prototype.onRenderRequest = function (subscription) {
+        onRenderRequest(subscription) {
             // Render immediately
             subscription(this.get());
             return this.renderSubscribers.add(subscription);
-        };
+        }
         /**
          * Attaches a passive effect to the `MotionValue`.
          *
          * @internal
          */
-        MotionValue.prototype.attach = function (passiveEffect) {
+        attach(passiveEffect) {
             this.passiveEffect = passiveEffect;
-        };
+        }
         /**
          * Sets the state of the `MotionValue`.
          *
@@ -1463,15 +1422,14 @@
          *
          * @public
          */
-        MotionValue.prototype.set = function (v, render) {
-            if (render === void 0) { render = true; }
+        set(v, render = true) {
             if (!render || !this.passiveEffect) {
                 this.updateAndNotify(v, render);
             }
             else {
                 this.passiveEffect(v, this.updateAndNotify);
             }
-        };
+        }
         /**
          * Returns the latest state of `MotionValue`
          *
@@ -1479,15 +1437,15 @@
          *
          * @public
          */
-        MotionValue.prototype.get = function () {
+        get() {
             return this.current;
-        };
+        }
         /**
          * @public
          */
-        MotionValue.prototype.getPrevious = function () {
+        getPrevious() {
             return this.prev;
-        };
+        }
         /**
          * Returns the latest velocity of `MotionValue`
          *
@@ -1495,14 +1453,14 @@
          *
          * @public
          */
-        MotionValue.prototype.getVelocity = function () {
+        getVelocity() {
             // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful
             return this.canTrackVelocity
                 ? // These casts could be avoided if parseFloat would be typed better
                     velocityPerSecond(parseFloat(this.current) -
                         parseFloat(this.prev), this.timeDelta)
                 : 0;
-        };
+        }
         /**
          * Registers a new animation to control this `MotionValue`. Only one
          * animation can drive a `MotionValue` at one time.
@@ -1515,35 +1473,34 @@
          *
          * @internal
          */
-        MotionValue.prototype.start = function (animation) {
-            var _this = this;
+        start(animation) {
             this.stop();
-            return new Promise(function (resolve) {
-                _this.hasAnimated = true;
-                _this.stopAnimation = animation(resolve);
-            }).then(function () { return _this.clearAnimation(); });
-        };
+            return new Promise((resolve) => {
+                this.hasAnimated = true;
+                this.stopAnimation = animation(resolve);
+            }).then(() => this.clearAnimation());
+        }
         /**
          * Stop the currently active animation.
          *
          * @public
          */
-        MotionValue.prototype.stop = function () {
+        stop() {
             if (this.stopAnimation)
                 this.stopAnimation();
             this.clearAnimation();
-        };
+        }
         /**
          * Returns `true` if this value is currently animating.
          *
          * @public
          */
-        MotionValue.prototype.isAnimating = function () {
+        isAnimating() {
             return !!this.stopAnimation;
-        };
-        MotionValue.prototype.clearAnimation = function () {
+        }
+        clearAnimation() {
             this.stopAnimation = null;
-        };
+        }
         /**
          * Destroy and clean up subscribers to this `MotionValue`.
          *
@@ -1553,18 +1510,17 @@
          *
          * @public
          */
-        MotionValue.prototype.destroy = function () {
+        destroy() {
             this.updateSubscribers.clear();
             this.renderSubscribers.clear();
             this.stop();
-        };
-        return MotionValue;
-    }());
+        }
+    }
     function motionValue(init) {
         return new MotionValue(init);
     }
 
-    var isMotionValue = function (value) {
+    const isMotionValue = (value) => {
         return Boolean(value !== null && typeof value === "object" && value.getVelocity);
     };
 
@@ -1574,39 +1530,39 @@
      * @param seconds - Time in seconds.
      * @return milliseconds - Converted time in milliseconds.
      */
-    var secondsToMilliseconds = function (seconds) { return seconds * 1000; };
+    const secondsToMilliseconds = (seconds) => seconds * 1000;
 
-    var easingLookup = {
-        linear: linear,
-        easeIn: easeIn,
-        easeInOut: easeInOut,
-        easeOut: easeOut,
-        circIn: circIn,
-        circInOut: circInOut,
-        circOut: circOut,
-        backIn: backIn,
-        backInOut: backInOut,
-        backOut: backOut,
-        anticipate: anticipate,
-        bounceIn: bounceIn,
-        bounceInOut: bounceInOut,
-        bounceOut: bounceOut,
+    const easingLookup = {
+        linear,
+        easeIn,
+        easeInOut,
+        easeOut,
+        circIn,
+        circInOut,
+        circOut,
+        backIn,
+        backInOut,
+        backOut,
+        anticipate,
+        bounceIn,
+        bounceInOut,
+        bounceOut,
     };
-    var easingDefinitionToFunction = function (definition) {
+    const easingDefinitionToFunction = (definition) => {
         if (Array.isArray(definition)) {
             // If cubic bezier definition, create bezier curve
-            invariant(definition.length === 4, "Cubic bezier arrays must contain four numerical values.");
-            var _a = __read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+            invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+            const [x1, y1, x2, y2] = definition;
             return cubicBezier(x1, y1, x2, y2);
         }
         else if (typeof definition === "string") {
             // Else lookup from table
-            invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
+            invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
             return easingLookup[definition];
         }
         return definition;
     };
-    var isEasingArray = function (ease) {
+    const isEasingArray = (ease) => {
         return Array.isArray(ease) && typeof ease[0] !== "number";
     };
 
@@ -1619,7 +1575,7 @@
      *
      * @internal
      */
-    var isAnimatable = function (key, value) {
+    const isAnimatable = (key, value) => {
         // If the list of keys tat might be non-animatable grows, replace with Set
         if (key === "zIndex")
             return false;
@@ -1637,33 +1593,33 @@
         return false;
     };
 
-    var isKeyframesTarget = function (v) {
+    const isKeyframesTarget = (v) => {
         return Array.isArray(v);
     };
 
-    var underDampedSpring = function () { return ({
+    const underDampedSpring = () => ({
         type: "spring",
         stiffness: 500,
         damping: 25,
         restSpeed: 10,
-    }); };
-    var criticallyDampedSpring = function (to) { return ({
+    });
+    const criticallyDampedSpring = (to) => ({
         type: "spring",
         stiffness: 550,
         damping: to === 0 ? 2 * Math.sqrt(550) : 30,
         restSpeed: 10,
-    }); };
-    var linearTween = function () { return ({
+    });
+    const linearTween = () => ({
         type: "keyframes",
         ease: "linear",
         duration: 0.3,
-    }); };
-    var keyframes = function (values) { return ({
+    });
+    const keyframes = (values) => ({
         type: "keyframes",
         duration: 0.8,
-        values: values,
-    }); };
-    var defaultTransitions = {
+        values,
+    });
+    const defaultTransitions = {
         x: underDampedSpring,
         y: underDampedSpring,
         z: underDampedSpring,
@@ -1679,8 +1635,8 @@
         color: linearTween,
         default: criticallyDampedSpring,
     };
-    var getDefaultTransition = function (valueKey, to) {
-        var transitionFactory;
+    const getDefaultTransition = (valueKey, to) => {
+        let transitionFactory;
         if (isKeyframesTarget(to)) {
             transitionFactory = keyframes;
         }
@@ -1688,12 +1644,12 @@
             transitionFactory =
                 defaultTransitions[valueKey] || defaultTransitions.default;
         }
-        return __assign({ to: to }, transitionFactory(to));
+        return Object.assign({ to }, transitionFactory(to));
     };
 
-    var int = __assign(__assign({}, number), { transform: Math.round });
+    const int = Object.assign(Object.assign({}, number), { transform: Math.round });
 
-    var numberValueTypes = {
+    const numberValueTypes = {
         // Border props
         borderWidth: px,
         borderTopWidth: px,
@@ -1732,7 +1688,7 @@
         rotateX: degrees,
         rotateY: degrees,
         rotateZ: degrees,
-        scale: scale,
+        scale,
         scaleX: scale,
         scaleY: scale,
         scaleZ: scale,
@@ -1763,33 +1719,33 @@
     /**
      * A map of default value types for common values
      */
-    var defaultValueTypes = __assign(__assign({}, numberValueTypes), { 
+    const defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), { 
         // Color props
-        color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
+        color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
         // Border props
-        borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter });
+        borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter, WebkitFilter: filter });
     /**
      * Gets the default ValueType for the provided value key
      */
-    var getDefaultValueType = function (key) { return defaultValueTypes[key]; };
+    const getDefaultValueType = (key) => defaultValueTypes[key];
 
     function getAnimatableNone(key, value) {
         var _a;
-        var defaultValueType = getDefaultValueType(key);
+        let defaultValueType = getDefaultValueType(key);
         if (defaultValueType !== filter)
             defaultValueType = complex;
         // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
         return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);
     }
 
-    var instantAnimationState = {
+    const instantAnimationState = {
         current: false,
     };
 
-    var isCustomValue = function (v) {
+    const isCustomValue = (v) => {
         return Boolean(v && typeof v === "object" && v.mix && v.toValue);
     };
-    var resolveFinalValueInKeyframes = function (v) {
+    const resolveFinalValueInKeyframes = (v) => {
         // TODO maybe throw if v.length - 1 is placeholder token?
         return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
     };
@@ -1800,16 +1756,16 @@
      * if any options are left.
      */
     function isTransitionDefined(_a) {
-        _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
+        var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
         return !!Object.keys(transition).length;
     }
-    var legacyRepeatWarning = false;
+    let legacyRepeatWarning = false;
     /**
      * Convert Framer Motion's Transition type into Popmotion-compatible options.
      */
     function convertTransitionToAnimationOptions(_a) {
-        var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
-        var options = __assign({}, transition);
+        var { ease, times, yoyo, flip, loop } = _a, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
+        const options = Object.assign({}, transition);
         if (times)
             options["offset"] = times;
         /**
@@ -1863,12 +1819,12 @@
      */
     function getDelayFromTransition(transition, key) {
         var _a, _b;
-        var valueTransition = getValueTransition(transition, key) || {};
+        const valueTransition = getValueTransition(transition, key) || {};
         return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;
     }
     function hydrateKeyframes(options) {
         if (Array.isArray(options.to) && options.to[0] === null) {
-            options.to = __spreadArray([], __read(options.to), false);
+            options.to = [...options.to];
             options.to[0] = options.from;
         }
         return options;
@@ -1883,18 +1839,18 @@
          * Get a default transition if none is determined to be defined.
          */
         if (!isTransitionDefined(transition)) {
-            transition = __assign(__assign({}, transition), getDefaultTransition(key, options.to));
+            transition = Object.assign(Object.assign({}, transition), getDefaultTransition(key, options.to));
         }
-        return __assign(__assign({}, options), convertTransitionToAnimationOptions(transition));
+        return Object.assign(Object.assign({}, options), convertTransitionToAnimationOptions(transition));
     }
     /**
      *
      */
     function getAnimation(key, value, target, transition, onComplete) {
         var _a;
-        var valueTransition = getValueTransition(transition, key);
-        var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
-        var isTargetAnimatable = isAnimatable(key, target);
+        const valueTransition = getValueTransition(transition, key);
+        let origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
+        const isTargetAnimatable = isAnimatable(key, target);
         if (origin === "none" && isTargetAnimatable && typeof target === "string") {
             /**
              * If we're trying to animate from "none", try and get an animatable version
@@ -1910,24 +1866,24 @@
             typeof origin === "string") {
             target = getZeroUnit(origin);
         }
-        var isOriginAnimatable = isAnimatable(key, origin);
-        warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate ".concat(key, " from \"").concat(origin, "\" to \"").concat(target, "\". ").concat(origin, " is not an animatable value - to enable this animation set ").concat(origin, " to a value animatable to ").concat(target, " via the `style` property."));
+        const isOriginAnimatable = isAnimatable(key, origin);
+        warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${key} from "${origin}" to "${target}". ${origin} is not an animatable value - to enable this animation set ${origin} to a value animatable to ${target} via the \`style\` property.`);
         function start() {
-            var options = {
+            const options = {
                 from: origin,
                 to: target,
                 velocity: value.getVelocity(),
-                onComplete: onComplete,
-                onUpdate: function (v) { return value.set(v); },
+                onComplete,
+                onUpdate: (v) => value.set(v),
             };
             return valueTransition.type === "inertia" ||
                 valueTransition.type === "decay"
-                ? inertia(__assign(__assign({}, options), valueTransition))
-                : animate$1(__assign(__assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: function (v) {
+                ? inertia(Object.assign(Object.assign({}, options), valueTransition))
+                : animate$1(Object.assign(Object.assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: (v) => {
                         var _a;
                         options.onUpdate(v);
                         (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v);
-                    }, onComplete: function () {
+                    }, onComplete: () => {
                         var _a;
                         options.onComplete();
                         (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);
@@ -1935,12 +1891,12 @@
         }
         function set() {
             var _a, _b;
-            var finalTarget = resolveFinalValueInKeyframes(target);
+            const finalTarget = resolveFinalValueInKeyframes(target);
             value.set(finalTarget);
             onComplete();
             (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, finalTarget);
             (_b = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _b === void 0 ? void 0 : _b.call(valueTransition);
-            return { stop: function () { } };
+            return { stop: () => { } };
         }
         return !isOriginAnimatable ||
             !isTargetAnimatable ||
@@ -1966,24 +1922,23 @@
      * Start animation on a MotionValue. This function is an interface between
      * Framer Motion and Popmotion
      */
-    function startAnimation(key, value, target, transition) {
-        if (transition === void 0) { transition = {}; }
+    function startAnimation(key, value, target, transition = {}) {
         if (instantAnimationState.current) {
             transition = { type: false };
         }
-        return value.start(function (onComplete) {
-            var delayTimer;
-            var controls;
-            var animation = getAnimation(key, value, target, transition, onComplete);
-            var delay = getDelayFromTransition(transition, key);
-            var start = function () { return (controls = animation()); };
+        return value.start((onComplete) => {
+            let delayTimer;
+            let controls;
+            const animation = getAnimation(key, value, target, transition, onComplete);
+            const delay = getDelayFromTransition(transition, key);
+            const start = () => (controls = animation());
             if (delay) {
                 delayTimer = window.setTimeout(start, secondsToMilliseconds(delay));
             }
             else {
                 start();
             }
-            return function () {
+            return () => {
                 clearTimeout(delayTimer);
                 controls === null || controls === void 0 ? void 0 : controls.stop();
             };
@@ -2017,24 +1972,19 @@
      *
      * @public
      */
-    function animate(from, to, transition) {
-        if (transition === void 0) { transition = {}; }
-        var value = isMotionValue(from) ? from : motionValue(from);
+    function animate(from, to, transition = {}) {
+        const value = isMotionValue(from) ? from : motionValue(from);
         startAnimation("", value, to, transition);
         return {
-            stop: function () { return value.stop(); },
-            isAnimating: function () { return value.isAnimating(); },
+            stop: () => value.stop(),
+            isAnimating: () => value.isAnimating(),
         };
     }
 
-    var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
-    var numBorders = borders.length;
-    var asNumber = function (value) {
-        return typeof value === "string" ? parseFloat(value) : value;
-    };
-    var isPx = function (value) {
-        return typeof value === "number" || px.test(value);
-    };
+    const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
+    const numBorders = borders.length;
+    const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
+    const isPx = (value) => typeof value === "number" || px.test(value);
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         var _a, _b, _c, _d;
         if (shouldCrossfadeOpacity) {
@@ -2050,15 +2000,15 @@
         /**
          * 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);
+        for (let i = 0; i < numBorders; i++) {
+            const borderLabel = `border${borders[i]}Radius`;
+            let followRadius = getRadius(follow, borderLabel);
+            let leadRadius = getRadius(lead, borderLabel);
             if (followRadius === undefined && leadRadius === undefined)
                 continue;
             followRadius || (followRadius = 0);
             leadRadius || (leadRadius = 0);
-            var canMix = followRadius === 0 ||
+            const canMix = followRadius === 0 ||
                 leadRadius === 0 ||
                 isPx(followRadius) === isPx(leadRadius);
             if (canMix) {
@@ -2105,10 +2055,10 @@
     //         latestLeadValues.backgroundColor as string
     //     )(p)
     // }
-    var easeCrossfadeIn = compress(0, 0.5, circOut);
-    var easeCrossfadeOut = compress(0.5, 0.95, linear);
+    const easeCrossfadeIn = compress(0, 0.5, circOut);
+    const easeCrossfadeOut = compress(0.5, 0.95, linear);
     function compress(min, max, easing) {
-        return function (p) {
+        return (p) => {
             // Could replace ifs with clamp
             if (p < min)
                 return 0;
@@ -2140,8 +2090,7 @@
     function isIdentityScale(scale) {
         return scale === undefined || scale === 1;
     }
-    function hasScale(_a) {
-        var scale = _a.scale, scaleX = _a.scaleX, scaleY = _a.scaleY;
+    function hasScale({ scale, scaleX, scaleY }) {
         return (!isIdentityScale(scale) ||
             !isIdentityScale(scaleX) ||
             !isIdentityScale(scaleY));
@@ -2163,8 +2112,8 @@
      * Scales a point based on a factor and an originPoint
      */
     function scalePoint(point, scale, originPoint) {
-        var distanceFromOrigin = point - originPoint;
-        var scaled = scale * distanceFromOrigin;
+        const distanceFromOrigin = point - originPoint;
+        const scaled = scale * distanceFromOrigin;
         return originPoint + scaled;
     }
     /**
@@ -2179,17 +2128,14 @@
     /**
      * 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; }
+    function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {
         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;
+    function applyBoxDelta(box, { x, y }) {
         applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
         applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
     }
@@ -2199,17 +2145,16 @@
      *
      * This is the final nested loop within updateLayoutDelta for future refactoring
      */
-    function applyTreeDeltas(box, treeScale, treePath, isSharedTransition) {
+    function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
         var _a, _b;
-        if (isSharedTransition === void 0) { isSharedTransition = false; }
-        var treeLength = treePath.length;
+        const 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++) {
+        let node;
+        let delta;
+        for (let 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")
@@ -2241,18 +2186,17 @@
      * This function basically acts as a bridge between a flat motion value map
      * and applyAxisDelta
      */
-    function transformAxis(axis, transforms, _a) {
-        var _b = __read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
-        var axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
-        var originPoint = mix(axis.min, axis.max, axisOrigin);
+    function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
+        const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
+        const originPoint = 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"];
+    const xKeys$1 = ["x", "scaleX", "originX"];
+    const yKeys$1 = ["y", "scaleY", "originY"];
     /**
      * Apply a transform to a box from the latest resolved motion values.
      */
@@ -2264,13 +2208,10 @@
     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; }
+    function isNear(value, target = 0, maxDistance = 0.01) {
         return distance(value, target) < maxDistance;
     }
-    function calcAxisDelta(delta, source, target, origin) {
-        if (origin === void 0) { origin = 0.5; }
+    function calcAxisDelta(delta, source, target, origin = 0.5) {
         delta.origin = origin;
         delta.originPoint = mix(source.min, source.max, delta.origin);
         delta.scale = calcLength(target) / calcLength(source);
@@ -2316,20 +2257,15 @@
     /**
      * 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; }
+    function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
         if (percent.test(translate)) {
             translate = parseFloat(translate);
-            var relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
+            const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);
             translate = relativeProgress - sourceAxis.min;
         }
         if (typeof translate !== "number")
             return;
-        var originPoint = mix(originAxis.min, originAxis.max, origin);
+        let originPoint = mix(originAxis.min, originAxis.max, origin);
         if (axis === originAxis)
             originPoint -= translate;
         axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);
@@ -2339,15 +2275,14 @@
      * 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 = __read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2];
+    function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {
         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"];
+    const xKeys = ["x", "scaleX", "originX"];
+    const 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
@@ -2357,21 +2292,21 @@
         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 ({
+    const createAxisDelta = () => ({
         translate: 0,
         scale: 1,
         origin: 0,
         originPoint: 0,
-    }); };
-    var createDelta = function () { return ({
+    });
+    const createDelta = () => ({
         x: createAxisDelta(),
         y: createAxisDelta(),
-    }); };
-    var createAxis = function () { return ({ min: 0, max: 0 }); };
-    var createBox = function () { return ({
+    });
+    const createAxis = () => ({ min: 0, max: 0 });
+    const createBox = () => ({
         x: createAxis(),
         y: createAxis(),
-    }); };
+    });
 
     function isAxisDeltaZero(delta) {
         return delta.translate === 0 && delta.scale === 1;
@@ -2386,36 +2321,36 @@
             a.y.max === b.y.max);
     }
 
-    var NodeStack = /** @class */ (function () {
-        function NodeStack() {
+    class NodeStack {
+        constructor() {
             this.members = [];
         }
-        NodeStack.prototype.add = function (node) {
+        add(node) {
             addUniqueItem(this.members, node);
             node.scheduleRender();
-        };
-        NodeStack.prototype.remove = function (node) {
+        }
+        remove(node) {
             removeItem(this.members, node);
             if (node === this.prevLead) {
                 this.prevLead = undefined;
             }
             if (node === this.lead) {
-                var prevLead = this.members[this.members.length - 1];
+                const 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; });
+        }
+        relegate(node) {
+            const indexOfNode = this.members.findIndex((member) => 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];
+            let prevLead;
+            for (let i = indexOfNode; i >= 0; i--) {
+                const member = this.members[i];
                 if (member.isPresent !== false) {
                     prevLead = member;
                     break;
@@ -2428,10 +2363,10 @@
             else {
                 return false;
             }
-        };
-        NodeStack.prototype.promote = function (node, preserveFollowOpacity) {
+        }
+        promote(node, preserveFollowOpacity) {
             var _a;
-            var prevLead = this.lead;
+            const prevLead = this.lead;
             if (node === prevLead)
                 return;
             this.prevLead = prevLead;
@@ -2453,7 +2388,7 @@
                 if ((_a = node.root) === null || _a === void 0 ? void 0 : _a.isUpdating) {
                     node.isLayoutDirty = true;
                 }
-                var crossfade = node.options.crossfade;
+                const { crossfade } = node.options;
                 if (crossfade === false) {
                     prevLead.hide();
                 }
@@ -2470,37 +2405,36 @@
                  *   - layoutId changes mid animation
                  */
             }
-        };
-        NodeStack.prototype.exitAnimationComplete = function () {
-            this.members.forEach(function (node) {
+        }
+        exitAnimationComplete() {
+            this.members.forEach((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) {
+        }
+        scheduleRender() {
+            this.members.forEach((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 () {
+        removeLeadSnapshot() {
             if (this.lead && this.lead.snapshot) {
                 this.lead.snapshot = undefined;
             }
-        };
-        return NodeStack;
-    }());
+        }
+    }
 
-    var scaleCorrectors = {};
+    const scaleCorrectors = {};
     function addScaleCorrector(correctors) {
         Object.assign(scaleCorrectors, correctors);
     }
 
-    var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1) scale(1, 1)";
+    const identityProjection = "translate3d(0px, 0px, 0) scale(1, 1) scale(1, 1)";
     function buildProjectionTransform(delta, treeScale, latestTransform) {
         /**
          * The translations we use to calculate are always relative to the viewport coordinate space.
@@ -2508,30 +2442,30 @@
          * 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) ");
+        const xTranslate = delta.x.translate / treeScale.x;
+        const yTranslate = delta.y.translate / treeScale.y;
+        let transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `;
         /**
          * Apply scale correction for the tree transform.
          * This will apply scale to the screen-orientated axes.
          */
-        transform += "scale(".concat(1 / treeScale.x, ", ").concat(1 / treeScale.y, ") ");
+        transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
         if (latestTransform) {
-            var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
+            const { rotate, rotateX, rotateY } = latestTransform;
             if (rotate)
-                transform += "rotate(".concat(rotate, "deg) ");
+                transform += `rotate(${rotate}deg) `;
             if (rotateX)
-                transform += "rotateX(".concat(rotateX, "deg) ");
+                transform += `rotateX(${rotateX}deg) `;
             if (rotateY)
-                transform += "rotateY(".concat(rotateY, "deg) ");
+                transform += `rotateY(${rotateY}deg) `;
         }
         /**
          * Apply scale to match the size of the element to the size we want it.
          * This will apply scale to the element-orientated axes.
          */
-        var elementScaleX = delta.x.scale * treeScale.x;
-        var elementScaleY = delta.y.scale * treeScale.y;
-        transform += "scale(".concat(elementScaleX, ", ").concat(elementScaleY, ")");
+        const elementScaleX = delta.x.scale * treeScale.x;
+        const elementScaleY = delta.y.scale * treeScale.y;
+        transform += `scale(${elementScaleX}, ${elementScaleY})`;
         return transform === identityProjection ? "none" : transform;
     }
 
@@ -2543,21 +2477,17 @@
      * 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"];
+    const 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"];
+    const 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);
-        });
-    });
+    const transformProps = ["transformPerspective", "x", "y", "z"];
+    order.forEach((operationKey) => transformAxes.forEach((axesKey) => transformProps.push(operationKey + axesKey)));
     /**
      * A function to use with Array.sort to sort transform keys by their default order.
      */
@@ -2567,42 +2497,39 @@
     /**
      * A quick lookup for transform props.
      */
-    var transformPropSet = new Set(transformProps);
+    const 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"]);
+    const transformOriginProps = new Set(["originX", "originY", "originZ"]);
     function isTransformOriginProp(key) {
         return transformOriginProps.has(key);
     }
 
-    var compareByDepth = function (a, b) {
-        return a.depth - b.depth;
-    };
+    const compareByDepth = (a, b) => a.depth - b.depth;
 
-    var FlatTree = /** @class */ (function () {
-        function FlatTree() {
+    class FlatTree {
+        constructor() {
             this.children = [];
             this.isDirty = false;
         }
-        FlatTree.prototype.add = function (child) {
+        add(child) {
             addUniqueItem(this.children, child);
             this.isDirty = true;
-        };
-        FlatTree.prototype.remove = function (child) {
+        }
+        remove(child) {
             removeItem(this.children, child);
             this.isDirty = true;
-        };
-        FlatTree.prototype.forEach = function (callback) {
+        }
+        forEach(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
@@ -2610,7 +2537,7 @@
      * TODO: Remove and move to library
      */
     function resolveMotionValue(value) {
-        var unwrappedValue = isMotionValue(value) ? value.get() : value;
+        const unwrappedValue = isMotionValue(value) ? value.get() : value;
         return isCustomValue(unwrappedValue)
             ? unwrappedValue.toValue()
             : unwrappedValue;
@@ -2621,7 +2548,7 @@
      * persist through server requests. If we need instanced states we
      * could lazy-init via root.
      */
-    var globalProjectionState = {
+    const globalProjectionState = {
         /**
          * Global flag as to whether the tree has animated since the last time
          * we resized the window
@@ -2638,14 +2565,10 @@
      * 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;
-    function createProjectionNode(_a) {
-        var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, checkIsScrollRoot = _a.checkIsScrollRoot, resetTransform = _a.resetTransform;
-        return /** @class */ (function () {
-            function ProjectionNode(id, latestValues, parent) {
-                if (latestValues === void 0) { latestValues = {}; }
-                if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); }
-                var _this = this;
+    const animationTarget = 1000;
+    function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
+        return class ProjectionNode {
+            constructor(id, latestValues = {}, 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.
@@ -2710,15 +2633,15 @@
                 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.checkUpdateFailed = () => {
+                    if (this.isUpdating) {
+                        this.isUpdating = false;
+                        this.clearAllSnapshots();
                     }
                 };
-                this.updateProjection = function () {
-                    _this.nodes.forEach(resolveTargetDelta);
-                    _this.nodes.forEach(calcProjection);
+                this.updateProjection = () => {
+                    this.nodes.forEach(resolveTargetDelta);
+                    this.nodes.forEach(calcProjection);
                 };
                 this.hasProjected = false;
                 this.isVisible = true;
@@ -2731,49 +2654,43 @@
                 this.id = id;
                 this.latestValues = latestValues;
                 this.root = parent ? parent.root || parent : this;
-                this.path = parent ? __spreadArray(__spreadArray([], __read(parent.path), false), [parent], false) : [];
+                this.path = parent ? [...parent.path, parent] : [];
                 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++) {
+                for (let i = 0; i < this.path.length; i++) {
                     this.path[i].shouldResetTransform = true;
                 }
                 if (this.root === this)
                     this.nodes = new FlatTree();
             }
-            ProjectionNode.prototype.addEventListener = function (name, handler) {
+            addEventListener(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, __spreadArray([], __read(args), false));
-            };
-            ProjectionNode.prototype.hasListeners = function (name) {
+            }
+            notifyListeners(name, ...args) {
+                const subscriptionManager = this.eventHandlers.get(name);
+                subscriptionManager === null || subscriptionManager === void 0 ? void 0 : subscriptionManager.notify(...args);
+            }
+            hasListeners(name) {
                 return this.eventHandlers.has(name);
-            };
-            ProjectionNode.prototype.registerPotentialNode = function (id, node) {
+            }
+            registerPotentialNode(id, node) {
                 this.potentialNodes.set(id, node);
-            };
+            }
             /**
              * Lifecycles
              */
-            ProjectionNode.prototype.mount = function (instance, isLayoutDirty) {
-                var _this = this;
+            mount(instance, isLayoutDirty = false) {
                 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;
+                const { layoutId, layout, visualElement } = this.options;
                 if (visualElement && !visualElement.getInstance()) {
                     visualElement.mount(instance);
                 }
@@ -2784,17 +2701,15 @@
                     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 = window.setTimeout(resizeUnblockUpdate_1, 250);
+                    let unblockTimeout;
+                    const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);
+                    attachResizeListener(instance, () => {
+                        this.root.updateBlockedByResize = true;
+                        clearTimeout(unblockTimeout);
+                        unblockTimeout = window.setTimeout(resizeUnblockUpdate, 250);
                         if (globalProjectionState.hasAnimatedSinceResize) {
                             globalProjectionState.hasAnimatedSinceResize = false;
-                            _this.nodes.forEach(finishAnimation);
+                            this.nodes.forEach(finishAnimation);
                         }
                     });
                 }
@@ -2805,45 +2720,44 @@
                 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;
+                    this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {
+                        var _a, _b, _c, _d, _e;
+                        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 _g = visualElement.getProps(), onLayoutAnimationStart = _g.onLayoutAnimationStart, onLayoutAnimationComplete = _g.onLayoutAnimationComplete;
+                        const layoutTransition = (_b = (_a = this.options.transition) !== null && _a !== void 0 ? _a : visualElement.getDefaultTransition()) !== null && _b !== void 0 ? _b : defaultLayoutTransition;
+                        const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();
                         /**
                          * 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) ||
+                        const 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) ||
+                        const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
+                        if (((_c = this.resumeFrom) === null || _c === void 0 ? void 0 : _c.instance) ||
                             hasOnlyRelativeTargetChanged ||
                             (hasLayoutChanged &&
-                                (targetChanged || !_this.currentAnimation))) {
-                            if (_this.resumeFrom) {
-                                _this.resumingFrom = _this.resumeFrom;
-                                _this.resumingFrom.resumingFrom = undefined;
+                                (targetChanged || !this.currentAnimation))) {
+                            if (this.resumeFrom) {
+                                this.resumingFrom = this.resumeFrom;
+                                this.resumingFrom.resumingFrom = undefined;
                             }
-                            _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                            var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+                            this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
+                            const animationOptions = Object.assign(Object.assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
                             if (visualElement.shouldReduceMotion) {
                                 animationOptions.delay = 0;
                                 animationOptions.type = false;
                             }
-                            _this.startAnimation(animationOptions);
+                            this.startAnimation(animationOptions);
                         }
                         else {
                             /**
@@ -2852,16 +2766,16 @@
                              * that was probably never commited to screen and look like a jumpy box.
                              */
                             if (!hasLayoutChanged &&
-                                _this.animationProgress === 0) {
-                                _this.finishAnimation();
+                                this.animationProgress === 0) {
+                                this.finishAnimation();
                             }
-                            _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
+                            this.isLead() && ((_e = (_d = this.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d));
                         }
-                        _this.targetLayout = newLayout;
+                        this.targetLayout = newLayout;
                     });
                 }
-            };
-            ProjectionNode.prototype.unmount = function () {
+            }
+            unmount() {
                 var _a, _b;
                 this.options.layoutId && this.willUpdate();
                 this.root.nodes.remove(this);
@@ -2869,34 +2783,33 @@
                 (_b = this.parent) === null || _b === void 0 ? void 0 : _b.children.delete(this);
                 this.instance = undefined;
                 cancelSync.preRender(this.updateProjection);
-            };
+            }
             // only on the root
-            ProjectionNode.prototype.blockUpdate = function () {
+            blockUpdate() {
                 this.updateManuallyBlocked = true;
-            };
-            ProjectionNode.prototype.unblockUpdate = function () {
+            }
+            unblockUpdate() {
                 this.updateManuallyBlocked = false;
-            };
-            ProjectionNode.prototype.isUpdateBlocked = function () {
+            }
+            isUpdateBlocked() {
                 return this.updateManuallyBlocked || this.updateBlockedByResize;
-            };
-            ProjectionNode.prototype.isTreeAnimationBlocked = function () {
+            }
+            isTreeAnimationBlocked() {
                 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 () {
+            startUpdate() {
                 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) {
+            }
+            willUpdate(shouldNotifyListeners = true) {
                 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;
@@ -2905,8 +2818,8 @@
                 if (this.isLayoutDirty)
                     return;
                 this.isLayoutDirty = true;
-                for (var i = 0; i < this.path.length; i++) {
-                    var node = this.path[i];
+                for (let i = 0; i < this.path.length; i++) {
+                    const node = this.path[i];
                     node.shouldResetTransform = true;
                     /**
                      * TODO: Check we haven't updated the scroll
@@ -2914,17 +2827,17 @@
                      */
                     node.updateScroll();
                 }
-                var _d = this.options, layoutId = _d.layoutId, layout = _d.layout;
+                const { layoutId, layout } = this.options;
                 if (layoutId === undefined && !layout)
                     return;
-                var transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate;
+                const 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();
+            didUpdate() {
+                const 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.
@@ -2966,46 +2879,45 @@
                 flushSync.update();
                 flushSync.preRender();
                 flushSync.render();
-            };
-            ProjectionNode.prototype.clearAllSnapshots = function () {
+            }
+            clearAllSnapshots() {
                 this.nodes.forEach(clearSnapshot);
                 this.sharedNodes.forEach(removeLeadSnapshots);
-            };
-            ProjectionNode.prototype.scheduleUpdateProjection = function () {
+            }
+            scheduleUpdateProjection() {
                 sync.preRender(this.updateProjection, false, true);
-            };
-            ProjectionNode.prototype.scheduleCheckAfterUnmount = function () {
-                var _this = this;
+            }
+            scheduleCheckAfterUnmount() {
                 /**
                  * 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.postRender(function () {
-                    if (_this.isLayoutDirty) {
-                        _this.root.didUpdate();
+                sync.postRender(() => {
+                    if (this.isLayoutDirty) {
+                        this.root.didUpdate();
                     }
                     else {
-                        _this.root.checkUpdateFailed();
+                        this.root.checkUpdateFailed();
                     }
                 });
-            };
+            }
             /**
              * Update measurements
              */
-            ProjectionNode.prototype.updateSnapshot = function () {
+            updateSnapshot() {
                 if (this.snapshot || !this.instance)
                     return;
-                var measured = this.measure();
-                var layout = this.removeTransform(this.removeElementScroll(measured));
+                const measured = this.measure();
+                const layout = this.removeTransform(this.removeElementScroll(measured));
                 roundBox(layout);
                 this.snapshot = {
-                    measured: measured,
-                    layout: layout,
+                    measured,
+                    layout,
                     latestValues: {},
                 };
-            };
-            ProjectionNode.prototype.updateLayout = function () {
+            }
+            updateLayout() {
                 var _a;
                 if (!this.instance)
                     return;
@@ -3023,16 +2935,16 @@
                  * up to date.
                  */
                 if (this.resumeFrom && !this.resumeFrom.instance) {
-                    for (var i = 0; i < this.path.length; i++) {
-                        var node = this.path[i];
+                    for (let i = 0; i < this.path.length; i++) {
+                        const node = this.path[i];
                         node.updateScroll();
                     }
                 }
-                var measured = this.measure();
+                const measured = this.measure();
                 roundBox(measured);
-                var prevLayout = this.layout;
+                const prevLayout = this.layout;
                 this.layout = {
-                    measured: measured,
+                    measured,
                     actual: this.removeElementScroll(measured),
                 };
                 this.layoutCorrected = createBox();
@@ -3040,22 +2952,22 @@
                 this.projectionDelta = undefined;
                 this.notifyListeners("measure", this.layout.actual);
                 (_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 () {
+            }
+            updateScroll() {
                 if (this.options.layoutScroll && this.instance) {
                     this.isScrollRoot = checkIsScrollRoot(this.instance);
                     this.scroll = measureScroll(this.instance);
                 }
-            };
-            ProjectionNode.prototype.resetTransform = function () {
+            }
+            resetTransform() {
                 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;
+                const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;
+                const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
+                const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+                const transformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, "");
+                const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
                 if (isResetRequested &&
                     (hasProjection ||
                         hasTransform(this.latestValues) ||
@@ -3064,38 +2976,38 @@
                     this.shouldResetTransform = false;
                     this.scheduleRender();
                 }
-            };
-            ProjectionNode.prototype.measure = function () {
-                var visualElement = this.options.visualElement;
+            }
+            measure() {
+                const { visualElement } = this.options;
                 if (!visualElement)
                     return createBox();
-                var box = visualElement.measureViewportBox();
+                const box = visualElement.measureViewportBox();
                 // Remove viewport scroll to give page-relative coordinates
-                var scroll = this.root.scroll;
+                const { scroll } = this.root;
                 if (scroll) {
                     translateAxis(box.x, scroll.x);
                     translateAxis(box.y, scroll.y);
                 }
                 return box;
-            };
-            ProjectionNode.prototype.removeElementScroll = function (box) {
-                var boxWithoutScroll = createBox();
+            }
+            removeElementScroll(box) {
+                const 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, isScrollRoot = node.isScrollRoot;
-                    if (node !== this.root && scroll_1 && options.layoutScroll) {
+                for (let i = 0; i < this.path.length; i++) {
+                    const node = this.path[i];
+                    const { scroll, options, isScrollRoot } = node;
+                    if (node !== this.root && scroll && options.layoutScroll) {
                         /**
                          * If this is a new scroll root, we want to remove all previous scrolls
                          * from the viewport box.
                          */
                         if (isScrollRoot) {
                             copyBoxInto(boxWithoutScroll, box);
-                            var rootScroll = this.root.scroll;
+                            const { scroll: rootScroll } = this.root;
                             /**
                              * Undo the application of page scroll that was originally added
                              * to the measured bounding box.
@@ -3105,18 +3017,17 @@
                                 translateAxis(boxWithoutScroll.y, -rootScroll.y);
                             }
                         }
-                        translateAxis(boxWithoutScroll.x, scroll_1.x);
-                        translateAxis(boxWithoutScroll.y, scroll_1.y);
+                        translateAxis(boxWithoutScroll.x, scroll.x);
+                        translateAxis(boxWithoutScroll.y, scroll.y);
                     }
                 }
                 return boxWithoutScroll;
-            };
-            ProjectionNode.prototype.applyTransform = function (box, transformOnly) {
-                if (transformOnly === void 0) { transformOnly = false; }
-                var withTransforms = createBox();
+            }
+            applyTransform(box, transformOnly = false) {
+                const withTransforms = createBox();
                 copyBoxInto(withTransforms, box);
-                for (var i = 0; i < this.path.length; i++) {
-                    var node = this.path[i];
+                for (let i = 0; i < this.path.length; i++) {
+                    const node = this.path[i];
                     if (!transformOnly &&
                         node.options.layoutScroll &&
                         node.scroll &&
@@ -3134,20 +3045,20 @@
                     transformBox(withTransforms, this.latestValues);
                 }
                 return withTransforms;
-            };
-            ProjectionNode.prototype.removeTransform = function (box) {
+            }
+            removeTransform(box) {
                 var _a;
-                var boxWithoutTransform = createBox();
+                const boxWithoutTransform = createBox();
                 copyBoxInto(boxWithoutTransform, box);
-                for (var i = 0; i < this.path.length; i++) {
-                    var node = this.path[i];
+                for (let i = 0; i < this.path.length; i++) {
+                    const 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();
+                    const sourceBox = createBox();
+                    const nodeBox = node.measure();
                     copyBoxInto(sourceBox, nodeBox);
                     removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox);
                 }
@@ -3155,19 +3066,19 @@
                     removeBoxTransforms(boxWithoutTransform, this.latestValues);
                 }
                 return boxWithoutTransform;
-            };
+            }
             /**
              *
              */
-            ProjectionNode.prototype.setTargetDelta = function (delta) {
+            setTargetDelta(delta) {
                 this.targetDelta = delta;
                 this.root.scheduleUpdateProjection();
-            };
-            ProjectionNode.prototype.setOptions = function (options) {
+            }
+            setOptions(options) {
                 var _a;
-                this.options = __assign(__assign(__assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true });
-            };
-            ProjectionNode.prototype.clearMeasurements = function () {
+                this.options = Object.assign(Object.assign(Object.assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true });
+            }
+            clearMeasurements() {
                 this.scroll = undefined;
                 this.layout = undefined;
                 this.snapshot = undefined;
@@ -3175,13 +3086,13 @@
                 this.targetDelta = undefined;
                 this.target = undefined;
                 this.isLayoutDirty = false;
-            };
+            }
             /**
              * Frame calculations
              */
-            ProjectionNode.prototype.resolveTargetDelta = function () {
+            resolveTargetDelta() {
                 var _a;
-                var _b = this.options, layout = _b.layout, layoutId = _b.layoutId;
+                const { layout, layoutId } = this.options;
                 /**
                  * If we have no layout, we can't perform projection, so early return
                  */
@@ -3260,8 +3171,8 @@
                         copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                     }
                 }
-            };
-            ProjectionNode.prototype.getClosestProjectingParent = function () {
+            }
+            getClosestProjectingParent() {
                 if (!this.parent || hasTransform(this.parent.latestValues))
                     return undefined;
                 if ((this.parent.relativeTarget || this.parent.targetDelta) &&
@@ -3271,10 +3182,10 @@
                 else {
                     return this.parent.getClosestProjectingParent();
                 }
-            };
-            ProjectionNode.prototype.calcProjection = function () {
+            }
+            calcProjection() {
                 var _a;
-                var _b = this.options, layout = _b.layout, layoutId = _b.layoutId;
+                const { layout, layoutId } = this.options;
                 /**
                  * If this section of the tree isn't animating we can
                  * delete our target sources for the following frame.
@@ -3287,7 +3198,7 @@
                 }
                 if (!this.layout || !(layout || layoutId))
                     return;
-                var lead = this.getLead();
+                const lead = this.getLead();
                 /**
                  * Reset the corrected box with the latest values from box, as we're then going
                  * to perform mutative operations on it.
@@ -3298,16 +3209,16 @@
                  * 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;
+                const { target } = lead;
                 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;
+                const prevTreeScaleX = this.treeScale.x;
+                const prevTreeScaleY = this.treeScale.y;
+                const 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
@@ -3326,67 +3237,63 @@
                     this.scheduleRender();
                     this.notifyListeners("projectionUpdate", target);
                 }
-            };
-            ProjectionNode.prototype.hide = function () {
+            }
+            hide() {
                 this.isVisible = false;
                 // TODO: Schedule render
-            };
-            ProjectionNode.prototype.show = function () {
+            }
+            show() {
                 this.isVisible = true;
                 // TODO: Schedule render
-            };
-            ProjectionNode.prototype.scheduleRender = function (notifyAll) {
+            }
+            scheduleRender(notifyAll = true) {
                 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;
+            }
+            setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
                 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 = __assign({}, this.latestValues);
-                var targetDelta = createDelta();
+                const snapshot = this.snapshot;
+                const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
+                const mixedValues = Object.assign({}, this.latestValues);
+                const 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 &&
+                const relativeLayout = createBox();
+                const isSharedLayoutAnimation = snapshot === null || snapshot === void 0 ? void 0 : snapshot.isShared;
+                const isOnlyMember = (((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.members.length) || 0) <= 1;
+                const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&
                     !isOnlyMember &&
                     this.options.crossfade === true &&
                     !this.path.some(hasOpacityCrossfade));
                 this.animationProgress = 0;
-                this.mixTargetDelta = function (latest) {
+                this.mixTargetDelta = (latest) => {
                     var _a;
-                    var progress = latest / 1000;
+                    const 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);
+                    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.animationValues = mixedValues;
+                        mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);
                     }
-                    _this.root.scheduleUpdateProjection();
-                    _this.scheduleRender();
-                    _this.animationProgress = progress;
+                    this.root.scheduleUpdateProjection();
+                    this.scheduleRender();
+                    this.animationProgress = progress;
                 };
                 this.mixTargetDelta(0);
-            };
-            ProjectionNode.prototype.startAnimation = function (options) {
-                var _this = this;
+            }
+            startAnimation(options) {
                 var _a, _b;
                 this.notifyListeners("animationStart");
                 (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
@@ -3402,24 +3309,24 @@
                  * 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.update(function () {
+                this.pendingAnimation = sync.update(() => {
                     globalProjectionState.hasAnimatedSinceResize = true;
-                    _this.currentAnimation = animate(0, animationTarget, __assign(__assign({}, options), { onUpdate: function (latest) {
+                    this.currentAnimation = animate(0, animationTarget, Object.assign(Object.assign({}, options), { onUpdate: (latest) => {
                             var _a;
-                            _this.mixTargetDelta(latest);
+                            this.mixTargetDelta(latest);
                             (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, latest);
-                        }, onComplete: function () {
+                        }, onComplete: () => {
                             var _a;
                             (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
-                            _this.completeAnimation();
+                            this.completeAnimation();
                         } }));
-                    if (_this.resumingFrom) {
-                        _this.resumingFrom.currentAnimation = _this.currentAnimation;
+                    if (this.resumingFrom) {
+                        this.resumingFrom.currentAnimation = this.currentAnimation;
                     }
-                    _this.pendingAnimation = undefined;
+                    this.pendingAnimation = undefined;
                 });
-            };
-            ProjectionNode.prototype.completeAnimation = function () {
+            }
+            completeAnimation() {
                 var _a;
                 if (this.resumingFrom) {
                     this.resumingFrom.currentAnimation = undefined;
@@ -3431,17 +3338,17 @@
                         this.animationValues =
                             undefined;
                 this.notifyListeners("animationComplete");
-            };
-            ProjectionNode.prototype.finishAnimation = function () {
+            }
+            finishAnimation() {
                 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;
+            }
+            applyTransformsToTarget() {
+                const { targetWithTransforms, target, layout, latestValues } = this.getLead();
                 if (!targetWithTransforms || !target || !layout)
                     return;
                 copyBoxInto(targetWithTransforms, target);
@@ -3458,41 +3365,40 @@
                  * into the desired bounding box.
                  */
                 calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
-            };
-            ProjectionNode.prototype.registerSharedNode = function (layoutId, node) {
+            }
+            registerSharedNode(layoutId, node) {
                 var _a, _b, _c;
                 if (!this.sharedNodes.has(layoutId)) {
                     this.sharedNodes.set(layoutId, new NodeStack());
                 }
-                var stack = this.sharedNodes.get(layoutId);
+                const 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();
+            }
+            isLead() {
+                const stack = this.getStack();
                 return stack ? stack.lead === this : true;
-            };
-            ProjectionNode.prototype.getLead = function () {
+            }
+            getLead() {
                 var _a;
-                var layoutId = this.options.layoutId;
+                const { layoutId } = this.options;
                 return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
-            };
-            ProjectionNode.prototype.getPrevLead = function () {
+            }
+            getPrevLead() {
                 var _a;
-                var layoutId = this.options.layoutId;
+                const { layoutId } = this.options;
                 return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
-            };
-            ProjectionNode.prototype.getStack = function () {
-                var layoutId = this.options.layoutId;
+            }
+            getStack() {
+                const { layoutId } = this.options;
                 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();
+            }
+            promote({ needsReset, transition, preserveFollowOpacity, } = {}) {
+                const stack = this.getStack();
                 if (stack)
                     stack.promote(this, preserveFollowOpacity);
                 if (needsReset) {
@@ -3500,29 +3406,29 @@
                     this.needsReset = true;
                 }
                 if (transition)
-                    this.setOptions({ transition: transition });
-            };
-            ProjectionNode.prototype.relegate = function () {
-                var stack = this.getStack();
+                    this.setOptions({ transition });
+            }
+            relegate() {
+                const stack = this.getStack();
                 if (stack) {
                     return stack.relegate(this);
                 }
                 else {
                     return false;
                 }
-            };
-            ProjectionNode.prototype.resetRotation = function () {
-                var visualElement = this.options.visualElement;
+            }
+            resetRotation() {
+                const { visualElement } = this.options;
                 if (!visualElement)
                     return;
                 // If there's no detected rotation values, we can early return without a forced render.
-                var hasRotate = false;
+                let hasRotate = false;
                 // Keep a record of all the values we've reset
-                var resetValues = {};
+                const 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;
+                for (let i = 0; i < transformAxes.length; i++) {
+                    const axis = transformAxes[i];
+                    const 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)) {
@@ -3540,18 +3446,17 @@
                 // set to 0.
                 visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
                 // Put back all the values we reset
-                for (var key in resetValues) {
+                for (const 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) {
+            }
+            getProjectionStyles(styleProp = {}) {
                 var _a, _b, _c, _d, _e, _f;
-                if (styleProp === void 0) { styleProp = {}; }
                 // TODO: Return lifecycle-persistent object
-                var styles = {};
+                const styles = {};
                 if (!this.instance || this.isSVG)
                     return styles;
                 if (!this.isVisible) {
@@ -3560,7 +3465,7 @@
                 else {
                     styles.visibility = "";
                 }
-                var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
+                const transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate;
                 if (this.needsReset) {
                     this.needsReset = false;
                     styles.opacity = "";
@@ -3571,9 +3476,9 @@
                         : "none";
                     return styles;
                 }
-                var lead = this.getLead();
+                const lead = this.getLead();
                 if (!this.projectionDelta || !this.layout || !lead.target) {
-                    var emptyStyles = {};
+                    const emptyStyles = {};
                     if (this.options.layoutId) {
                         emptyStyles.opacity = (_b = this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1;
                         emptyStyles.pointerEvents =
@@ -3587,14 +3492,14 @@
                     }
                     return emptyStyles;
                 }
-                var valuesToRender = lead.animationValues || lead.latestValues;
+                const 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");
+                const { x, y } = this.projectionDelta;
+                styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
                 if (lead.animationValues) {
                     /**
                      * If the lead component is animating, assign this either the entering/leaving
@@ -3620,14 +3525,14 @@
                 /**
                  * Apply scale correction
                  */
-                for (var key in scaleCorrectors) {
+                for (const key in scaleCorrectors) {
                     if (valuesToRender[key] === undefined)
                         continue;
-                    var _h = scaleCorrectors[key], correct = _h.correct, applyTo = _h.applyTo;
-                    var corrected = correct(valuesToRender[key], lead);
+                    const { correct, applyTo } = scaleCorrectors[key];
+                    const corrected = correct(valuesToRender[key], lead);
                     if (applyTo) {
-                        var num = applyTo.length;
-                        for (var i = 0; i < num; i++) {
+                        const num = applyTo.length;
+                        for (let i = 0; i < num; i++) {
                             styles[applyTo[i]] = corrected;
                         }
                     }
@@ -3647,62 +3552,61 @@
                             : "none";
                 }
                 return styles;
-            };
-            ProjectionNode.prototype.clearSnapshot = function () {
+            }
+            clearSnapshot() {
                 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(); });
+            resetTree() {
+                this.root.nodes.forEach((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;
+        const 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;
+            const { actual: layout, measured: measuredLayout } = node.layout;
             // 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
+                eachAxis((axis) => {
+                    const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
                         : snapshot.layout[axis];
-                    var length = calcLength(axisSnapshot);
-                    axisSnapshot.min = layout_1[axis].min;
+                    const length = calcLength(axisSnapshot);
+                    axisSnapshot.min = layout[axis].min;
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
             else if (node.options.animationType === "position") {
-                eachAxis(function (axis) {
-                    var axisSnapshot = snapshot.isShared
+                eachAxis((axis) => {
+                    const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
                         : snapshot.layout[axis];
-                    var length = calcLength(layout_1[axis]);
+                    const length = calcLength(layout[axis]);
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
-            var layoutDelta = createDelta();
-            calcBoxDelta(layoutDelta, layout_1, snapshot.layout);
-            var visualDelta = createDelta();
+            const layoutDelta = createDelta();
+            calcBoxDelta(layoutDelta, layout, snapshot.layout);
+            const visualDelta = createDelta();
             if (snapshot.isShared) {
                 calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured);
             }
             else {
-                calcBoxDelta(visualDelta, layout_1, snapshot.layout);
+                calcBoxDelta(visualDelta, layout, snapshot.layout);
             }
-            var hasLayoutChanged = !isDeltaZero(layoutDelta);
-            var hasRelativeTargetChanged = false;
+            const hasLayoutChanged = !isDeltaZero(layoutDelta);
+            let hasRelativeTargetChanged = false;
             if (!node.resumeFrom) {
                 node.relativeParent = node.getClosestProjectingParent();
                 /**
@@ -3710,12 +3614,12 @@
                  * the relative snapshot is not relavent
                  */
                 if (node.relativeParent && !node.relativeParent.resumeFrom) {
-                    var _f = node.relativeParent, parentSnapshot = _f.snapshot, parentLayout = _f.layout;
+                    const { snapshot: parentSnapshot, layout: parentLayout } = node.relativeParent;
                     if (parentSnapshot && parentLayout) {
-                        var relativeSnapshot = createBox();
+                        const relativeSnapshot = createBox();
                         calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
-                        var relativeLayout = createBox();
-                        calcRelativePosition(relativeLayout, layout_1, parentLayout.actual);
+                        const relativeLayout = createBox();
+                        calcRelativePosition(relativeLayout, layout, parentLayout.actual);
                         if (!boxEquals(relativeSnapshot, relativeLayout)) {
                             hasRelativeTargetChanged = true;
                         }
@@ -3723,12 +3627,12 @@
                 }
             }
             node.notifyListeners("didUpdate", {
-                layout: layout_1,
-                snapshot: snapshot,
+                layout,
+                snapshot,
                 delta: visualDelta,
-                layoutDelta: layoutDelta,
-                hasLayoutChanged: hasLayoutChanged,
-                hasRelativeTargetChanged: hasRelativeTargetChanged,
+                layoutDelta,
+                hasLayoutChanged,
+                hasRelativeTargetChanged,
             });
         }
         else if (node.isLead()) {
@@ -3748,7 +3652,7 @@
         node.clearMeasurements();
     }
     function resetTransformStyle(node) {
-        var visualElement = node.options.visualElement;
+        const { visualElement } = node.options;
         if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
             visualElement.notifyBeforeLayoutMeasure();
         }
@@ -3787,7 +3691,7 @@
     function hasOpacityCrossfade(node) {
         return (node.animationValues && node.animationValues.opacityExit !== undefined);
     }
-    var defaultLayoutTransition = {
+    const defaultLayoutTransition = {
         duration: 0.45,
         ease: [0.4, 0, 0.1, 1],
     };
@@ -3796,15 +3700,15 @@
          * 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--) {
+        let searchNode = node.root;
+        for (let 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, "\"]"));
+        const searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
+        const element = searchElement.querySelector(`[data-projection-id="${id}"]`);
         if (element)
             node.mount(element, true);
     }
@@ -3817,59 +3721,54 @@
         roundAxis(box.y);
     }
 
-    function addDomEvent(target, eventName, handler, options) {
-        if (options === void 0) { options = { passive: true }; }
+    function addDomEvent(target, eventName, handler, options = { passive: true }) {
         target.addEventListener(eventName, handler, options);
-        return function () { return target.removeEventListener(eventName, handler); };
+        return () => target.removeEventListener(eventName, handler);
     }
 
-    var DocumentProjectionNode = createProjectionNode({
-        attachResizeListener: function (ref, notify) { return addDomEvent(ref, "resize", notify); },
-        measureScroll: function () { return ({
+    const DocumentProjectionNode = createProjectionNode({
+        attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
+        measureScroll: () => ({
             x: document.documentElement.scrollLeft || document.body.scrollLeft,
             y: document.documentElement.scrollTop || document.body.scrollTop,
-        }); },
-        checkIsScrollRoot: function () { return true; },
+        }),
+        checkIsScrollRoot: () => true,
     });
 
-    var rootProjectionNode = {
+    const rootProjectionNode = {
         current: undefined,
     };
-    var HTMLProjectionNode = createProjectionNode({
-        measureScroll: function (instance) { return ({
+    const HTMLProjectionNode = createProjectionNode({
+        measureScroll: (instance) => ({
             x: instance.scrollLeft,
             y: instance.scrollTop,
-        }); },
-        defaultParent: function () {
+        }),
+        defaultParent: () => {
             if (!rootProjectionNode.current) {
-                var documentNode = new DocumentProjectionNode(0, {});
+                const documentNode = new DocumentProjectionNode(0, {});
                 documentNode.mount(window);
                 documentNode.setOptions({ layoutScroll: true });
                 rootProjectionNode.current = documentNode;
             }
             return rootProjectionNode.current;
         },
-        resetTransform: function (instance, value) {
+        resetTransform: (instance, value) => {
             instance.style.transform = value !== null && value !== void 0 ? value : "none";
         },
-        checkIsScrollRoot: function (instance) {
-            return Boolean(window.getComputedStyle(instance).position === "fixed");
-        },
+        checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
     });
 
-    var notify = function (node) {
-        return !node.isLayoutDirty && node.willUpdate(false);
-    };
+    const notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
     function nodeGroup() {
-        var nodes = new Set();
-        var subscriptions = new WeakMap();
-        var dirtyAll = function () { return nodes.forEach(notify); };
+        const nodes = new Set();
+        const subscriptions = new WeakMap();
+        const dirtyAll = () => nodes.forEach(notify);
         return {
-            add: function (node) {
+            add: (node) => {
                 nodes.add(node);
                 subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
             },
-            remove: function (node) {
+            remove: (node) => {
                 var _a;
                 nodes.delete(node);
                 (_a = subscriptions.get(node)) === null || _a === void 0 ? void 0 : _a();
@@ -3880,7 +3779,7 @@
         };
     }
 
-    var translateAlias = {
+    const translateAlias = {
         x: "translateX",
         y: "translateY",
         z: "translateZ",
@@ -3892,30 +3791,26 @@
      * This outputs with a default order of transforms/scales/rotations, this can be customised by
      * providing a transformTemplate function.
      */
-    function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
-        var transform = _a.transform, transformKeys = _a.transformKeys;
-        var _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.allowTransformNone, allowTransformNone = _d === void 0 ? true : _d;
+    function buildTransform({ transform, transformKeys }, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
         // The transform string we're going to build into.
-        var transformString = "";
+        let transformString = "";
         // Transform keys into their default order - this will determine the output order.
         transformKeys.sort(sortTransformProps);
         // Track whether the defined transform has a defined z so we don't add a
         // second to enable hardware acceleration
-        var transformHasZ = false;
+        let transformHasZ = false;
         // Loop over each transform and build them into transformString
-        var numTransformKeys = transformKeys.length;
-        for (var i = 0; i < numTransformKeys; i++) {
-            var key = transformKeys[i];
-            transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
+        const numTransformKeys = transformKeys.length;
+        for (let i = 0; i < numTransformKeys; i++) {
+            const key = transformKeys[i];
+            transformString += `${translateAlias[key] || key}(${transform[key]}) `;
             if (key === "z")
                 transformHasZ = true;
         }
         if (!transformHasZ && enableHardwareAcceleration) {
             transformString += "translateZ(0)";
         }
-        else {
-            transformString = transformString.trim();
-        }
+        transformString = transformString.trim();
         // If we have a custom `transform` template, pass our transform values and
         // generated transformString to that before returning
         if (transformTemplate) {
@@ -3930,9 +3825,8 @@
      * Build a transformOrigin style. Uses the same defaults as the browser for
      * undefined origins.
      */
-    function buildTransformOrigin(_a) {
-        var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
-        return "".concat(originX, " ").concat(originY, " ").concat(originZ);
+    function buildTransformOrigin({ originX = "50%", originY = "50%", originZ = 0, }) {
+        return `${originX} ${originY} ${originZ}`;
     }
 
     function pixelsToPercent(pixels, axis) {
@@ -3947,8 +3841,8 @@
      * borderRadius in both states. If we animate between the two in pixels that will trigger
      * a paint each time. If we animate between the two in percentage we'll avoid a paint.
      */
-    var correctBorderRadius = {
-        correct: function (latest, node) {
+    const correctBorderRadius = {
+        correct: (latest, node) => {
             if (!node.target)
                 return latest;
             /**
@@ -3967,9 +3861,9 @@
              * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
              * pixel value as a percentage of each axis
              */
-            var x = pixelsToPercent(latest, node.target.x);
-            var y = pixelsToPercent(latest, node.target.y);
-            return "".concat(x, "% ").concat(y, "%");
+            const x = pixelsToPercent(latest, node.target.x);
+            const y = pixelsToPercent(latest, node.target.y);
+            return `${x}% ${y}%`;
         },
     };
 
@@ -3985,24 +3879,23 @@
      *
      * @param current
      */
-    var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+    const cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
     function parseCSSVariable(current) {
-        var match = cssVariableRegex.exec(current);
+        const match = cssVariableRegex.exec(current);
         if (!match)
             return [,];
-        var _a = __read(match, 3), token = _a[1], fallback = _a[2];
+        const [, token, fallback] = match;
         return [token, fallback];
     }
-    var maxDepth = 4;
-    function getVariableValue(current, element, depth) {
-        if (depth === void 0) { depth = 1; }
-        invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
-        var _a = __read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
+    const maxDepth = 4;
+    function getVariableValue(current, element, depth = 1) {
+        invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+        const [token, fallback] = parseCSSVariable(current);
         // No CSS variable detected
         if (!token)
             return;
         // Attempt to read this CSS variable off the element
-        var resolved = window.getComputedStyle(element).getPropertyValue(token);
+        const resolved = window.getComputedStyle(element).getPropertyValue(token);
         if (resolved) {
             return resolved.trim();
         }
@@ -4022,30 +3915,30 @@
     function resolveCSSVariables(visualElement, _a, transitionEnd) {
         var _b;
         var target = __rest(_a, []);
-        var element = visualElement.getInstance();
+        const element = visualElement.getInstance();
         if (!(element instanceof Element))
-            return { target: target, transitionEnd: transitionEnd };
+            return { target, transitionEnd };
         // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
         // only if they change but I think this reads clearer and this isn't a performance-critical path.
         if (transitionEnd) {
-            transitionEnd = __assign({}, transitionEnd);
+            transitionEnd = Object.assign({}, transitionEnd);
         }
         // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
-        visualElement.forEachValue(function (value) {
-            var current = value.get();
+        visualElement.forEachValue((value) => {
+            const current = value.get();
             if (!isCSSVariable$1(current))
                 return;
-            var resolved = getVariableValue(current, element);
+            const resolved = getVariableValue(current, element);
             if (resolved)
                 value.set(resolved);
         });
         // Cycle through every target property and resolve CSS variables. Currently
         // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
-        for (var key in target) {
-            var current = target[key];
+        for (const key in target) {
+            const current = target[key];
             if (!isCSSVariable$1(current))
                 continue;
-            var resolved = getVariableValue(current, element);
+            const resolved = getVariableValue(current, element);
             if (!resolved)
                 continue;
             // Clone target if it hasn't already been
@@ -4056,34 +3949,33 @@
             if (transitionEnd)
                 (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
         }
-        return { target: target, transitionEnd: transitionEnd };
+        return { target, transitionEnd };
     }
 
-    var varToken = "_$css";
-    var correctBoxShadow = {
-        correct: function (latest, _a) {
-            var treeScale = _a.treeScale, projectionDelta = _a.projectionDelta;
-            var original = latest;
+    const varToken = "_$css";
+    const correctBoxShadow = {
+        correct: (latest, { treeScale, projectionDelta }) => {
+            const original = latest;
             /**
              * We need to first strip and store CSS variables from the string.
              */
-            var containsCSSVariables = latest.includes("var(");
-            var cssVariables = [];
+            const containsCSSVariables = latest.includes("var(");
+            const cssVariables = [];
             if (containsCSSVariables) {
-                latest = latest.replace(cssVariableRegex, function (match) {
+                latest = latest.replace(cssVariableRegex, (match) => {
                     cssVariables.push(match);
                     return varToken;
                 });
             }
-            var shadow = complex.parse(latest);
+            const shadow = complex.parse(latest);
             // TODO: Doesn't support multiple shadows
             if (shadow.length > 5)
                 return original;
-            var template = complex.createTransformer(latest);
-            var offset = typeof shadow[0] !== "number" ? 1 : 0;
+            const template = complex.createTransformer(latest);
+            const offset = typeof shadow[0] !== "number" ? 1 : 0;
             // Calculate the overall context scale
-            var xScale = projectionDelta.x.scale * treeScale.x;
-            var yScale = projectionDelta.y.scale * treeScale.y;
+            const xScale = projectionDelta.x.scale * treeScale.x;
+            const yScale = projectionDelta.y.scale * treeScale.y;
             shadow[0 + offset] /= xScale;
             shadow[1 + offset] /= yScale;
             /**
@@ -4092,19 +3984,19 @@
              * We could potentially improve the outcome of this by incorporating the ratio between
              * the two scales.
              */
-            var averageScale = mix(xScale, yScale, 0.5);
+            const averageScale = mix(xScale, yScale, 0.5);
             // Blur
             if (typeof shadow[2 + offset] === "number")
                 shadow[2 + offset] /= averageScale;
             // Spread
             if (typeof shadow[3 + offset] === "number")
                 shadow[3 + offset] /= averageScale;
-            var output = template(shadow);
+            let output = template(shadow);
             if (containsCSSVariables) {
-                var i_1 = 0;
-                output = output.replace(varToken, function () {
-                    var cssVariable = cssVariables[i_1];
-                    i_1++;
+                let i = 0;
+                output = output.replace(varToken, () => {
+                    const cssVariable = cssVariables[i];
+                    i++;
                     return cssVariable;
                 });
             }
@@ -4112,48 +4004,50 @@
         },
     };
 
+    function isWillChangeMotionValue(value) {
+        return Boolean(isMotionValue(value) && value.add);
+    }
+
     /**
      * 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); };
+    const isNumericalString = (v) => /^\-?\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); };
+    const isZeroValueString = (v) => /^0[^.\s]+$/.test(v);
 
     /**
      * Tests a provided value against a ValueType
      */
-    var testValueType = function (v) { return function (type) { return type.test(v); }; };
+    const testValueType = (v) => (type) => type.test(v);
 
     /**
      * ValueType for "auto"
      */
-    var auto = {
-        test: function (v) { return v === "auto"; },
-        parse: function (v) { return v; },
+    const auto = {
+        test: (v) => v === "auto",
+        parse: (v) => v,
     };
 
     /**
      * A list of value types commonly used for dimensions
      */
-    var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+    const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
     /**
      * Tests a dimensional value against the list of dimension ValueTypes
      */
-    var findDimensionValueType = function (v) {
-        return dimensionValueTypes.find(testValueType(v));
-    };
+    const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 
     /**
      * A list of all ValueTypes
      */
-    var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color, complex], false);
+    const valueTypes = [...dimensionValueTypes, color, complex];
     /**
      * Tests a value against the list of ValueTypes
      */
-    var findValueType = function (v) { return valueTypes.find(testValueType(v)); };
+    const findValueType = (v) => valueTypes.find(testValueType(v));
 
     /**
      * Decides if the supplied variable is an array of variant labels
@@ -4185,14 +4079,14 @@
     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;
+        const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
+        const numNewValues = newValueKeys.length;
         if (!numNewValues)
             return;
-        for (var i = 0; i < numNewValues; i++) {
-            var key = newValueKeys[i];
-            var targetValue = target[key];
-            var value = null;
+        for (let i = 0; i < numNewValues; i++) {
+            const key = newValueKeys[i];
+            const targetValue = target[key];
+            let 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.
@@ -4230,13 +4124,13 @@
     function getOriginFromTransition(key, transition) {
         if (!transition)
             return;
-        var valueTransition = transition[key] || transition["default"] || transition;
+        const valueTransition = transition[key] || transition["default"] || transition;
         return valueTransition.from;
     }
     function getOrigin(target, transition, visualElement) {
         var _a, _b;
-        var origin = {};
-        for (var key in target) {
+        const origin = {};
+        for (const 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();
         }
@@ -4254,7 +4148,7 @@
         AnimationType["Exit"] = "exit";
     })(AnimationType || (AnimationType = {}));
 
-    var variantPriorityOrder = [
+    const variantPriorityOrder = [
         AnimationType.Animate,
         AnimationType.InView,
         AnimationType.Focus,
@@ -4263,10 +4157,8 @@
         AnimationType.Drag,
         AnimationType.Exit,
     ];
-    __spreadArray([], __read(variantPriorityOrder), false).reverse();
-    variantPriorityOrder.length;
 
-    var names = [
+    const names = [
         "LayoutMeasure",
         "BeforeLayoutMeasure",
         "LayoutUpdate",
@@ -4281,15 +4173,15 @@
         "Unmount",
     ];
     function createLifecycles() {
-        var managers = names.map(function () { return new SubscriptionManager(); });
-        var propSubscriptions = {};
-        var lifecycles = {
-            clearAllListeners: function () { return managers.forEach(function (manager) { return manager.clear(); }); },
-            updatePropListeners: function (props) {
-                names.forEach(function (name) {
+        const managers = names.map(() => new SubscriptionManager());
+        const propSubscriptions = {};
+        const lifecycles = {
+            clearAllListeners: () => managers.forEach((manager) => manager.clear()),
+            updatePropListeners: (props) => {
+                names.forEach((name) => {
                     var _a;
-                    var on = "on" + name;
-                    var propListener = props[on];
+                    const on = "on" + name;
+                    const propListener = props[on];
                     // Unsubscribe existing subscription
                     (_a = propSubscriptions[name]) === null || _a === void 0 ? void 0 : _a.call(propSubscriptions);
                     // Add new subscription
@@ -4299,20 +4191,14 @@
                 });
             },
         };
-        managers.forEach(function (manager, i) {
-            lifecycles["on" + names[i]] = function (handler) { return manager.add(handler); };
-            lifecycles["notify" + names[i]] = function () {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                return manager.notify.apply(manager, __spreadArray([], __read(args), false));
-            };
+        managers.forEach((manager, i) => {
+            lifecycles["on" + names[i]] = (handler) => manager.add(handler);
+            lifecycles["notify" + names[i]] = (...args) => manager.notify(...args);
         });
         return lifecycles;
     }
 
-    var warned = new Set();
+    const warned = new Set();
     function warnOnce(condition, message, element) {
         if (condition || warned.has(message))
             return;
@@ -4324,29 +4210,36 @@
 
     function updateMotionValuesFromProps(element, next, prev) {
         var _a;
-        for (var key in next) {
-            var nextValue = next[key];
-            var prevValue = prev[key];
+        const { willChange } = next;
+        for (const key in next) {
+            const nextValue = next[key];
+            const prevValue = prev[key];
             if (isMotionValue(nextValue)) {
                 /**
                  * If this is a motion value found in props or style, we want to add it
                  * to our visual element's motion value map.
                  */
                 element.addValue(key, nextValue);
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.add(key);
+                }
                 /**
                  * Check the version of the incoming motion value with this version
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.0.3", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.0.3 may not work as expected."));
+                    warnOnce(nextValue.version === "7.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
                 /**
-                 * If we're swapping to a new motion value, create a new motion value
-                 * from that
+                 * If we're swapping from a motion value to a static value,
+                 * create a new motion value from that
                  */
                 element.addValue(key, motionValue(nextValue));
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.remove(key);
+                }
             }
             else if (prevValue !== nextValue) {
                 /**
@@ -4355,7 +4248,7 @@
                  * not handling the value with our animation state.
                  */
                 if (element.hasValue(key)) {
-                    var existingValue = element.getValue(key);
+                    const existingValue = element.getValue(key);
                     // TODO: Only update values that aren't being animated or even looked at
                     !existingValue.hasAnimated && existingValue.set(nextValue);
                 }
@@ -4365,403 +4258,397 @@
             }
         }
         // Handle removed values
-        for (var key in prev) {
+        for (const key in prev) {
             if (next[key] === undefined)
                 element.removeValue(key);
         }
         return next;
     }
 
-    var visualElement = function (_a) {
-        var _b = _a.treeType, treeType = _b === void 0 ? "" : _b, build = _a.build, getBaseTarget = _a.getBaseTarget, makeTargetAnimatable = _a.makeTargetAnimatable, measureViewportBox = _a.measureViewportBox, renderInstance = _a.render, readValueFromInstance = _a.readValueFromInstance, removeValueFromRenderState = _a.removeValueFromRenderState, sortNodePosition = _a.sortNodePosition, scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps;
-        return function (_a, options) {
-            var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState, shouldReduceMotion = _a.shouldReduceMotion;
-            if (options === void 0) { options = {}; }
-            var isMounted = false;
-            var latestValues = visualState.latestValues, renderState = visualState.renderState;
+    const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }) => ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }, options = {}) => {
+        let isMounted = false;
+        const { latestValues, renderState } = visualState;
+        /**
+         * The instance of the render-specific node that will be hydrated by the
+         * exposed React ref. So for example, this visual element can host a
+         * HTMLElement, plain object, or Three.js object. The functions provided
+         * in VisualElementConfig allow us to interface with this instance.
+         */
+        let instance;
+        /**
+         * Manages the subscriptions for a visual element's lifecycle, for instance
+         * onRender
+         */
+        const lifecycles = createLifecycles();
+        /**
+         * A map of all motion values attached to this visual element. Motion
+         * values are source of truth for any given animated value. A motion
+         * value might be provided externally by the component via props.
+         */
+        const values = new Map();
+        /**
+         * A map of every subscription that binds the provided or generated
+         * motion values onChange listeners to this visual element.
+         */
+        const valueSubscriptions = new Map();
+        /**
+         * A reference to the previously-provided motion values as returned
+         * from scrapeMotionValuesFromProps. We use the keys in here to determine
+         * if any motion values need to be removed after props are updated.
+         */
+        let prevMotionValues = {};
+        /**
+         * When values are removed from all animation props we need to search
+         * for a fallback value to animate to. These values are tracked in baseTarget.
+         */
+        const baseTarget = Object.assign({}, latestValues);
+        // Internal methods ========================
+        /**
+         * On mount, this will be hydrated with a callback to disconnect
+         * this visual element from its parent on unmount.
+         */
+        let removeFromVariantTree;
+        /**
+         * Render the element with the latest styles outside of the React
+         * render lifecycle
+         */
+        function render() {
+            if (!instance || !isMounted)
+                return;
+            triggerBuild();
+            renderInstance(instance, renderState, props.style, element.projection);
+        }
+        function triggerBuild() {
+            build(element, renderState, latestValues, options, props);
+        }
+        function update() {
+            lifecycles.notifyUpdate(latestValues);
+        }
+        /**
+         *
+         */
+        function bindToMotionValue(key, value) {
+            const removeOnChange = value.onChange((latestValue) => {
+                latestValues[key] = latestValue;
+                props.onUpdate && sync.update(update, false, true);
+            });
+            const removeOnRenderRequest = value.onRenderRequest(element.scheduleRender);
+            valueSubscriptions.set(key, () => {
+                removeOnChange();
+                removeOnRenderRequest();
+            });
+        }
+        /**
+         * Any motion values that are provided to the element when created
+         * aren't yet bound to the element, as this would technically be impure.
+         * However, we iterate through the motion values and set them to the
+         * initial values for this component.
+         *
+         * TODO: This is impure and we should look at changing this to run on mount.
+         * Doing so will break some tests but this isn't neccessarily a breaking change,
+         * more a reflection of the test.
+         */
+        const _a = scrapeMotionValuesFromProps(props), { willChange } = _a, initialMotionValues = __rest(_a, ["willChange"]);
+        for (const key in initialMotionValues) {
+            const value = initialMotionValues[key];
+            if (latestValues[key] !== undefined && isMotionValue(value)) {
+                value.set(latestValues[key], false);
+                if (isWillChangeMotionValue(willChange)) {
+                    willChange.add(key);
+                }
+            }
+        }
+        /**
+         * Determine what role this visual element should take in the variant tree.
+         */
+        const isControllingVariants = checkIfControllingVariants(props);
+        const isVariantNode = checkIfVariantNode(props);
+        const element = Object.assign(Object.assign({ treeType, 
             /**
-             * The instance of the render-specific node that will be hydrated by the
-             * exposed React ref. So for example, this visual element can host a
-             * HTMLElement, plain object, or Three.js object. The functions provided
-             * in VisualElementConfig allow us to interface with this instance.
+             * This is a mirror of the internal instance prop, which keeps
+             * VisualElement type-compatible with React's RefObject.
              */
-            var instance;
+            current: null, 
             /**
-             * Manages the subscriptions for a visual element's lifecycle, for instance
-             * onRender
+             * The depth of this visual element within the visual element tree.
              */
-            var lifecycles = createLifecycles();
+            depth: parent ? parent.depth + 1 : 0, parent, children: new Set(), 
             /**
-             * A map of all motion values attached to this visual element. Motion
-             * values are source of truth for any given animated value. A motion
-             * value might be provided externally by the component via props.
+             *
              */
-            var values = new Map();
+            presenceId,
+            shouldReduceMotion, 
             /**
-             * A map of every subscription that binds the provided or generated
-             * motion values onChange listeners to this visual element.
+             * If this component is part of the variant tree, it should track
+             * any children that are also part of the tree. This is essentially
+             * a shadow tree to simplify logic around how to stagger over children.
              */
-            var valueSubscriptions = new Map();
+            variantChildren: isVariantNode ? new Set() : undefined, 
             /**
-             * A reference to the previously-provided motion values as returned
-             * from scrapeMotionValuesFromProps. We use the keys in here to determine
-             * if any motion values need to be removed after props are updated.
+             * Whether this instance is visible. This can be changed imperatively
+             * by the projection tree, is analogous to CSS's visibility in that
+             * hidden elements should take up layout, and needs enacting by the configured
+             * render function.
              */
-            var prevMotionValues = {};
+            isVisible: undefined, 
             /**
-             * When values are removed from all animation props we need to search
-             * for a fallback value to animate to. These values are tracked in baseTarget.
+             * Normally, if a component is controlled by a parent's variants, it can
+             * rely on that ancestor to trigger animations further down the tree.
+             * However, if a component is created after its parent is mounted, the parent
+             * won't trigger that mount animation so the child needs to.
+             *
+             * TODO: This might be better replaced with a method isParentMounted
              */
-            var baseTarget = __assign({}, latestValues);
-            // Internal methods ========================
+            manuallyAnimateOnMount: Boolean(parent === null || parent === void 0 ? void 0 : parent.isMounted()), 
             /**
-             * On mount, this will be hydrated with a callback to disconnect
-             * this visual element from its parent on unmount.
+             * This can be set by AnimatePresence to force components that mount
+             * at the same time as it to mount as if they have initial={false} set.
              */
-            var removeFromVariantTree;
+            blockInitialAnimation, 
             /**
-             * Render the element with the latest styles outside of the React
-             * render lifecycle
+             * Determine whether this component has mounted yet. This is mostly used
+             * by variant children to determine whether they need to trigger their
+             * own animations on mount.
              */
-            function render() {
-                if (!instance || !isMounted)
-                    return;
-                triggerBuild();
-                renderInstance(instance, renderState, props.style, element.projection);
-            }
-            function triggerBuild() {
-                build(element, renderState, latestValues, options, props);
-            }
-            function update() {
-                lifecycles.notifyUpdate(latestValues);
-            }
+            isMounted: () => Boolean(instance), mount(newInstance) {
+                isMounted = true;
+                instance = element.current = newInstance;
+                if (element.projection) {
+                    element.projection.mount(newInstance);
+                }
+                if (isVariantNode && parent && !isControllingVariants) {
+                    removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
+                }
+                values.forEach((value, key) => bindToMotionValue(key, value));
+                parent === null || parent === void 0 ? void 0 : parent.children.add(element);
+                element.setProps(props);
+            },
             /**
              *
              */
-            function bindToMotionValue(key, value) {
-                var removeOnChange = value.onChange(function (latestValue) {
-                    latestValues[key] = latestValue;
-                    props.onUpdate && sync.update(update, false, true);
-                });
-                var removeOnRenderRequest = value.onRenderRequest(element.scheduleRender);
-                valueSubscriptions.set(key, function () {
-                    removeOnChange();
-                    removeOnRenderRequest();
-                });
-            }
+            unmount() {
+                var _a;
+                (_a = element.projection) === null || _a === void 0 ? void 0 : _a.unmount();
+                cancelSync.update(update);
+                cancelSync.render(render);
+                valueSubscriptions.forEach((remove) => remove());
+                removeFromVariantTree === null || removeFromVariantTree === void 0 ? void 0 : removeFromVariantTree();
+                parent === null || parent === void 0 ? void 0 : parent.children.delete(element);
+                lifecycles.clearAllListeners();
+                instance = undefined;
+                isMounted = false;
+            },
             /**
-             * Any motion values that are provided to the element when created
-             * aren't yet bound to the element, as this would technically be impure.
-             * However, we iterate through the motion values and set them to the
-             * initial values for this component.
-             *
-             * TODO: This is impure and we should look at changing this to run on mount.
-             * Doing so will break some tests but this isn't neccessarily a breaking change,
-             * more a reflection of the test.
+             * Add a child visual element to our set of children.
              */
-            var initialMotionValues = scrapeMotionValuesFromProps(props);
-            for (var key in initialMotionValues) {
-                var value = initialMotionValues[key];
-                if (latestValues[key] !== undefined && isMotionValue(value)) {
-                    value.set(latestValues[key], false);
+            addVariantChild(child) {
+                var _a;
+                const closestVariantNode = element.getClosestVariantNode();
+                if (closestVariantNode) {
+                    (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child);
+                    return () => closestVariantNode.variantChildren.delete(child);
                 }
-            }
-            /**
-             * Determine what role this visual element should take in the variant tree.
-             */
-            var isControllingVariants = checkIfControllingVariants(props);
-            var isVariantNode = checkIfVariantNode(props);
-            var element = __assign(__assign({ treeType: treeType, 
-                /**
-                 * This is a mirror of the internal instance prop, which keeps
-                 * VisualElement type-compatible with React's RefObject.
-                 */
-                current: null, 
-                /**
-                 * The depth of this visual element within the visual element tree.
-                 */
-                depth: parent ? parent.depth + 1 : 0, parent: parent, children: new Set(), 
-                /**
-                 *
-                 */
-                presenceId: presenceId, shouldReduceMotion: shouldReduceMotion, 
-                /**
-                 * If this component is part of the variant tree, it should track
-                 * any children that are also part of the tree. This is essentially
-                 * a shadow tree to simplify logic around how to stagger over children.
-                 */
-                variantChildren: isVariantNode ? new Set() : undefined, 
-                /**
-                 * Whether this instance is visible. This can be changed imperatively
-                 * by the projection tree, is analogous to CSS's visibility in that
-                 * hidden elements should take up layout, and needs enacting by the configured
-                 * render function.
-                 */
-                isVisible: undefined, 
-                /**
-                 * Normally, if a component is controlled by a parent's variants, it can
-                 * rely on that ancestor to trigger animations further down the tree.
-                 * However, if a component is created after its parent is mounted, the parent
-                 * won't trigger that mount animation so the child needs to.
-                 *
-                 * TODO: This might be better replaced with a method isParentMounted
-                 */
-                manuallyAnimateOnMount: Boolean(parent === null || parent === void 0 ? void 0 : parent.isMounted()), 
-                /**
-                 * This can be set by AnimatePresence to force components that mount
-                 * at the same time as it to mount as if they have initial={false} set.
-                 */
-                blockInitialAnimation: blockInitialAnimation, 
-                /**
-                 * Determine whether this component has mounted yet. This is mostly used
-                 * by variant children to determine whether they need to trigger their
-                 * own animations on mount.
-                 */
-                isMounted: function () { return Boolean(instance); }, mount: function (newInstance) {
-                    isMounted = true;
-                    instance = element.current = newInstance;
-                    if (element.projection) {
-                        element.projection.mount(newInstance);
-                    }
-                    if (isVariantNode && parent && !isControllingVariants) {
-                        removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
-                    }
-                    values.forEach(function (value, key) { return bindToMotionValue(key, value); });
-                    parent === null || parent === void 0 ? void 0 : parent.children.add(element);
-                    element.setProps(props);
-                }, 
-                /**
-                 *
-                 */
-                unmount: function () {
-                    var _a;
-                    (_a = element.projection) === null || _a === void 0 ? void 0 : _a.unmount();
-                    cancelSync.update(update);
-                    cancelSync.render(render);
-                    valueSubscriptions.forEach(function (remove) { return remove(); });
-                    removeFromVariantTree === null || removeFromVariantTree === void 0 ? void 0 : removeFromVariantTree();
-                    parent === null || parent === void 0 ? void 0 : parent.children.delete(element);
-                    lifecycles.clearAllListeners();
-                    instance = undefined;
-                    isMounted = false;
-                }, 
-                /**
-                 * Add a child visual element to our set of children.
-                 */
-                addVariantChild: function (child) {
-                    var _a;
-                    var closestVariantNode = element.getClosestVariantNode();
-                    if (closestVariantNode) {
-                        (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child);
-                        return function () {
-                            return closestVariantNode.variantChildren.delete(child);
-                        };
-                    }
-                }, sortNodePosition: function (other) {
-                    /**
-                     * If these nodes aren't even of the same type we can't compare their depth.
-                     */
-                    if (!sortNodePosition || treeType !== other.treeType)
-                        return 0;
-                    return sortNodePosition(element.getInstance(), other.getInstance());
-                }, 
-                /**
-                 * Returns the closest variant node in the tree starting from
-                 * this visual element.
-                 */
-                getClosestVariantNode: function () {
-                    return isVariantNode ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode();
-                }, 
-                /**
-                 * Expose the latest layoutId prop.
-                 */
-                getLayoutId: function () { return props.layoutId; }, 
-                /**
-                 * Returns the current instance.
-                 */
-                getInstance: function () { return instance; }, 
-                /**
-                 * Get/set the latest static values.
-                 */
-                getStaticValue: function (key) { return latestValues[key]; }, setStaticValue: function (key, value) { return (latestValues[key] = value); }, 
-                /**
-                 * Returns the latest motion value state. Currently only used to take
-                 * a snapshot of the visual element - perhaps this can return the whole
-                 * visual state
-                 */
-                getLatestValues: function () { return latestValues; }, 
+            },
+            sortNodePosition(other) {
                 /**
-                 * Set the visiblity of the visual element. If it's changed, schedule
-                 * a render to reflect these changes.
+                 * If these nodes aren't even of the same type we can't compare their depth.
                  */
-                setVisibility: function (visibility) {
-                    if (element.isVisible === visibility)
-                        return;
-                    element.isVisible = visibility;
+                if (!sortNodePosition || treeType !== other.treeType)
+                    return 0;
+                return sortNodePosition(element.getInstance(), other.getInstance());
+            }, 
+            /**
+             * Returns the closest variant node in the tree starting from
+             * this visual element.
+             */
+            getClosestVariantNode: () => isVariantNode ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode(), 
+            /**
+             * Expose the latest layoutId prop.
+             */
+            getLayoutId: () => props.layoutId, 
+            /**
+             * Returns the current instance.
+             */
+            getInstance: () => instance, 
+            /**
+             * Get/set the latest static values.
+             */
+            getStaticValue: (key) => latestValues[key], setStaticValue: (key, value) => (latestValues[key] = value), 
+            /**
+             * Returns the latest motion value state. Currently only used to take
+             * a snapshot of the visual element - perhaps this can return the whole
+             * visual state
+             */
+            getLatestValues: () => latestValues, 
+            /**
+             * Set the visiblity of the visual element. If it's changed, schedule
+             * a render to reflect these changes.
+             */
+            setVisibility(visibility) {
+                if (element.isVisible === visibility)
+                    return;
+                element.isVisible = visibility;
+                element.scheduleRender();
+            },
+            /**
+             * Make a target animatable by Popmotion. For instance, if we're
+             * trying to animate width from 100px to 100vw we need to measure 100vw
+             * in pixels to determine what we really need to animate to. This is also
+             * pluggable to support Framer's custom value types like Color,
+             * and CSS variables.
+             */
+            makeTargetAnimatable(target, canMutate = true) {
+                return makeTargetAnimatable(element, target, props, canMutate);
+            },
+            /**
+             * Measure the current viewport box with or without transforms.
+             * Only measures axis-aligned boxes, rotate and skew must be manually
+             * removed with a re-render to work.
+             */
+            measureViewportBox() {
+                return measureViewportBox(instance, props);
+            },
+            // Motion values ========================
+            /**
+             * Add a motion value and bind it to this visual element.
+             */
+            addValue(key, value) {
+                // Remove existing value if it exists
+                if (element.hasValue(key))
+                    element.removeValue(key);
+                values.set(key, value);
+                latestValues[key] = value.get();
+                bindToMotionValue(key, value);
+            },
+            /**
+             * Remove a motion value and unbind any active subscriptions.
+             */
+            removeValue(key) {
+                var _a;
+                values.delete(key);
+                (_a = valueSubscriptions.get(key)) === null || _a === void 0 ? void 0 : _a();
+                valueSubscriptions.delete(key);
+                delete latestValues[key];
+                removeValueFromRenderState(key, renderState);
+            }, 
+            /**
+             * Check whether we have a motion value for this key
+             */
+            hasValue: (key) => values.has(key), 
+            /**
+             * Get a motion value for this key. If called with a default
+             * value, we'll create one if none exists.
+             */
+            getValue(key, defaultValue) {
+                let value = values.get(key);
+                if (value === undefined && defaultValue !== undefined) {
+                    value = motionValue(defaultValue);
+                    element.addValue(key, value);
+                }
+                return value;
+            }, 
+            /**
+             * Iterate over our motion values.
+             */
+            forEachValue: (callback) => values.forEach(callback), 
+            /**
+             * If we're trying to animate to a previously unencountered value,
+             * we need to check for it in our state and as a last resort read it
+             * directly from the instance (which might have performance implications).
+             */
+            readValue: (key) => {
+                var _a;
+                return (_a = latestValues[key]) !== null && _a !== void 0 ? _a : readValueFromInstance(instance, key, options);
+            }, 
+            /**
+             * Set the base target to later animate back to. This is currently
+             * only hydrated on creation and when we first read a value.
+             */
+            setBaseTarget(key, value) {
+                baseTarget[key] = value;
+            },
+            /**
+             * Find the base target for a value thats been removed from all animation
+             * props.
+             */
+            getBaseTarget(key) {
+                if (getBaseTarget) {
+                    const target = getBaseTarget(props, key);
+                    if (target !== undefined && !isMotionValue(target))
+                        return target;
+                }
+                return baseTarget[key];
+            } }, lifecycles), { 
+            /**
+             * Build the renderer state based on the latest visual state.
+             */
+            build() {
+                triggerBuild();
+                return renderState;
+            },
+            /**
+             * Schedule a render on the next animation frame.
+             */
+            scheduleRender() {
+                sync.render(render, false, true);
+            }, 
+            /**
+             * Synchronously fire render. It's prefered that we batch renders but
+             * in many circumstances, like layout measurement, we need to run this
+             * synchronously. However in those instances other measures should be taken
+             * to batch reads/writes.
+             */
+            syncRender: render, 
+            /**
+             * Update the provided props. Ensure any newly-added motion values are
+             * added to our map, old ones removed, and listeners updated.
+             */
+            setProps(newProps) {
+                if (newProps.transformTemplate || props.transformTemplate) {
                     element.scheduleRender();
-                }, 
-                /**
-                 * Make a target animatable by Popmotion. For instance, if we're
-                 * trying to animate width from 100px to 100vw we need to measure 100vw
-                 * in pixels to determine what we really need to animate to. This is also
-                 * pluggable to support Framer's custom value types like Color,
-                 * and CSS variables.
-                 */
-                makeTargetAnimatable: function (target, canMutate) {
-                    if (canMutate === void 0) { canMutate = true; }
-                    return makeTargetAnimatable(element, target, props, canMutate);
-                }, 
-                /**
-                 * Measure the current viewport box with or without transforms.
-                 * Only measures axis-aligned boxes, rotate and skew must be manually
-                 * removed with a re-render to work.
-                 */
-                measureViewportBox: function () {
-                    return measureViewportBox(instance, props);
-                }, 
-                // Motion values ========================
-                /**
-                 * Add a motion value and bind it to this visual element.
-                 */
-                addValue: function (key, value) {
-                    // Remove existing value if it exists
-                    if (element.hasValue(key))
-                        element.removeValue(key);
-                    values.set(key, value);
-                    latestValues[key] = value.get();
-                    bindToMotionValue(key, value);
-                }, 
-                /**
-                 * Remove a motion value and unbind any active subscriptions.
-                 */
-                removeValue: function (key) {
-                    var _a;
-                    values.delete(key);
-                    (_a = valueSubscriptions.get(key)) === null || _a === void 0 ? void 0 : _a();
-                    valueSubscriptions.delete(key);
-                    delete latestValues[key];
-                    removeValueFromRenderState(key, renderState);
-                }, 
-                /**
-                 * Check whether we have a motion value for this key
-                 */
-                hasValue: function (key) { return values.has(key); }, 
-                /**
-                 * Get a motion value for this key. If called with a default
-                 * value, we'll create one if none exists.
-                 */
-                getValue: function (key, defaultValue) {
-                    var value = values.get(key);
-                    if (value === undefined && defaultValue !== undefined) {
-                        value = motionValue(defaultValue);
-                        element.addValue(key, value);
-                    }
-                    return value;
-                }, 
-                /**
-                 * Iterate over our motion values.
-                 */
-                forEachValue: function (callback) { return values.forEach(callback); }, 
-                /**
-                 * If we're trying to animate to a previously unencountered value,
-                 * we need to check for it in our state and as a last resort read it
-                 * directly from the instance (which might have performance implications).
-                 */
-                readValue: function (key) {
-                    var _a;
-                    return (_a = latestValues[key]) !== null && _a !== void 0 ? _a : readValueFromInstance(instance, key, options);
-                }, 
-                /**
-                 * Set the base target to later animate back to. This is currently
-                 * only hydrated on creation and when we first read a value.
-                 */
-                setBaseTarget: function (key, value) {
-                    baseTarget[key] = value;
-                }, 
-                /**
-                 * Find the base target for a value thats been removed from all animation
-                 * props.
-                 */
-                getBaseTarget: function (key) {
-                    if (getBaseTarget) {
-                        var target = getBaseTarget(props, key);
-                        if (target !== undefined && !isMotionValue(target))
-                            return target;
-                    }
-                    return baseTarget[key];
-                } }, lifecycles), { 
-                /**
-                 * Build the renderer state based on the latest visual state.
-                 */
-                build: function () {
-                    triggerBuild();
-                    return renderState;
-                }, 
-                /**
-                 * Schedule a render on the next animation frame.
-                 */
-                scheduleRender: function () {
-                    sync.render(render, false, true);
-                }, 
-                /**
-                 * Synchronously fire render. It's prefered that we batch renders but
-                 * in many circumstances, like layout measurement, we need to run this
-                 * synchronously. However in those instances other measures should be taken
-                 * to batch reads/writes.
-                 */
-                syncRender: render, 
-                /**
-                 * Update the provided props. Ensure any newly-added motion values are
-                 * added to our map, old ones removed, and listeners updated.
-                 */
-                setProps: function (newProps) {
-                    if (newProps.transformTemplate || props.transformTemplate) {
-                        element.scheduleRender();
-                    }
-                    props = newProps;
-                    lifecycles.updatePropListeners(newProps);
-                    prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);
-                }, getProps: function () { return props; }, 
-                // Variants ==============================
-                /**
-                 * Returns the variant definition with a given name.
-                 */
-                getVariant: function (name) { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; }, 
-                /**
-                 * Returns the defined default transition on this component.
-                 */
-                getDefaultTransition: function () { return props.transition; }, getTransformPagePoint: function () {
-                    return props.transformPagePoint;
-                }, 
-                /**
-                 * Used by child variant nodes to get the closest ancestor variant props.
-                 */
-                getVariantContext: function (startAtParent) {
-                    if (startAtParent === void 0) { startAtParent = false; }
-                    if (startAtParent)
-                        return parent === null || parent === void 0 ? void 0 : parent.getVariantContext();
-                    if (!isControllingVariants) {
-                        var context_1 = (parent === null || parent === void 0 ? void 0 : parent.getVariantContext()) || {};
-                        if (props.initial !== undefined) {
-                            context_1.initial = props.initial;
-                        }
-                        return context_1;
-                    }
-                    var context = {};
-                    for (var i = 0; i < numVariantProps; i++) {
-                        var name_1 = variantProps[i];
-                        var prop = props[name_1];
-                        if (isVariantLabel(prop) || prop === false) {
-                            context[name_1] = prop;
-                        }
+                }
+                props = newProps;
+                lifecycles.updatePropListeners(newProps);
+                prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);
+            }, getProps: () => props, 
+            // Variants ==============================
+            /**
+             * Returns the variant definition with a given name.
+             */
+            getVariant: (name) => { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; }, 
+            /**
+             * Returns the defined default transition on this component.
+             */
+            getDefaultTransition: () => props.transition, getTransformPagePoint: () => {
+                return props.transformPagePoint;
+            }, 
+            /**
+             * Used by child variant nodes to get the closest ancestor variant props.
+             */
+            getVariantContext(startAtParent = false) {
+                if (startAtParent)
+                    return parent === null || parent === void 0 ? void 0 : parent.getVariantContext();
+                if (!isControllingVariants) {
+                    const context = (parent === null || parent === void 0 ? void 0 : parent.getVariantContext()) || {};
+                    if (props.initial !== undefined) {
+                        context.initial = props.initial;
                     }
                     return context;
-                } });
-            return element;
-        };
+                }
+                const context = {};
+                for (let i = 0; i < numVariantProps; i++) {
+                    const name = variantProps[i];
+                    const prop = props[name];
+                    if (isVariantLabel(prop) || prop === false) {
+                        context[name] = prop;
+                    }
+                }
+                return context;
+            } });
+        return element;
     };
-    var variantProps = __spreadArray(["initial"], __read(variantPriorityOrder), false);
-    var numVariantProps = variantProps.length;
+    const variantProps = ["initial", ...variantPriorityOrder];
+    const numVariantProps = variantProps.length;
 
     /**
      * Returns true if the provided key is a CSS variable
@@ -4773,7 +4660,7 @@
     /**
      * Provided a value and a ValueType, returns the value as that value type.
      */
-    var getValueAsType = function (value, type) {
+    const getValueAsType = (value, type) => {
         return type && typeof value === "number"
             ? type.transform(value)
             : value;
@@ -4781,24 +4668,24 @@
 
     function buildHTMLStyles(state, latestValues, options, transformTemplate) {
         var _a;
-        var style = state.style, vars = state.vars, transform = state.transform, transformKeys = state.transformKeys, transformOrigin = state.transformOrigin;
+        const { style, vars, transform, transformKeys, transformOrigin } = state;
         // Empty the transformKeys array. As we're throwing out refs to its items
         // this might not be as cheap as suspected. Maybe using the array as a buffer
         // with a manual incrementation would be better.
         transformKeys.length = 0;
         // Track whether we encounter any transform or transformOrigin values.
-        var hasTransform = false;
-        var hasTransformOrigin = false;
+        let hasTransform = false;
+        let hasTransformOrigin = false;
         // Does the calculated transform essentially equal "none"?
-        var transformIsNone = true;
+        let transformIsNone = true;
         /**
          * Loop over all our latest animated values and decide whether to handle them
          * as a style or CSS variable.
          *
          * Transforms and transform origins are kept seperately for further processing.
          */
-        for (var key in latestValues) {
-            var value = latestValues[key];
+        for (const key in latestValues) {
+            const value = latestValues[key];
             /**
              * If this is a CSS variable we don't do any further processing.
              */
@@ -4807,8 +4694,8 @@
                 continue;
             }
             // Convert the value to its default value type, ie 0 -> "0px"
-            var valueType = numberValueTypes[key];
-            var valueAsType = getValueAsType(value, valueType);
+            const valueType = numberValueTypes[key];
+            const valueAsType = getValueAsType(value, valueType);
             if (isTransformProp(key)) {
                 // If this is a transform, flag to enable further transform processing
                 hasTransform = true;
@@ -4844,7 +4731,9 @@
         }
     }
 
-    var positionalKeys = new Set([
+    const isBrowser = typeof document !== "undefined";
+
+    const positionalKeys = new Set([
         "width",
         "height",
         "top",
@@ -4854,19 +4743,17 @@
         "x",
         "y",
     ]);
-    var isPositionalKey = function (key) { return positionalKeys.has(key); };
-    var hasPositionalKey = function (target) {
+    const isPositionalKey = (key) => positionalKeys.has(key);
+    const hasPositionalKey = (target) => {
         return Object.keys(target).some(isPositionalKey);
     };
-    var setAndResetVelocity = function (value, to) {
+    const setAndResetVelocity = (value, to) => {
         // Looks odd but setting it twice doesn't render, it'll just
         // set both prev and current to the latest value
         value.set(to, false);
         value.set(to);
     };
-    var isNumOrPxType = function (v) {
-        return v === number || v === px;
-    };
+    const isNumOrPxType = (v) => v === number || v === px;
     var BoundingBoxDimension;
     (function (BoundingBoxDimension) {
         BoundingBoxDimension["width"] = "width";
@@ -4876,35 +4763,30 @@
         BoundingBoxDimension["top"] = "top";
         BoundingBoxDimension["bottom"] = "bottom";
     })(BoundingBoxDimension || (BoundingBoxDimension = {}));
-    var getPosFromMatrix = function (matrix, pos) {
-        return parseFloat(matrix.split(", ")[pos]);
-    };
-    var getTranslateFromMatrix = function (pos2, pos3) {
-        return function (_bbox, _a) {
-            var transform = _a.transform;
-            if (transform === "none" || !transform)
-                return 0;
-            var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
-            if (matrix3d) {
-                return getPosFromMatrix(matrix3d[1], pos3);
+    const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
+    const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
+        if (transform === "none" || !transform)
+            return 0;
+        const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+        if (matrix3d) {
+            return getPosFromMatrix(matrix3d[1], pos3);
+        }
+        else {
+            const matrix = transform.match(/^matrix\((.+)\)$/);
+            if (matrix) {
+                return getPosFromMatrix(matrix[1], pos2);
             }
             else {
-                var matrix = transform.match(/^matrix\((.+)\)$/);
-                if (matrix) {
-                    return getPosFromMatrix(matrix[1], pos2);
-                }
-                else {
-                    return 0;
-                }
+                return 0;
             }
-        };
+        }
     };
-    var transformKeys = new Set(["x", "y", "z"]);
-    var nonTranslationalTransformKeys = transformProps.filter(function (key) { return !transformKeys.has(key); });
+    const transformKeys = new Set(["x", "y", "z"]);
+    const nonTranslationalTransformKeys = transformProps.filter((key) => !transformKeys.has(key));
     function removeNonTranslationalTransform(visualElement) {
-        var removedTransforms = [];
-        nonTranslationalTransformKeys.forEach(function (key) {
-            var value = visualElement.getValue(key);
+        const removedTransforms = [];
+        nonTranslationalTransformKeys.forEach((key) => {
+            const value = visualElement.getValue(key);
             if (value !== undefined) {
                 removedTransforms.push([key, value.get()]);
                 value.set(key.startsWith("scale") ? 1 : 0);
@@ -4915,46 +4797,24 @@
             visualElement.syncRender();
         return removedTransforms;
     }
-    var positionalValues = {
+    const positionalValues = {
         // Dimensions
-        width: function (_a, _b) {
-            var x = _a.x;
-            var _c = _b.paddingLeft, paddingLeft = _c === void 0 ? "0" : _c, _d = _b.paddingRight, paddingRight = _d === void 0 ? "0" : _d;
-            return x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight);
-        },
-        height: function (_a, _b) {
-            var y = _a.y;
-            var _c = _b.paddingTop, paddingTop = _c === void 0 ? "0" : _c, _d = _b.paddingBottom, paddingBottom = _d === void 0 ? "0" : _d;
-            return y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom);
-        },
-        top: function (_bbox, _a) {
-            var top = _a.top;
-            return parseFloat(top);
-        },
-        left: function (_bbox, _a) {
-            var left = _a.left;
-            return parseFloat(left);
-        },
-        bottom: function (_a, _b) {
-            var y = _a.y;
-            var top = _b.top;
-            return parseFloat(top) + (y.max - y.min);
-        },
-        right: function (_a, _b) {
-            var x = _a.x;
-            var left = _b.left;
-            return parseFloat(left) + (x.max - x.min);
-        },
+        width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+        height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+        top: (_bbox, { top }) => parseFloat(top),
+        left: (_bbox, { left }) => parseFloat(left),
+        bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+        right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
         // Transform
         x: getTranslateFromMatrix(4, 13),
         y: getTranslateFromMatrix(5, 14),
     };
-    var convertChangedValueTypes = function (target, visualElement, changedKeys) {
-        var originBbox = visualElement.measureViewportBox();
-        var element = visualElement.getInstance();
-        var elementComputedStyle = getComputedStyle(element);
-        var display = elementComputedStyle.display;
-        var origin = {};
+    const convertChangedValueTypes = (target, visualElement, changedKeys) => {
+        const originBbox = visualElement.measureViewportBox();
+        const element = visualElement.getInstance();
+        const elementComputedStyle = getComputedStyle(element);
+        const { display } = elementComputedStyle;
+        const origin = {};
         // If the element is currently set to display: "none", make it visible before
         // measuring the target bounding box
         if (display === "none") {
@@ -4963,50 +4823,48 @@
         /**
          * Record origins before we render and update styles
          */
-        changedKeys.forEach(function (key) {
+        changedKeys.forEach((key) => {
             origin[key] = positionalValues[key](originBbox, elementComputedStyle);
         });
         // Apply the latest values (as set in checkAndConvertChangedValueTypes)
         visualElement.syncRender();
-        var targetBbox = visualElement.measureViewportBox();
-        changedKeys.forEach(function (key) {
+        const targetBbox = visualElement.measureViewportBox();
+        changedKeys.forEach((key) => {
             // Restore styles to their **calculated computed style**, not their actual
             // originally set style. This allows us to animate between equivalent pixel units.
-            var value = visualElement.getValue(key);
+            const value = visualElement.getValue(key);
             setAndResetVelocity(value, origin[key]);
             target[key] = positionalValues[key](targetBbox, elementComputedStyle);
         });
         return target;
     };
-    var checkAndConvertChangedValueTypes = function (visualElement, target, origin, transitionEnd) {
-        if (origin === void 0) { origin = {}; }
-        if (transitionEnd === void 0) { transitionEnd = {}; }
-        target = __assign({}, target);
-        transitionEnd = __assign({}, transitionEnd);
-        var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
+    const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
+        target = Object.assign({}, target);
+        transitionEnd = Object.assign({}, transitionEnd);
+        const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
         // We want to remove any transform values that could affect the element's bounding box before
         // it's measured. We'll reapply these later.
-        var removedTransformValues = [];
-        var hasAttemptedToRemoveTransformValues = false;
-        var changedValueTypeKeys = [];
-        targetPositionalKeys.forEach(function (key) {
-            var value = visualElement.getValue(key);
+        let removedTransformValues = [];
+        let hasAttemptedToRemoveTransformValues = false;
+        const changedValueTypeKeys = [];
+        targetPositionalKeys.forEach((key) => {
+            const value = visualElement.getValue(key);
             if (!visualElement.hasValue(key))
                 return;
-            var from = origin[key];
-            var fromType = findDimensionValueType(from);
-            var to = target[key];
-            var toType;
+            let from = origin[key];
+            let fromType = findDimensionValueType(from);
+            const to = target[key];
+            let toType;
             // TODO: The current implementation of this basically throws an error
             // if you try and do value conversion via keyframes. There's probably
             // a way of doing this but the performance implications would need greater scrutiny,
             // as it'd be doing multiple resize-remeasure operations.
             if (isKeyframesTarget(to)) {
-                var numKeyframes = to.length;
-                var fromIndex = to[0] === null ? 1 : 0;
+                const numKeyframes = to.length;
+                const fromIndex = to[0] === null ? 1 : 0;
                 from = to[fromIndex];
                 fromType = findDimensionValueType(from);
-                for (var i = fromIndex; i < numKeyframes; i++) {
+                for (let i = fromIndex; i < numKeyframes; i++) {
                     if (!toType) {
                         toType = findDimensionValueType(to[i]);
                         invariant(toType === fromType ||
@@ -5024,7 +4882,7 @@
                 // If they're both just number or px, convert them both to numbers rather than
                 // relying on resize/remeasure to convert (which is wasteful in this situation)
                 if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
-                    var current = value.get();
+                    const current = value.get();
                     if (typeof current === "string") {
                         value.set(parseFloat(current));
                     }
@@ -5065,26 +4923,26 @@
             }
         });
         if (changedValueTypeKeys.length) {
-            var scrollY_1 = changedValueTypeKeys.indexOf("height") >= 0
+            const scrollY = changedValueTypeKeys.indexOf("height") >= 0
                 ? window.pageYOffset
                 : null;
-            var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
+            const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
             // If we removed transform values, reapply them before the next render
             if (removedTransformValues.length) {
-                removedTransformValues.forEach(function (_a) {
-                    var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                removedTransformValues.forEach(([key, value]) => {
                     visualElement.getValue(key).set(value);
                 });
             }
             // Reapply original values
             visualElement.syncRender();
             // Restore scroll position
-            if (scrollY_1 !== null)
-                window.scrollTo({ top: scrollY_1 });
-            return { target: convertedTarget, transitionEnd: transitionEnd };
+            if (isBrowser && scrollY !== null) {
+                window.scrollTo({ top: scrollY });
+            }
+            return { target: convertedTarget, transitionEnd };
         }
         else {
-            return { target: target, transitionEnd: transitionEnd };
+            return { target, transitionEnd };
         }
     };
     /**
@@ -5097,22 +4955,21 @@
     function unitConversion(visualElement, target, origin, transitionEnd) {
         return hasPositionalKey(target)
             ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
-            : { target: target, transitionEnd: transitionEnd };
+            : { target, transitionEnd };
     }
 
     /**
      * Parse a DOM variant to make it animatable. This involves resolving CSS variables
      * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
      */
-    var parseDomVariant = function (visualElement, target, origin, transitionEnd) {
-        var resolved = resolveCSSVariables(visualElement, target, transitionEnd);
+    const parseDomVariant = (visualElement, target, origin, transitionEnd) => {
+        const resolved = resolveCSSVariables(visualElement, target, transitionEnd);
         target = resolved.target;
         transitionEnd = resolved.transitionEnd;
         return unitConversion(visualElement, target, origin, transitionEnd);
     };
 
-    function isForcedMotionValue(key, _a) {
-        var layout = _a.layout, layoutId = _a.layoutId;
+    function isForcedMotionValue(key, { layout, layoutId }) {
         return (isTransformProp(key) ||
             isTransformOriginProp(key) ||
             ((layout || layoutId !== undefined) &&
@@ -5120,9 +4977,9 @@
     }
 
     function scrapeMotionValuesFromProps(props) {
-        var style = props.style;
-        var newValues = {};
-        for (var key in style) {
+        const { style } = props;
+        const newValues = {};
+        for (const key in style) {
             if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {
                 newValues[key] = style[key];
             }
@@ -5130,11 +4987,10 @@
         return newValues;
     }
 
-    function renderHTML(element, _a, styleProp, projection) {
-        var style = _a.style, vars = _a.vars;
+    function renderHTML(element, { style, vars }, styleProp, projection) {
         Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
         // Loop over any CSS variables and assign those.
-        for (var key in vars) {
+        for (const key in vars) {
             element.style.setProperty(key, vars[key]);
         }
     }
@@ -5144,8 +5000,7 @@
      * it's easier to consider each axis individually. This function returns a bounding box
      * as a map of single-axis min/max values.
      */
-    function convertBoundingBoxToBox(_a) {
-        var top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom;
+    function convertBoundingBoxToBox({ top, left, right, bottom, }) {
         return {
             x: { min: left, max: right },
             y: { min: top, max: bottom },
@@ -5159,8 +5014,8 @@
     function transformBoxPoints(point, transformPoint) {
         if (!transformPoint)
             return point;
-        var topLeft = transformPoint({ x: point.left, y: point.top });
-        var bottomRight = transformPoint({ x: point.right, y: point.bottom });
+        const topLeft = transformPoint({ x: point.left, y: point.top });
+        const bottomRight = transformPoint({ x: point.right, y: point.bottom });
         return {
             top: topLeft.y,
             left: topLeft.x,
@@ -5176,22 +5031,22 @@
     function getComputedStyle$1(element) {
         return window.getComputedStyle(element);
     }
-    var htmlConfig = {
+    const htmlConfig = {
         treeType: "dom",
-        readValueFromInstance: function (domElement, key) {
+        readValueFromInstance(domElement, key) {
             if (isTransformProp(key)) {
-                var defaultType = getDefaultValueType(key);
+                const defaultType = getDefaultValueType(key);
                 return defaultType ? defaultType.default || 0 : 0;
             }
             else {
-                var computedStyle = getComputedStyle$1(domElement);
-                var value = (isCSSVariable(key)
+                const computedStyle = getComputedStyle$1(domElement);
+                const value = (isCSSVariable(key)
                     ? computedStyle.getPropertyValue(key)
                     : computedStyle[key]) || 0;
                 return typeof value === "string" ? value.trim() : value;
             }
         },
-        sortNodePosition: function (a, b) {
+        sortNodePosition(a, b) {
             /**
              * compareDocumentPosition returns a bitmask, by using the bitwise &
              * we're returning true if 2 in that bitmask is set to true. 2 is set
@@ -5199,12 +5054,11 @@
              */
             return a.compareDocumentPosition(b) & 2 ? 1 : -1;
         },
-        getBaseTarget: function (props, key) {
+        getBaseTarget(props, key) {
             var _a;
             return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
         },
-        measureViewportBox: function (element, _a) {
-            var transformPagePoint = _a.transformPagePoint;
+        measureViewportBox(element, { transformPagePoint }) {
             return measureViewportBox(element, transformPagePoint);
         },
         /**
@@ -5214,19 +5068,18 @@
          * layout transforms up the tree in the same way this.getBoundingBoxWithoutTransforms
          * works
          */
-        resetTransform: function (element, domElement, props) {
-            var transformTemplate = props.transformTemplate;
+        resetTransform(element, domElement, props) {
+            const { transformTemplate } = props;
             domElement.style.transform = transformTemplate
                 ? transformTemplate({}, "")
                 : "none";
             // Ensure that whatever happens next, we restore our transform on the next frame
             element.scheduleRender();
         },
-        restoreTransform: function (instance, mutableState) {
+        restoreTransform(instance, mutableState) {
             instance.style.transform = mutableState.style.transform;
         },
-        removeValueFromRenderState: function (key, _a) {
-            var vars = _a.vars, style = _a.style;
+        removeValueFromRenderState(key, { vars, style }) {
             delete vars[key];
             delete style[key];
         },
@@ -5234,11 +5087,11 @@
          * Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
          * can be animated by Motion.
          */
-        makeTargetAnimatable: function (element, _a, _b, isMounted) {
-            var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]);
+        makeTargetAnimatable(element, _a, _b, isMounted) {
+            var { transition, transitionEnd } = _a, target = __rest(_a, ["transition", "transitionEnd"]);
             var transformValues = _b.transformValues;
             if (isMounted === void 0) { isMounted = true; }
-            var origin = getOrigin(target, transition || {}, element);
+            let origin = getOrigin(target, transition || {}, element);
             /**
              * If Framer has provided a function to convert `Color` etc value types, convert them
              */
@@ -5252,14 +5105,15 @@
             }
             if (isMounted) {
                 checkTargetForNewValues(element, target, origin);
-                var parsed = parseDomVariant(element, target, origin, transitionEnd);
+                const parsed = parseDomVariant(element, target, origin, transitionEnd);
                 transitionEnd = parsed.transitionEnd;
                 target = parsed.target;
             }
-            return __assign({ transition: transition, transitionEnd: transitionEnd }, target);
+            return Object.assign({ transition,
+                transitionEnd }, target);
         },
-        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
-        build: function (element, renderState, latestValues, options, props) {
+        scrapeMotionValuesFromProps,
+        build(element, renderState, latestValues, options, props) {
             if (element.isVisible !== undefined) {
                 renderState.style.visibility = element.isVisible
                     ? "visible"
@@ -5269,7 +5123,7 @@
         },
         render: renderHTML,
     };
-    var htmlVisualElement = visualElement(htmlConfig);
+    const htmlVisualElement = visualElement(htmlConfig);
 
     exports.HTMLProjectionNode = HTMLProjectionNode;
     exports.addScaleCorrector = addScaleCorrector;