motion-v 1.6.1 → 1.7.0-alpha.0

package/dist/cjs/index.js

@@ -28,19 +28,22 @@ const clamp = (min, max, v) => {
     return min;
   return v;
 };
+function formatErrorMessage(message, errorCode) {
+  return errorCode ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}` : message;
+}
 exports.warning = () => {
 };
 exports.invariant = () => {
 };
 if (process.env.NODE_ENV !== "production") {
-  exports.warning = (check, message) => {
+  exports.warning = (check, message, errorCode) => {
     if (!check && typeof console !== "undefined") {
-      console.warn(message);
+      console.warn(formatErrorMessage(message, errorCode));
     }
   };
-  exports.invariant = (check, message) => {
+  exports.invariant = (check, message, errorCode) => {
     if (!check) {
-      throw new Error(message);
+      throw new Error(formatErrorMessage(message, errorCode));
     }
   };
 }
@@ -103,12 +106,10 @@ const warned = /* @__PURE__ */ new Set();
 function hasWarned(message) {
   return warned.has(message);
 }
-function warnOnce(condition, message, element) {
+function warnOnce(condition, message, errorCode) {
   if (condition || warned.has(message))
     return;
-  console.warn(message);
-  if (element)
-    console.warn(element);
+  console.warn(formatErrorMessage(message, errorCode));
   warned.add(message);
 }
 const wrap = (min, max, v) => {
@@ -184,11 +185,11 @@ const isValidEasing = (easing) => {
 };
 const easingDefinitionToFunction = (definition) => {
   if (isBezierDefinition(definition)) {
-    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)) {
-    exports.invariant(easingLookup[definition] !== void 0, `Invalid easing type '${definition}'`);
+    exports.invariant(easingLookup[definition] !== void 0, `Invalid easing type '${definition}'`, "invalid-easing-type");
     return easingLookup[definition];
   }
   return definition;
@@ -618,7 +619,7 @@ const colorTypes = [hex, rgba, hsla];
 const getColorType = (v) => colorTypes.find((type) => type.test(v));
 function asRGBA(color2) {
   const type = getColorType(color2);
-  exports.warning(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
+  exports.warning(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable");
   if (!Boolean(type))
     return false;
   let model = type.parse(color2);
@@ -714,7 +715,7 @@ const mixComplex = (origin, target) => {
     }
     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);
   }
 };
@@ -805,7 +806,7 @@ const safeMin = 1e-3;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
   let envelope;
   let derivative;
-  exports.warning(duration <= /* @__PURE__ */ secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
+  exports.warning(duration <= /* @__PURE__ */ secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
   let dampingRatio = 1 - bounce;
   dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
   duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration));
@@ -1058,7 +1059,7 @@ function createMixers(output, ease2, customMixer) {
 }
 function interpolate(input, output, { clamp: isClamp = true, ease: ease2, 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 (inputLength === 1)
     return () => output[0];
   if (inputLength === 2 && output[0] === output[1])
@@ -1206,7 +1207,7 @@ class JSAnimation extends WithPromise {
     let { keyframes: keyframes$1 } = options;
     const generatorFactory = type || keyframes;
     if (process.env.NODE_ENV !== "production" && 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") {
       this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
@@ -1772,7 +1773,7 @@ class NativeAnimation extends WithPromise {
     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, keyframes2, transition, pseudoElement);
     if (transition.autoplay === false) {
@@ -1977,14 +1978,15 @@ function canAnimate(keyframes2, name, type, velocity) {
   const targetKeyframe = keyframes2[keyframes2.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");
   if (!isOriginAnimatable || !isTargetAnimatable) {
     return false;
   }
   return hasKeyframesChanged(keyframes2) || (type === "spring" || isGenerator(type)) && velocity;
 }
-function isHTMLElement$1(element) {
-  return isObject(element) && "offsetHeight" in element;
+function makeAnimationInstant(options) {
+  options.duration = 0;
+  options.type === "keyframes";
 }
 const acceleratedValues$1 = /* @__PURE__ */ new Set([
   "opacity",
@@ -1998,7 +2000,8 @@ const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Elem
 function supportsBrowserAnimation(options) {
   var _a;
   const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type } = options;
-  if (!isHTMLElement$1((_a = motionValue2 == null ? void 0 : motionValue2.owner) == null ? void 0 : _a.current)) {
+  const subject = (_a = motionValue2 == null ? void 0 : motionValue2.owner) == null ? void 0 : _a.current;
+  if (!(subject instanceof HTMLElement)) {
     return false;
   }
   const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
@@ -2047,7 +2050,7 @@ class AsyncMotionValueAnimation extends WithPromise {
         onUpdate == null ? void 0 : onUpdate(getFinalKeyframe$1(keyframes2, options, finalKeyframe));
       }
       keyframes2[0] = keyframes2[keyframes2.length - 1];
-      options.duration = 0;
+      makeAnimationInstant(options);
       options.repeat = 0;
     }
     const startTime = sync2 ? !this.resolvedAt ? this.createdAt : this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY ? this.resolvedAt : this.createdAt : void 0;
@@ -2238,7 +2241,7 @@ function parseCSSVariable(current2) {
 }
 const maxDepth = 4;
 function getVariableValue(current2, element, depth = 1) {
-  exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current2}". This may indicate a circular fallback dependency.`);
+  exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current2}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
   const [token, fallback] = parseCSSVariable(current2);
   if (!token)
     return;
