framer-motion 9.1.0 → 9.1.2

package/dist/cjs/index.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var heyListen = require('hey-listen');
-var dom = require('@motionone/dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -152,19 +150,20 @@ function isAnimationControls(v) {
     return typeof v === "object" && typeof v.start === "function";
 }
 
-const variantProps$1 = [
-    "initial",
-    "animate",
-    "exit",
-    "whileHover",
-    "whileDrag",
-    "whileTap",
-    "whileFocus",
-    "whileInView",
+const variantPriorityOrder$1 = [
+    "animate" /* AnimationType.Animate */,
+    "whileInView" /* AnimationType.InView */,
+    "whileFocus" /* AnimationType.Focus */,
+    "whileHover" /* AnimationType.Hover */,
+    "whileTap" /* AnimationType.Tap */,
+    "whileDrag" /* AnimationType.Drag */,
+    "exit" /* AnimationType.Exit */,
 ];
+const variantProps = ["initial", ...variantPriorityOrder$1];
+
 function isControllingVariants(props) {
     return (isAnimationControls(props.animate) ||
-        variantProps$1.some((name) => isVariantLabel(props[name])));
+        variantProps.some((name) => isVariantLabel(props[name])));
 }
 function isVariantNode(props) {
     return Boolean(isControllingVariants(props) || props.variants);
@@ -540,12 +539,9 @@ function buildTransform(transform, { enableHardwareAcceleration = true, allowTra
     return transformString;
 }
 
-/**
- * Returns true if the provided key is a CSS variable
- */
-function isCSSVariable$1(key) {
-    return key.startsWith("--");
-}
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = checkStringStartsWith("--");
+const isCSSVariableToken = checkStringStartsWith("var(--");
 
 /**
  * Provided a value and a ValueType, returns the value as that value type.
@@ -692,7 +688,7 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
         /**
          * If this is a CSS variable we don't do any further processing.
          */
-        if (isCSSVariable$1(key)) {
+        if (isCSSVariableName(key)) {
             vars[key] = value;
             continue;
         }
@@ -1331,17 +1327,6 @@ function addPointerEvent(target, eventName, handler, options) {
     return addDomEvent(target, eventName, addPointerInfo(handler), options);
 }
 
-exports.AnimationType = void 0;
-(function (AnimationType) {
-    AnimationType["Animate"] = "animate";
-    AnimationType["Hover"] = "whileHover";
-    AnimationType["Tap"] = "whileTap";
-    AnimationType["Drag"] = "whileDrag";
-    AnimationType["Focus"] = "whileFocus";
-    AnimationType["InView"] = "whileInView";
-    AnimationType["Exit"] = "exit";
-})(exports.AnimationType || (exports.AnimationType = {}));
-
 /**
  * Pipe
  * Compose other transformers to run linearily
@@ -1420,7 +1405,7 @@ function addHoverEvent(node, isActive) {
             return;
         const props = node.getProps();
         if (node.animationState && props.whileHover) {
-            node.animationState.setActive(exports.AnimationType.Hover, isActive);
+            node.animationState.setActive("whileHover" /* AnimationType.Hover */, isActive);
         }
         if (props[callbackName]) {
             props[callbackName](event, info);
@@ -1458,13 +1443,13 @@ class FocusGesture extends Feature {
         }
         if (!isFocusVisible || !this.node.animationState)
             return;
-        this.node.animationState.setActive(exports.AnimationType.Focus, true);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, true);
         this.isActive = true;
     }
     onBlur() {
         if (!this.isActive || !this.node.animationState)
             return;
-        this.node.animationState.setActive(exports.AnimationType.Focus, false);
+        this.node.animationState.setActive("whileFocus" /* AnimationType.Focus */, false);
         this.isActive = false;
     }
     mount() {
@@ -1560,7 +1545,7 @@ class PressGesture extends Feature {
          * Ensure we trigger animations before firing event callback
          */
         if (whileTap && this.node.animationState) {
-            this.node.animationState.setActive(exports.AnimationType.Tap, true);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, true);
         }
         onTapStart && onTapStart(event, info);
     }
@@ -1569,7 +1554,7 @@ class PressGesture extends Feature {
         this.isPressing = false;
         const props = this.node.getProps();
         if (props.whileTap && this.node.animationState) {
-            this.node.animationState.setActive(exports.AnimationType.Tap, false);
+            this.node.animationState.setActive("whileTap" /* AnimationType.Tap */, false);
         }
         return !isDragActive();
     }
