framer-motion 7.0.3 → 7.1.2

package/dist/es/projection/node/group.mjs

@@ -1,16 +1,14 @@
-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();

package/dist/es/projection/node/id.mjs

@@ -1,9 +1,9 @@
 import { useConstant } from '../../utils/use-constant.mjs';
 import { globalProjectionState } from './state.mjs';
 
-var id = 1;
+let id = 1;
 function useProjectionId() {
-    return useConstant(function () {
+    return useConstant(() => {
         if (globalProjectionState.hasEverUpdated) {
             return id++;
         }

package/dist/es/projection/node/state.mjs

@@ -3,7 +3,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

package/dist/es/projection/shared/stack.mjs

@@ -1,35 +1,35 @@
 import { addUniqueItem, removeItem } from '../../utils/array.mjs';
 
-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;
@@ -42,10 +42,10 @@ var NodeStack = /** @class */ (function () {
         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;
@@ -67,7 +67,7 @@ var NodeStack = /** @class */ (function () {
             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();
             }
@@ -84,29 +84,28 @@ var NodeStack = /** @class */ (function () {
              *   - 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;
-}());
+    }
+}
 
 export { NodeStack };

package/dist/es/projection/styles/scale-border-radius.mjs

@@ -12,8 +12,8 @@ function pixelsToPercent(pixels, axis) {
  * 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;
         /**
@@ -32,9 +32,9 @@ var correctBorderRadius = {
          * 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}%`;
     },
 };
 

package/dist/es/projection/styles/scale-box-shadow.mjs

@@ -2,31 +2,30 @@ import { mix } from 'popmotion';
 import { complex } from 'style-value-types';
 import { cssVariableRegex } from '../../render/dom/utils/css-variables-conversion.mjs';
 
-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;
         /**
@@ -35,19 +34,19 @@ var correctBoxShadow = {
          * 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;
             });
         }

package/dist/es/projection/styles/scale-correction.mjs

@@ -1,4 +1,4 @@
-var scaleCorrectors = {};
+const scaleCorrectors = {};
 function addScaleCorrector(correctors) {
     Object.assign(scaleCorrectors, correctors);
 }

package/dist/es/projection/styles/transform.mjs

@@ -1,4 +1,4 @@
-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.
@@ -6,30 +6,30 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      * 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;
 }
 

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { rootProjectionNode } from './node/HTMLProjectionNode.mjs';
 
 function useResetProjection() {
-    var reset = React.useCallback(function () {
-        var root = rootProjectionNode.current;
+    const reset = React.useCallback(() => {
+        const root = rootProjectionNode.current;
         if (!root)
             return;
         root.resetTree();

package/dist/es/projection/utils/has-transform.mjs

@@ -1,8 +1,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));

package/dist/es/projection/utils/measure.mjs

@@ -5,8 +5,8 @@ function measureViewportBox(instance, transformPoint) {
     return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
 }
 function measurePageBox(element, rootProjectionNode, transformPagePoint) {
-    var viewportBox = measureViewportBox(element, transformPagePoint);
-    var scroll = rootProjectionNode.scroll;
+    const viewportBox = measureViewportBox(element, transformPagePoint);
+    const { scroll } = rootProjectionNode;
     if (scroll) {
         translateAxis(viewportBox.x, scroll.x);
         translateAxis(viewportBox.y, scroll.y);

package/dist/es/render/dom/create-visual-element.mjs

@@ -2,7 +2,7 @@ import { htmlVisualElement } from '../html/visual-element.mjs';
 import { svgVisualElement } from '../svg/visual-element.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 
-var createDomVisualElement = function (Component, options) {
+const createDomVisualElement = (Component, options) => {
     return isSVGComponent(Component)
         ? svgVisualElement(options, { enableHardwareAcceleration: false })
         : htmlVisualElement(options, { enableHardwareAcceleration: true });

package/dist/es/render/dom/features-animation.mjs

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { animations } from '../../motion/features/animations.mjs';
 import { gestureAnimations } from '../../motion/features/gestures.mjs';
 import { createDomVisualElement } from './create-visual-element.mjs';
@@ -6,6 +5,6 @@ import { createDomVisualElement } from './create-visual-element.mjs';
 /**
  * @public
  */
-var domAnimation = __assign(__assign({ renderer: createDomVisualElement }, animations), gestureAnimations);
+const domAnimation = Object.assign(Object.assign({ renderer: createDomVisualElement }, animations), gestureAnimations);
 
 export { domAnimation };

package/dist/es/render/dom/features-max.mjs

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { drag } from '../../motion/features/drag.mjs';
 import { layoutFeatures } from '../../motion/features/layout/index.mjs';
 import { domAnimation } from './features-animation.mjs';
@@ -7,6 +6,6 @@ import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs
 /**
  * @public
  */
-var domMax = __assign(__assign(__assign(__assign({}, domAnimation), drag), layoutFeatures), { projectionNodeConstructor: HTMLProjectionNode });
+const domMax = Object.assign(Object.assign(Object.assign(Object.assign({}, domAnimation), drag), layoutFeatures), { projectionNodeConstructor: HTMLProjectionNode });
 
 export { domMax };

package/dist/es/render/dom/motion-minimal.mjs

@@ -4,6 +4,6 @@ import { createDomMotionConfig } from './utils/create-config.mjs';
 /**
  * @public
  */
-var m = createMotionProxy(createDomMotionConfig);
+const m = createMotionProxy(createDomMotionConfig);
 
 export { m };

package/dist/es/render/dom/motion-proxy.mjs

@@ -15,8 +15,7 @@ import { createMotionComponent } from '../../motion/index.mjs';
  * @public
  */
 function createMotionProxy(createConfig) {
-    function custom(Component, customMotionComponentConfig) {
-        if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
+    function custom(Component, customMotionComponentConfig = {}) {
         return createMotionComponent(createConfig(Component, customMotionComponentConfig));
     }
     if (typeof Proxy === "undefined") {
@@ -26,14 +25,14 @@ function createMotionProxy(createConfig) {
      * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
      * Rather than generating them anew every render.
      */
-    var componentCache = new Map();
+    const componentCache = new Map();
     return new Proxy(custom, {
         /**
          * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
          * The prop name is passed through as `key` and we can use that to generate a `motion`
          * DOM component with that name.
          */
-        get: function (_target, key) {
+        get: (_target, key) => {
             /**
              * If this element doesn't exist in the component cache, create it and cache.
              */

package/dist/es/render/dom/motion.mjs

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { createMotionComponent } from '../../motion/index.mjs';
 import { createMotionProxy } from './motion-proxy.mjs';
 import { createDomMotionConfig } from './utils/create-config.mjs';
@@ -9,16 +8,14 @@ import { createDomVisualElement } from './create-visual-element.mjs';
 import { layoutFeatures } from '../../motion/features/layout/index.mjs';
 import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';
 
-var featureBundle = __assign(__assign(__assign(__assign({}, animations), gestureAnimations), drag), layoutFeatures);
+const featureBundle = Object.assign(Object.assign(Object.assign(Object.assign({}, animations), gestureAnimations), drag), layoutFeatures);
 /**
  * HTML & SVG components, optimised for use with gestures and animation. These can be used as
  * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
  *
  * @public
  */
-var motion = /*@__PURE__*/ createMotionProxy(function (Component, config) {
-    return createDomMotionConfig(Component, config, featureBundle, createDomVisualElement, HTMLProjectionNode);
-});
+const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomMotionConfig(Component, config, featureBundle, createDomVisualElement, HTMLProjectionNode));
 /**
  * Create a DOM `motion` component with the provided string. This is primarily intended
  * as a full alternative to `motion` for consumers who have to support environments that don't

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

@@ -1,20 +1,17 @@
-import { __assign } from 'tslib';
 import { createElement } from 'react';
 import { useHTMLProps } from '../html/use-props.mjs';
 import { filterProps } from './utils/filter-props.mjs';
 import { isSVGComponent } from './utils/is-svg-component.mjs';
 import { useSVGProps } from '../svg/use-props.mjs';
 
-function createUseRender(forwardMotionProps) {
-    if (forwardMotionProps === void 0) { forwardMotionProps = false; }
-    var useRender = function (Component, props, projectionId, ref, _a, isStatic) {
-        var latestValues = _a.latestValues;
-        var useVisualProps = isSVGComponent(Component)
+function createUseRender(forwardMotionProps = false) {
+    const useRender = (Component, props, projectionId, ref, { latestValues }, isStatic) => {
+        const useVisualProps = isSVGComponent(Component)
             ? useSVGProps
             : useHTMLProps;
-        var visualProps = useVisualProps(props, latestValues, isStatic);
-        var filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
-        var elementProps = __assign(__assign(__assign({}, filteredProps), visualProps), { ref: ref });
+        const visualProps = useVisualProps(props, latestValues, isStatic);
+        const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
+        const elementProps = Object.assign(Object.assign(Object.assign({}, filteredProps), visualProps), { ref });
         if (projectionId) {
             elementProps["data-projection-id"] = projectionId;
         }

package/dist/es/render/dom/utils/camel-to-dash.mjs

@@ -1,10 +1,8 @@
-var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
-var REPLACE_TEMPLATE = "$1-$2";
+const CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
+const REPLACE_TEMPLATE = "$1-$2";
 /**
  * Convert camelCase to dash-case properties.
  */
-var camelToDash = function (str) {
-    return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
-};
+const camelToDash = (str) => str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
 
 export { camelToDash };

package/dist/es/render/dom/utils/create-config.mjs

@@ -1,15 +1,15 @@
-import { __assign } from 'tslib';
 import { isSVGComponent } from './is-svg-component.mjs';
 import { createUseRender } from '../use-render.mjs';
 import { svgMotionConfig } from '../../svg/config-motion.mjs';
 import { htmlMotionConfig } from '../../html/config-motion.mjs';
 
-function createDomMotionConfig(Component, _a, preloadedFeatures, createVisualElement, projectionNodeConstructor) {
-    var _b = _a.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b;
-    var baseConfig = isSVGComponent(Component)
+function createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement, projectionNodeConstructor) {
+    const baseConfig = isSVGComponent(Component)
         ? svgMotionConfig
         : htmlMotionConfig;
-    return __assign(__assign({}, baseConfig), { preloadedFeatures: preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement: createVisualElement, projectionNodeConstructor: projectionNodeConstructor, Component: Component });
+    return Object.assign(Object.assign({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement,
+        projectionNodeConstructor,
+        Component });
 }
 
 export { createDomMotionConfig };

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -1,4 +1,4 @@
-import { __rest, __assign, __read } from 'tslib';
+import { __rest } from 'tslib';
 import { invariant } from 'hey-listen';
 
 function isCSSVariable(value) {
@@ -13,24 +13,23 @@ function isCSSVariable(value) {
  *
  * @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();
     }
@@ -50,30 +49,30 @@ function getVariableValue(current, element, depth) {
 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(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(current))
             continue;
-        var resolved = getVariableValue(current, element);
+        const resolved = getVariableValue(current, element);
         if (!resolved)
             continue;
         // Clone target if it hasn't already been
@@ -84,7 +83,7 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
         if (transitionEnd)
             (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
     }
-    return { target: target, transitionEnd: transitionEnd };
+    return { target, transitionEnd };
 }
 
 export { cssVariableRegex, parseCSSVariable, resolveCSSVariables };

package/dist/es/render/dom/utils/filter-props.mjs

@@ -1,13 +1,11 @@
 import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';
 
-var shouldForward = function (key) { return !isValidMotionProp(key); };
+let shouldForward = (key) => !isValidMotionProp(key);
 function loadExternalIsValidProp(isValidProp) {
     if (!isValidProp)
         return;
     // Explicitly filter our events
-    shouldForward = function (key) {
-        return key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
-    };
+    shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
 }
 /**
  * Emotion and Styled Components both allow users to pass through arbitrary props to their components
@@ -34,8 +32,8 @@ catch (_a) {
     // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
 }
 function filterProps(props, isDom, forwardMotionProps) {
-    var filteredProps = {};
-    for (var key in props) {
+    const filteredProps = {};
+    for (const key in props) {
         if (shouldForward(key) ||
             (forwardMotionProps === true && isValidMotionProp(key)) ||
             (!isDom && !isValidMotionProp(key)) ||

package/dist/es/render/dom/utils/parse-dom-variant.mjs

@@ -5,8 +5,8 @@ import { unitConversion } from './unit-conversion.mjs';
  * 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);