@@ -2688,6 +2691,9 @@ const propEffect = /* @__PURE__ */ createEffect((subject, state, key, value) =>
     subject[key] = state.latest[key];
   }, void 0, false);
 });
+function isHTMLElement$1(element) {
+  return isObject(element) && "offsetHeight" in element;
+}
 const MAX_VELOCITY_DELTA = 30;
 const isFloat = (value) => {
   return !isNaN(parseFloat(value));
@@ -2705,8 +2711,8 @@ class MotionValue {
   constructor(init, options = {}) {
     this.canTrackVelocity = null;
     this.events = {};
-    this.updateAndNotify = (v, render = true) => {
-      var _a, _b;
+    this.updateAndNotify = (v) => {
+      var _a;
       const currentTime = time.now();
       if (this.updatedAt !== currentTime) {
         this.setPrevFrameValue();
@@ -2721,9 +2727,6 @@ class MotionValue {
           }
         }
       }
-      if (render) {
-        (_b = this.events.renderRequest) == null ? void 0 : _b.notify(this.current);
-      }
     };
     this.hasAnimated = false;
     this.setCurrent(init);
@@ -2830,9 +2833,9 @@ class MotionValue {
    *
    * @public
    */
-  set(v, render = true) {
-    if (!render || !this.passiveEffect) {
-      this.updateAndNotify(v, render);
+  set(v) {
+    if (!this.passiveEffect) {
+      this.updateAndNotify(v);
     } else {
       this.passiveEffect(v, this.updateAndNotify);
     }
@@ -3549,12 +3552,15 @@ function attachSpring(value, source, options) {
     frame.postRender(startAnimation);
     return value.get();
   }, stopAnimation2);
-  let unsubscribe = void 0;
   if (isMotionValue(source)) {
-    unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
-    value.on("destroy", unsubscribe);
+    const removeSourceOnChange = source.on("change", (v) => value.set(parseValue(v, unit)));
+    const removeValueOnDestroy = value.on("destroy", removeSourceOnChange);
+    return () => {
+      removeSourceOnChange();
+      removeValueOnDestroy();
+    };
   }
-  return unsubscribe;
+  return stopAnimation2;
 }
 function parseValue(v, unit) {
   return unit ? v + unit : v;
@@ -3605,7 +3611,7 @@ const css = {
     }
   }
 };
-function getLayerName(pseudoElement) {
+function getViewAnimationLayerInfo(pseudoElement) {
   const match = pseudoElement.match(/::view-transition-(old|new|group|image-pair)\((.*?)\)/);
   if (!match)
     return null;
@@ -3692,7 +3698,7 @@ function startViewAnimation(builder) {
         const { pseudoElement } = effect;
         if (!pseudoElement)
           continue;
-        const name = getLayerName(pseudoElement);
+        const name = getViewAnimationLayerInfo(pseudoElement);
         if (!name)
           continue;
         const targetDefinition = targets.get(name.layer);
@@ -3947,7 +3953,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       remainder > 0 && fillOffset(times, remainder);
       valueKeyframesAsList.length === 1 && valueKeyframesAsList.unshift(null);
       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];
@@ -4186,14 +4192,14 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
   }
   let shouldSkip = false;
   if (options.type === false || options.duration === 0 && !options.repeatDelay) {
-    options.duration = 0;
+    makeAnimationInstant(options);
     if (options.delay === 0) {
       shouldSkip = true;
     }
   }
   if (MotionGlobalConfig.instantAnimations || MotionGlobalConfig.skipAnimations) {
     shouldSkip = true;
-    options.duration = 0;
+    makeAnimationInstant(options);
     options.delay = 0;
   }
   options.allowFlatten = !valueTransition.type && !valueTransition.ease;
@@ -4543,11 +4549,12 @@ class VisualElement {
     for (const key in initialMotionValues) {
       const value = initialMotionValues[key];
       if (latestValues[key] !== void 0 && isMotionValue(value)) {
-        value.set(latestValues[key], false);
+        value.set(latestValues[key]);
       }
     }
   }
   mount(instance) {
+    var _a;
     this.current = instance;
     visualElementStore.set(instance, this);
     if (this.projection && !this.projection.instance) {
@@ -4562,20 +4569,20 @@ class VisualElement {
     }
     this.shouldReduceMotion = this.reducedMotionConfig === "never" ? false : this.reducedMotionConfig === "always" ? true : prefersReducedMotion.current;
     if (process.env.NODE_ENV !== "production") {
-      warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+      warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
     }
-    if (this.parent)
-      this.parent.children.add(this);
+    (_a = this.parent) == null ? void 0 : _a.addChild(this);
     this.update(this.props, this.presenceContext);
   }
   unmount() {
+    var _a;
     this.projection && this.projection.unmount();
     cancelFrame(this.notifyUpdate);
     cancelFrame(this.render);
     this.valueSubscriptions.forEach((remove) => remove());
     this.valueSubscriptions.clear();
     this.removeFromVariantTree && this.removeFromVariantTree();
-    this.parent && this.parent.children.delete(this);
+    (_a = this.parent) == null ? void 0 : _a.removeChild(this);
     for (const key in this.events) {
       this.events[key].clear();
     }
@@ -4588,6 +4595,15 @@ class VisualElement {
     }
     this.current = null;
   }
+  addChild(child) {
+    this.children.add(child);
+    this.enteringChildren ?? (this.enteringChildren = /* @__PURE__ */ new Set());
+    this.enteringChildren.add(child);
+  }
+  removeChild(child) {
+    this.children.delete(child);
+    this.enteringChildren && this.enteringChildren.delete(child);
+  }
   bindToMotionValue(key, value) {
     if (this.valueSubscriptions.has(key)) {
       this.valueSubscriptions.get(key)();
@@ -4602,15 +4618,14 @@ class VisualElement {
       if (valueIsTransform && this.projection) {
         this.projection.isTransformDirty = true;
       }
+      this.scheduleRender();
     });
-    const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
     let removeSyncCheck;
     if (window.MotionCheckAppearSync) {
       removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
     }
     this.valueSubscriptions.set(key, () => {
       removeOnChange();
-      removeOnRenderRequest();
       if (removeSyncCheck)
         removeSyncCheck();
       if (value.owner)
@@ -4821,6 +4836,9 @@ class VisualElement {
       this.events[eventName].notify(...args);
     }
   }
+  scheduleRenderMicrotask() {
+    microtask.render(this.render);
+  }
 }
 class DOMVisualElement extends VisualElement {
   constructor() {
@@ -5207,9 +5225,10 @@ function animateSubject(subject, keyframes2, options, scope) {
   } else {
     const subjects = resolveSubjects(subject, keyframes2, 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];
+      exports.invariant(thisSubject !== null, "You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.", "animate-null");
       const createVisualElement2 = thisSubject instanceof Element ? createDOMVisualElement : createObjectVisualElement;
       if (!visualElementStore.has(thisSubject)) {
         createVisualElement2(thisSubject);
@@ -5258,7 +5277,7 @@ const animate = createScopedAnimate();
 function animateElements(elementOrSelector, keyframes2, 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");
   const animationDefinitions = [];
   for (let i = 0; i < numElements; i++) {
     const element = elements[i];
@@ -7354,17 +7373,27 @@ function convertSvgStyleToAttributes(keyframes2) {
 function createVisualElement(Component, options) {
   return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
+function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {
+  const sortedChildren = Array.from(children).sort((a, b) => a.sortNodePosition(b));
+  const index = sortedChildren.indexOf(child);
+  const numChildren = children.size;
+  const maxStaggerDuration = (numChildren - 1) * staggerChildren;
+  const delayIsFunction = typeof delayChildren === "function";
+  if (index === sortedChildren.length - 1) {
+    child.parent.enteringChildren = void 0;
+  }
+  return delayIsFunction ? delayChildren(index, numChildren) : staggerDirection === 1 ? index * staggerChildren : maxStaggerDuration - index * staggerChildren;
+}
 const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 class AnimationFeature extends Feature {
   constructor(state) {
-    var _a;
+    var _a, _b;
     super(state);
     this.animateUpdates = ({
       controlActiveState,
       directAnimate,
       directTransition,
       controlDelay = 0,
-      isFallback,
       isExit
     } = {}) => {
       const { reducedMotion } = this.state.options.motionConfig;
@@ -7377,8 +7406,9 @@ class AnimationFeature extends Feature {
         directAnimate,
         directTransition
       });
+      this.state.finalTransition = animationOptions;
       const factories = this.createAnimationFactories(prevTarget, animationOptions, controlDelay);
-      const { getChildAnimations } = this.setupChildAnimations(animationOptions, this.state.activeStates, isFallback);
+      const { getChildAnimations } = this.setupChildAnimations(animationOptions, this.state.activeStates);
       return this.executeAnimations({
         factories,
         getChildAnimations,
@@ -7408,6 +7438,7 @@ class AnimationFeature extends Feature {
       },
       reducedMotionConfig: this.state.options.motionConfig.reducedMotion
     });
+    (_b = this.state.visualElement.parent) == null ? void 0 : _b.addChild(this.state.visualElement);
     this.state.animateUpdates = this.animateUpdates;
     if (this.state.isMounted())
       this.state.startAnimation();
@@ -7448,7 +7479,7 @@ class AnimationFeature extends Feature {
   /**
    * Setup child animations
    */
-  setupChildAnimations(transition, controlActiveState, isFallback) {
+  setupChildAnimations(transition, controlActiveState) {
     var _a;
     const visualElement = this.state.visualElement;
     if (!((_a = visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
@@ -7532,6 +7563,7 @@ class AnimationFeature extends Feature {
    * Subscribe any provided AnimationControls to the component's VisualElement
    */
   mount() {
+    var _a, _b;
     const { element } = this.state;
     mountedStates.set(element, this.state);
     if (!visualElementStore.get(element)) {
@@ -7540,6 +7572,16 @@ class AnimationFeature extends Feature {
     }
     this.state.visualElement.state = this.state;
     this.updateAnimationControlsSubscription();
+    const visualElement = this.state.visualElement;
+    const parentVisualElement = visualElement.parent;
+    visualElement.enteringChildren = void 0;
+    if (((_a = this.state.parent) == null ? void 0 : _a.isMounted()) && !visualElement.isControllingVariants && ((_b = parentVisualElement == null ? void 0 : parentVisualElement.enteringChildren) == null ? void 0 : _b.has(visualElement))) {
+      const { delayChildren } = this.state.parent.finalTransition || {};
+      this.animateUpdates({
+        controlActiveState: this.state.parent.activeStates,
+        controlDelay: calcChildStagger(parentVisualElement.enteringChildren, visualElement, delayChildren)
+      })();
+    }
   }
   update() {
     const { animate: animate2 } = this.state.options;
@@ -9077,10 +9119,6 @@ const domAnimation = [
   HoverGesture,
   InViewGesture,
   FocusGesture
-  // ProjectionFeature,
-  // DragGesture,
-  // LayoutFeature,
-  // PanGesture,
 ];
 function isVariantLabels(value) {
   return typeof value === "string" || value === false || Array.isArray(value);
@@ -9106,7 +9144,6 @@ class MotionState {
     this.options = options;
     this.parent = parent;
     (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
-    this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
     const initial = options.initial === void 0 && options.variants ? this.context.initial : options.initial;
     const initialVariantSource = initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
@@ -9193,8 +9230,6 @@ class MotionState {
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
-  // Unmount motion state and optionally unmount children
-  // Handles unmounting in the correct order based on component tree
   unmount(unMountChildren = false) {
     const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
     const unmount = () => {
@@ -9237,7 +9272,6 @@ class MotionState {
     });
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants,
         isExit: name === "exit" && this.activeStates.exit
       });
     }
@@ -10597,6 +10631,7 @@ exports.animateValue = animateValue;
 exports.animateView = animateView;
 exports.animationMapKey = animationMapKey;
 exports.anticipate = anticipate;
+exports.applyGeneratorOptions = applyGeneratorOptions;
 exports.applyPxDefaults = applyPxDefaults;
 exports.attachSpring = attachSpring;
 exports.attrEffect = attrEffect;
@@ -10657,6 +10692,8 @@ exports.getOriginIndex = getOriginIndex;
 exports.getValueAsType = getValueAsType;
 exports.getValueTransition = getValueTransition$1;
 exports.getVariableValue = getVariableValue;
+exports.getViewAnimationLayerInfo = getViewAnimationLayerInfo;
+exports.getViewAnimations = getViewAnimations;
 exports.hasWarned = hasWarned;
 exports.hex = hex;
 exports.hover = hover;
@@ -10687,6 +10724,7 @@ exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
 exports.isZeroValueString = isZeroValueString;
 exports.keyframes = keyframes;
 exports.m = m;
+exports.makeAnimationInstant = makeAnimationInstant;
 exports.mapEasingToNativeEasing = mapEasingToNativeEasing;
 exports.mapValue = mapValue;
 exports.maxGeneratorDuration = maxGeneratorDuration;

package/dist/es/animation/hooks/animation-controls.mjs

@@ -1,6 +1,6 @@
 import { mountedStates } from "../../state/motion-state.mjs";
 import { invariant } from "hey-listen";
-import { setTarget } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/render/utils/setters.mjs";
+import { setTarget } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/render/utils/setters.mjs";
 import { resolveVariant } from "../../state/utils.mjs";
 function stopAnimation(visualElement) {
   visualElement.values.forEach((value) => value.stop());

package/dist/es/animation/hooks/use-animate.mjs

@@ -1,5 +1,5 @@
 import { ref, onUnmounted } from "vue";
-import { createScopedAnimate } from "../../external/.pnpm/framer-motion@12.22.0/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { createScopedAnimate } from "../../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/animation/animate/index.mjs";
 function useAnimate() {
   const dom = ref(null);
   const domProxy = new Proxy(dom, {

package/dist/es/components/animate-presence/use-pop-layout.mjs

@@ -1,5 +1,5 @@
 import { useMotionConfig } from "../motion-config/context.mjs";
-import { frame } from "../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { frame } from "../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();

package/dist/es/components/motion/use-motion-state.mjs

@@ -8,7 +8,7 @@ import { convertSvgStyleToAttributes, createStyles } from "../../state/style.mjs
 import { warning, invariant } from "hey-listen";
 import { ref, useAttrs, getCurrentInstance, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onBeforeUpdate, onUpdated } from "vue";
 import { useMotionConfig } from "../motion-config/context.mjs";
-import { isMotionValue } from "../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
+import { isMotionValue } from "../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
 function useMotionState(props) {
   var _a;
   const parentState = injectMotion(null);

package/dist/es/components/reorder/utils.mjs

@@ -1,6 +1,6 @@
-import { motionValue } from "../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/value/index.mjs";
-import { mixNumber } from "../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/utils/mix/number.mjs";
-import { isMotionValue } from "../../external/.pnpm/motion-dom@12.22.0/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
+import { motionValue } from "../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/value/index.mjs";
+import { mixNumber } from "../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/utils/mix/number.mjs";
+import { isMotionValue } from "../../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
 function compareMin(a, b) {
   return a.layout.min - b.layout.min;
 }

package/dist/es/external/.pnpm/{framer-motion@12.22.0 → framer-motion@12.23.12}/external/framer-motion/dist/es/animation/animate/index.mjs

@@ -1,7 +1,7 @@
 import { animateSequence } from "./sequence.mjs";
 import { animateSubject } from "./subject.mjs";
-import { GroupAnimationWithThen } from "../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/animation/GroupAnimationWithThen.mjs";
-import { removeItem } from "../../../../../../../motion-utils@12.19.0/external/motion-utils/dist/es/array.mjs";
+import { GroupAnimationWithThen } from "../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/animation/GroupAnimationWithThen.mjs";
+import { removeItem } from "../../../../../../../motion-utils@12.23.6/external/motion-utils/dist/es/array.mjs";
 function isSequence(value) {
   return Array.isArray(value) && value.some(Array.isArray);
 }

package/dist/es/external/.pnpm/{framer-motion@12.22.0 → framer-motion@12.23.12}/external/framer-motion/dist/es/animation/animate/resolve-subjects.mjs

@@ -1,5 +1,5 @@
 import { isDOMKeyframes } from "../utils/is-dom-keyframes.mjs";
-import { resolveElements } from "../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/utils/resolve-elements.mjs";
+import { resolveElements } from "../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/utils/resolve-elements.mjs";
 function resolveSubjects(subject, keyframes, scope, selectorCache) {
   if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
     return resolveElements(subject, scope, selectorCache);

package/dist/es/external/.pnpm/{framer-motion@12.22.0 → framer-motion@12.23.12}/external/framer-motion/dist/es/animation/animate/sequence.mjs

@@ -1,6 +1,6 @@
 import { createAnimationsFromSequence } from "../sequence/create.mjs";
 import { animateSubject } from "./subject.mjs";
-import { spring } from "../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/animation/generators/spring/index.mjs";
+import { spring } from "../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/animation/generators/spring/index.mjs";
 function animateSequence(sequence, options, scope) {
   const animations = [];
   const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring });

package/dist/es/external/.pnpm/{framer-motion@12.22.0 → framer-motion@12.23.12}/external/framer-motion/dist/es/animation/animate/single-value.mjs

@@ -1,6 +1,6 @@
 import { animateMotionValue } from "../interfaces/motion-value.mjs";
-import { isMotionValue } from "../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
-import { motionValue } from "../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/value/index.mjs";
+import { isMotionValue } from "../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
+import { motionValue } from "../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/value/index.mjs";
 function animateSingleValue(value, keyframes, options) {
   const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));

package/dist/es/external/.pnpm/{framer-motion@12.22.0 → framer-motion@12.23.12}/external/framer-motion/dist/es/animation/animate/subject.mjs

@@ -4,8 +4,8 @@ import { createDOMVisualElement, createObjectVisualElement } from "../utils/crea
 import { isDOMKeyframes } from "../utils/is-dom-keyframes.mjs";
 import { resolveSubjects } from "./resolve-subjects.mjs";
 import { animateSingleValue } from "./single-value.mjs";
-import { invariant } from "../../../../../../../motion-utils@12.19.0/external/motion-utils/dist/es/errors.mjs";
-import { isMotionValue } from "../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
+import { invariant } from "../../../../../../../motion-utils@12.23.6/external/motion-utils/dist/es/errors.mjs";
+import { isMotionValue } from "../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/value/utils/is-motion-value.mjs";
 function isSingleValue(subject, keyframes) {
   return isMotionValue(subject) || typeof subject === "number" || typeof subject === "string" && !isDOMKeyframes(keyframes);
 }
@@ -16,9 +16,10 @@ 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];
+      invariant(thisSubject !== null, "You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.", "animate-null");
       const createVisualElement = thisSubject instanceof Element ? createDOMVisualElement : createObjectVisualElement;
       if (!visualElementStore.has(thisSubject)) {
         createVisualElement(thisSubject);

package/dist/es/external/.pnpm/{framer-motion@12.22.0 → framer-motion@12.23.12}/external/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,16 +1,16 @@
-import { resolveElements } from "../../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/utils/resolve-elements.mjs";
-import { invariant } from "../../../../../../../../motion-utils@12.19.0/external/motion-utils/dist/es/errors.mjs";
-import { getValueTransition } from "../../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/animation/utils/get-value-transition.mjs";
-import { getAnimationMap, animationMapKey } from "../../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/animation/utils/active-animations.mjs";
-import { getComputedStyle } from "../../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/render/dom/style-computed.mjs";
-import { fillWildcards } from "../../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs";
-import { applyPxDefaults } from "../../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/animation/keyframes/utils/apply-px-defaults.mjs";
-import { NativeAnimation } from "../../../../../../../../motion-dom@12.22.0/external/motion-dom/dist/es/animation/NativeAnimation.mjs";
-import { secondsToMilliseconds } from "../../../../../../../../motion-utils@12.19.0/external/motion-utils/dist/es/time-conversion.mjs";
+import { resolveElements } from "../../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/utils/resolve-elements.mjs";
+import { invariant } from "../../../../../../../../motion-utils@12.23.6/external/motion-utils/dist/es/errors.mjs";
+import { getValueTransition } from "../../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/animation/utils/get-value-transition.mjs";
+import { getAnimationMap, animationMapKey } from "../../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/animation/utils/active-animations.mjs";
+import { getComputedStyle } from "../../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/render/dom/style-computed.mjs";
+import { fillWildcards } from "../../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs";
+import { applyPxDefaults } from "../../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/animation/keyframes/utils/apply-px-defaults.mjs";
+import { NativeAnimation } from "../../../../../../../../motion-dom@12.23.12/external/motion-dom/dist/es/animation/NativeAnimation.mjs";
+import { secondsToMilliseconds } from "../../../../../../../../motion-utils@12.23.6/external/motion-utils/dist/es/time-conversion.mjs";
 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");
   const animationDefinitions = [];
   for (let i = 0; i < numElements; i++) {
     const element = elements[i];