@@ -1664,7 +1649,7 @@ class InViewFeature extends Feature {
             const { onViewportEnter } = this.node.getProps();
             onViewportEnter && onViewportEnter(null);
             if (this.node.animationState) {
-                this.node.animationState.setActive(exports.AnimationType.InView, true);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, true);
             }
         });
     }
@@ -1701,7 +1686,7 @@ class InViewFeature extends Feature {
                 this.hasEnteredView = true;
             }
             if (this.node.animationState) {
-                this.node.animationState.setActive(exports.AnimationType.InView, isIntersecting);
+                this.node.animationState.setActive("whileInView" /* AnimationType.InView */, isIntersecting);
             }
             /**
              * Use the latest committed props rather than the ones in scope
@@ -1872,7 +1857,7 @@ function createRenderStep(runNextFrame) {
     return step;
 }
 
-const maxElapsed = 40;
+const maxElapsed$1 = 40;
 let useDefaultElapsed = true;
 let runNextFrame = false;
 let isProcessing = false;
@@ -1909,7 +1894,7 @@ const processFrame = (timestamp) => {
     runNextFrame = false;
     frameData.delta = useDefaultElapsed
         ? defaultTimestep
-        : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);
+        : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed$1), 1);
     frameData.timestamp = timestamp;
     isProcessing = true;
     stepsOrder.forEach(processStep);
@@ -2015,7 +2000,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "9.1.0";
+        this.version = "9.1.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2718,6 +2703,21 @@ function isWillChangeMotionValue(value) {
 const optimizedAppearDataId = "framerAppearId";
 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 
+exports.warning = noop;
+exports.invariant = noop;
+if (process.env.NODE_ENV !== "production") {
+    exports.warning = (check, message) => {
+        if (!check && typeof console !== "undefined") {
+            console.warn(message);
+        }
+    };
+    exports.invariant = (check, message) => {
+        if (!check) {
+            throw new Error(message);
+        }
+    };
+}
+
 /**
  * Converts seconds to milliseconds
  *
@@ -2817,7 +2817,7 @@ const colorTypes = [hex, rgba, hsla];
 const getColorType = (v) => colorTypes.find((type) => type.test(v));
 function asRGBA(color) {
     const type = getColorType(color);
-    heyListen.invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+    exports.invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
     let model = type.parse(color);
     if (type === hsla) {
         // TODO Remove this cast - needed since Framer Motion's stricter typing
@@ -2885,7 +2885,7 @@ const mixComplex = (origin, target) => {
         return pipe(mixArray(originStats.values, targetStats.values), template);
     }
     else {
-        heyListen.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.`);
         return (p) => `${p > 0 ? target : origin}`;
     }
 };
@@ -2963,8 +2963,8 @@ function createMixers(output, ease, customMixer) {
  */
 function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
     const inputLength = input.length;
-    heyListen.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
-    heyListen.invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
+    exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
+    exports.invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
     // If input runs highest -> lowest, reverse both arrays
     if (input[0] > input[inputLength - 1]) {
         input = [...input].reverse();
@@ -2988,6 +2988,24 @@ function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {})
         : interpolator;
 }
 
