framer-motion 5.5.6 → 5.5.7

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-3615b5bb.js');
+var useMotionValue = require('./use-motion-value-1c6ad062.js');
 var React = require('react');
 var styleValueTypes = require('style-value-types');
 var popmotion = require('popmotion');

package/dist/cjs/three-entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var useMotionValue = require('./use-motion-value-3615b5bb.js');
+var useMotionValue = require('./use-motion-value-1c6ad062.js');
 var React = require('react');
 var popmotion = require('popmotion');
 var three = require('three');

package/dist/cjs/{use-motion-value-3615b5bb.js → use-motion-value-1c6ad062.js}

@@ -1139,6 +1139,12 @@ function animate(from, to, transition) {
 
 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" || styleValueTypes.px.test(value);
+};
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
@@ -1162,15 +1168,17 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             continue;
         followRadius || (followRadius = 0);
         leadRadius || (leadRadius = 0);
-        /**
-         * Currently we're only crossfading between numerical border radius.
-         * It would be possible to crossfade between percentages for a little
-         * extra bundle size.
-         */
-        if (typeof followRadius === "number" &&
-            typeof leadRadius === "number") {
-            var radius = Math.max(popmotion.mix(followRadius, leadRadius, progress), 0);
-            target[borderLabel] = radius;
+        var canMix = followRadius === 0 ||
+            leadRadius === 0 ||
+            isPx(followRadius) === isPx(leadRadius);
+        if (canMix) {
+            target[borderLabel] = Math.max(popmotion.mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            if (styleValueTypes.percent.test(leadRadius) || styleValueTypes.percent.test(followRadius)) {
+                target[borderLabel] += "%";
+            }
+        }
+        else {
+            target[borderLabel] = leadRadius;
         }
     }
     /**

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

@@ -1,7 +1,14 @@
 import { mix, progress, linear, circOut } from 'popmotion';
+import { px, percent } from 'style-value-types';
 
 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);
+};
 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
     var _a, _b, _c, _d;
     if (shouldCrossfadeOpacity) {
@@ -25,15 +32,17 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
             continue;
         followRadius || (followRadius = 0);
         leadRadius || (leadRadius = 0);
-        /**
-         * Currently we're only crossfading between numerical border radius.
-         * It would be possible to crossfade between percentages for a little
-         * extra bundle size.
-         */
-        if (typeof followRadius === "number" &&
-            typeof leadRadius === "number") {
-            var radius = Math.max(mix(followRadius, leadRadius, progress), 0);
-            target[borderLabel] = radius;
+        var canMix = followRadius === 0 ||
+            leadRadius === 0 ||
+            isPx(followRadius) === isPx(leadRadius);
+        if (canMix) {
+            target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+            if (percent.test(leadRadius) || percent.test(followRadius)) {
+                target[borderLabel] += "%";
+            }
+        }
+        else {
+            target[borderLabel] = leadRadius;
         }
     }
     /**

package/dist/framer-motion.dev.js

@@ -2374,6 +2374,12 @@
 
     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);
+    };
     function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {
         var _a, _b, _c, _d;
         if (shouldCrossfadeOpacity) {
@@ -2397,15 +2403,17 @@
                 continue;
             followRadius || (followRadius = 0);
             leadRadius || (leadRadius = 0);
-            /**
-             * Currently we're only crossfading between numerical border radius.
-             * It would be possible to crossfade between percentages for a little
-             * extra bundle size.
-             */
-            if (typeof followRadius === "number" &&
-                typeof leadRadius === "number") {
-                var radius = Math.max(mix(followRadius, leadRadius, progress), 0);
-                target[borderLabel] = radius;
+            var canMix = followRadius === 0 ||
+                leadRadius === 0 ||
+                isPx(followRadius) === isPx(leadRadius);
+            if (canMix) {
+                target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);
+                if (percent.test(leadRadius) || percent.test(followRadius)) {
+                    target[borderLabel] += "%";
+                }
+            }
+            else {
+                target[borderLabel] = leadRadius;
             }
         }
         /**