motion 12.23.1 → 12.23.3

package/dist/motion.dev.js

@@ -37,7 +37,7 @@
     {
         const formatMessage = (message, errorCode) => {
             return errorCode
-                ? `${message}. For more information and steps for solving, visit https://motion.dev/error/${errorCode}`
+                ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
                 : message;
         };
         exports.warning = (check, message, errorCode) => {
@@ -296,13 +296,13 @@
     const easingDefinitionToFunction = (definition) => {
         if (isBezierDefinition(definition)) {
             // If cubic bezier definition, create bezier curve
-            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+            exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length");
             const [x1, y1, x2, y2] = definition;
             return cubicBezier(x1, y1, x2, y2);
         }
         else if (isValidEasing(definition)) {
             // Else lookup from table
-            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+            exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, "invalid-easing-type");
             return easingLookup[definition];
         }
         return definition;
@@ -862,7 +862,7 @@
     const getColorType = (v) => colorTypes.find((type) => type.test(v));
     function asRGBA(color) {
         const type = getColorType(color);
-        exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+        exports.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable");
         if (!Boolean(type))
             return false;
         let model = type.parse(color);
@@ -980,7 +980,7 @@
             return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
         }
         else {
-            exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+            exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different");
             return mixImmediate(origin, target);
         }
     };
@@ -1086,7 +1086,7 @@
     function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
         let envelope;
         let derivative;
-        exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+        exports.warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
         let dampingRatio = 1 - bounce;
         /**
          * Restrict dampingRatio and duration to within acceptable ranges.
@@ -1446,7 +1446,7 @@
      */
     function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
         const inputLength = input.length;
-        exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+        exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length", "range-length");
         /**
          * If we're only provided a single input, we can just make a function
          * that returns the output.
@@ -2339,7 +2339,7 @@
             this.isPseudoElement = Boolean(pseudoElement);
             this.allowFlatten = allowFlatten;
             this.options = options;
-            exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+            exports.invariant(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
             const transition = applyGeneratorOptions(options);
             this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
             if (transition.autoplay === false) {
@@ -2555,7 +2555,7 @@
      * @internal
      */
     const isAnimatable = (value, name) => {
-        // If the list of keys tat might be non-animatable grows, replace with Set
+        // If the list of keys that might be non-animatable grows, replace with Set
         if (name === "zIndex")
             return false;
         // If it's a number or a keyframes array, we can animate it. We might at some point
@@ -2600,7 +2600,7 @@
         const targetKeyframe = keyframes[keyframes.length - 1];
         const isOriginAnimatable = isAnimatable(originKeyframe, name);
         const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-        exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+        exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${isOriginAnimatable ? targetKeyframe : originKeyframe}" is not an animatable value.`, "value-not-animatable");
         // Always skip if any of these are true
         if (!isOriginAnimatable || !isTargetAnimatable) {
             return false;
@@ -2930,7 +2930,7 @@
     }
     const maxDepth = 4;
     function getVariableValue(current, element, depth = 1) {
-        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+        exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
         const [token, fallback] = parseCSSVariable(current);
         // No CSS variable detected
         if (!token)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "motion",
-    "version": "12.23.1",
+    "version": "12.23.3",
     "description": "An animation library for JavaScript and React.",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -76,7 +76,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^12.23.1",
+        "framer-motion": "^12.23.3",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
@@ -95,5 +95,5 @@
             "optional": true
         }
     },
-    "gitHead": "6cd3f6ce7b40efb7d50d95f252ec44a31edceee7"
+    "gitHead": "1a7be2f815e9c51c4793468fe03b2127f23e1a85"
 }