+function fillOffset(offset, remaining) {
+    const min = offset[offset.length - 1];
+    for (let i = 1; i <= remaining; i++) {
+        const offsetProgress = progress(0, remaining, i);
+        offset.push(mix(min, 1, offsetProgress));
+    }
+}
+
+function defaultOffset$1(arr) {
+    const offset = [0];
+    fillOffset(offset, arr.length - 1);
+    return offset;
+}
+
+function convertOffsetToTimes(offset, duration) {
+    return offset.map((o) => o * duration);
+}
+
 /*
   Bezier function generator
   This has been modified from Gaëtan Renaudeau's BezierEasing
@@ -3062,13 +3080,13 @@ const easingLookup = {
 const easingDefinitionToFunction = (definition) => {
     if (Array.isArray(definition)) {
         // If cubic bezier definition, create bezier curve
-        heyListen.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.`);
         const [x1, y1, x2, y2] = definition;
         return cubicBezier(x1, y1, x2, y2);
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        heyListen.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+        exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
         return easingLookup[definition];
     }
     return definition;
@@ -3080,13 +3098,6 @@ const isEasingArray = (ease) => {
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
 }
-function defaultOffset(values) {
-    const numValues = values.length;
-    return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
-}
-function convertOffsetToTimes(offset, duration) {
-    return offset.map((o) => o * duration);
-}
 function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duration = 300, }) {
     keyframeValues = [...keyframeValues];
     /**
@@ -3112,7 +3123,7 @@ function keyframes({ keyframes: keyframeValues, ease = easeInOut, times, duratio
     // TODO Maybe we should warn here if there's a length mismatch
     times && times.length === keyframeValues.length
         ? times
-        : defaultOffset(keyframeValues), duration);
+        : defaultOffset$1(keyframeValues), duration);
     function createInterpolator() {
         return interpolate(absoluteTimes, keyframeValues, {
             ease: Array.isArray(easingFunctions)
@@ -3142,7 +3153,7 @@ const maxDamping = 1;
 function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
     let envelope;
     let derivative;
-    heyListen.warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
+    exports.warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less");
     let dampingRatio = 1 - bounce;
     /**
      * Restrict dampingRatio and duration to within acceptable ranges.
@@ -3962,7 +3973,7 @@ const createMotionValueAnimation = (valueName, value, target, transition = {}) =
         const targetKeyframe = keyframes[keyframes.length - 1];
         const isOriginAnimatable = isAnimatable(valueName, originKeyframe);
         const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);
-        heyListen.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} 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 ${valueName} 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.`);
         let options = {
             keyframes,
             velocity: value.getVelocity(),
@@ -4169,13 +4180,13 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
 }
 
 const variantPriorityOrder = [
-    exports.AnimationType.Animate,
-    exports.AnimationType.InView,
-    exports.AnimationType.Focus,
-    exports.AnimationType.Hover,
-    exports.AnimationType.Tap,
-    exports.AnimationType.Drag,
-    exports.AnimationType.Exit,
+    "animate" /* AnimationType.Animate */,
+    "whileInView" /* AnimationType.InView */,
+    "whileFocus" /* AnimationType.Focus */,
+    "whileHover" /* AnimationType.Hover */,
+    "whileTap" /* AnimationType.Tap */,
+    "whileDrag" /* AnimationType.Drag */,
+    "exit" /* AnimationType.Exit */,
 ];
 const reversePriorityOrder = [...variantPriorityOrder].reverse();
 const numAnimationTypes = variantPriorityOrder.length;
