framer-motion 12.23.0 → 12.23.2

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-C-c1JfhA.js');
+var create = require('./create-Ch9BUY4E.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-C-c1JfhA.js → create-Ch9BUY4E.js}

@@ -4827,7 +4827,7 @@ class VisualElementDragControls {
         if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
-        motionUtils.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+        motionUtils.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
         const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)
@@ -5752,8 +5752,8 @@ function useStrictMode(configAndProps, preloadedFeatures) {
         isStrict) {
         const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
         configAndProps.ignoreStrict
-            ? motionUtils.warning(false, strictMessage)
-            : motionUtils.invariant(false, strictMessage);
+            ? motionUtils.warning(false, strictMessage, "lazy-strict-mode")
+            : motionUtils.invariant(false, strictMessage, "lazy-strict-mode");
     }
 }
 function getProjectionFunctionality(props) {

package/dist/cjs/dom-mini.js

@@ -205,7 +205,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];
@@ -343,7 +343,7 @@ const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/cjs/dom.js

@@ -205,7 +205,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];
@@ -1781,7 +1781,7 @@ function animateSubject(subject, keyframes, options, scope) {
     else {
         const subjects = resolveSubjects(subject, keyframes, scope);
         const numSubjects = subjects.length;
-        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.");
+        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
         for (let i = 0; i < numSubjects; i++) {
             const thisSubject = subjects[i];
             const createVisualElement = thisSubject instanceof Element
@@ -1849,7 +1849,7 @@ const animate = createScopedAnimate();
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-C-c1JfhA.js');
+var create = require('./create-Ch9BUY4E.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -571,7 +571,7 @@ function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, val
     const Component = create.useConstant(() => motion[as]);
     const order = [];
     const isReordering = React.useRef(false);
-    motionUtils.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    motionUtils.invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
     const context = {
         axis,
         registerItem: (value, layout) => {
@@ -723,7 +723,7 @@ function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag,
         y: useDefaultMotionValue(style.y),
     };
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
-    motionUtils.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    motionUtils.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
     const { axis, registerItem, updateOrder } = context;
     return (jsxRuntime.jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
             const { velocity } = gesturePoint;
@@ -940,7 +940,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];
@@ -1167,7 +1167,7 @@ function animateSubject(subject, keyframes, options, scope) {
     else {
         const subjects = resolveSubjects(subject, keyframes, scope);
         const numSubjects = subjects.length;
-        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.");
+        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
         for (let i = 0; i < numSubjects; i++) {
             const thisSubject = subjects[i];
             const createVisualElement = thisSubject instanceof Element
@@ -1235,7 +1235,7 @@ const animate = createScopedAnimate();
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/cjs/m.js

@@ -364,8 +364,8 @@ function useStrictMode(configAndProps, preloadedFeatures) {
         isStrict) {
         const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
         configAndProps.ignoreStrict
-            ? motionUtils.warning(false, strictMessage)
-            : motionUtils.invariant(false, strictMessage);
+            ? motionUtils.warning(false, strictMessage, "lazy-strict-mode")
+            : motionUtils.invariant(false, strictMessage, "lazy-strict-mode");
     }
 }
 function getProjectionFunctionality(props) {

package/dist/cjs/mini.js

@@ -28,7 +28,7 @@ function useUnmountEffect(callback) {
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/es/animation/animate/subject.mjs

@@ -25,7 +25,7 @@ function animateSubject(subject, keyframes, options, scope) {
     else {
         const subjects = resolveSubjects(subject, keyframes, scope);
         const numSubjects = subjects.length;
-        invariant(Boolean(numSubjects), "No valid elements provided.");
+        invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
         for (let i = 0; i < numSubjects; i++) {
             const thisSubject = subjects[i];
             const createVisualElement = thisSubject instanceof Element

package/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -4,7 +4,7 @@ import { invariant, secondsToMilliseconds } from 'motion-utils';
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    invariant(Boolean(numElements), "No valid element provided.");
+    invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/es/animation/sequence/create.mjs

@@ -111,7 +111,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];

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

@@ -11,7 +11,7 @@ function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, val
     const Component = useConstant(() => motion[as]);
     const order = [];
     const isReordering = useRef(false);
-    invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
     const context = {
         axis,
         registerItem: (value, layout) => {

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

@@ -20,7 +20,7 @@ function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag,
         y: useDefaultMotionValue(style.y),
     };
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
-    invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
     const { axis, registerItem, updateOrder } = context;
     return (jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
             const { velocity } = gesturePoint;

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -251,7 +251,7 @@ class VisualElementDragControls {
         if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
-        invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+        invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
         const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)

package/dist/es/motion/index.mjs

@@ -81,8 +81,8 @@ function useStrictMode(configAndProps, preloadedFeatures) {
         isStrict) {
         const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
         configAndProps.ignoreStrict
-            ? warning(false, strictMessage)
-            : invariant(false, strictMessage);
+            ? warning(false, strictMessage, "lazy-strict-mode")
+            : invariant(false, strictMessage, "lazy-strict-mode");
     }
 }
 function getProjectionFunctionality(props) {

package/dist/framer-motion.dev.js

@@ -114,14 +114,19 @@
     exports.warning = () => { };
     exports.invariant = () => { };
     {
-        exports.warning = (check, message) => {
+        const formatMessage = (message, errorCode) => {
+            return errorCode
+                ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
+                : message;
+        };
+        exports.warning = (check, message, errorCode) => {
             if (!check && typeof console !== "undefined") {
-                console.warn(message);
+                console.warn(formatMessage(message, errorCode));
             }
         };
-        exports.invariant = (check, message) => {
+        exports.invariant = (check, message, errorCode) => {
             if (!check) {
-                throw new Error(message);
+                throw new Error(formatMessage(message, errorCode));
             }
         };
     }
@@ -370,13 +375,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;
@@ -936,7 +941,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);
@@ -1054,7 +1059,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);
         }
     };
@@ -1160,7 +1165,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.
@@ -1520,7 +1525,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.
@@ -1712,7 +1717,7 @@
             let { keyframes: keyframes$1 } = options;
             const generatorFactory = type || keyframes;
             if (generatorFactory !== keyframes) {
-                exports.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
+                exports.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`, "spring-two-frames");
             }
             if (generatorFactory !== keyframes &&
                 typeof keyframes$1[0] !== "number") {
@@ -2413,7 +2418,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) {
@@ -2629,7 +2634,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
@@ -2674,7 +2679,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;
@@ -3004,7 +3009,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)
@@ -10325,7 +10330,7 @@
             if (!constraints || !isRefObject(constraints))
                 return false;
             const constraintsElement = constraints.current;
-            exports.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+            exports.invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
             const { projection } = this.visualElement;
             // TODO
             if (!projection || !projection.layout)
@@ -11249,8 +11254,8 @@
             isStrict) {
             const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
             configAndProps.ignoreStrict
-                ? exports.warning(false, strictMessage)
-                : exports.invariant(false, strictMessage);
+                ? exports.warning(false, strictMessage, "lazy-strict-mode")
+                : exports.invariant(false, strictMessage, "lazy-strict-mode");
         }
     }
     function getProjectionFunctionality(props) {
@@ -11736,7 +11741,7 @@
         const Component = useConstant(() => motion[as]);
         const order = [];
         const isReordering = React$1.useRef(false);
-        exports.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+        exports.invariant(Boolean(values), "Reorder.Group must be provided a values prop", "reorder-values");
         const context = {
             axis,
             registerItem: (value, layout) => {
@@ -11888,7 +11893,7 @@
             y: useDefaultMotionValue(style.y),
         };
         const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
-        exports.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+        exports.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
         const { axis, registerItem, updateOrder } = context;
         return (jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
                 const { velocity } = gesturePoint;
@@ -12105,7 +12110,7 @@
                  * Handle repeat options
                  */
                 if (repeat) {
-                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                     duration = calculateRepeatDuration(duration, repeat);
                     const originalKeyframes = [...valueKeyframesAsList];
                     const originalTimes = [...times];
@@ -12332,7 +12337,7 @@
         else {
             const subjects = resolveSubjects(subject, keyframes, scope);
             const numSubjects = subjects.length;
-            exports.invariant(Boolean(numSubjects), "No valid elements provided.");
+            exports.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
             for (let i = 0; i < numSubjects; i++) {
                 const thisSubject = subjects[i];
                 const createVisualElement = thisSubject instanceof Element
@@ -12400,7 +12405,7 @@
     function animateElements(elementOrSelector, keyframes, options, scope) {
         const elements = resolveElements(elementOrSelector, scope);
         const numElements = elements.length;
-        exports.invariant(Boolean(numElements), "No valid element provided.");
+        exports.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
         /**
          * WAAPI doesn't support interrupting animations.
          *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.23.0",
+    "version": "12.23.2",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -87,8 +87,8 @@
         "measure": "rollup -c ./rollup.size.config.mjs"
     },
     "dependencies": {
-        "motion-dom": "^12.22.0",
-        "motion-utils": "^12.19.0",
+        "motion-dom": "^12.23.2",
+        "motion-utils": "^12.23.2",
         "tslib": "^2.4.0"
     },
     "devDependencies": {
@@ -142,5 +142,5 @@
             "maxSize": "2.26 kB"
         }
     ],
-    "gitHead": "a373936bc35696ea3f7335d58aaa6b0be71a1fb7"
+    "gitHead": "17e0e4150c125139bb41f16e2db297683b9e6513"
 }