framer-motion 5.3.2 → 5.3.3

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

@@ -27,7 +27,7 @@ var easingDefinitionToFunction = function (definition) {
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+        invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
         return easingLookup[definition];
     }
     return definition;

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

@@ -126,7 +126,7 @@ function getAnimation(key, value, target, transition, onComplete) {
         target = getZeroUnit(origin);
     }
     var 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.");
+    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."));
     function start() {
         var options = {
             from: origin,

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

@@ -14,7 +14,7 @@ function updateChildLookup(children, allChildren) {
         var key = getChildKey(child);
         if (process.env.NODE_ENV !== "production" && seenChildren) {
             if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
+                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             }
             seenChildren.add(key);
         }

package/dist/es/components/AnimateSharedLayout.mjs

@@ -5,7 +5,7 @@ import { LayoutGroup } from './LayoutGroup/index.mjs';
 var id = 0;
 var AnimateSharedLayout = function (_a) {
     var children = _a.children;
-    return (React.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+    return (React.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
 };
 
 export { AnimateSharedLayout };

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

@@ -23,7 +23,7 @@ function ReorderItem(_a, externalRef) {
     };
     var zIndex = useTransform([point.x, point.y], function (_a) {
         var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
-        return latestX || latestY ? 1 : 0;
+        return latestX || latestY ? 1 : "unset";
     });
     var layout = useRef(null);
     invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");

package/dist/es/projection/animation/mix-values.mjs

@@ -18,7 +18,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
      * Mix border radius
      */
     for (var i = 0; i < numBorders; i++) {
-        var borderLabel = "border" + borders[i] + "Radius";
+        var borderLabel = "border".concat(borders[i], "Radius");
         var followRadius = getRadius(follow, borderLabel);
         var leadRadius = getRadius(lead, borderLabel);
         if (followRadius === undefined && leadRadius === undefined)

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

@@ -964,7 +964,7 @@ function createProjectionNode(_a) {
                 styles.transform = transformTemplate(valuesToRender, styles.transform);
             }
             var _g = this.projectionDelta, x = _g.x, y = _g.y;
-            styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
+            styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
             if (lead.animationValues) {
                 /**
                  * If the lead component is animating, assign this either the entering/leaving
@@ -1170,7 +1170,7 @@ function mountNodeEarly(node, id) {
         }
     }
     var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    var element = searchElement.querySelector("[data-projection-id=\"" + id + "\"]");
+    var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
     if (element)
         node.mount(element, true);
 }

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

@@ -34,7 +34,7 @@ var correctBorderRadius = {
          */
         var x = pixelsToPercent(latest, node.target.x);
         var y = pixelsToPercent(latest, node.target.y);
-        return x + "% " + y + "%";
+        return "".concat(x, "% ").concat(y, "%");
     },
 };
 

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

@@ -8,17 +8,17 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     var xTranslate = delta.x.translate / treeScale.x;
     var yTranslate = delta.y.translate / treeScale.y;
-    var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+    var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
     if (latestTransform) {
         var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
         if (rotate)
-            transform += "rotate(" + rotate + "deg) ";
+            transform += "rotate(".concat(rotate, "deg) ");
         if (rotateX)
-            transform += "rotateX(" + rotateX + "deg) ";
+            transform += "rotateX(".concat(rotateX, "deg) ");
         if (rotateY)
-            transform += "rotateY(" + rotateY + "deg) ";
+            transform += "rotateY(".concat(rotateY, "deg) ");
     }
-    transform += "scale(" + delta.x.scale + ", " + delta.y.scale + ")";
+    transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
     return transform === identityProjection ? "none" : transform;
 }
 

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

@@ -19,6 +19,9 @@ function createMotionProxy(createConfig) {
         if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
         return createMotionComponent(createConfig(Component, customMotionComponentConfig));
     }
+    if (typeof Proxy === "undefined") {
+        return custom;
+    }
     /**
      * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
      * Rather than generating them anew every render.

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

@@ -24,7 +24,7 @@ function parseCSSVariable(current) {
 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 \"" + current + "\". This may indicate a circular fallback dependency.");
+    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];
     // No CSS variable detected
     if (!token)
@@ -51,7 +51,7 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
     var _b;
     var target = __rest(_a, []);
     var element = visualElement.getInstance();
-    if (!(element instanceof HTMLElement))
+    if (!(element instanceof Element))
         return { target: target, transitionEnd: 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.

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

@@ -34,7 +34,9 @@ function filterProps(props, isDom, forwardMotionProps) {
     for (var key in props) {
         if (shouldForward(key) ||
             (forwardMotionProps === true && isValidMotionProp(key)) ||
-            (!isDom && !isValidMotionProp(key))) {
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] && key.startsWith("onDrag"))) {
             filteredProps[key] = props[key];
         }
     }

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

@@ -50,7 +50,7 @@ function useHTMLProps(props, visualState, isStatic) {
         style.touchAction =
             props.drag === true
                 ? "none"
-                : "pan-" + (props.drag === "x" ? "y" : "x");
+                : "pan-".concat(props.drag === "x" ? "y" : "x");
     }
     htmlProps.style = style;
     return htmlProps;

package/dist/es/render/html/utils/build-transform.mjs

@@ -26,7 +26,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
     var numTransformKeys = transformKeys.length;
     for (var i = 0; i < numTransformKeys; i++) {
         var key = transformKeys[i];
-        transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+        transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
         if (key === "z")
             transformHasZ = true;
     }
@@ -52,7 +52,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
  */
 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 originX + " " + originY + " " + originZ;
+    return "".concat(originX, " ").concat(originY, " ").concat(originZ);
 }
 
 export { buildTransform, buildTransformOrigin };

package/dist/es/render/svg/utils/path.mjs

@@ -29,7 +29,7 @@ function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
     // Build the dash array
     var pathLength = px.transform(length);
     var pathSpacing = px.transform(spacing);
-    attrs[keys.array] = pathLength + " " + pathSpacing;
+    attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
 }
 
 export { buildSVGPath };

package/dist/es/render/svg/utils/transform-origin.mjs

@@ -12,7 +12,7 @@ function calcOrigin(origin, offset, size) {
 function calcSVGTransformOrigin(dimensions, originX, originY) {
     var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
     var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return pxOriginX + " " + pxOriginY;
+    return "".concat(pxOriginX, " ").concat(pxOriginY);
 }
 
 export { calcSVGTransformOrigin };

package/dist/framer-motion.cjs.js

@@ -713,7 +713,7 @@ var easingDefinitionToFunction = function (definition) {
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        heyListen.invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+        heyListen.invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
         return easingLookup[definition];
     }
     return definition;
@@ -1025,7 +1025,7 @@ function getAnimation(key, value, target, transition, onComplete) {
         target = getZeroUnit(origin);
     }
     var isOriginAnimatable = isAnimatable(key, origin);
-    heyListen.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.");
+    heyListen.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."));
     function start() {
         var options = {
             from: origin,
@@ -1161,7 +1161,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
      * Mix border radius
      */
     for (var i = 0; i < numBorders; i++) {
-        var borderLabel = "border" + borders[i] + "Radius";
+        var borderLabel = "border".concat(borders[i], "Radius");
         var followRadius = getRadius(follow, borderLabel);
         var leadRadius = getRadius(lead, borderLabel);
         if (followRadius === undefined && leadRadius === undefined)
@@ -1618,17 +1618,17 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     var xTranslate = delta.x.translate / treeScale.x;
     var yTranslate = delta.y.translate / treeScale.y;
-    var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+    var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
     if (latestTransform) {
         var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
         if (rotate)
-            transform += "rotate(" + rotate + "deg) ";
+            transform += "rotate(".concat(rotate, "deg) ");
         if (rotateX)
-            transform += "rotateX(" + rotateX + "deg) ";
+            transform += "rotateX(".concat(rotateX, "deg) ");
         if (rotateY)
-            transform += "rotateY(" + rotateY + "deg) ";
+            transform += "rotateY(".concat(rotateY, "deg) ");
     }
-    transform += "scale(" + delta.x.scale + ", " + delta.y.scale + ")";
+    transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
     return transform === identityProjection ? "none" : transform;
 }
 
@@ -2659,7 +2659,7 @@ function createProjectionNode(_a) {
                 styles.transform = transformTemplate(valuesToRender, styles.transform);
             }
             var _g = this.projectionDelta, x = _g.x, y = _g.y;
-            styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
+            styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
             if (lead.animationValues) {
                 /**
                  * If the lead component is animating, assign this either the entering/leaving
@@ -2865,7 +2865,7 @@ function mountNodeEarly(node, id) {
         }
     }
     var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    var element = searchElement.querySelector("[data-projection-id=\"" + id + "\"]");
+    var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
     if (element)
         node.mount(element, true);
 }
@@ -3046,6 +3046,9 @@ function createMotionProxy(createConfig) {
         if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
         return createMotionComponent(createConfig(Component, customMotionComponentConfig));
     }
+    if (typeof Proxy === "undefined") {
+        return custom;
+    }
     /**
      * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
      * Rather than generating them anew every render.
@@ -3162,7 +3165,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
     var numTransformKeys = transformKeys.length;
     for (var i = 0; i < numTransformKeys; i++) {
         var key = transformKeys[i];
-        transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+        transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
         if (key === "z")
             transformHasZ = true;
     }
@@ -3188,7 +3191,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
  */
 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 originX + " " + originY + " " + originZ;
+    return "".concat(originX, " ").concat(originY, " ").concat(originZ);
 }
 
 /**
@@ -3322,7 +3325,7 @@ function useHTMLProps(props, visualState, isStatic) {
         style.touchAction =
             props.drag === true
                 ? "none"
-                : "pan-" + (props.drag === "x" ? "y" : "x");
+                : "pan-".concat(props.drag === "x" ? "y" : "x");
     }
     htmlProps.style = style;
     return htmlProps;
@@ -3437,7 +3440,9 @@ function filterProps(props, isDom, forwardMotionProps) {
     for (var key in props) {
         if (shouldForward(key) ||
             (forwardMotionProps === true && isValidMotionProp(key)) ||
-            (!isDom && !isValidMotionProp(key))) {
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] && key.startsWith("onDrag"))) {
             filteredProps[key] = props[key];
         }
     }
@@ -3456,7 +3461,7 @@ function calcOrigin$1(origin, offset, size) {
 function calcSVGTransformOrigin(dimensions, originX, originY) {
     var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
     var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return pxOriginX + " " + pxOriginY;
+    return "".concat(pxOriginX, " ").concat(pxOriginY);
 }
 
 var dashKeys = {
@@ -3488,7 +3493,7 @@ function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
     // Build the dash array
     var pathLength = styleValueTypes.px.transform(length);
     var pathSpacing = styleValueTypes.px.transform(spacing);
-    attrs[keys.array] = pathLength + " " + pathSpacing;
+    attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
 }
 
 /**
@@ -6258,7 +6263,7 @@ function parseCSSVariable(current) {
 var maxDepth = 4;
 function getVariableValue(current, element, depth) {
     if (depth === void 0) { depth = 1; }
-    heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+    heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
     var _a = tslib.__read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
     // No CSS variable detected
     if (!token)
@@ -6285,7 +6290,7 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
     var _b;
     var target = tslib.__rest(_a, []);
     var element = visualElement.getInstance();
-    if (!(element instanceof HTMLElement))
+    if (!(element instanceof Element))
         return { target: target, transitionEnd: 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.
@@ -6732,7 +6737,7 @@ var correctBorderRadius = {
          */
         var x = pixelsToPercent(latest, node.target.x);
         var y = pixelsToPercent(latest, node.target.y);
-        return x + "% " + y + "%";
+        return "".concat(x, "% ").concat(y, "%");
     },
 };
 
@@ -7064,7 +7069,7 @@ function updateChildLookup(children, allChildren) {
         var key = getChildKey(child);
         if (process.env.NODE_ENV !== "production" && seenChildren) {
             if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
+                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             }
             seenChildren.add(key);
         }
@@ -7265,7 +7270,7 @@ var LayoutGroup = function (_a) {
 var id = 0;
 var AnimateSharedLayout = function (_a) {
     var children = _a.children;
-    return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+    return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
 };
 
 /**
@@ -7565,7 +7570,7 @@ function ReorderItem(_a, externalRef) {
     };
     var zIndex = useTransform([point.x, point.y], function (_a) {
         var _b = tslib.__read(_a, 2), latestX = _b[0], latestY = _b[1];
-        return latestX || latestY ? 1 : 0;
+        return latestX || latestY ? 1 : "unset";
     });
     var layout = React.useRef(null);
     heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");

package/dist/framer-motion.dev.js

@@ -1944,7 +1944,7 @@
         }
         else if (typeof definition === "string") {
             // Else lookup from table
-            invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+            invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
             return easingLookup[definition];
         }
         return definition;
@@ -2256,7 +2256,7 @@
             target = getZeroUnit(origin);
         }
         var 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.");
+        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."));
         function start() {
             var options = {
                 from: origin,
@@ -2392,7 +2392,7 @@
          * Mix border radius
          */
         for (var i = 0; i < numBorders; i++) {
-            var borderLabel = "border" + borders[i] + "Radius";
+            var borderLabel = "border".concat(borders[i], "Radius");
             var followRadius = getRadius(follow, borderLabel);
             var leadRadius = getRadius(lead, borderLabel);
             if (followRadius === undefined && leadRadius === undefined)
@@ -2849,17 +2849,17 @@
          */
         var xTranslate = delta.x.translate / treeScale.x;
         var yTranslate = delta.y.translate / treeScale.y;
-        var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+        var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
         if (latestTransform) {
             var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
             if (rotate)
-                transform += "rotate(" + rotate + "deg) ";
+                transform += "rotate(".concat(rotate, "deg) ");
             if (rotateX)
-                transform += "rotateX(" + rotateX + "deg) ";
+                transform += "rotateX(".concat(rotateX, "deg) ");
             if (rotateY)
-                transform += "rotateY(" + rotateY + "deg) ";
+                transform += "rotateY(".concat(rotateY, "deg) ");
         }
-        transform += "scale(" + delta.x.scale + ", " + delta.y.scale + ")";
+        transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
         return transform === identityProjection ? "none" : transform;
     }
 
@@ -3890,7 +3890,7 @@
                     styles.transform = transformTemplate(valuesToRender, styles.transform);
                 }
                 var _g = this.projectionDelta, x = _g.x, y = _g.y;
-                styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
+                styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
                 if (lead.animationValues) {
                     /**
                      * If the lead component is animating, assign this either the entering/leaving
@@ -4096,7 +4096,7 @@
             }
         }
         var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-        var element = searchElement.querySelector("[data-projection-id=\"" + id + "\"]");
+        var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
         if (element)
             node.mount(element, true);
     }
@@ -4277,6 +4277,9 @@
             if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
             return createMotionComponent(createConfig(Component, customMotionComponentConfig));
         }
+        if (typeof Proxy === "undefined") {
+            return custom;
+        }
         /**
          * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
          * Rather than generating them anew every render.
@@ -4393,7 +4396,7 @@
         var numTransformKeys = transformKeys.length;
         for (var i = 0; i < numTransformKeys; i++) {
             var key = transformKeys[i];
-            transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+            transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
             if (key === "z")
                 transformHasZ = true;
         }
@@ -4419,7 +4422,7 @@
      */
     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 originX + " " + originY + " " + originZ;
+        return "".concat(originX, " ").concat(originY, " ").concat(originZ);
     }
 
     /**
@@ -4553,7 +4556,7 @@
             style.touchAction =
                 props.drag === true
                     ? "none"
-                    : "pan-" + (props.drag === "x" ? "y" : "x");
+                    : "pan-".concat(props.drag === "x" ? "y" : "x");
         }
         htmlProps.style = style;
         return htmlProps;
@@ -4668,7 +4671,9 @@
         for (var key in props) {
             if (shouldForward(key) ||
                 (forwardMotionProps === true && isValidMotionProp(key)) ||
-                (!isDom && !isValidMotionProp(key))) {
+                (!isDom && !isValidMotionProp(key)) ||
+                // If trying to use native HTML drag events, forward drag listeners
+                (props["draggable"] && key.startsWith("onDrag"))) {
                 filteredProps[key] = props[key];
             }
         }
@@ -4687,7 +4692,7 @@
     function calcSVGTransformOrigin(dimensions, originX, originY) {
         var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
         var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-        return pxOriginX + " " + pxOriginY;
+        return "".concat(pxOriginX, " ").concat(pxOriginY);
     }
 
     var dashKeys = {
@@ -4719,7 +4724,7 @@
         // Build the dash array
         var pathLength = px.transform(length);
         var pathSpacing = px.transform(spacing);
-        attrs[keys.array] = pathLength + " " + pathSpacing;
+        attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
     }
 
     /**
@@ -7489,7 +7494,7 @@
     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 \"" + current + "\". This may indicate a circular fallback dependency.");
+        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];
         // No CSS variable detected
         if (!token)
@@ -7516,7 +7521,7 @@
         var _b;
         var target = __rest(_a, []);
         var element = visualElement.getInstance();
-        if (!(element instanceof HTMLElement))
+        if (!(element instanceof Element))
             return { target: target, transitionEnd: 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.
@@ -7963,7 +7968,7 @@
              */
             var x = pixelsToPercent(latest, node.target.x);
             var y = pixelsToPercent(latest, node.target.y);
-            return x + "% " + y + "%";
+            return "".concat(x, "% ").concat(y, "%");
         },
     };
 
@@ -8295,7 +8300,7 @@
             var key = getChildKey(child);
             if (seenChildren) {
                 if (seenChildren.has(key)) {
-                    console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
+                    console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
                 }
                 seenChildren.add(key);
             }
@@ -8495,7 +8500,7 @@
     var id = 0;
     var AnimateSharedLayout = function (_a) {
         var children = _a.children;
-        return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+        return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
     };
 
     /**
@@ -8795,7 +8800,7 @@
         };
         var zIndex = useTransform([point.x, point.y], function (_a) {
             var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
-            return latestX || latestY ? 1 : 0;
+            return latestX || latestY ? 1 : "unset";
         });
         var layout = React.useRef(null);
         invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");