@@ -4438,16 +4449,12 @@ function createAnimationState(visualElement) {
      * Change whether a certain animation type is active.
      */
     function setActive(type, isActive, options) {
+        var _a;
         // If the active state hasn't changed, we can safely do nothing here
         if (state[type].isActive === isActive)
             return Promise.resolve();
         // Propagate active change to children
-        if (visualElement.variantChildren) {
-            visualElement.variantChildren.forEach((child) => {
-                child.animationState &&
-                    child.animationState.setActive(type, isActive);
-            });
-        }
+        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
         state[type].isActive = isActive;
         const animations = animateChanges(options, type);
         for (const key in state) {
@@ -4481,13 +4488,13 @@ function createTypeState(isActive = false) {
 }
 function createState() {
     return {
-        [exports.AnimationType.Animate]: createTypeState(true),
-        [exports.AnimationType.InView]: createTypeState(),
-        [exports.AnimationType.Hover]: createTypeState(),
-        [exports.AnimationType.Tap]: createTypeState(),
-        [exports.AnimationType.Drag]: createTypeState(),
-        [exports.AnimationType.Focus]: createTypeState(),
-        [exports.AnimationType.Exit]: createTypeState(),
+        ["animate" /* AnimationType.Animate */]: createTypeState(true),
+        ["whileInView" /* AnimationType.InView */]: createTypeState(),
+        ["whileHover" /* AnimationType.Hover */]: createTypeState(),
+        ["whileTap" /* AnimationType.Tap */]: createTypeState(),
+        ["whileDrag" /* AnimationType.Drag */]: createTypeState(),
+        ["whileFocus" /* AnimationType.Focus */]: createTypeState(),
+        ["exit" /* AnimationType.Exit */]: createTypeState(),
     };
 }
 
@@ -4538,7 +4545,7 @@ class ExitAnimationFeature extends Feature {
         if (!this.node.animationState || isPresent === prevIsPresent) {
             return;
         }
-        const exitAnimation = this.node.animationState.setActive(exports.AnimationType.Exit, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
+        const exitAnimation = this.node.animationState.setActive("exit" /* AnimationType.Exit */, !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });
         if (onExitComplete && !isPresent) {
             exitAnimation.then(() => onExitComplete(this.id));
         }
@@ -5152,7 +5159,7 @@ class VisualElementDragControls {
             // Fire onDragStart event
             onDragStart && onDragStart(event, info);
             const { animationState } = this.visualElement;
-            animationState && animationState.setActive(exports.AnimationType.Drag, true);
+            animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, true);
         };
         const onMove = (event, info) => {
             // latestPointerEvent = event
@@ -5217,7 +5224,7 @@ class VisualElementDragControls {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
-        animationState && animationState.setActive(exports.AnimationType.Drag, false);
+        animationState && animationState.setActive("whileDrag" /* AnimationType.Drag */, false);
     }
     updateAxis(axis, _point, offset) {
         const { drag } = this.getProps();
@@ -5270,7 +5277,7 @@ class VisualElementDragControls {
         if (!constraints || !isRefObject(constraints))
             return false;
         const constraintsElement = constraints.current;
-        heyListen.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.");
         const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)
@@ -7355,9 +7362,6 @@ const correctBorderRadius = {
     },
 };
 
-function isCSSVariable(value) {
-    return typeof value === "string" && value.startsWith("var(--");
-}
 /**
  * Parse Framer's special CSS variable format into a CSS token and a fallback.
  *
@@ -7377,7 +7381,7 @@ function parseCSSVariable(current) {
 }
 const maxDepth = 4;
 function getVariableValue(current, element, depth = 1) {
-    heyListen.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.`);
     const [token, fallback] = parseCSSVariable(current);
     // No CSS variable detected
     if (!token)
@@ -7387,7 +7391,7 @@ function getVariableValue(current, element, depth = 1) {
     if (resolved) {
         return resolved.trim();
     }
-    else if (isCSSVariable(fallback)) {
+    else if (isCSSVariableToken(fallback)) {
         // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
         return getVariableValue(fallback, element, depth + 1);
     }
@@ -7412,7 +7416,7 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
     // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
     visualElement.values.forEach((value) => {
         const current = value.get();
-        if (!isCSSVariable(current))
+        if (!isCSSVariableToken(current))
             return;
         const resolved = getVariableValue(current, element);
         if (resolved)
@@ -7422,7 +7426,7 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
     // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
     for (const key in target) {
         const current = target[key];
-        if (!isCSSVariable(current))
+        if (!isCSSVariableToken(current))
             continue;
         const resolved = getVariableValue(current, element);
         if (!resolved)
@@ -7506,15 +7510,6 @@ const hasPositionalKey = (target) => {
     return Object.keys(target).some(isPositionalKey);
 };
 const isNumOrPxType = (v) => v === number || v === px;
-var BoundingBoxDimension;
-(function (BoundingBoxDimension) {
-    BoundingBoxDimension["width"] = "width";
-    BoundingBoxDimension["height"] = "height";
-    BoundingBoxDimension["left"] = "left";
-    BoundingBoxDimension["right"] = "right";
-    BoundingBoxDimension["top"] = "top";
-    BoundingBoxDimension["bottom"] = "bottom";
-})(BoundingBoxDimension || (BoundingBoxDimension = {}));
 const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
 const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
     if (transform === "none" || !transform)
@@ -7619,11 +7614,11 @@ const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, tr
             for (let i = fromIndex; i < numKeyframes; i++) {
                 if (!toType) {
                     toType = findDimensionValueType(to[i]);
-                    heyListen.invariant(toType === fromType ||
+                    exports.invariant(toType === fromType ||
                         (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
                 }
                 else {
-                    heyListen.invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
+                    exports.invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
                 }
             }
         }
@@ -7769,7 +7764,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.1.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.0 may not work as expected.`);
+                warnOnce(nextValue.version === "9.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.1.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7818,6 +7813,7 @@ const propEventHandlers = [
     "LayoutAnimationStart",
     "LayoutAnimationComplete",
 ];
+const numVariantProps = variantProps.length;
 /**
  * A VisualElement is an imperative abstraction around UI elements such as
  * HTMLElement, SVGElement, Three.Object3D etc.
@@ -8012,8 +8008,8 @@ class VisualElement {
             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.";
             renderedProps.ignoreStrict
-                ? heyListen.warning(false, strictMessage)
-                : heyListen.invariant(false, strictMessage);
+                ? exports.warning(false, strictMessage)
+                : exports.invariant(false, strictMessage);
         }
         for (let i = 0; i < numFeatures; i++) {
             const name = featureNames[i];
@@ -8288,8 +8284,6 @@ class VisualElement {
         }
     }
 }
-const variantProps = ["initial", ...variantPriorityOrder];
-const numVariantProps = variantProps.length;
 
 class DOMVisualElement extends VisualElement {
     sortInstanceNodePosition(a, b) {
@@ -8345,7 +8339,7 @@ class HTMLVisualElement extends DOMVisualElement {
         }
         else {
             const computedStyle = getComputedStyle$1(instance);
-            const value = (isCSSVariable$1(key)
+            const value = (isCSSVariableName(key)
                 ? computedStyle.getPropertyValue(key)
                 : computedStyle[key]) || 0;
             return typeof value === "string" ? value.trim() : value;
@@ -8981,9 +8975,9 @@ const LayoutGroup = ({ children, id, inheritId, inherit = true }) => {
 };
 
 let id = 0;
-const AnimateSharedLayout = ({ children, }) => {
+const AnimateSharedLayout = ({ children }) => {
     React__namespace.useEffect(() => {
-        heyListen.warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+        exports.warning(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
     }, []);
     return (React__namespace.createElement(LayoutGroup, { id: useConstant(() => `asl-${id++}`) }, children));
 };
@@ -9111,7 +9105,7 @@ function ReorderGroup({ children, as = "ul", axis = "y", onReorder, values, ...p
     const Component = useConstant(() => motion(as));
     const order = [];
     const isReordering = React.useRef(false);
-    heyListen.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    exports.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
     const context = {
         axis,
         registerItem: (value, layout) => {
@@ -9264,7 +9258,7 @@ function ReorderItem({ children, style = {}, value, as = "li", onDrag, layout =
     };
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
     const measuredLayout = React.useRef(null);
-    heyListen.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");
     const { axis, registerItem, updateOrder } = context;
     React.useEffect(() => {
         registerItem(value, measuredLayout.current);
@@ -9285,6 +9279,17 @@ const Reorder = {
     Item,
 };
 
+exports.AnimationType = void 0;
+(function (AnimationType) {
+    AnimationType["Animate"] = "animate";
+    AnimationType["Hover"] = "whileHover";
+    AnimationType["Tap"] = "whileTap";
+    AnimationType["Drag"] = "whileDrag";
+    AnimationType["Focus"] = "whileFocus";
+    AnimationType["InView"] = "whileInView";
+    AnimationType["Exit"] = "exit";
+})(exports.AnimationType || (exports.AnimationType = {}));
+
 /**
  * @public
  */
@@ -9420,8 +9425,443 @@ function useVelocity(value) {
     return velocity;
 }
 
+function resolveElements(elements, selectorCache) {
+    var _a;
+    if (typeof elements === "string") {
+        if (selectorCache) {
+            (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
+            elements = selectorCache[elements];
+        }
+        else {
+            elements = document.querySelectorAll(elements);
+        }
+    }
+    else if (elements instanceof Element) {
+        elements = [elements];
+    }
+    /**
+     * Return an empty array
+     */
+    return Array.from(elements || []);
+}
+
+const resizeHandlers = new WeakMap();
+let observer;
+function getElementSize(target, borderBoxSize) {
+    if (borderBoxSize) {
+        const { inlineSize, blockSize } = borderBoxSize[0];
+        return { width: inlineSize, height: blockSize };
+    }
+    else if (target instanceof SVGElement && "getBBox" in target) {
+        return target.getBBox();
+    }
+    else {
+        return {
+            width: target.offsetWidth,
+            height: target.offsetHeight,
+        };
+    }
+}
+function notifyTarget({ target, contentRect, borderBoxSize, }) {
+    var _a;
+    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+        handler({
+            target,
+            contentSize: contentRect,
+            get size() {
+                return getElementSize(target, borderBoxSize);
+            },
+        });
+    });
+}
+function notifyAll(entries) {
+    entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+    if (typeof ResizeObserver === "undefined")
+        return;
+    observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+    if (!observer)
+        createResizeObserver();
+    const elements = resolveElements(target);
+    elements.forEach((element) => {
+        let elementHandlers = resizeHandlers.get(element);
+        if (!elementHandlers) {
+            elementHandlers = new Set();
+            resizeHandlers.set(element, elementHandlers);
+        }
+        elementHandlers.add(handler);
+        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+    });
+    return () => {
+        elements.forEach((element) => {
+            const elementHandlers = resizeHandlers.get(element);
+            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
+            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
+                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+            }
+        });
+    };
+}
+
+const windowCallbacks = new Set();
+let windowResizeHandler;
+function createWindowResizeHandler() {
+    windowResizeHandler = () => {
+        const size = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        const info = {
+            target: window,
+            size,
+            contentSize: size,
+        };
+        windowCallbacks.forEach((callback) => callback(info));
+    };
+    window.addEventListener("resize", windowResizeHandler);
+}
+function resizeWindow(callback) {
+    windowCallbacks.add(callback);
+    if (!windowResizeHandler)
+        createWindowResizeHandler();
+    return () => {
+        windowCallbacks.delete(callback);
+        if (!windowCallbacks.size && windowResizeHandler) {
+            windowResizeHandler = undefined;
+        }
+    };
+}
+
+function resize(a, b) {
+    return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+}
+
+/**
+ * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
+ */
+const maxElapsed = 50;
+const createAxisInfo = () => ({
+    current: 0,
+    offset: [],
+    progress: 0,
+    scrollLength: 0,
+    targetOffset: 0,
+    targetLength: 0,
+    containerLength: 0,
+    velocity: 0,
+});
+const createScrollInfo = () => ({
+    time: 0,
+    x: createAxisInfo(),
+    y: createAxisInfo(),
+});
+const keys = {
+    x: {
+        length: "Width",
+        position: "Left",
+    },
+    y: {
+        length: "Height",
+        position: "Top",
+    },
+};
+function updateAxisInfo(element, axisName, info, time) {
+    const axis = info[axisName];
+    const { length, position } = keys[axisName];
+    const prev = axis.current;
+    const prevTime = info.time;
+    axis.current = element["scroll" + position];
+    axis.scrollLength = element["scroll" + length] - element["client" + length];
+    axis.offset.length = 0;
+    axis.offset[0] = 0;
+    axis.offset[1] = axis.scrollLength;
+    axis.progress = progress(0, axis.scrollLength, axis.current);
+    const elapsed = time - prevTime;
+    axis.velocity =
+        elapsed > maxElapsed
+            ? 0
+            : velocityPerSecond(axis.current - prev, elapsed);
+}
+function updateScrollInfo(element, info, time) {
+    updateAxisInfo(element, "x", info, time);
+    updateAxisInfo(element, "y", info, time);
+    info.time = time;
+}
+
+function calcInset(element, container) {
+    let inset = { x: 0, y: 0 };
+    let current = element;
+    while (current && current !== container) {
+        if (current instanceof HTMLElement) {
+            inset.x += current.offsetLeft;
+            inset.y += current.offsetTop;
+            current = current.offsetParent;
+        }
+        else if (current instanceof SVGGraphicsElement && "getBBox" in current) {
+            const { top, left } = current.getBBox();
+            inset.x += left;
+            inset.y += top;
+            /**
+             * Assign the next parent element as the <svg /> tag.
+             */
+            while (current && current.tagName !== "svg") {
+                current = current.parentNode;
+            }
+        }
+    }
+    return inset;
+}
+
+const ScrollOffset = {
+    Enter: [
+        [0, 1],
+        [1, 1],
+    ],
+    Exit: [
+        [0, 0],
+        [1, 0],
+    ],
+    Any: [
+        [1, 0],
+        [0, 1],
+    ],
+    All: [
+        [0, 0],
+        [1, 1],
+    ],
+};
+
+const namedEdges = {
+    start: 0,
+    center: 0.5,
+    end: 1,
+};
+function resolveEdge(edge, length, inset = 0) {
+    let delta = 0;
+    /**
+     * If we have this edge defined as a preset, replace the definition
+     * with the numerical value.
+     */
+    if (namedEdges[edge] !== undefined) {
+        edge = namedEdges[edge];
+    }
+    /**
+     * Handle unit values
+     */
+    if (typeof edge === "string") {
+        const asNumber = parseFloat(edge);
+        if (edge.endsWith("px")) {
+            delta = asNumber;
+        }
+        else if (edge.endsWith("%")) {
+            edge = asNumber / 100;
+        }
+        else if (edge.endsWith("vw")) {
+            delta = (asNumber / 100) * document.documentElement.clientWidth;
+        }
+        else if (edge.endsWith("vh")) {
+            delta = (asNumber / 100) * document.documentElement.clientHeight;
+        }
+        else {
+            edge = asNumber;
+        }
+    }
+    /**
+     * If the edge is defined as a number, handle as a progress value.
+     */
+    if (typeof edge === "number") {
+        delta = length * edge;
+    }
+    return inset + delta;
+}
+
+const defaultOffset = [0, 0];
+function resolveOffset(offset, containerLength, targetLength, targetInset) {
+    let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
+    let targetPoint = 0;
+    let containerPoint = 0;
+    if (typeof offset === "number") {
+        /**
+         * If we're provided offset: [0, 0.5, 1] then each number x should become
+         * [x, x], so we default to the behaviour of mapping 0 => 0 of both target
+         * and container etc.
+         */
+        offsetDefinition = [offset, offset];
+    }
+    else if (typeof offset === "string") {
+        offset = offset.trim();
+        if (offset.includes(" ")) {
+            offsetDefinition = offset.split(" ");
+        }
+        else {
+            /**
+             * If we're provided a definition like "100px" then we want to apply
+             * that only to the top of the target point, leaving the container at 0.
+             * Whereas a named offset like "end" should be applied to both.
+             */
+            offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
+        }
+    }
+    targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
+    containerPoint = resolveEdge(offsetDefinition[1], containerLength);
+    return targetPoint - containerPoint;
+}
+
+const point = { x: 0, y: 0 };
+function resolveOffsets(container, info, options) {
+    let { offset: offsetDefinition = ScrollOffset.All } = options;
+    const { target = container, axis = "y" } = options;
+    const lengthLabel = axis === "y" ? "height" : "width";
+    const inset = target !== container ? calcInset(target, container) : point;
+    /**
+     * Measure the target and container. If they're the same thing then we
+     * use the container's scrollWidth/Height as the target, from there
+     * all other calculations can remain the same.
+     */
+    const targetSize = target === container
+        ? { width: container.scrollWidth, height: container.scrollHeight }
+        : { width: target.clientWidth, height: target.clientHeight };
+    const containerSize = {
+        width: container.clientWidth,
+        height: container.clientHeight,
+    };
+    /**
+     * Reset the length of the resolved offset array rather than creating a new one.
+     * TODO: More reusable data structures for targetSize/containerSize would also be good.
+     */
+    info[axis].offset.length = 0;
+    /**
+     * Populate the offset array by resolving the user's offset definition into
+     * a list of pixel scroll offets.
+     */
+    let hasChanged = !info[axis].interpolate;
+    const numOffsets = offsetDefinition.length;
+    for (let i = 0; i < numOffsets; i++) {
+        const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
+        if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
+            hasChanged = true;
+        }
+        info[axis].offset[i] = offset;
+    }
+    /**
+     * If the pixel scroll offsets have changed, create a new interpolator function
+     * to map scroll value into a progress.
+     */
+    if (hasChanged) {
+        info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition));
+        info[axis].interpolatorOffsets = [...info[axis].offset];
+    }
+    info[axis].progress = info[axis].interpolate(info[axis].current);
+}
+
+function measure(container, target = container, info) {
+    /**
+     * Find inset of target within scrollable container
+     */
+    info.x.targetOffset = 0;
+    info.y.targetOffset = 0;
+    if (target !== container) {
+        let node = target;
+        while (node && node !== container) {
+            info.x.targetOffset += node.offsetLeft;
+            info.y.targetOffset += node.offsetTop;
+            node = node.offsetParent;
+        }
+    }
+    info.x.targetLength =
+        target === container ? target.scrollWidth : target.clientWidth;
+    info.y.targetLength =
+        target === container ? target.scrollHeight : target.clientHeight;
+    info.x.containerLength = container.clientWidth;
+    info.y.containerLength = container.clientHeight;
+}
+function createOnScrollHandler(element, onScroll, info, options = {}) {
+    return {
+        measure: () => measure(element, options.target, info),
+        update: (time) => {
+            updateScrollInfo(element, info, time);
+            if (options.offset || options.target) {
+                resolveOffsets(element, info, options);
+            }
+        },
+        notify: () => onScroll(info),
+    };
+}
+
+const scrollListeners = new WeakMap();
+const resizeListeners = new WeakMap();
+const onScrollHandlers = new WeakMap();
+const getEventTarget = (element) => element === document.documentElement ? window : element;
+function scroll(onScroll, { container = document.documentElement, ...options } = {}) {
+    let containerHandlers = onScrollHandlers.get(container);
+    /**
+     * Get the onScroll handlers for this container.
+     * If one isn't found, create a new one.
+     */
+    if (!containerHandlers) {
+        containerHandlers = new Set();
+        onScrollHandlers.set(container, containerHandlers);
+    }
+    /**
+     * Create a new onScroll handler for the provided callback.
+     */
+    const info = createScrollInfo();
+    const containerHandler = createOnScrollHandler(container, onScroll, info, options);
+    containerHandlers.add(containerHandler);
+    /**
+     * Check if there's a scroll event listener for this container.
+     * If not, create one.
+     */
+    if (!scrollListeners.has(container)) {
+        const listener = () => {
+            const time = performance.now();
+            for (const handler of containerHandlers)
+                handler.measure();
+            for (const handler of containerHandlers)
+                handler.update(time);
+            for (const handler of containerHandlers)
+                handler.notify();
+        };
+        scrollListeners.set(container, listener);
+        const target = getEventTarget(container);
+        window.addEventListener("resize", listener, { passive: true });
+        if (container !== document.documentElement) {
+            resizeListeners.set(container, resize(container, listener));
+        }
+        target.addEventListener("scroll", listener, { passive: true });
+    }
+    const listener = scrollListeners.get(container);
+    const onLoadProcesss = requestAnimationFrame(listener);
+    return () => {
+        var _a;
+        cancelAnimationFrame(onLoadProcesss);
+        /**
+         * Check if we even have any handlers for this container.
+         */
+        const currentHandlers = onScrollHandlers.get(container);
+        if (!currentHandlers)
+            return;
+        currentHandlers.delete(containerHandler);
+        if (currentHandlers.size)
+            return;
+        /**
+         * If no more handlers, remove the scroll listener too.
+         */
+        const scrollListener = scrollListeners.get(container);
+        scrollListeners.delete(container);
+        if (scrollListener) {
+            getEventTarget(container).removeEventListener("scroll", scrollListener);
+            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            window.removeEventListener("resize", scrollListener);
+        }
+    };
+}
+
 function refWarning(name, ref) {
-    heyListen.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
+    exports.warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
 }
 const createScrollMotionValues = () => ({
     scrollX: motionValue(0),
@@ -9437,7 +9877,7 @@ function useScroll({ container, target, layoutEffect = true, ...options } = {})
     useLifecycleEffect(() => {
         refWarning("target", target);
         refWarning("container", container);
-        return dom.scroll(({ x, y }) => {
+        return scroll(({ x, y }) => {
             values.scrollX.set(x.current);
             values.scrollXProgress.set(x.progress);
             values.scrollY.set(y.current);
@@ -9506,7 +9946,7 @@ class WillChangeMotionValue extends MotionValue {
             memberName = "transform";
         }
         else if (!name.startsWith("origin") &&
-            !isCSSVariable$1(name) &&
+            !isCSSVariableName(name) &&
             name !== "willChange") {
             memberName = camelToDash(name);
         }
@@ -9618,7 +10058,7 @@ function animationControls() {
             return () => void subscribers.delete(visualElement);
         },
         start(definition, transitionOverride) {
-            heyListen.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            exports.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
             const animations = [];
             subscribers.forEach((visualElement) => {
                 animations.push(animateVisualElement(visualElement, definition, {
@@ -9628,7 +10068,7 @@ function animationControls() {
             return Promise.all(animations);
         },
         set(definition) {
-            heyListen.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            exports.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
             return subscribers.forEach((visualElement) => {
                 setValues(visualElement, definition);
             });
@@ -9733,6 +10173,55 @@ function useCycle(...items) {
     return [item, runCycle];
 }
 
+const thresholds = {
+    any: 0,
+    all: 1,
+};
+function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "any" } = {}) {
+    /**
+     * If this browser doesn't support IntersectionObserver, return a dummy stop function.
+     * Default triggering of onStart is tricky - it could be used for starting/stopping
+     * videos, lazy loading content etc. We could provide an option to enable a fallback, or
+     * provide a fallback callback option.
+     */
+    if (typeof IntersectionObserver === "undefined") {
+        return () => { };
+    }
+    const elements = resolveElements(elementOrSelector);
+    const activeIntersections = new WeakMap();
+    const onIntersectionChange = (entries) => {
+        entries.forEach((entry) => {
+            const onEnd = activeIntersections.get(entry.target);
+            /**
+             * If there's no change to the intersection, we don't need to
+             * do anything here.
+             */
+            if (entry.isIntersecting === Boolean(onEnd))
+                return;
+            if (entry.isIntersecting) {
+                const newOnEnd = onStart(entry);
+                if (typeof newOnEnd === "function") {
+                    activeIntersections.set(entry.target, newOnEnd);
+                }
+                else {
+                    observer.unobserve(entry.target);
+                }
+            }
+            else if (onEnd) {
+                onEnd(entry);
+                activeIntersections.delete(entry.target);
+            }
+        });
+    };
+    const observer = new IntersectionObserver(onIntersectionChange, {
+        root,
+        rootMargin,
+        threshold: typeof amount === "number" ? amount : thresholds[amount],
+    });
+    elements.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
+}
+
 function useInView(ref, { root, margin, amount, once = false } = {}) {
     const [isInView, setInView] = React.useState(false);
     React.useEffect(() => {
@@ -9747,7 +10236,7 @@ function useInView(ref, { root, margin, amount, once = false } = {}) {
             margin,
             amount: amount === "some" ? "any" : amount,
         };
-        return dom.inView(ref.current, onEnter, options);
+        return inView(ref.current, onEnter, options);
     }, [root, ref, margin, once]);
     return isInView;
 }
@@ -10128,8 +10617,8 @@ function useInvertedScale(scale) {
     let parentScaleX = useMotionValue(1);
     let parentScaleY = useMotionValue(1);
     const visualElement = useVisualElementContext();
-    heyListen.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
-    heyListen.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
+    exports.invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
+    exports.warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
     hasWarned = true;
     if (scale) {
         parentScaleX = scale.scaleX || parentScaleX;