framer-motion 5.4.0 → 5.4.3

package/dist/cjs/index.js

@@ -0,0 +1,3721 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var useMotionValue = require('./use-motion-value-73ed7c77.js');
+var React = require('react');
+var styleValueTypes = require('style-value-types');
+var popmotion = require('popmotion');
+var heyListen = require('hey-listen');
+var sync = require('framesync');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var sync__default = /*#__PURE__*/_interopDefaultLegacy(sync);
+
+/**
+ * Convert any React component into a `motion` component. The provided component
+ * **must** use `React.forwardRef` to the underlying DOM component you want to animate.
+ *
+ * ```jsx
+ * const Component = React.forwardRef((props, ref) => {
+ *   return <div ref={ref} />
+ * })
+ *
+ * const MotionComponent = motion(Component)
+ * ```
+ *
+ * @public
+ */
+function createMotionProxy(createConfig) {
+    function custom(Component, customMotionComponentConfig) {
+        if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
+        return useMotionValue.createMotionComponent(createConfig(Component, customMotionComponentConfig));
+    }
+    if (typeof Proxy === "undefined") {
+        return custom;
+    }
+    /**
+     * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
+     * Rather than generating them anew every render.
+     */
+    var componentCache = new Map();
+    return new Proxy(custom, {
+        /**
+         * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
+         * The prop name is passed through as `key` and we can use that to generate a `motion`
+         * DOM component with that name.
+         */
+        get: function (_target, key) {
+            /**
+             * If this element doesn't exist in the component cache, create it and cache.
+             */
+            if (!componentCache.has(key)) {
+                componentCache.set(key, custom(key));
+            }
+            return componentCache.get(key);
+        },
+    });
+}
+
+/**
+ * We keep these listed seperately as we use the lowercase tag names as part
+ * of the runtime bundle to detect SVG components
+ */
+var lowercaseSVGElements = [
+    "animate",
+    "circle",
+    "defs",
+    "desc",
+    "ellipse",
+    "g",
+    "image",
+    "line",
+    "filter",
+    "marker",
+    "mask",
+    "metadata",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "rect",
+    "stop",
+    "svg",
+    "switch",
+    "symbol",
+    "text",
+    "tspan",
+    "use",
+    "view",
+];
+
+function isSVGComponent(Component) {
+    if (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof Component !== "string" ||
+        /**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */
+        Component.includes("-")) {
+        return false;
+    }
+    else if (
+    /**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */
+    lowercaseSVGElements.indexOf(Component) > -1 ||
+        /**
+         * If it contains a capital letter, it's an SVG component
+         */
+        /[A-Z]/.test(Component)) {
+        return true;
+    }
+    return false;
+}
+
+function isForcedMotionValue(key, _a) {
+    var layout = _a.layout, layoutId = _a.layoutId;
+    return (useMotionValue.isTransformProp(key) ||
+        useMotionValue.isTransformOriginProp(key) ||
+        ((layout || layoutId !== undefined) &&
+            (!!useMotionValue.scaleCorrectors[key] || key === "opacity")));
+}
+
+var translateAlias = {
+    x: "translateX",
+    y: "translateY",
+    z: "translateZ",
+    transformPerspective: "perspective",
+};
+/**
+ * Build a CSS transform style from individual x/y/scale etc properties.
+ *
+ * This outputs with a default order of transforms/scales/rotations, this can be customised by
+ * providing a transformTemplate function.
+ */
+function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
+    var transform = _a.transform, transformKeys = _a.transformKeys;
+    var _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.allowTransformNone, allowTransformNone = _d === void 0 ? true : _d;
+    // The transform string we're going to build into.
+    var transformString = "";
+    // Transform keys into their default order - this will determine the output order.
+    transformKeys.sort(useMotionValue.sortTransformProps);
+    // Track whether the defined transform has a defined z so we don't add a
+    // second to enable hardware acceleration
+    var transformHasZ = false;
+    // Loop over each transform and build them into transformString
+    var numTransformKeys = transformKeys.length;
+    for (var i = 0; i < numTransformKeys; i++) {
+        var key = transformKeys[i];
+        transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
+        if (key === "z")
+            transformHasZ = true;
+    }
+    if (!transformHasZ && enableHardwareAcceleration) {
+        transformString += "translateZ(0)";
+    }
+    else {
+        transformString = transformString.trim();
+    }
+    // If we have a custom `transform` template, pass our transform values and
+    // generated transformString to that before returning
+    if (transformTemplate) {
+        transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
+    }
+    else if (allowTransformNone && transformIsDefault) {
+        transformString = "none";
+    }
+    return transformString;
+}
+/**
+ * Build a transformOrigin style. Uses the same defaults as the browser for
+ * undefined origins.
+ */
+function buildTransformOrigin(_a) {
+    var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
+    return "".concat(originX, " ").concat(originY, " ").concat(originZ);
+}
+
+/**
+ * Returns true if the provided key is a CSS variable
+ */
+function isCSSVariable$1(key) {
+    return key.startsWith("--");
+}
+
+/**
+ * Provided a value and a ValueType, returns the value as that value type.
+ */
+var getValueAsType = function (value, type) {
+    return type && typeof value === "number"
+        ? type.transform(value)
+        : value;
+};
+
+function buildHTMLStyles(state, latestValues, options, transformTemplate) {
+    var _a;
+    var style = state.style, vars = state.vars, transform = state.transform, transformKeys = state.transformKeys, transformOrigin = state.transformOrigin;
+    // Empty the transformKeys array. As we're throwing out refs to its items
+    // this might not be as cheap as suspected. Maybe using the array as a buffer
+    // with a manual incrementation would be better.
+    transformKeys.length = 0;
+    // Track whether we encounter any transform or transformOrigin values.
+    var hasTransform = false;
+    var hasTransformOrigin = false;
+    // Does the calculated transform essentially equal "none"?
+    var transformIsNone = true;
+    /**
+     * Loop over all our latest animated values and decide whether to handle them
+     * as a style or CSS variable.
+     *
+     * Transforms and transform origins are kept seperately for further processing.
+     */
+    for (var key in latestValues) {
+        var value = latestValues[key];
+        /**
+         * If this is a CSS variable we don't do any further processing.
+         */
+        if (isCSSVariable$1(key)) {
+            vars[key] = value;
+            continue;
+        }
+        // Convert the value to its default value type, ie 0 -> "0px"
+        var valueType = useMotionValue.numberValueTypes[key];
+        var valueAsType = getValueAsType(value, valueType);
+        if (useMotionValue.isTransformProp(key)) {
+            // If this is a transform, flag to enable further transform processing
+            hasTransform = true;
+            transform[key] = valueAsType;
+            transformKeys.push(key);
+            // If we already know we have a non-default transform, early return
+            if (!transformIsNone)
+                continue;
+            // Otherwise check to see if this is a default transform
+            if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0))
+                transformIsNone = false;
+        }
+        else if (useMotionValue.isTransformOriginProp(key)) {
+            transformOrigin[key] = valueAsType;
+            // If this is a transform origin, flag and enable further transform-origin processing
+            hasTransformOrigin = true;
+        }
+        else {
+            style[key] = valueAsType;
+        }
+    }
+    if (hasTransform) {
+        style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+    }
+    else if (transformTemplate) {
+        style.transform = transformTemplate({}, "");
+    }
+    if (hasTransformOrigin) {
+        style.transformOrigin = buildTransformOrigin(transformOrigin);
+    }
+}
+
+var createHtmlRenderState = function () { return ({
+    style: {},
+    transform: {},
+    transformKeys: [],
+    transformOrigin: {},
+    vars: {},
+}); };
+
+function copyRawValuesOnly(target, source, props) {
+    for (var key in source) {
+        if (!useMotionValue.isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+            target[key] = source[key];
+        }
+    }
+}
+function useInitialMotionValues(_a, visualState, isStatic) {
+    var transformTemplate = _a.transformTemplate;
+    return React.useMemo(function () {
+        var state = createHtmlRenderState();
+        buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
+        var vars = state.vars, style = state.style;
+        return tslib.__assign(tslib.__assign({}, vars), style);
+    }, [visualState]);
+}
+function useStyle(props, visualState, isStatic) {
+    var styleProp = props.style || {};
+    var style = {};
+    /**
+     * Copy non-Motion Values straight into style
+     */
+    copyRawValuesOnly(style, styleProp, props);
+    Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
+    if (props.transformValues) {
+        style = props.transformValues(style);
+    }
+    return style;
+}
+function useHTMLProps(props, visualState, isStatic) {
+    // The `any` isn't ideal but it is the type of createElement props argument
+    var htmlProps = {};
+    var style = useStyle(props, visualState, isStatic);
+    if (Boolean(props.drag) && props.dragListener !== false) {
+        // Disable the ghost element when a user drags
+        htmlProps.draggable = false;
+        // Disable text selection
+        style.userSelect =
+            style.WebkitUserSelect =
+                style.WebkitTouchCallout =
+                    "none";
+        // Disable scrolling on the draggable direction
+        style.touchAction =
+            props.drag === true
+                ? "none"
+                : "pan-".concat(props.drag === "x" ? "y" : "x");
+    }
+    htmlProps.style = style;
+    return htmlProps;
+}
+
+function calcOrigin$1(origin, offset, size) {
+    return typeof origin === "string"
+        ? origin
+        : styleValueTypes.px.transform(offset + size * origin);
+}
+/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */
+function calcSVGTransformOrigin(dimensions, originX, originY) {
+    var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
+    var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
+    return "".concat(pxOriginX, " ").concat(pxOriginY);
+}
+
+var dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+var camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
+    if (spacing === void 0) { spacing = 1; }
+    if (offset === void 0) { offset = 0; }
+    if (useDashCase === void 0) { useDashCase = true; }
+    // Normalise path length by setting SVG attribute pathLength to 1
+    attrs.pathLength = 1;
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    var keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = styleValueTypes.px.transform(-offset);
+    // Build the dash array
+    var pathLength = styleValueTypes.px.transform(length);
+    var pathSpacing = styleValueTypes.px.transform(spacing);
+    attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
+}
+
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state, _a, options, transformTemplate) {
+    var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, 
+    // This is object creation, which we try to avoid per-frame.
+    latest = tslib.__rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+    buildHTMLStyles(state, latest, options, transformTemplate);
+    state.attrs = state.style;
+    state.style = {};
+    var attrs = state.attrs, style = state.style, dimensions = state.dimensions;
+    /**
+     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
+     * and copy it into style.
+     */
+    if (attrs.transform) {
+        if (dimensions)
+            style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    // Parse transformOrigin
+    if (dimensions &&
+        (originX !== undefined || originY !== undefined || style.transform)) {
+        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    }
+    // Treat x/y not as shortcuts but as actual attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+
+var createSvgRenderState = function () { return (tslib.__assign(tslib.__assign({}, createHtmlRenderState()), { attrs: {} })); };
+
+function useSVGProps(props, visualState) {
+    var visualProps = React.useMemo(function () {
+        var state = createSvgRenderState();
+        buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
+        return tslib.__assign(tslib.__assign({}, state.attrs), { style: tslib.__assign({}, state.style) });
+    }, [visualState]);
+    if (props.style) {
+        var rawStyles = {};
+        copyRawValuesOnly(rawStyles, props.style, props);
+        visualProps.style = tslib.__assign(tslib.__assign({}, rawStyles), visualProps.style);
+    }
+    return visualProps;
+}
+
+function createUseRender(forwardMotionProps) {
+    if (forwardMotionProps === void 0) { forwardMotionProps = false; }
+    var useRender = function (Component, props, projectionId, ref, _a, isStatic) {
+        var latestValues = _a.latestValues;
+        var useVisualProps = isSVGComponent(Component)
+            ? useSVGProps
+            : useHTMLProps;
+        var visualProps = useVisualProps(props, latestValues, isStatic);
+        var filteredProps = useMotionValue.filterProps(props, typeof Component === "string", forwardMotionProps);
+        var elementProps = tslib.__assign(tslib.__assign(tslib.__assign({}, filteredProps), visualProps), { ref: ref });
+        if (projectionId) {
+            elementProps["data-projection-id"] = projectionId;
+        }
+        return React.createElement(Component, elementProps);
+    };
+    return useRender;
+}
+
+var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
+var REPLACE_TEMPLATE = "$1-$2";
+/**
+ * Convert camelCase to dash-case properties.
+ */
+var camelToDash = function (str) {
+    return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
+};
+
+function renderHTML(element, _a, styleProp, projection) {
+    var style = _a.style, vars = _a.vars;
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+    // Loop over any CSS variables and assign those.
+    for (var key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+var camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+    "gradientTransform",
+    "pathLength",
+]);
+
+function renderSVG(element, renderState) {
+    renderHTML(element, renderState);
+    for (var key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
+function scrapeMotionValuesFromProps$1(props) {
+    var style = props.style;
+    var newValues = {};
+    for (var key in style) {
+        if (useMotionValue.isMotionValue(style[key]) || isForcedMotionValue(key, props)) {
+            newValues[key] = style[key];
+        }
+    }
+    return newValues;
+}
+
+function scrapeMotionValuesFromProps(props) {
+    var newValues = scrapeMotionValuesFromProps$1(props);
+    for (var key in props) {
+        if (useMotionValue.isMotionValue(props[key])) {
+            var targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key;
+            newValues[targetKey] = props[key];
+        }
+    }
+    return newValues;
+}
+
+var svgMotionConfig = {
+    useVisualState: useMotionValue.makeUseVisualState({
+        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+        createRenderState: createSvgRenderState,
+        onMount: function (props, instance, _a) {
+            var renderState = _a.renderState, latestValues = _a.latestValues;
+            try {
+                renderState.dimensions =
+                    typeof instance.getBBox ===
+                        "function"
+                        ? instance.getBBox()
+                        : instance.getBoundingClientRect();
+            }
+            catch (e) {
+                // Most likely trying to measure an unrendered element under Firefox
+                renderState.dimensions = {
+                    x: 0,
+                    y: 0,
+                    width: 0,
+                    height: 0,
+                };
+            }
+            buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);
+            // TODO: Replace with direct assignment
+            renderSVG(instance, renderState);
+        },
+    }),
+};
+
+var htmlMotionConfig = {
+    useVisualState: useMotionValue.makeUseVisualState({
+        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
+        createRenderState: createHtmlRenderState,
+    }),
+};
+
+function createDomMotionConfig(Component, _a, preloadedFeatures, createVisualElement, projectionNodeConstructor) {
+    var _b = _a.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b;
+    var baseConfig = isSVGComponent(Component)
+        ? svgMotionConfig
+        : htmlMotionConfig;
+    return tslib.__assign(tslib.__assign({}, baseConfig), { preloadedFeatures: preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement: createVisualElement, projectionNodeConstructor: projectionNodeConstructor, Component: Component });
+}
+
+/**
+ *
+ * @param props
+ * @param ref
+ * @internal
+ */
+function useFocusGesture(_a) {
+    var whileFocus = _a.whileFocus, visualElement = _a.visualElement;
+    var onFocus = function () {
+        var _a;
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Focus, true);
+    };
+    var onBlur = function () {
+        var _a;
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Focus, false);
+    };
+    useMotionValue.useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
+    useMotionValue.useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
+}
+
+function createHoverEvent(visualElement, isActive, callback) {
+    return function (event, info) {
+        var _a;
+        if (!useMotionValue.isMouseEvent(event) || useMotionValue.isDragActive())
+            return;
+        /**
+         * Ensure we trigger animations before firing event callback
+         */
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Hover, isActive);
+        callback === null || callback === void 0 ? void 0 : callback(event, info);
+    };
+}
+function useHoverGesture(_a) {
+    var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement;
+    useMotionValue.usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
+        ? createHoverEvent(visualElement, true, onHoverStart)
+        : undefined);
+    useMotionValue.usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover
+        ? createHoverEvent(visualElement, false, onHoverEnd)
+        : undefined);
+}
+
+/**
+ * Recursively traverse up the tree to check whether the provided child node
+ * is the parent or a descendant of it.
+ *
+ * @param parent - Element to find
+ * @param child - Element to test against parent
+ */
+var isNodeOrChild = function (parent, child) {
+    if (!child) {
+        return false;
+    }
+    else if (parent === child) {
+        return true;
+    }
+    else {
+        return isNodeOrChild(parent, child.parentElement);
+    }
+};
+
+function useUnmountEffect(callback) {
+    return React.useEffect(function () { return function () { return callback(); }; }, []);
+}
+
+/**
+ * @param handlers -
+ * @internal
+ */
+function useTapGesture(_a) {
+    var onTap = _a.onTap, onTapStart = _a.onTapStart, onTapCancel = _a.onTapCancel, whileTap = _a.whileTap, visualElement = _a.visualElement;
+    var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
+    var isPressing = React.useRef(false);
+    var cancelPointerEndListeners = React.useRef(null);
+    function removePointerEndListener() {
+        var _a;
+        (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
+        cancelPointerEndListeners.current = null;
+    }
+    function checkPointerEnd() {
+        var _a;
+        removePointerEndListener();
+        isPressing.current = false;
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Tap, false);
+        return !useMotionValue.isDragActive();
+    }
+    function onPointerUp(event, info) {
+        if (!checkPointerEnd())
+            return;
+        /**
+         * We only count this as a tap gesture if the event.target is the same
+         * as, or a child of, this component's element
+         */
+        !isNodeOrChild(visualElement.getInstance(), event.target)
+            ? onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info)
+            : onTap === null || onTap === void 0 ? void 0 : onTap(event, info);
+    }
+    function onPointerCancel(event, info) {
+        if (!checkPointerEnd())
+            return;
+        onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);
+    }
+    function onPointerDown(event, info) {
+        var _a;
+        removePointerEndListener();
+        if (isPressing.current)
+            return;
+        isPressing.current = true;
+        cancelPointerEndListeners.current = popmotion.pipe(useMotionValue.addPointerEvent(window, "pointerup", onPointerUp), useMotionValue.addPointerEvent(window, "pointercancel", onPointerCancel));
+        /**
+         * Ensure we trigger animations before firing event callback
+         */
+        (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Tap, true);
+        onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+    }
+    useMotionValue.usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined);
+    useUnmountEffect(removePointerEndListener);
+}
+
+var warned = new Set();
+function warnOnce(condition, message, element) {
+    if (condition || warned.has(message))
+        return;
+    console.warn(message);
+    if (element)
+        console.warn(element);
+    warned.add(message);
+}
+
+/**
+ * Map an IntersectionHandler callback to an element. We only ever make one handler for one
+ * element, so even though these handlers might all be triggered by different
+ * observers, we can keep them in the same map.
+ */
+var observerCallbacks = new WeakMap();
+/**
+ * Multiple observers can be created for multiple element/document roots. Each with
+ * different settings. So here we store dictionaries of observers to each root,
+ * using serialised settings (threshold/margin) as lookup keys.
+ */
+var observers = new WeakMap();
+var fireObserverCallback = function (entry) {
+    var _a;
+    (_a = observerCallbacks.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry);
+};
+var fireAllObserverCallbacks = function (entries) {
+    entries.forEach(fireObserverCallback);
+};
+function initIntersectionObserver(_a) {
+    var root = _a.root, options = tslib.__rest(_a, ["root"]);
+    var lookupRoot = root || document;
+    /**
+     * If we don't have an observer lookup map for this root, create one.
+     */
+    if (!observers.has(lookupRoot)) {
+        observers.set(lookupRoot, {});
+    }
+    var rootObservers = observers.get(lookupRoot);
+    var key = JSON.stringify(options);
+    /**
+     * If we don't have an observer for this combination of root and settings,
+     * create one.
+     */
+    if (!rootObservers[key]) {
+        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, tslib.__assign({ root: root }, options));
+    }
+    return rootObservers[key];
+}
+function observeIntersection(element, options, callback) {
+    var rootInteresectionObserver = initIntersectionObserver(options);
+    observerCallbacks.set(element, callback);
+    rootInteresectionObserver.observe(element);
+    return function () {
+        observerCallbacks.delete(element);
+        rootInteresectionObserver.unobserve(element);
+    };
+}
+
+function useViewport(_a) {
+    var visualElement = _a.visualElement, whileInView = _a.whileInView, onViewportEnter = _a.onViewportEnter, onViewportLeave = _a.onViewportLeave, _b = _a.viewport, viewport = _b === void 0 ? {} : _b;
+    var state = React.useRef({
+        hasEnteredView: false,
+        isInView: false,
+    });
+    var shouldObserve = Boolean(whileInView || onViewportEnter || onViewportLeave);
+    if (viewport.once && state.current.hasEnteredView)
+        shouldObserve = false;
+    var useObserver = typeof IntersectionObserver === "undefined"
+        ? useMissingIntersectionObserver
+        : useIntersectionObserver;
+    useObserver(shouldObserve, state.current, visualElement, viewport);
+}
+var thresholdNames = {
+    some: 0,
+    all: 1,
+};
+function useIntersectionObserver(shouldObserve, state, visualElement, _a) {
+    var root = _a.root, rootMargin = _a.margin, _b = _a.amount, amount = _b === void 0 ? "some" : _b, once = _a.once;
+    React.useEffect(function () {
+        if (!shouldObserve)
+            return;
+        var options = {
+            root: root === null || root === void 0 ? void 0 : root.current,
+            rootMargin: rootMargin,
+            threshold: typeof amount === "number" ? amount : thresholdNames[amount],
+        };
+        var intersectionCallback = function (entry) {
+            var _a;
+            var isIntersecting = entry.isIntersecting;
+            /**
+             * If there's been no change in the viewport state, early return.
+             */
+            if (state.isInView === isIntersecting)
+                return;
+            state.isInView = isIntersecting;
+            /**
+             * Handle hasEnteredView. If this is only meant to run once, and
+             * element isn't visible, early return. Otherwise set hasEnteredView to true.
+             */
+            if (once && !isIntersecting && state.hasEnteredView) {
+                return;
+            }
+            else if (isIntersecting) {
+                state.hasEnteredView = true;
+            }
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.InView, isIntersecting);
+            /**
+             * Use the latest committed props rather than the ones in scope
+             * when this observer is created
+             */
+            var props = visualElement.getProps();
+            var callback = isIntersecting
+                ? props.onViewportEnter
+                : props.onViewportLeave;
+            callback === null || callback === void 0 ? void 0 : callback(entry);
+        };
+        return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
+    }, [shouldObserve, root, rootMargin, amount]);
+}
+/**
+ * If IntersectionObserver is missing, we activate inView and fire onViewportEnter
+ * on mount. This way, the page will be in the state the author expects users
+ * to see it in for everyone.
+ */
+function useMissingIntersectionObserver(shouldObserve, state, visualElement) {
+    React.useEffect(function () {
+        if (!shouldObserve)
+            return;
+        if (process.env.NODE_ENV !== "production") {
+            warnOnce(false, "IntersectionObserver not available on this device. whileInView animations will trigger on mount.");
+        }
+        /**
+         * Fire this in an rAF because, at this point, the animation state
+         * won't have flushed for the first time and there's certain logic in
+         * there that behaves differently on the initial animation.
+         *
+         * This hook should be quite rarely called so setting this in an rAF
+         * is preferred to changing the behaviour of the animation state.
+         */
+        requestAnimationFrame(function () {
+            var _a;
+            state.hasEnteredView = true;
+            var onViewportEnter = visualElement.getProps().onViewportEnter;
+            onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
+            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.InView, true);
+        });
+    }, [shouldObserve]);
+}
+
+var gestureAnimations = {
+    inView: useMotionValue.makeRenderlessComponent(useViewport),
+    tap: useMotionValue.makeRenderlessComponent(useTapGesture),
+    focus: useMotionValue.makeRenderlessComponent(useFocusGesture),
+    hover: useMotionValue.makeRenderlessComponent(useHoverGesture),
+};
+
+/**
+ * @internal
+ */
+var PanSession = /** @class */ (function () {
+    function PanSession(event, handlers, _a) {
+        var _this = this;
+        var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;
+        /**
+         * @internal
+         */
+        this.startEvent = null;
+        /**
+         * @internal
+         */
+        this.lastMoveEvent = null;
+        /**
+         * @internal
+         */
+        this.lastMoveEventInfo = null;
+        /**
+         * @internal
+         */
+        this.handlers = {};
+        this.updatePoint = function () {
+            if (!(_this.lastMoveEvent && _this.lastMoveEventInfo))
+                return;
+            var info = getPanInfo(_this.lastMoveEventInfo, _this.history);
+            var isPanStarted = _this.startEvent !== null;
+            // Only start panning if the offset is larger than 3 pixels. If we make it
+            // any larger than this we'll want to reset the pointer history
+            // on the first update to avoid visual snapping to the cursoe.
+            var isDistancePastThreshold = popmotion.distance(info.offset, { x: 0, y: 0 }) >= 3;
+            if (!isPanStarted && !isDistancePastThreshold)
+                return;
+            var point = info.point;
+            var timestamp = sync.getFrameData().timestamp;
+            _this.history.push(tslib.__assign(tslib.__assign({}, point), { timestamp: timestamp }));
+            var _a = _this.handlers, onStart = _a.onStart, onMove = _a.onMove;
+            if (!isPanStarted) {
+                onStart && onStart(_this.lastMoveEvent, info);
+                _this.startEvent = _this.lastMoveEvent;
+            }
+            onMove && onMove(_this.lastMoveEvent, info);
+        };
+        this.handlePointerMove = function (event, info) {
+            _this.lastMoveEvent = event;
+            _this.lastMoveEventInfo = transformPoint(info, _this.transformPagePoint);
+            // Because Safari doesn't trigger mouseup events when it's above a `<select>`
+            if (useMotionValue.isMouseEvent(event) && event.buttons === 0) {
+                _this.handlePointerUp(event, info);
+                return;
+            }
+            // Throttle mouse move event to once per frame
+            sync__default["default"].update(_this.updatePoint, true);
+        };
+        this.handlePointerUp = function (event, info) {
+            _this.end();
+            var _a = _this.handlers, onEnd = _a.onEnd, onSessionEnd = _a.onSessionEnd;
+            var panInfo = getPanInfo(transformPoint(info, _this.transformPagePoint), _this.history);
+            if (_this.startEvent && onEnd) {
+                onEnd(event, panInfo);
+            }
+            onSessionEnd && onSessionEnd(event, panInfo);
+        };
+        // If we have more than one touch, don't start detecting this gesture
+        if (useMotionValue.isTouchEvent(event) && event.touches.length > 1)
+            return;
+        this.handlers = handlers;
+        this.transformPagePoint = transformPagePoint;
+        var info = useMotionValue.extractEventInfo(event);
+        var initialInfo = transformPoint(info, this.transformPagePoint);
+        var point = initialInfo.point;
+        var timestamp = sync.getFrameData().timestamp;
+        this.history = [tslib.__assign(tslib.__assign({}, point), { timestamp: timestamp })];
+        var onSessionStart = handlers.onSessionStart;
+        onSessionStart &&
+            onSessionStart(event, getPanInfo(initialInfo, this.history));
+        this.removeListeners = popmotion.pipe(useMotionValue.addPointerEvent(window, "pointermove", this.handlePointerMove), useMotionValue.addPointerEvent(window, "pointerup", this.handlePointerUp), useMotionValue.addPointerEvent(window, "pointercancel", this.handlePointerUp));
+    }
+    PanSession.prototype.updateHandlers = function (handlers) {
+        this.handlers = handlers;
+    };
+    PanSession.prototype.end = function () {
+        this.removeListeners && this.removeListeners();
+        sync.cancelSync.update(this.updatePoint);
+    };
+    return PanSession;
+}());
+function transformPoint(info, transformPagePoint) {
+    return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
+}
+function subtractPoint(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
+}
+function getPanInfo(_a, history) {
+    var point = _a.point;
+    return {
+        point: point,
+        delta: subtractPoint(point, lastDevicePoint(history)),
+        offset: subtractPoint(point, startDevicePoint(history)),
+        velocity: getVelocity(history, 0.1),
+    };
+}
+function startDevicePoint(history) {
+    return history[0];
+}
+function lastDevicePoint(history) {
+    return history[history.length - 1];
+}
+function getVelocity(history, timeDelta) {
+    if (history.length < 2) {
+        return { x: 0, y: 0 };
+    }
+    var i = history.length - 1;
+    var timestampedPoint = null;
+    var lastPoint = lastDevicePoint(history);
+    while (i >= 0) {
+        timestampedPoint = history[i];
+        if (lastPoint.timestamp - timestampedPoint.timestamp >
+            useMotionValue.secondsToMilliseconds(timeDelta)) {
+            break;
+        }
+        i--;
+    }
+    if (!timestampedPoint) {
+        return { x: 0, y: 0 };
+    }
+    var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
+    if (time === 0) {
+        return { x: 0, y: 0 };
+    }
+    var currentVelocity = {
+        x: (lastPoint.x - timestampedPoint.x) / time,
+        y: (lastPoint.y - timestampedPoint.y) / time,
+    };
+    if (currentVelocity.x === Infinity) {
+        currentVelocity.x = 0;
+    }
+    if (currentVelocity.y === Infinity) {
+        currentVelocity.y = 0;
+    }
+    return currentVelocity;
+}
+
+/**
+ * Apply constraints to a point. These constraints are both physical along an
+ * axis, and an elastic factor that determines how much to constrain the point
+ * by if it does lie outside the defined parameters.
+ */
+function applyConstraints(point, _a, elastic) {
+    var min = _a.min, max = _a.max;
+    if (min !== undefined && point < min) {
+        // If we have a min point defined, and this is outside of that, constrain
+        point = elastic ? popmotion.mix(min, point, elastic.min) : Math.max(point, min);
+    }
+    else if (max !== undefined && point > max) {
+        // If we have a max point defined, and this is outside of that, constrain
+        point = elastic ? popmotion.mix(max, point, elastic.max) : Math.min(point, max);
+    }
+    return point;
+}
+/**
+ * Calculate constraints in terms of the viewport when defined relatively to the
+ * measured axis. This is measured from the nearest edge, so a max constraint of 200
+ * on an axis with a max value of 300 would return a constraint of 500 - axis length
+ */
+function calcRelativeAxisConstraints(axis, min, max) {
+    return {
+        min: min !== undefined ? axis.min + min : undefined,
+        max: max !== undefined
+            ? axis.max + max - (axis.max - axis.min)
+            : undefined,
+    };
+}
+/**
+ * Calculate constraints in terms of the viewport when
+ * defined relatively to the measured bounding box.
+ */
+function calcRelativeConstraints(layoutBox, _a) {
+    var top = _a.top, left = _a.left, bottom = _a.bottom, right = _a.right;
+    return {
+        x: calcRelativeAxisConstraints(layoutBox.x, left, right),
+        y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
+    };
+}
+/**
+ * Calculate viewport constraints when defined as another viewport-relative axis
+ */
+function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
+    var _a;
+    var min = constraintsAxis.min - layoutAxis.min;
+    var max = constraintsAxis.max - layoutAxis.max;
+    // If the constraints axis is actually smaller than the layout axis then we can
+    // flip the constraints
+    if (constraintsAxis.max - constraintsAxis.min <
+        layoutAxis.max - layoutAxis.min) {
+        _a = tslib.__read([max, min], 2), min = _a[0], max = _a[1];
+    }
+    return { min: min, max: max };
+}
+/**
+ * Calculate viewport constraints when defined as another viewport-relative box
+ */
+function calcViewportConstraints(layoutBox, constraintsBox) {
+    return {
+        x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
+        y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
+    };
+}
+/**
+ * Calculate a transform origin relative to the source axis, between 0-1, that results
+ * in an asthetically pleasing scale/transform needed to project from source to target.
+ */
+function calcOrigin(source, target) {
+    var origin = 0.5;
+    var sourceLength = useMotionValue.calcLength(source);
+    var targetLength = useMotionValue.calcLength(target);
+    if (targetLength > sourceLength) {
+        origin = popmotion.progress(target.min, target.max - sourceLength, source.min);
+    }
+    else if (sourceLength > targetLength) {
+        origin = popmotion.progress(source.min, source.max - targetLength, target.min);
+    }
+    return popmotion.clamp(0, 1, origin);
+}
+/**
+ * Rebase the calculated viewport constraints relative to the layout.min point.
+ */
+function rebaseAxisConstraints(layout, constraints) {
+    var relativeConstraints = {};
+    if (constraints.min !== undefined) {
+        relativeConstraints.min = constraints.min - layout.min;
+    }
+    if (constraints.max !== undefined) {
+        relativeConstraints.max = constraints.max - layout.min;
+    }
+    return relativeConstraints;
+}
+var defaultElastic = 0.35;
+/**
+ * Accepts a dragElastic prop and returns resolved elastic values for each axis.
+ */
+function resolveDragElastic(dragElastic) {
+    if (dragElastic === void 0) { dragElastic = defaultElastic; }
+    if (dragElastic === false) {
+        dragElastic = 0;
+    }
+    else if (dragElastic === true) {
+        dragElastic = defaultElastic;
+    }
+    return {
+        x: resolveAxisElastic(dragElastic, "left", "right"),
+        y: resolveAxisElastic(dragElastic, "top", "bottom"),
+    };
+}
+function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
+    return {
+        min: resolvePointElastic(dragElastic, minLabel),
+        max: resolvePointElastic(dragElastic, maxLabel),
+    };
+}
+function resolvePointElastic(dragElastic, label) {
+    var _a;
+    return typeof dragElastic === "number"
+        ? dragElastic
+        : (_a = dragElastic[label]) !== null && _a !== void 0 ? _a : 0;
+}
+
+/**
+ * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
+ * it's easier to consider each axis individually. This function returns a bounding box
+ * as a map of single-axis min/max values.
+ */
+function convertBoundingBoxToBox(_a) {
+    var top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom;
+    return {
+        x: { min: left, max: right },
+        y: { min: top, max: bottom },
+    };
+}
+function convertBoxToBoundingBox(_a) {
+    var x = _a.x, y = _a.y;
+    return { top: y.min, right: x.max, bottom: y.max, left: x.min };
+}
+/**
+ * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
+ * provided by Framer to allow measured points to be corrected for device scaling. This is used
+ * when measuring DOM elements and DOM event points.
+ */
+function transformBoxPoints(point, transformPoint) {
+    if (!transformPoint)
+        return point;
+    var topLeft = transformPoint({ x: point.left, y: point.top });
+    var bottomRight = transformPoint({ x: point.right, y: point.bottom });
+    return {
+        top: topLeft.y,
+        left: topLeft.x,
+        bottom: bottomRight.y,
+        right: bottomRight.x,
+    };
+}
+
+function measureViewportBox(instance, transformPoint) {
+    return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
+}
+function measurePageBox(element, rootProjectionNode, transformPagePoint) {
+    var viewportBox = measureViewportBox(element, transformPagePoint);
+    var scroll = rootProjectionNode.scroll;
+    if (scroll) {
+        useMotionValue.translateAxis(viewportBox.x, scroll.x);
+        useMotionValue.translateAxis(viewportBox.y, scroll.y);
+    }
+    return viewportBox;
+}
+
+var elementDragControls = new WeakMap();
+/**
+ *
+ */
+// let latestPointerEvent: AnyPointerEvent
+var VisualElementDragControls = /** @class */ (function () {
+    function VisualElementDragControls(visualElement) {
+        // This is a reference to the global drag gesture lock, ensuring only one component
+        // can "capture" the drag of one or both axes.
+        // TODO: Look into moving this into pansession?
+        this.openGlobalLock = null;
+        this.isDragging = false;
+        this.currentDirection = null;
+        this.originPoint = { x: 0, y: 0 };
+        /**
+         * The permitted boundaries of travel, in pixels.
+         */
+        this.constraints = false;
+        this.hasMutatedConstraints = false;
+        /**
+         * The per-axis resolved elastic values.
+         */
+        this.elastic = useMotionValue.createBox();
+        this.visualElement = visualElement;
+    }
+    VisualElementDragControls.prototype.start = function (originEvent, _a) {
+        var _this = this;
+        var _b = _a === void 0 ? {} : _a, _c = _b.snapToCursor, snapToCursor = _c === void 0 ? false : _c;
+        /**
+         * Don't start dragging if this component is exiting
+         */
+        if (this.visualElement.isPresent === false)
+            return;
+        var onSessionStart = function (event) {
+            // Stop any animations on both axis values immediately. This allows the user to throw and catch
+            // the component.
+            _this.stopAnimation();
+            if (snapToCursor) {
+                _this.snapToCursor(useMotionValue.extractEventInfo(event, "page").point);
+            }
+        };
+        var onStart = function (event, info) {
+            var _a;
+            // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
+            var _b = _this.getProps(), drag = _b.drag, dragPropagation = _b.dragPropagation, onDragStart = _b.onDragStart;
+            if (drag && !dragPropagation) {
+                if (_this.openGlobalLock)
+                    _this.openGlobalLock();
+                _this.openGlobalLock = useMotionValue.getGlobalLock(drag);
+                // If we don 't have the lock, don't start dragging
+                if (!_this.openGlobalLock)
+                    return;
+            }
+            _this.isDragging = true;
+            _this.currentDirection = null;
+            _this.resolveConstraints();
+            if (_this.visualElement.projection) {
+                _this.visualElement.projection.isAnimationBlocked = true;
+                _this.visualElement.projection.target = undefined;
+            }
+            /**
+             * Record gesture origin
+             */
+            useMotionValue.eachAxis(function (axis) {
+                var _a, _b;
+                var current = _this.getAxisMotionValue(axis).get() || 0;
+                /**
+                 * If the MotionValue is a percentage value convert to px
+                 */
+                if (styleValueTypes.percent.test(current)) {
+                    var measuredAxis = (_b = (_a = _this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                    if (measuredAxis) {
+                        var length_1 = useMotionValue.calcLength(measuredAxis);
+                        current = length_1 * (parseFloat(current) / 100);
+                    }
+                }
+                _this.originPoint[axis] = current;
+            });
+            // Fire onDragStart event
+            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, info);
+            (_a = _this.visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(useMotionValue.AnimationType.Drag, true);
+        };
+        var onMove = function (event, info) {
+            // latestPointerEvent = event
+            var _a = _this.getProps(), dragPropagation = _a.dragPropagation, dragDirectionLock = _a.dragDirectionLock, onDirectionLock = _a.onDirectionLock, onDrag = _a.onDrag;
+            // If we didn't successfully receive the gesture lock, early return.
+            if (!dragPropagation && !_this.openGlobalLock)
+                return;
+            var offset = info.offset;
+            // Attempt to detect drag direction if directionLock is true
+            if (dragDirectionLock && _this.currentDirection === null) {
+                _this.currentDirection = getCurrentDirection(offset);
+                // If we've successfully set a direction, notify listener
+                if (_this.currentDirection !== null) {
+                    onDirectionLock === null || onDirectionLock === void 0 ? void 0 : onDirectionLock(_this.currentDirection);
+                }
+                return;
+            }
+            // Update each point with the latest position
+            _this.updateAxis("x", info.point, offset);
+            _this.updateAxis("y", info.point, offset);
+            /**
+             * Ideally we would leave the renderer to fire naturally at the end of
+             * this frame but if the element is about to change layout as the result
+             * of a re-render we want to ensure the browser can read the latest
+             * bounding box to ensure the pointer and element don't fall out of sync.
+             */
+            _this.visualElement.syncRender();
+            /**
+             * This must fire after the syncRender call as it might trigger a state
+             * change which itself might trigger a layout update.
+             */
+            onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, info);
+        };
+        var onSessionEnd = function (event, info) {
+            return _this.stop(event, info);
+        };
+        this.panSession = new PanSession(originEvent, {
+            onSessionStart: onSessionStart,
+            onStart: onStart,
+            onMove: onMove,
+            onSessionEnd: onSessionEnd,
+        }, { transformPagePoint: this.visualElement.getTransformPagePoint() });
+    };
+    VisualElementDragControls.prototype.stop = function (event, info) {
+        var isDragging = this.isDragging;
+        this.cancel();
+        if (!isDragging)
+            return;
+        var velocity = info.velocity;
+        this.startAnimation(velocity);
+        var onDragEnd = this.getProps().onDragEnd;
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, info);
+    };
+    VisualElementDragControls.prototype.cancel = function () {
+        var _a, _b;
+        this.isDragging = false;
+        if (this.visualElement.projection) {
+            this.visualElement.projection.isAnimationBlocked = false;
+        }
+        (_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();
+        this.panSession = undefined;
+        var dragPropagation = this.getProps().dragPropagation;
+        if (!dragPropagation && this.openGlobalLock) {
+            this.openGlobalLock();
+            this.openGlobalLock = null;
+        }
+        (_b = this.visualElement.animationState) === null || _b === void 0 ? void 0 : _b.setActive(useMotionValue.AnimationType.Drag, false);
+    };
+    VisualElementDragControls.prototype.updateAxis = function (axis, _point, offset) {
+        var drag = this.getProps().drag;
+        // If we're not dragging this axis, do an early return.
+        if (!offset || !shouldDrag(axis, drag, this.currentDirection))
+            return;
+        var axisValue = this.getAxisMotionValue(axis);
+        var next = this.originPoint[axis] + offset[axis];
+        // Apply constraints
+        if (this.constraints && this.constraints[axis]) {
+            next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
+        }
+        axisValue.set(next);
+    };
+    VisualElementDragControls.prototype.resolveConstraints = function () {
+        var _this = this;
+        var _a = this.getProps(), dragConstraints = _a.dragConstraints, dragElastic = _a.dragElastic;
+        var layout = (this.visualElement.projection || {}).layout;
+        var prevConstraints = this.constraints;
+        if (dragConstraints && useMotionValue.isRefObject(dragConstraints)) {
+            if (!this.constraints) {
+                this.constraints = this.resolveRefConstraints();
+            }
+        }
+        else {
+            if (dragConstraints && layout) {
+                this.constraints = calcRelativeConstraints(layout.actual, dragConstraints);
+            }
+            else {
+                this.constraints = false;
+            }
+        }
+        this.elastic = resolveDragElastic(dragElastic);
+        /**
+         * If we're outputting to external MotionValues, we want to rebase the measured constraints
+         * from viewport-relative to component-relative.
+         */
+        if (prevConstraints !== this.constraints &&
+            layout &&
+            this.constraints &&
+            !this.hasMutatedConstraints) {
+            useMotionValue.eachAxis(function (axis) {
+                if (_this.getAxisMotionValue(axis)) {
+                    _this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], _this.constraints[axis]);
+                }
+            });
+        }
+    };
+    VisualElementDragControls.prototype.resolveRefConstraints = function () {
+        var _a = this.getProps(), constraints = _a.dragConstraints, onMeasureDragConstraints = _a.onMeasureDragConstraints;
+        if (!constraints || !useMotionValue.isRefObject(constraints))
+            return false;
+        var 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.");
+        var projection = this.visualElement.projection;
+        // TODO
+        if (!projection || !projection.layout)
+            return false;
+        var constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
+        var measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox);
+        /**
+         * If there's an onMeasureDragConstraints listener we call it and
+         * if different constraints are returned, set constraints to that
+         */
+        if (onMeasureDragConstraints) {
+            var userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
+            this.hasMutatedConstraints = !!userConstraints;
+            if (userConstraints) {
+                measuredConstraints = convertBoundingBoxToBox(userConstraints);
+            }
+        }
+        return measuredConstraints;
+    };
+    VisualElementDragControls.prototype.startAnimation = function (velocity) {
+        var _this = this;
+        var _a = this.getProps(), drag = _a.drag, dragMomentum = _a.dragMomentum, dragElastic = _a.dragElastic, dragTransition = _a.dragTransition, dragSnapToOrigin = _a.dragSnapToOrigin, onDragTransitionEnd = _a.onDragTransitionEnd;
+        var constraints = this.constraints || {};
+        var momentumAnimations = useMotionValue.eachAxis(function (axis) {
+            var _a;
+            if (!shouldDrag(axis, drag, _this.currentDirection)) {
+                return;
+            }
+            var transition = (_a = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0 ? _a : {};
+            if (dragSnapToOrigin)
+                transition = { min: 0, max: 0 };
+            /**
+             * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
+             * of spring animations so we should look into adding a disable spring option to `inertia`.
+             * We could do something here where we affect the `bounceStiffness` and `bounceDamping`
+             * using the value of `dragElastic`.
+             */
+            var bounceStiffness = dragElastic ? 200 : 1000000;
+            var bounceDamping = dragElastic ? 40 : 10000000;
+            var inertia = tslib.__assign(tslib.__assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness: bounceStiffness, bounceDamping: bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
+            // If we're not animating on an externally-provided `MotionValue` we can use the
+            // component's animation controls which will handle interactions with whileHover (etc),
+            // otherwise we just have to animate the `MotionValue` itself.
+            return _this.startAxisValueAnimation(axis, inertia);
+        });
+        // Run all animations and then resolve the new drag constraints.
+        return Promise.all(momentumAnimations).then(onDragTransitionEnd);
+    };
+    VisualElementDragControls.prototype.startAxisValueAnimation = function (axis, transition) {
+        var axisValue = this.getAxisMotionValue(axis);
+        return useMotionValue.startAnimation(axis, axisValue, 0, transition);
+    };
+    VisualElementDragControls.prototype.stopAnimation = function () {
+        var _this = this;
+        useMotionValue.eachAxis(function (axis) { return _this.getAxisMotionValue(axis).stop(); });
+    };
+    /**
+     * Drag works differently depending on which props are provided.
+     *
+     * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
+     * - Otherwise, we apply the delta to the x/y motion values.
+     */
+    VisualElementDragControls.prototype.getAxisMotionValue = function (axis) {
+        var _a, _b;
+        var dragKey = "_drag" + axis.toUpperCase();
+        var externalMotionValue = this.visualElement.getProps()[dragKey];
+        return externalMotionValue
+            ? externalMotionValue
+            : this.visualElement.getValue(axis, (_b = (_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) !== null && _b !== void 0 ? _b : 0);
+    };
+    VisualElementDragControls.prototype.snapToCursor = function (point) {
+        var _this = this;
+        useMotionValue.eachAxis(function (axis) {
+            var drag = _this.getProps().drag;
+            // If we're not dragging this axis, do an early return.
+            if (!shouldDrag(axis, drag, _this.currentDirection))
+                return;
+            var projection = _this.visualElement.projection;
+            var axisValue = _this.getAxisMotionValue(axis);
+            if (projection && projection.layout) {
+                var _a = projection.layout.actual[axis], min = _a.min, max = _a.max;
+                axisValue.set(point[axis] - popmotion.mix(min, max, 0.5));
+            }
+        });
+    };
+    /**
+     * When the viewport resizes we want to check if the measured constraints
+     * have changed and, if so, reposition the element within those new constraints
+     * relative to where it was before the resize.
+     */
+    VisualElementDragControls.prototype.scalePositionWithinConstraints = function () {
+        var _this = this;
+        var _a;
+        var _b = this.getProps(), drag = _b.drag, dragConstraints = _b.dragConstraints;
+        var projection = this.visualElement.projection;
+        if (!useMotionValue.isRefObject(dragConstraints) || !projection || !this.constraints)
+            return;
+        /**
+         * Stop current animations as there can be visual glitching if we try to do
+         * this mid-animation
+         */
+        this.stopAnimation();
+        /**
+         * Record the relative position of the dragged element relative to the
+         * constraints box and save as a progress value.
+         */
+        var boxProgress = { x: 0, y: 0 };
+        useMotionValue.eachAxis(function (axis) {
+            var axisValue = _this.getAxisMotionValue(axis);
+            if (axisValue) {
+                var latest = axisValue.get();
+                boxProgress[axis] = calcOrigin({ min: latest, max: latest }, _this.constraints[axis]);
+            }
+        });
+        /**
+         * Update the layout of this element and resolve the latest drag constraints
+         */
+        var transformTemplate = this.visualElement.getProps().transformTemplate;
+        this.visualElement.getInstance().style.transform = transformTemplate
+            ? transformTemplate({}, "")
+            : "none";
+        (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll();
+        projection.updateLayout();
+        this.resolveConstraints();
+        /**
+         * For each axis, calculate the current progress of the layout axis
+         * within the new constraints.
+         */
+        useMotionValue.eachAxis(function (axis) {
+            if (!shouldDrag(axis, drag, null))
+                return;
+            /**
+             * Calculate a new transform based on the previous box progress
+             */
+            var axisValue = _this.getAxisMotionValue(axis);
+            var _a = _this.constraints[axis], min = _a.min, max = _a.max;
+            axisValue.set(popmotion.mix(min, max, boxProgress[axis]));
+        });
+    };
+    VisualElementDragControls.prototype.addListeners = function () {
+        var _this = this;
+        var _a;
+        elementDragControls.set(this.visualElement, this);
+        var element = this.visualElement.getInstance();
+        /**
+         * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
+         */
+        var stopPointerListener = useMotionValue.addPointerEvent(element, "pointerdown", function (event) {
+            var _a = _this.getProps(), drag = _a.drag, _b = _a.dragListener, dragListener = _b === void 0 ? true : _b;
+            drag && dragListener && _this.start(event);
+        });
+        var measureDragConstraints = function () {
+            var dragConstraints = _this.getProps().dragConstraints;
+            if (useMotionValue.isRefObject(dragConstraints)) {
+                _this.constraints = _this.resolveRefConstraints();
+            }
+        };
+        var projection = this.visualElement.projection;
+        var stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
+        if (projection && !projection.layout) {
+            (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll();
+            projection.updateLayout();
+        }
+        measureDragConstraints();
+        /**
+         * Attach a window resize listener to scale the draggable target within its defined
+         * constraints as the window resizes.
+         */
+        var stopResizeListener = useMotionValue.addDomEvent(window, "resize", function () {
+            _this.scalePositionWithinConstraints();
+        });
+        /**
+         * If the element's layout changes, calculate the delta and apply that to
+         * the drag gesture's origin point.
+         */
+        projection.addEventListener("didUpdate", (function (_a) {
+            var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
+            if (_this.isDragging && hasLayoutChanged) {
+                useMotionValue.eachAxis(function (axis) {
+                    var motionValue = _this.getAxisMotionValue(axis);
+                    if (!motionValue)
+                        return;
+                    _this.originPoint[axis] += delta[axis].translate;
+                    motionValue.set(motionValue.get() + delta[axis].translate);
+                });
+                _this.visualElement.syncRender();
+            }
+        }));
+        return function () {
+            stopResizeListener();
+            stopPointerListener();
+            stopMeasureLayoutListener();
+        };
+    };
+    VisualElementDragControls.prototype.getProps = function () {
+        var props = this.visualElement.getProps();
+        var _a = props.drag, drag = _a === void 0 ? false : _a, _b = props.dragDirectionLock, dragDirectionLock = _b === void 0 ? false : _b, _c = props.dragPropagation, dragPropagation = _c === void 0 ? false : _c, _d = props.dragConstraints, dragConstraints = _d === void 0 ? false : _d, _e = props.dragElastic, dragElastic = _e === void 0 ? defaultElastic : _e, _f = props.dragMomentum, dragMomentum = _f === void 0 ? true : _f;
+        return tslib.__assign(tslib.__assign({}, props), { drag: drag, dragDirectionLock: dragDirectionLock, dragPropagation: dragPropagation, dragConstraints: dragConstraints, dragElastic: dragElastic, dragMomentum: dragMomentum });
+    };
+    return VisualElementDragControls;
+}());
+function shouldDrag(direction, drag, currentDirection) {
+    return ((drag === true || drag === direction) &&
+        (currentDirection === null || currentDirection === direction));
+}
+/**
+ * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
+ * than the provided threshold, return `null`.
+ *
+ * @param offset - The x/y offset from origin.
+ * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
+ */
+function getCurrentDirection(offset, lockThreshold) {
+    if (lockThreshold === void 0) { lockThreshold = 10; }
+    var direction = null;
+    if (Math.abs(offset.y) > lockThreshold) {
+        direction = "y";
+    }
+    else if (Math.abs(offset.x) > lockThreshold) {
+        direction = "x";
+    }
+    return direction;
+}
+
+/**
+ * A hook that allows an element to be dragged.
+ *
+ * @internal
+ */
+function useDrag(props) {
+    var groupDragControls = props.dragControls, visualElement = props.visualElement;
+    var dragControls = useMotionValue.useConstant(function () { return new VisualElementDragControls(visualElement); });
+    // If we've been provided a DragControls for manual control over the drag gesture,
+    // subscribe this component to it on mount.
+    React.useEffect(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls, groupDragControls]);
+    // Apply the event listeners to the element
+    React.useEffect(function () { return dragControls.addListeners(); }, [dragControls]);
+}
+
+/**
+ *
+ * @param handlers -
+ * @param ref -
+ *
+ * @internalremarks
+ * Currently this sets new pan gesture functions every render. The memo route has been explored
+ * in the past but ultimately we're still creating new functions every render. An optimisation
+ * to explore is creating the pan gestures and loading them into a `ref`.
+ *
+ * @internal
+ */
+function usePanGesture(_a) {
+    var onPan = _a.onPan, onPanStart = _a.onPanStart, onPanEnd = _a.onPanEnd, onPanSessionStart = _a.onPanSessionStart, visualElement = _a.visualElement;
+    var hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
+    var panSession = React.useRef(null);
+    var transformPagePoint = React.useContext(useMotionValue.MotionConfigContext).transformPagePoint;
+    var handlers = {
+        onSessionStart: onPanSessionStart,
+        onStart: onPanStart,
+        onMove: onPan,
+        onEnd: function (event, info) {
+            panSession.current = null;
+            onPanEnd && onPanEnd(event, info);
+        },
+    };
+    React.useEffect(function () {
+        if (panSession.current !== null) {
+            panSession.current.updateHandlers(handlers);
+        }
+    });
+    function onPointerDown(event) {
+        panSession.current = new PanSession(event, handlers, {
+            transformPagePoint: transformPagePoint,
+        });
+    }
+    useMotionValue.usePointerEvent(visualElement, "pointerdown", hasPanEvents && onPointerDown);
+    useUnmountEffect(function () { return panSession.current && panSession.current.end(); });
+}
+
+var drag = {
+    pan: useMotionValue.makeRenderlessComponent(usePanGesture),
+    drag: useMotionValue.makeRenderlessComponent(useDrag),
+};
+
+function isCSSVariable(value) {
+    return typeof value === "string" && value.startsWith("var(--");
+}
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+function parseCSSVariable(current) {
+    var match = cssVariableRegex.exec(current);
+    if (!match)
+        return [,];
+    var _a = tslib.__read(match, 3), token = _a[1], fallback = _a[2];
+    return [token, fallback];
+}
+var maxDepth = 4;
+function getVariableValue(current, element, depth) {
+    if (depth === void 0) { depth = 1; }
+    heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
+    var _a = tslib.__read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
+    // No CSS variable detected
+    if (!token)
+        return;
+    // Attempt to read this CSS variable off the element
+    var resolved = window.getComputedStyle(element).getPropertyValue(token);
+    if (resolved) {
+        return resolved.trim();
+    }
+    else if (isCSSVariable(fallback)) {
+        // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
+        return getVariableValue(fallback, element, depth + 1);
+    }
+    else {
+        return fallback;
+    }
+}
+/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */
+function resolveCSSVariables(visualElement, _a, transitionEnd) {
+    var _b;
+    var target = tslib.__rest(_a, []);
+    var element = visualElement.getInstance();
+    if (!(element instanceof Element))
+        return { target: target, transitionEnd: transitionEnd };
+    // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
+    // only if they change but I think this reads clearer and this isn't a performance-critical path.
+    if (transitionEnd) {
+        transitionEnd = tslib.__assign({}, transitionEnd);
+    }
+    // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
+    visualElement.forEachValue(function (value) {
+        var current = value.get();
+        if (!isCSSVariable(current))
+            return;
+        var resolved = getVariableValue(current, element);
+        if (resolved)
+            value.set(resolved);
+    });
+    // Cycle through every target property and resolve CSS variables. Currently
+    // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
+    for (var key in target) {
+        var current = target[key];
+        if (!isCSSVariable(current))
+            continue;
+        var resolved = getVariableValue(current, element);
+        if (!resolved)
+            continue;
+        // Clone target if it hasn't already been
+        target[key] = resolved;
+        // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
+        // CSS variable. This will ensure that after the animation the component will reflect
+        // changes in the value of the CSS variable.
+        if (transitionEnd)
+            (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
+    }
+    return { target: target, transitionEnd: transitionEnd };
+}
+
+var positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "x",
+    "y",
+]);
+var isPositionalKey = function (key) { return positionalKeys.has(key); };
+var hasPositionalKey = function (target) {
+    return Object.keys(target).some(isPositionalKey);
+};
+var setAndResetVelocity = function (value, to) {
+    // Looks odd but setting it twice doesn't render, it'll just
+    // set both prev and current to the latest value
+    value.set(to, false);
+    value.set(to);
+};
+var isNumOrPxType = function (v) {
+    return v === styleValueTypes.number || v === styleValueTypes.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 = {}));
+var getPosFromMatrix = function (matrix, pos) {
+    return parseFloat(matrix.split(", ")[pos]);
+};
+var getTranslateFromMatrix = function (pos2, pos3) {
+    return function (_bbox, _a) {
+        var transform = _a.transform;
+        if (transform === "none" || !transform)
+            return 0;
+        var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+        if (matrix3d) {
+            return getPosFromMatrix(matrix3d[1], pos3);
+        }
+        else {
+            var matrix = transform.match(/^matrix\((.+)\)$/);
+            if (matrix) {
+                return getPosFromMatrix(matrix[1], pos2);
+            }
+            else {
+                return 0;
+            }
+        }
+    };
+};
+var transformKeys = new Set(["x", "y", "z"]);
+var nonTranslationalTransformKeys = useMotionValue.transformProps.filter(function (key) { return !transformKeys.has(key); });
+function removeNonTranslationalTransform(visualElement) {
+    var removedTransforms = [];
+    nonTranslationalTransformKeys.forEach(function (key) {
+        var value = visualElement.getValue(key);
+        if (value !== undefined) {
+            removedTransforms.push([key, value.get()]);
+            value.set(key.startsWith("scale") ? 1 : 0);
+        }
+    });
+    // Apply changes to element before measurement
+    if (removedTransforms.length)
+        visualElement.syncRender();
+    return removedTransforms;
+}
+var positionalValues = {
+    // Dimensions
+    width: function (_a, _b) {
+        var x = _a.x;
+        var _c = _b.paddingLeft, paddingLeft = _c === void 0 ? "0" : _c, _d = _b.paddingRight, paddingRight = _d === void 0 ? "0" : _d;
+        return x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight);
+    },
+    height: function (_a, _b) {
+        var y = _a.y;
+        var _c = _b.paddingTop, paddingTop = _c === void 0 ? "0" : _c, _d = _b.paddingBottom, paddingBottom = _d === void 0 ? "0" : _d;
+        return y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom);
+    },
+    top: function (_bbox, _a) {
+        var top = _a.top;
+        return parseFloat(top);
+    },
+    left: function (_bbox, _a) {
+        var left = _a.left;
+        return parseFloat(left);
+    },
+    bottom: function (_a, _b) {
+        var y = _a.y;
+        var top = _b.top;
+        return parseFloat(top) + (y.max - y.min);
+    },
+    right: function (_a, _b) {
+        var x = _a.x;
+        var left = _b.left;
+        return parseFloat(left) + (x.max - x.min);
+    },
+    // Transform
+    x: getTranslateFromMatrix(4, 13),
+    y: getTranslateFromMatrix(5, 14),
+};
+var convertChangedValueTypes = function (target, visualElement, changedKeys) {
+    var originBbox = visualElement.measureViewportBox();
+    var element = visualElement.getInstance();
+    var elementComputedStyle = getComputedStyle(element);
+    var display = elementComputedStyle.display;
+    var origin = {};
+    // If the element is currently set to display: "none", make it visible before
+    // measuring the target bounding box
+    if (display === "none") {
+        visualElement.setStaticValue("display", target.display || "block");
+    }
+    /**
+     * Record origins before we render and update styles
+     */
+    changedKeys.forEach(function (key) {
+        origin[key] = positionalValues[key](originBbox, elementComputedStyle);
+    });
+    // Apply the latest values (as set in checkAndConvertChangedValueTypes)
+    visualElement.syncRender();
+    var targetBbox = visualElement.measureViewportBox();
+    changedKeys.forEach(function (key) {
+        // Restore styles to their **calculated computed style**, not their actual
+        // originally set style. This allows us to animate between equivalent pixel units.
+        var value = visualElement.getValue(key);
+        setAndResetVelocity(value, origin[key]);
+        target[key] = positionalValues[key](targetBbox, elementComputedStyle);
+    });
+    return target;
+};
+var checkAndConvertChangedValueTypes = function (visualElement, target, origin, transitionEnd) {
+    if (origin === void 0) { origin = {}; }
+    if (transitionEnd === void 0) { transitionEnd = {}; }
+    target = tslib.__assign({}, target);
+    transitionEnd = tslib.__assign({}, transitionEnd);
+    var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
+    // We want to remove any transform values that could affect the element's bounding box before
+    // it's measured. We'll reapply these later.
+    var removedTransformValues = [];
+    var hasAttemptedToRemoveTransformValues = false;
+    var changedValueTypeKeys = [];
+    targetPositionalKeys.forEach(function (key) {
+        var value = visualElement.getValue(key);
+        if (!visualElement.hasValue(key))
+            return;
+        var from = origin[key];
+        var fromType = useMotionValue.findDimensionValueType(from);
+        var to = target[key];
+        var toType;
+        // TODO: The current implementation of this basically throws an error
+        // if you try and do value conversion via keyframes. There's probably
+        // a way of doing this but the performance implications would need greater scrutiny,
+        // as it'd be doing multiple resize-remeasure operations.
+        if (useMotionValue.isKeyframesTarget(to)) {
+            var numKeyframes = to.length;
+            var fromIndex = to[0] === null ? 1 : 0;
+            from = to[fromIndex];
+            fromType = useMotionValue.findDimensionValueType(from);
+            for (var i = fromIndex; i < numKeyframes; i++) {
+                if (!toType) {
+                    toType = useMotionValue.findDimensionValueType(to[i]);
+                    heyListen.invariant(toType === fromType ||
+                        (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value");
+                }
+                else {
+                    heyListen.invariant(useMotionValue.findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type");
+                }
+            }
+        }
+        else {
+            toType = useMotionValue.findDimensionValueType(to);
+        }
+        if (fromType !== toType) {
+            // If they're both just number or px, convert them both to numbers rather than
+            // relying on resize/remeasure to convert (which is wasteful in this situation)
+            if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
+                var current = value.get();
+                if (typeof current === "string") {
+                    value.set(parseFloat(current));
+                }
+                if (typeof to === "string") {
+                    target[key] = parseFloat(to);
+                }
+                else if (Array.isArray(to) && toType === styleValueTypes.px) {
+                    target[key] = to.map(parseFloat);
+                }
+            }
+            else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
+                (toType === null || toType === void 0 ? void 0 : toType.transform) &&
+                (from === 0 || to === 0)) {
+                // If one or the other value is 0, it's safe to coerce it to the
+                // type of the other without measurement
+                if (from === 0) {
+                    value.set(toType.transform(from));
+                }
+                else {
+                    target[key] = fromType.transform(to);
+                }
+            }
+            else {
+                // If we're going to do value conversion via DOM measurements, we first
+                // need to remove non-positional transform values that could affect the bbox measurements.
+                if (!hasAttemptedToRemoveTransformValues) {
+                    removedTransformValues =
+                        removeNonTranslationalTransform(visualElement);
+                    hasAttemptedToRemoveTransformValues = true;
+                }
+                changedValueTypeKeys.push(key);
+                transitionEnd[key] =
+                    transitionEnd[key] !== undefined
+                        ? transitionEnd[key]
+                        : target[key];
+                setAndResetVelocity(value, to);
+            }
+        }
+    });
+    if (changedValueTypeKeys.length) {
+        var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
+        // If we removed transform values, reapply them before the next render
+        if (removedTransformValues.length) {
+            removedTransformValues.forEach(function (_a) {
+                var _b = tslib.__read(_a, 2), key = _b[0], value = _b[1];
+                visualElement.getValue(key).set(value);
+            });
+        }
+        // Reapply original values
+        visualElement.syncRender();
+        return { target: convertedTarget, transitionEnd: transitionEnd };
+    }
+    else {
+        return { target: target, transitionEnd: transitionEnd };
+    }
+};
+/**
+ * Convert value types for x/y/width/height/top/left/bottom/right
+ *
+ * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`
+ *
+ * @internal
+ */
+function unitConversion(visualElement, target, origin, transitionEnd) {
+    return hasPositionalKey(target)
+        ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
+        : { target: target, transitionEnd: transitionEnd };
+}
+
+/**
+ * Parse a DOM variant to make it animatable. This involves resolving CSS variables
+ * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels.
+ */
+var parseDomVariant = function (visualElement, target, origin, transitionEnd) {
+    var resolved = resolveCSSVariables(visualElement, target, transitionEnd);
+    target = resolved.target;
+    transitionEnd = resolved.transitionEnd;
+    return unitConversion(visualElement, target, origin, transitionEnd);
+};
+
+function getComputedStyle$1(element) {
+    return window.getComputedStyle(element);
+}
+var htmlConfig = {
+    treeType: "dom",
+    readValueFromInstance: function (domElement, key) {
+        if (useMotionValue.isTransformProp(key)) {
+            var defaultType = useMotionValue.getDefaultValueType(key);
+            return defaultType ? defaultType.default || 0 : 0;
+        }
+        else {
+            var computedStyle = getComputedStyle$1(domElement);
+            return ((isCSSVariable$1(key)
+                ? computedStyle.getPropertyValue(key)
+                : computedStyle[key]) || 0);
+        }
+    },
+    sortNodePosition: function (a, b) {
+        /**
+         * compareDocumentPosition returns a bitmask, by using the bitwise &
+         * we're returning true if 2 in that bitmask is set to true. 2 is set
+         * to true if b preceeds a.
+         */
+        return a.compareDocumentPosition(b) & 2 ? 1 : -1;
+    },
+    getBaseTarget: function (props, key) {
+        var _a;
+        return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key];
+    },
+    measureViewportBox: function (element, _a) {
+        var transformPagePoint = _a.transformPagePoint;
+        return measureViewportBox(element, transformPagePoint);
+    },
+    /**
+     * Reset the transform on the current Element. This is called as part
+     * of a batched process across the entire layout tree. To remove this write
+     * cycle it'd be interesting to see if it's possible to "undo" all the current
+     * layout transforms up the tree in the same way this.getBoundingBoxWithoutTransforms
+     * works
+     */
+    resetTransform: function (element, domElement, props) {
+        var transformTemplate = props.transformTemplate;
+        domElement.style.transform = transformTemplate
+            ? transformTemplate({}, "")
+            : "none";
+        // Ensure that whatever happens next, we restore our transform on the next frame
+        element.scheduleRender();
+    },
+    restoreTransform: function (instance, mutableState) {
+        instance.style.transform = mutableState.style.transform;
+    },
+    removeValueFromRenderState: function (key, _a) {
+        var vars = _a.vars, style = _a.style;
+        delete vars[key];
+        delete style[key];
+    },
+    /**
+     * Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
+     * can be animated by Motion.
+     */
+    makeTargetAnimatable: function (element, _a, _b, isMounted) {
+        var transformValues = _b.transformValues;
+        if (isMounted === void 0) { isMounted = true; }
+        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
+        var origin = useMotionValue.getOrigin(target, transition || {}, element);
+        /**
+         * If Framer has provided a function to convert `Color` etc value types, convert them
+         */
+        if (transformValues) {
+            if (transitionEnd)
+                transitionEnd = transformValues(transitionEnd);
+            if (target)
+                target = transformValues(target);
+            if (origin)
+                origin = transformValues(origin);
+        }
+        if (isMounted) {
+            useMotionValue.checkTargetForNewValues(element, target, origin);
+            var parsed = parseDomVariant(element, target, origin, transitionEnd);
+            transitionEnd = parsed.transitionEnd;
+            target = parsed.target;
+        }
+        return tslib.__assign({ transition: transition, transitionEnd: transitionEnd }, target);
+    },
+    scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
+    build: function (element, renderState, latestValues, options, props) {
+        if (element.isVisible !== undefined) {
+            renderState.style.visibility = element.isVisible
+                ? "visible"
+                : "hidden";
+        }
+        buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
+    },
+    render: renderHTML,
+};
+var htmlVisualElement = useMotionValue.visualElement(htmlConfig);
+
+var svgVisualElement = useMotionValue.visualElement(tslib.__assign(tslib.__assign({}, htmlConfig), { getBaseTarget: function (props, key) {
+        return props[key];
+    }, readValueFromInstance: function (domElement, key) {
+        var _a;
+        if (useMotionValue.isTransformProp(key)) {
+            return ((_a = useMotionValue.getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0;
+        }
+        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+        return domElement.getAttribute(key);
+    }, scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, build: function (_element, renderState, latestValues, options, props) {
+        buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
+    }, render: renderSVG }));
+
+var createDomVisualElement = function (Component, options) {
+    return isSVGComponent(Component)
+        ? svgVisualElement(options, { enableHardwareAcceleration: false })
+        : htmlVisualElement(options, { enableHardwareAcceleration: true });
+};
+
+function pixelsToPercent(pixels, axis) {
+    if (axis.max === axis.min)
+        return 0;
+    return (pixels / (axis.max - axis.min)) * 100;
+}
+/**
+ * We always correct borderRadius as a percentage rather than pixels to reduce paints.
+ * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
+ * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
+ * borderRadius in both states. If we animate between the two in pixels that will trigger
+ * a paint each time. If we animate between the two in percentage we'll avoid a paint.
+ */
+var correctBorderRadius = {
+    correct: function (latest, node) {
+        if (!node.target)
+            return latest;
+        /**
+         * If latest is a string, if it's a percentage we can return immediately as it's
+         * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
+         */
+        if (typeof latest === "string") {
+            if (styleValueTypes.px.test(latest)) {
+                latest = parseFloat(latest);
+            }
+            else {
+                return latest;
+            }
+        }
+        /**
+         * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
+         * pixel value as a percentage of each axis
+         */
+        var x = pixelsToPercent(latest, node.target.x);
+        var y = pixelsToPercent(latest, node.target.y);
+        return "".concat(x, "% ").concat(y, "%");
+    },
+};
+
+var varToken = "_$css";
+var correctBoxShadow = {
+    correct: function (latest, _a) {
+        var treeScale = _a.treeScale, projectionDelta = _a.projectionDelta;
+        var original = latest;
+        /**
+         * We need to first strip and store CSS variables from the string.
+         */
+        var containsCSSVariables = latest.includes("var(");
+        var cssVariables = [];
+        if (containsCSSVariables) {
+            latest = latest.replace(cssVariableRegex, function (match) {
+                cssVariables.push(match);
+                return varToken;
+            });
+        }
+        var shadow = styleValueTypes.complex.parse(latest);
+        // TODO: Doesn't support multiple shadows
+        if (shadow.length > 5)
+            return original;
+        var template = styleValueTypes.complex.createTransformer(latest);
+        var offset = typeof shadow[0] !== "number" ? 1 : 0;
+        // Calculate the overall context scale
+        var xScale = projectionDelta.x.scale * treeScale.x;
+        var yScale = projectionDelta.y.scale * treeScale.y;
+        shadow[0 + offset] /= xScale;
+        shadow[1 + offset] /= yScale;
+        /**
+         * Ideally we'd correct x and y scales individually, but because blur and
+         * spread apply to both we have to take a scale average and apply that instead.
+         * We could potentially improve the outcome of this by incorporating the ratio between
+         * the two scales.
+         */
+        var averageScale = popmotion.mix(xScale, yScale, 0.5);
+        // Blur
+        if (typeof shadow[2 + offset] === "number")
+            shadow[2 + offset] /= averageScale;
+        // Spread
+        if (typeof shadow[3 + offset] === "number")
+            shadow[3 + offset] /= averageScale;
+        var output = template(shadow);
+        if (containsCSSVariables) {
+            var i_1 = 0;
+            output = output.replace(varToken, function () {
+                var cssVariable = cssVariables[i_1];
+                i_1++;
+                return cssVariable;
+            });
+        }
+        return output;
+    },
+};
+
+var MeasureLayoutWithContext = /** @class */ (function (_super) {
+    tslib.__extends(MeasureLayoutWithContext, _super);
+    function MeasureLayoutWithContext() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * This only mounts projection nodes for components that
+     * need measuring, we might want to do it for all components
+     * in order to incorporate transforms
+     */
+    MeasureLayoutWithContext.prototype.componentDidMount = function () {
+        var _this = this;
+        var _a = this.props, visualElement = _a.visualElement, layoutGroup = _a.layoutGroup, switchLayoutGroup = _a.switchLayoutGroup, layoutId = _a.layoutId;
+        var projection = visualElement.projection;
+        useMotionValue.addScaleCorrector(defaultScaleCorrectors);
+        if (projection) {
+            if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group)
+                layoutGroup.group.add(projection);
+            if ((switchLayoutGroup === null || switchLayoutGroup === void 0 ? void 0 : switchLayoutGroup.register) && layoutId) {
+                switchLayoutGroup.register(projection);
+            }
+            projection.root.didUpdate();
+            projection.addEventListener("animationComplete", function () {
+                _this.safeToRemove();
+            });
+            projection.setOptions(tslib.__assign(tslib.__assign({}, projection.options), { onExitComplete: function () { return _this.safeToRemove(); } }));
+        }
+        useMotionValue.globalProjectionState.hasEverUpdated = true;
+    };
+    MeasureLayoutWithContext.prototype.getSnapshotBeforeUpdate = function (prevProps) {
+        var _this = this;
+        var _a = this.props, layoutDependency = _a.layoutDependency, visualElement = _a.visualElement, drag = _a.drag, isPresent = _a.isPresent;
+        var projection = visualElement.projection;
+        if (!projection)
+            return null;
+        /**
+         * TODO: We use this data in relegate to determine whether to
+         * promote a previous element. There's no guarantee its presence data
+         * will have updated by this point - if a bug like this arises it will
+         * have to be that we markForRelegation and then find a new lead some other way,
+         * perhaps in didUpdate
+         */
+        projection.isPresent = isPresent;
+        if (drag ||
+            prevProps.layoutDependency !== layoutDependency ||
+            layoutDependency === undefined) {
+            projection.willUpdate();
+        }
+        else {
+            this.safeToRemove();
+        }
+        if (prevProps.isPresent !== isPresent) {
+            if (isPresent) {
+                projection.promote();
+            }
+            else if (!projection.relegate()) {
+                /**
+                 * If there's another stack member taking over from this one,
+                 * it's in charge of the exit animation and therefore should
+                 * be in charge of the safe to remove. Otherwise we call it here.
+                 */
+                sync__default["default"].postRender(function () {
+                    var _a;
+                    if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
+                        _this.safeToRemove();
+                    }
+                });
+            }
+        }
+        return null;
+    };
+    MeasureLayoutWithContext.prototype.componentDidUpdate = function () {
+        var projection = this.props.visualElement.projection;
+        if (projection) {
+            projection.root.didUpdate();
+            if (!projection.currentAnimation && projection.isLead()) {
+                this.safeToRemove();
+            }
+        }
+    };
+    MeasureLayoutWithContext.prototype.componentWillUnmount = function () {
+        var _a = this.props, visualElement = _a.visualElement, layoutGroup = _a.layoutGroup, promoteContext = _a.switchLayoutGroup;
+        var projection = visualElement.projection;
+        if (projection) {
+            projection.scheduleCheckAfterUnmount();
+            if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group)
+                layoutGroup.group.remove(projection);
+            if (promoteContext === null || promoteContext === void 0 ? void 0 : promoteContext.deregister)
+                promoteContext.deregister(projection);
+        }
+    };
+    MeasureLayoutWithContext.prototype.safeToRemove = function () {
+        var safeToRemove = this.props.safeToRemove;
+        safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove();
+    };
+    MeasureLayoutWithContext.prototype.render = function () {
+        return null;
+    };
+    return MeasureLayoutWithContext;
+}(React__default["default"].Component));
+function MeasureLayout(props) {
+    var _a = tslib.__read(useMotionValue.usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
+    var layoutGroup = React.useContext(useMotionValue.LayoutGroupContext);
+    return (React__default["default"].createElement(MeasureLayoutWithContext, tslib.__assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(useMotionValue.SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+}
+var defaultScaleCorrectors = {
+    borderRadius: tslib.__assign(tslib.__assign({}, correctBorderRadius), { applyTo: [
+            "borderTopLeftRadius",
+            "borderTopRightRadius",
+            "borderBottomLeftRadius",
+            "borderBottomRightRadius",
+        ] }),
+    borderTopLeftRadius: correctBorderRadius,
+    borderTopRightRadius: correctBorderRadius,
+    borderBottomLeftRadius: correctBorderRadius,
+    borderBottomRightRadius: correctBorderRadius,
+    boxShadow: correctBoxShadow,
+};
+
+var layoutFeatures = {
+    measureLayout: MeasureLayout,
+};
+
+var DocumentProjectionNode = useMotionValue.createProjectionNode({
+    attachResizeListener: function (ref, notify) {
+        ref.addEventListener("resize", notify, { passive: true });
+        return function () { return ref.removeEventListener("resize", notify); };
+    },
+    measureScroll: function () { return ({
+        x: document.documentElement.scrollLeft || document.body.scrollLeft,
+        y: document.documentElement.scrollTop || document.body.scrollTop,
+    }); },
+});
+
+var rootProjectionNode = {
+    current: undefined,
+};
+var HTMLProjectionNode = useMotionValue.createProjectionNode({
+    measureScroll: function (instance) { return ({
+        x: instance.scrollLeft,
+        y: instance.scrollTop,
+    }); },
+    defaultParent: function () {
+        if (!rootProjectionNode.current) {
+            var documentNode = new DocumentProjectionNode(0, {});
+            documentNode.mount(window);
+            documentNode.setOptions({ layoutScroll: true });
+            rootProjectionNode.current = documentNode;
+        }
+        return rootProjectionNode.current;
+    },
+    resetTransform: function (instance, value) {
+        instance.style.transform = value !== null && value !== void 0 ? value : "none";
+    },
+});
+
+var featureBundle = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, useMotionValue.animations), gestureAnimations), drag), layoutFeatures);
+/**
+ * HTML & SVG components, optimised for use with gestures and animation. These can be used as
+ * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
+ *
+ * @public
+ */
+var motion = /*@__PURE__*/ createMotionProxy(function (Component, config) {
+    return createDomMotionConfig(Component, config, featureBundle, createDomVisualElement, HTMLProjectionNode);
+});
+/**
+ * Create a DOM `motion` component with the provided string. This is primarily intended
+ * as a full alternative to `motion` for consumers who have to support environments that don't
+ * support `Proxy`.
+ *
+ * ```javascript
+ * import { createDomMotionComponent } from "framer-motion"
+ *
+ * const motion = {
+ *   div: createDomMotionComponent('div')
+ * }
+ * ```
+ *
+ * @public
+ */
+function createDomMotionComponent(key) {
+    return useMotionValue.createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, featureBundle, createDomVisualElement, HTMLProjectionNode));
+}
+
+/**
+ * @public
+ */
+var m = createMotionProxy(createDomMotionConfig);
+
+function useForceUpdate() {
+    var isUnmountingRef = React.useRef(false);
+    var _a = tslib.__read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
+    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
+    var forceRender = React.useCallback(function () {
+        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount]);
+    /**
+     * Defer this to the end of the next animation frame in case there are multiple
+     * synchronous calls.
+     */
+    var deferredForceRender = React.useCallback(function () { return sync__default["default"].postRender(forceRender); }, [forceRender]);
+    return [deferredForceRender, forcedRenderCount];
+}
+
+var presenceId = 0;
+function getPresenceId() {
+    var id = presenceId;
+    presenceId++;
+    return id;
+}
+var PresenceChild = function (_a) {
+    var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
+    var presenceChildren = useMotionValue.useConstant(newChildrenMap);
+    var id = useMotionValue.useConstant(getPresenceId);
+    var context = React.useMemo(function () { return ({
+        id: id,
+        initial: initial,
+        isPresent: isPresent,
+        custom: custom,
+        onExitComplete: function (childId) {
+            var e_1, _a;
+            presenceChildren.set(childId, true);
+            try {
+                for (var _b = tslib.__values(presenceChildren.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var isComplete = _c.value;
+                    if (!isComplete)
+                        return; // can stop searching when any is incomplete
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+        },
+        register: function (childId) {
+            presenceChildren.set(childId, false);
+            return function () { return presenceChildren.delete(childId); };
+        },
+    }); }, 
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    presenceAffectsLayout ? undefined : [isPresent]);
+    React.useMemo(function () {
+        presenceChildren.forEach(function (_, key) { return presenceChildren.set(key, false); });
+    }, [isPresent]);
+    /**
+     * If there's no `motion` components to fire exit animations, we want to remove this
+     * component immediately.
+     */
+    React__namespace.useEffect(function () {
+        !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
+    }, [isPresent]);
+    return (React__namespace.createElement(useMotionValue.PresenceContext.Provider, { value: context }, children));
+};
+function newChildrenMap() {
+    return new Map();
+}
+
+function getChildKey(child) {
+    return child.key || "";
+}
+function updateChildLookup(children, allChildren) {
+    var seenChildren = process.env.NODE_ENV !== "production" ? new Set() : null;
+    children.forEach(function (child) {
+        var key = getChildKey(child);
+        if (process.env.NODE_ENV !== "production" && seenChildren) {
+            if (seenChildren.has(key)) {
+                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
+            }
+            seenChildren.add(key);
+        }
+        allChildren.set(key, child);
+    });
+}
+function onlyElements(children) {
+    var filtered = [];
+    // We use forEach here instead of map as map mutates the component key by preprending `.$`
+    React.Children.forEach(children, function (child) {
+        if (React.isValidElement(child))
+            filtered.push(child);
+    });
+    return filtered;
+}
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```jsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+var AnimatePresence = function (_a) {
+    var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c;
+    // We want to force a re-render once all exiting animations have finished. We
+    // either use a local forceRender function, or one from a parent context if it exists.
+    var _d = tslib.__read(useForceUpdate(), 1), forceRender = _d[0];
+    var forceRenderLayoutGroup = React.useContext(useMotionValue.LayoutGroupContext).forceRender;
+    if (forceRenderLayoutGroup)
+        forceRender = forceRenderLayoutGroup;
+    var isInitialRender = React.useRef(true);
+    var isMounted = React.useRef(true);
+    React.useEffect(function () { return function () {
+        isMounted.current = false;
+    }; }, []);
+    // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
+    var filteredChildren = onlyElements(children);
+    // Keep a living record of the children we're actually rendering so we
+    // can diff to figure out which are entering and exiting
+    var presentChildren = React.useRef(filteredChildren);
+    // A lookup table to quickly reference components by key
+    var allChildren = React.useRef(new Map()).current;
+    // A living record of all currently exiting components.
+    var exiting = React.useRef(new Set()).current;
+    updateChildLookup(filteredChildren, allChildren);
+    // If this is the initial component render, just deal with logic surrounding whether
+    // we play onMount animations or not.
+    if (isInitialRender.current) {
+        isInitialRender.current = false;
+        return (React__namespace.createElement(React__namespace.Fragment, null, filteredChildren.map(function (child) { return (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
+    }
+    // If this is a subsequent render, deal with entering and exiting children
+    var childrenToRender = tslib.__spreadArray([], tslib.__read(filteredChildren), false);
+    // Diff the keys of the currently-present and target children to update our
+    // exiting list.
+    var presentKeys = presentChildren.current.map(getChildKey);
+    var targetKeys = filteredChildren.map(getChildKey);
+    // Diff the present children with our target children and mark those that are exiting
+    var numPresent = presentKeys.length;
+    for (var i = 0; i < numPresent; i++) {
+        var key = presentKeys[i];
+        if (targetKeys.indexOf(key) === -1) {
+            exiting.add(key);
+        }
+        else {
+            // In case this key has re-entered, remove from the exiting list
+            exiting.delete(key);
+        }
+    }
+    // If we currently have exiting children, and we're deferring rendering incoming children
+    // until after all current children have exiting, empty the childrenToRender array
+    if (exitBeforeEnter && exiting.size) {
+        childrenToRender = [];
+    }
+    // Loop through all currently exiting components and clone them to overwrite `animate`
+    // with any `exit` prop they might have defined.
+    exiting.forEach(function (key) {
+        // If this component is actually entering again, early return
+        if (targetKeys.indexOf(key) !== -1)
+            return;
+        var child = allChildren.get(key);
+        if (!child)
+            return;
+        var insertionIndex = presentKeys.indexOf(key);
+        var onExit = function () {
+            allChildren.delete(key);
+            exiting.delete(key);
+            // Remove this child from the present children
+            var removeIndex = presentChildren.current.findIndex(function (presentChild) { return presentChild.key === key; });
+            presentChildren.current.splice(removeIndex, 1);
+            // Defer re-rendering until all exiting children have indeed left
+            if (!exiting.size) {
+                presentChildren.current = filteredChildren;
+                if (isMounted.current === false) {
+                    return;
+                }
+                forceRender();
+                onExitComplete && onExitComplete();
+            }
+        };
+        childrenToRender.splice(insertionIndex, 0, React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout }, child));
+    });
+    // Add `MotionContext` even to children that don't need it to ensure we're rendering
+    // the same tree between renders
+    childrenToRender = childrenToRender.map(function (child) {
+        var key = child.key;
+        return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
+    });
+    presentChildren.current = childrenToRender;
+    if (process.env.NODE_ENV !== "production" &&
+        exitBeforeEnter &&
+        childrenToRender.length > 1) {
+        console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
+    }
+    return (React__namespace.createElement(React__namespace.Fragment, null, exiting.size
+        ? childrenToRender
+        : childrenToRender.map(function (child) { return React.cloneElement(child); })));
+};
+
+/**
+ * @internal
+ * @deprecated
+ */
+var DeprecatedLayoutGroupContext = React.createContext(null);
+
+var notify = function (node) {
+    return !node.isLayoutDirty && node.willUpdate(false);
+};
+function nodeGroup() {
+    var nodes = new Set();
+    var subscriptions = new WeakMap();
+    var dirtyAll = function () { return nodes.forEach(notify); };
+    return {
+        add: function (node) {
+            nodes.add(node);
+            subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
+        },
+        remove: function (node) {
+            var _a;
+            nodes.delete(node);
+            (_a = subscriptions.get(node)) === null || _a === void 0 ? void 0 : _a();
+            subscriptions.delete(node);
+            dirtyAll();
+        },
+        dirty: dirtyAll,
+    };
+}
+
+var LayoutGroup = function (_a) {
+    var _b, _c;
+    var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
+    var layoutGroupContext = React.useContext(useMotionValue.LayoutGroupContext);
+    var deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
+    var _e = tslib.__read(useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
+    var context = React.useRef(null);
+    var upstreamId = (_b = layoutGroupContext.id) !== null && _b !== void 0 ? _b : deprecatedLayoutGroupContext;
+    if (context.current === null) {
+        if (inheritId && upstreamId) {
+            id = id ? upstreamId + "-" + id : upstreamId;
+        }
+        context.current = {
+            id: id,
+            group: inheritId
+                ? (_c = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _c !== void 0 ? _c : nodeGroup()
+                : nodeGroup(),
+        };
+    }
+    var memoizedContext = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, context.current), { forceRender: forceRender })); }, [key]);
+    return (React__namespace.createElement(useMotionValue.LayoutGroupContext.Provider, { value: memoizedContext }, children));
+};
+
+var id = 0;
+var AnimateSharedLayout = function (_a) {
+    var children = _a.children;
+    return (React__namespace.createElement(LayoutGroup, { id: useMotionValue.useConstant(function () { return "asl-".concat(id++); }) }, children));
+};
+
+/**
+ * `MotionConfig` is used to set configuration options for all children `motion` components.
+ *
+ * ```jsx
+ * import { motion, MotionConfig } from "framer-motion"
+ *
+ * export function App() {
+ *   return (
+ *     <MotionConfig transition={{ type: "spring" }}>
+ *       <motion.div animate={{ x: 100 }} />
+ *     </MotionConfig>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+function MotionConfig(_a) {
+    var children = _a.children, config = tslib.__rest(_a, ["children"]);
+    /**
+     * Inherit props from any parent MotionConfig components
+     */
+    config = tslib.__assign(tslib.__assign({}, React.useContext(useMotionValue.MotionConfigContext)), config);
+    /**
+     * Don't allow isStatic to change between renders as it affects how many hooks
+     * motion components fire.
+     */
+    config.isStatic = useMotionValue.useConstant(function () { return config.isStatic; });
+    /**
+     * Creating a new config context object will re-render every `motion` component
+     * every time it renders. So we only want to create a new one sparingly.
+     */
+    var transitionDependency = typeof config.transition === "object"
+        ? config.transition.toString()
+        : "";
+    var context = React.useMemo(function () { return config; }, [
+        transitionDependency,
+        config.transformPagePoint,
+    ]);
+    return (React__namespace.createElement(useMotionValue.MotionConfigContext.Provider, { value: context }, children));
+}
+
+/**
+ * Used in conjunction with the `m` component to reduce bundle size.
+ *
+ * `m` is a version of the `motion` component that only loads functionality
+ * critical for the initial render.
+ *
+ * `LazyMotion` can then be used to either synchronously or asynchronously
+ * load animation and gesture support.
+ *
+ * ```jsx
+ * // Synchronous loading
+ * import { LazyMotion, m, domAnimations } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={domAnimations}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ *
+ * // Asynchronous loading
+ * import { LazyMotion, m } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={() => import('./path/to/domAnimations')}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+function LazyMotion(_a) {
+    var children = _a.children, features = _a.features, _b = _a.strict, strict = _b === void 0 ? false : _b;
+    var _c = tslib.__read(React.useState(!isLazyBundle(features)), 2), setIsLoaded = _c[1];
+    var loadedRenderer = React.useRef(undefined);
+    /**
+     * If this is a synchronous load, load features immediately
+     */
+    if (!isLazyBundle(features)) {
+        var renderer = features.renderer, loadedFeatures = tslib.__rest(features, ["renderer"]);
+        loadedRenderer.current = renderer;
+        useMotionValue.loadFeatures(loadedFeatures);
+    }
+    React.useEffect(function () {
+        if (isLazyBundle(features)) {
+            features().then(function (_a) {
+                var renderer = _a.renderer, loadedFeatures = tslib.__rest(_a, ["renderer"]);
+                useMotionValue.loadFeatures(loadedFeatures);
+                loadedRenderer.current = renderer;
+                setIsLoaded(true);
+            });
+        }
+    }, []);
+    return (React__namespace.createElement(useMotionValue.LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict: strict } }, children));
+}
+function isLazyBundle(features) {
+    return typeof features === "function";
+}
+
+var ReorderContext = React.createContext(null);
+
+function checkReorder(order, value, offset, velocity) {
+    if (!velocity)
+        return order;
+    var index = order.findIndex(function (item) { return item.value === value; });
+    if (index === -1)
+        return order;
+    var nextOffset = velocity > 0 ? 1 : -1;
+    var nextItem = order[index + nextOffset];
+    if (!nextItem)
+        return order;
+    var item = order[index];
+    var nextLayout = nextItem.layout;
+    var nextItemCenter = popmotion.mix(nextLayout.min, nextLayout.max, 0.5);
+    if ((nextOffset === 1 && item.layout.max + offset > nextItemCenter) ||
+        (nextOffset === -1 && item.layout.min + offset < nextItemCenter)) {
+        return useMotionValue.moveItem(order, index, index + nextOffset);
+    }
+    return order;
+}
+
+function ReorderGroup(_a, externalRef) {
+    var children = _a.children, _b = _a.as, as = _b === void 0 ? "ul" : _b, _c = _a.axis, axis = _c === void 0 ? "y" : _c, onReorder = _a.onReorder, values = _a.values, props = tslib.__rest(_a, ["children", "as", "axis", "onReorder", "values"]);
+    var Component = useMotionValue.useConstant(function () { return motion(as); });
+    var order = [];
+    var isReordering = React.useRef(false);
+    heyListen.invariant(Boolean(values), "Reorder.Group must be provided a values prop");
+    var context = {
+        axis: axis,
+        registerItem: function (value, layout) {
+            /**
+             * Ensure entries can't add themselves more than once
+             */
+            if (layout &&
+                order.findIndex(function (entry) { return value === entry.value; }) === -1) {
+                order.push({ value: value, layout: layout[axis] });
+                order.sort(compareMin);
+            }
+        },
+        updateOrder: function (id, offset, velocity) {
+            if (isReordering.current)
+                return;
+            var newOrder = checkReorder(order, id, offset, velocity);
+            if (order !== newOrder) {
+                isReordering.current = true;
+                onReorder(newOrder
+                    .map(getValue)
+                    .filter(function (value) { return values.indexOf(value) !== -1; }));
+            }
+        },
+    };
+    React.useEffect(function () {
+        isReordering.current = false;
+    });
+    return (React__namespace.createElement(Component, tslib.__assign({}, props, { ref: externalRef }),
+        React__namespace.createElement(ReorderContext.Provider, { value: context }, children)));
+}
+var Group = React.forwardRef(ReorderGroup);
+function getValue(item) {
+    return item.value;
+}
+function compareMin(a, b) {
+    return a.layout.min - b.layout.min;
+}
+
+var isCustomValueType = function (v) {
+    return typeof v === "object" && v.mix;
+};
+var getMixer = function (v) { return (isCustomValueType(v) ? v.mix : undefined); };
+function transform() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    var useImmediate = !Array.isArray(args[0]);
+    var argOffset = useImmediate ? 0 : -1;
+    var inputValue = args[0 + argOffset];
+    var inputRange = args[1 + argOffset];
+    var outputRange = args[2 + argOffset];
+    var options = args[3 + argOffset];
+    var interpolator = popmotion.interpolate(inputRange, outputRange, tslib.__assign({ mixer: getMixer(outputRange[0]) }, options));
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
+function useOnChange(value, callback) {
+    React.useEffect(function () {
+        if (useMotionValue.isMotionValue(value))
+            return value.onChange(callback);
+    }, [callback]);
+}
+function useMultiOnChange(values, handler) {
+    React.useEffect(function () {
+        var subscriptions = values.map(function (value) { return value.onChange(handler); });
+        return function () { return subscriptions.forEach(function (unsubscribe) { return unsubscribe(); }); };
+    });
+}
+
+function useCombineMotionValues(values, combineValues) {
+    /**
+     * Initialise the returned motion value. This remains the same between renders.
+     */
+    var value = useMotionValue.useMotionValue(combineValues());
+    /**
+     * Create a function that will update the template motion value with the latest values.
+     * This is pre-bound so whenever a motion value updates it can schedule its
+     * execution in Framesync. If it's already been scheduled it won't be fired twice
+     * in a single frame.
+     */
+    var updateValue = function () { return value.set(combineValues()); };
+    /**
+     * Synchronously update the motion value with the latest values during the render.
+     * This ensures that within a React render, the styles applied to the DOM are up-to-date.
+     */
+    updateValue();
+    /**
+     * Subscribe to all motion values found within the template. Whenever any of them change,
+     * schedule an update.
+     */
+    useMultiOnChange(values, function () { return sync__default["default"].update(updateValue, false, true); });
+    return value;
+}
+
+function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+    var transformer = typeof inputRangeOrTransformer === "function"
+        ? inputRangeOrTransformer
+        : transform(inputRangeOrTransformer, outputRange, options);
+    return Array.isArray(input)
+        ? useListTransform(input, transformer)
+        : useListTransform([input], function (_a) {
+            var _b = tslib.__read(_a, 1), latest = _b[0];
+            return transformer(latest);
+        });
+}
+function useListTransform(values, transformer) {
+    var latest = useMotionValue.useConstant(function () { return []; });
+    return useCombineMotionValues(values, function () {
+        latest.length = 0;
+        var numValues = values.length;
+        for (var i = 0; i < numValues; i++) {
+            latest[i] = values[i].get();
+        }
+        return transformer(latest);
+    });
+}
+
+function useDefaultMotionValue(value, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = 0; }
+    return useMotionValue.isMotionValue(value) ? value : useMotionValue.useMotionValue(defaultValue);
+}
+function ReorderItem(_a, externalRef) {
+    var children = _a.children, style = _a.style, value = _a.value, _b = _a.as, as = _b === void 0 ? "li" : _b, onDrag = _a.onDrag, props = tslib.__rest(_a, ["children", "style", "value", "as", "onDrag"]);
+    var Component = useMotionValue.useConstant(function () { return motion(as); });
+    var context = React.useContext(ReorderContext);
+    var point = {
+        x: useDefaultMotionValue(style === null || style === void 0 ? void 0 : style.x),
+        y: useDefaultMotionValue(style === null || style === void 0 ? void 0 : style.y),
+    };
+    var zIndex = useTransform([point.x, point.y], function (_a) {
+        var _b = tslib.__read(_a, 2), latestX = _b[0], latestY = _b[1];
+        return latestX || latestY ? 1 : "unset";
+    });
+    var layout = React.useRef(null);
+    heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    var _c = context, axis = _c.axis, registerItem = _c.registerItem, updateOrder = _c.updateOrder;
+    React.useEffect(function () {
+        registerItem(value, layout.current);
+    }, [context]);
+    return (React__namespace.createElement(Component, tslib.__assign({ drag: axis }, props, { dragSnapToOrigin: true, style: tslib.__assign(tslib.__assign({}, style), { x: point.x, y: point.y, zIndex: zIndex }), layout: true, onDrag: function (event, gesturePoint) {
+            var velocity = gesturePoint.velocity;
+            velocity[axis] &&
+                updateOrder(value, point[axis].get(), velocity[axis]);
+            onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, gesturePoint);
+        }, onLayoutMeasure: function (measured) {
+            layout.current = measured;
+        }, ref: externalRef }), children));
+}
+var Item = React.forwardRef(ReorderItem);
+
+var Reorder = {
+    Group: Group,
+    Item: Item,
+};
+
+/**
+ * @public
+ */
+var domAnimation = tslib.__assign(tslib.__assign({ renderer: createDomVisualElement }, useMotionValue.animations), gestureAnimations);
+
+/**
+ * @public
+ */
+var domMax = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, domAnimation), drag), layoutFeatures), { projectionNodeConstructor: HTMLProjectionNode });
+
+/**
+ * Combine multiple motion values into a new one using a string template literal.
+ *
+ * ```jsx
+ * import {
+ *   motion,
+ *   useSpring,
+ *   useMotionValue,
+ *   useMotionTemplate
+ * } from "framer-motion"
+ *
+ * function Component() {
+ *   const shadowX = useSpring(0)
+ *   const shadowY = useMotionValue(0)
+ *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
+ *
+ *   return <motion.div style={{ filter: shadow }} />
+ * }
+ * ```
+ *
+ * @public
+ */
+function useMotionTemplate(fragments) {
+    var values = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        values[_i - 1] = arguments[_i];
+    }
+    /**
+     * Create a function that will build a string from the latest motion values.
+     */
+    var numFragments = fragments.length;
+    function buildValue() {
+        var output = "";
+        for (var i = 0; i < numFragments; i++) {
+            output += fragments[i];
+            var value = values[i];
+            if (value)
+                output += values[i].get();
+        }
+        return output;
+    }
+    return useCombineMotionValues(values, buildValue);
+}
+
+/**
+ * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
+ *
+ * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber
+ * to another `MotionValue`.
+ *
+ * @remarks
+ *
+ * ```jsx
+ * const x = useSpring(0, { stiffness: 300 })
+ * const y = useSpring(x, { damping: 10 })
+ * ```
+ *
+ * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.
+ * @param springConfig - Configuration options for the spring.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function useSpring(source, config) {
+    if (config === void 0) { config = {}; }
+    var isStatic = React.useContext(useMotionValue.MotionConfigContext).isStatic;
+    var activeSpringAnimation = React.useRef(null);
+    var value = useMotionValue.useMotionValue(useMotionValue.isMotionValue(source) ? source.get() : source);
+    React.useMemo(function () {
+        return value.attach(function (v, set) {
+            /**
+             * A more hollistic approach to this might be to use isStatic to fix VisualElement animations
+             * at that level, but this will work for now
+             */
+            if (isStatic)
+                return set(v);
+            if (activeSpringAnimation.current) {
+                activeSpringAnimation.current.stop();
+            }
+            activeSpringAnimation.current = popmotion.animate(tslib.__assign(tslib.__assign({ from: value.get(), to: v, velocity: value.getVelocity() }, config), { onUpdate: set }));
+            return value.get();
+        });
+    }, Object.values(config));
+    useOnChange(source, function (v) { return value.set(parseFloat(v)); });
+    return value;
+}
+
+/**
+ * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ * const xVelocity = useVelocity(x)
+ * const xAcceleration = useVelocity(xVelocity)
+ * ```
+ *
+ * @public
+ */
+function useVelocity(value) {
+    var velocity = useMotionValue.useMotionValue(value.getVelocity());
+    React.useEffect(function () {
+        return value.velocityUpdateSubscribers.add(function (newVelocity) {
+            velocity.set(newVelocity);
+        });
+    }, [value]);
+    return velocity;
+}
+
+function createScrollMotionValues() {
+    return {
+        scrollX: useMotionValue.motionValue(0),
+        scrollY: useMotionValue.motionValue(0),
+        scrollXProgress: useMotionValue.motionValue(0),
+        scrollYProgress: useMotionValue.motionValue(0),
+    };
+}
+function setProgress(offset, maxOffset, value) {
+    value.set(!offset || !maxOffset ? 0 : offset / maxOffset);
+}
+function createScrollUpdater(values, getOffsets) {
+    var update = function () {
+        var _a = getOffsets(), xOffset = _a.xOffset, yOffset = _a.yOffset, xMaxOffset = _a.xMaxOffset, yMaxOffset = _a.yMaxOffset;
+        // Set absolute positions
+        values.scrollX.set(xOffset);
+        values.scrollY.set(yOffset);
+        // Set 0-1 progress
+        setProgress(xOffset, xMaxOffset, values.scrollXProgress);
+        setProgress(yOffset, yMaxOffset, values.scrollYProgress);
+    };
+    update();
+    return update;
+}
+
+var getElementScrollOffsets = function (element) { return function () {
+    return {
+        xOffset: element.scrollLeft,
+        yOffset: element.scrollTop,
+        xMaxOffset: element.scrollWidth - element.offsetWidth,
+        yMaxOffset: element.scrollHeight - element.offsetHeight,
+    };
+}; };
+/**
+ * Returns MotionValues that update when the provided element scrolls:
+ *
+ * - `scrollX` — Horizontal scroll distance in pixels.
+ * - `scrollY` — Vertical scroll distance in pixels.
+ * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
+ * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
+ *
+ * This element must be set to `overflow: scroll` on either or both axes to report scroll offset.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const ref = useRef()
+ *   const { scrollYProgress } = useElementScroll(ref)
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       <motion.div style={{ scaleX: scrollYProgress }} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+function useElementScroll(ref) {
+    var values = useMotionValue.useConstant(createScrollMotionValues);
+    useMotionValue.useIsomorphicLayoutEffect(function () {
+        var element = ref.current;
+        heyListen.invariant(!!element, "ref provided to useScroll must be passed into a HTML element.");
+        if (!element)
+            return;
+        var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
+        var scrollListener = useMotionValue.addDomEvent(element, "scroll", updateScrollValues, { passive: true });
+        var resizeListener = useMotionValue.addDomEvent(element, "resize", updateScrollValues);
+        return function () {
+            scrollListener && scrollListener();
+            resizeListener && resizeListener();
+        };
+    }, []);
+    return values;
+}
+
+var viewportScrollValues;
+function getViewportScrollOffsets() {
+    return {
+        xOffset: window.pageXOffset,
+        yOffset: window.pageYOffset,
+        xMaxOffset: document.body.clientWidth - window.innerWidth,
+        yMaxOffset: document.body.clientHeight - window.innerHeight,
+    };
+}
+var hasListeners = false;
+function addEventListeners() {
+    hasListeners = true;
+    if (typeof window === "undefined")
+        return;
+    var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
+    useMotionValue.addDomEvent(window, "scroll", updateScrollValues, { passive: true });
+    useMotionValue.addDomEvent(window, "resize", updateScrollValues);
+}
+/**
+ * Returns MotionValues that update when the viewport scrolls:
+ *
+ * - `scrollX` — Horizontal scroll distance in pixels.
+ * - `scrollY` — Vertical scroll distance in pixels.
+ * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
+ * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
+ *
+ * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
+ * values as this breaks the browser's capability to accurately measure the page length.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const { scrollYProgress } = useViewportScroll()
+ *   return <motion.div style={{ scaleX: scrollYProgress }} />
+ * }
+ * ```
+ *
+ * @public
+ */
+function useViewportScroll() {
+    /**
+     * Lazy-initialise the viewport scroll values
+     */
+    if (!viewportScrollValues) {
+        viewportScrollValues = createScrollMotionValues();
+    }
+    useMotionValue.useIsomorphicLayoutEffect(function () {
+        !hasListeners && addEventListeners();
+    }, []);
+    return viewportScrollValues;
+}
+
+var getCurrentTime = typeof performance !== "undefined"
+    ? function () { return performance.now(); }
+    : function () { return Date.now(); };
+function useAnimationFrame(callback) {
+    var initialTimestamp = useMotionValue.useConstant(getCurrentTime);
+    React.useEffect(function () {
+        var provideTimeSinceStart = function (_a) {
+            var timestamp = _a.timestamp;
+            callback(timestamp - initialTimestamp);
+        };
+        sync__default["default"].update(provideTimeSinceStart, true);
+        return function () { return sync.cancelSync.update(provideTimeSinceStart); };
+    }, [callback]);
+}
+
+function useTime() {
+    var time = useMotionValue.useMotionValue(0);
+    useAnimationFrame(function (t) { return time.set(t); });
+    return time;
+}
+
+// Does this device prefer reduced motion? Returns `null` server-side.
+var prefersReducedMotion;
+function initPrefersReducedMotion() {
+    prefersReducedMotion = useMotionValue.motionValue(null);
+    if (typeof window === "undefined")
+        return;
+    if (window.matchMedia) {
+        var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)");
+        var setReducedMotionPreferences = function () {
+            return prefersReducedMotion.set(motionMediaQuery_1.matches);
+        };
+        motionMediaQuery_1.addListener(setReducedMotionPreferences);
+        setReducedMotionPreferences();
+    }
+    else {
+        prefersReducedMotion.set(false);
+    }
+}
+/**
+ * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+ *
+ * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+ * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+ *
+ * It will actively respond to changes and re-render your components with the latest setting.
+ *
+ * ```jsx
+ * export function Sidebar({ isOpen }) {
+ *   const shouldReduceMotion = useReducedMotion()
+ *   const closedX = shouldReduceMotion ? 0 : "-100%"
+ *
+ *   return (
+ *     <motion.div animate={{
+ *       opacity: isOpen ? 1 : 0,
+ *       x: isOpen ? 0 : closedX
+ *     }} />
+ *   )
+ * }
+ * ```
+ *
+ * @return boolean
+ *
+ * @public
+ */
+function useReducedMotion() {
+    /**
+     * Lazy initialisation of prefersReducedMotion
+     */
+    !prefersReducedMotion && initPrefersReducedMotion();
+    var _a = tslib.__read(React.useState(prefersReducedMotion.get()), 2), shouldReduceMotion = _a[0], setShouldReduceMotion = _a[1];
+    useOnChange(prefersReducedMotion, setShouldReduceMotion);
+    return shouldReduceMotion;
+}
+
+/**
+ * @public
+ */
+function animationControls() {
+    /**
+     * Track whether the host component has mounted.
+     */
+    var hasMounted = false;
+    /**
+     * Pending animations that are started before a component is mounted.
+     * TODO: Remove this as animations should only run in effects
+     */
+    var pendingAnimations = [];
+    /**
+     * A collection of linked component animation controls.
+     */
+    var subscribers = new Set();
+    var controls = {
+        subscribe: function (visualElement) {
+            subscribers.add(visualElement);
+            return function () { return void subscribers.delete(visualElement); };
+        },
+        start: function (definition, transitionOverride) {
+            /**
+             * TODO: We only perform this hasMounted check because in Framer we used to
+             * encourage the ability to start an animation within the render phase. This
+             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
+             * we can ditch this.
+             */
+            if (hasMounted) {
+                var animations_1 = [];
+                subscribers.forEach(function (visualElement) {
+                    animations_1.push(useMotionValue.animateVisualElement(visualElement, definition, {
+                        transitionOverride: transitionOverride,
+                    }));
+                });
+                return Promise.all(animations_1);
+            }
+            else {
+                return new Promise(function (resolve) {
+                    pendingAnimations.push({
+                        animation: [definition, transitionOverride],
+                        resolve: resolve,
+                    });
+                });
+            }
+        },
+        set: function (definition) {
+            heyListen.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            return subscribers.forEach(function (visualElement) {
+                useMotionValue.setValues(visualElement, definition);
+            });
+        },
+        stop: function () {
+            subscribers.forEach(function (visualElement) {
+                useMotionValue.stopAnimation(visualElement);
+            });
+        },
+        mount: function () {
+            hasMounted = true;
+            pendingAnimations.forEach(function (_a) {
+                var animation = _a.animation, resolve = _a.resolve;
+                controls.start.apply(controls, tslib.__spreadArray([], tslib.__read(animation), false)).then(resolve);
+            });
+            return function () {
+                hasMounted = false;
+                controls.stop();
+            };
+        },
+    };
+    return controls;
+}
+
+/**
+ * Creates `AnimationControls`, which can be used to manually start, stop
+ * and sequence animations on one or more components.
+ *
+ * The returned `AnimationControls` should be passed to the `animate` property
+ * of the components you want to animate.
+ *
+ * These components can then be animated with the `start` method.
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { motion, useAnimation } from 'framer-motion'
+ *
+ * export function MyComponent(props) {
+ *    const controls = useAnimation()
+ *
+ *    controls.start({
+ *        x: 100,
+ *        transition: { duration: 0.5 },
+ *    })
+ *
+ *    return <motion.div animate={controls} />
+ * }
+ * ```
+ *
+ * @returns Animation controller with `start` and `stop` methods
+ *
+ * @public
+ */
+function useAnimation() {
+    var controls = useMotionValue.useConstant(animationControls);
+    React.useEffect(controls.mount, []);
+    return controls;
+}
+
+/**
+ * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
+ *
+ * An index value can be passed to the returned `cycle` function to cycle to a specific index.
+ *
+ * ```jsx
+ * import * as React from "react"
+ * import { motion, useCycle } from "framer-motion"
+ *
+ * export const MyComponent = () => {
+ *   const [x, cycleX] = useCycle(0, 50, 100)
+ *
+ *   return (
+ *     <motion.div
+ *       animate={{ x: x }}
+ *       onTap={() => cycleX()}
+ *      />
+ *    )
+ * }
+ * ```
+ *
+ * @param items - items to cycle through
+ * @returns [currentState, cycleState]
+ *
+ * @public
+ */
+function useCycle() {
+    var items = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        items[_i] = arguments[_i];
+    }
+    var index = React.useRef(0);
+    var _a = tslib.__read(React.useState(items[index.current]), 2), item = _a[0], setItem = _a[1];
+    return [
+        item,
+        function (next) {
+            index.current =
+                typeof next !== "number"
+                    ? popmotion.wrap(0, items.length, index.current + 1)
+                    : next;
+            setItem(items[index.current]);
+        },
+    ];
+}
+
+/**
+ * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
+ *
+ * ```jsx
+ * const dragControls = useDragControls()
+ *
+ * function startDrag(event) {
+ *   dragControls.start(event, { snapToCursor: true })
+ * }
+ *
+ * return (
+ *   <>
+ *     <div onPointerDown={startDrag} />
+ *     <motion.div drag="x" dragControls={dragControls} />
+ *   </>
+ * )
+ * ```
+ *
+ * @public
+ */
+var DragControls = /** @class */ (function () {
+    function DragControls() {
+        this.componentControls = new Set();
+    }
+    /**
+     * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
+     *
+     * @internal
+     */
+    DragControls.prototype.subscribe = function (controls) {
+        var _this = this;
+        this.componentControls.add(controls);
+        return function () { return _this.componentControls.delete(controls); };
+    };
+    /**
+     * Start a drag gesture on every `motion` component that has this set of drag controls
+     * passed into it via the `dragControls` prop.
+     *
+     * ```jsx
+     * dragControls.start(e, {
+     *   snapToCursor: true
+     * })
+     * ```
+     *
+     * @param event - PointerEvent
+     * @param options - Options
+     *
+     * @public
+     */
+    DragControls.prototype.start = function (event, options) {
+        this.componentControls.forEach(function (controls) {
+            controls.start(event.nativeEvent || event, options);
+        });
+    };
+    return DragControls;
+}());
+var createDragControls = function () { return new DragControls(); };
+/**
+ * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
+ * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
+ * might want to initiate that dragging from a different component than the draggable one.
+ *
+ * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
+ * the draggable component's `dragControls` prop. It exposes a `start` method
+ * that can start dragging from pointer events on other components.
+ *
+ * ```jsx
+ * const dragControls = useDragControls()
+ *
+ * function startDrag(event) {
+ *   dragControls.start(event, { snapToCursor: true })
+ * }
+ *
+ * return (
+ *   <>
+ *     <div onPointerDown={startDrag} />
+ *     <motion.div drag="x" dragControls={dragControls} />
+ *   </>
+ * )
+ * ```
+ *
+ * @public
+ */
+function useDragControls() {
+    return useMotionValue.useConstant(createDragControls);
+}
+
+function useInstantLayoutTransition() {
+    return startTransition;
+}
+function startTransition(cb) {
+    if (!rootProjectionNode.current)
+        return;
+    rootProjectionNode.current.isUpdating = false;
+    rootProjectionNode.current.blockUpdate();
+    cb === null || cb === void 0 ? void 0 : cb();
+}
+
+function useInstantTransition() {
+    var _a = tslib.__read(useForceUpdate(), 2), forceUpdate = _a[0], forcedRenderCount = _a[1];
+    var startInstantLayoutTransition = useInstantLayoutTransition();
+    React.useEffect(function () {
+        /**
+         * Unblock after two animation frames, otherwise this will unblock too soon.
+         */
+        sync__default["default"].postRender(function () {
+            return sync__default["default"].postRender(function () { return (useMotionValue.instantAnimationState.current = false); });
+        });
+    }, [forcedRenderCount]);
+    return function (callback) {
+        startInstantLayoutTransition(function () {
+            useMotionValue.instantAnimationState.current = true;
+            forceUpdate();
+            callback();
+        });
+    };
+}
+
+function useResetProjection() {
+    var reset = React__namespace.useCallback(function () {
+        var root = rootProjectionNode.current;
+        if (!root)
+            return;
+        root.resetTree();
+    }, []);
+    return reset;
+}
+
+var createObject = function () { return ({}); };
+var stateVisualElement = useMotionValue.visualElement({
+    build: function () { },
+    measureViewportBox: useMotionValue.createBox,
+    resetTransform: function () { },
+    restoreTransform: function () { },
+    removeValueFromRenderState: function () { },
+    render: function () { },
+    scrapeMotionValuesFromProps: createObject,
+    readValueFromInstance: function (_state, key, options) {
+        return options.initialState[key] || 0;
+    },
+    makeTargetAnimatable: function (element, _a) {
+        var transition = _a.transition, transitionEnd = _a.transitionEnd, target = tslib.__rest(_a, ["transition", "transitionEnd"]);
+        var origin = useMotionValue.getOrigin(target, transition || {}, element);
+        useMotionValue.checkTargetForNewValues(element, target, origin);
+        return tslib.__assign({ transition: transition, transitionEnd: transitionEnd }, target);
+    },
+});
+var useVisualState = useMotionValue.makeUseVisualState({
+    scrapeMotionValuesFromProps: createObject,
+    createRenderState: createObject,
+});
+/**
+ * This is not an officially supported API and may be removed
+ * on any version.
+ * @internal
+ */
+function useAnimatedState(initialState) {
+    var _a = tslib.__read(React.useState(initialState), 2), animationState = _a[0], setAnimationState = _a[1];
+    var visualState = useVisualState({}, false);
+    var element = useMotionValue.useConstant(function () {
+        return stateVisualElement({ props: {}, visualState: visualState }, { initialState: initialState });
+    });
+    React.useEffect(function () {
+        element.mount({});
+        return element.unmount();
+    }, []);
+    React.useEffect(function () {
+        element.setProps({
+            onUpdate: function (v) { return setAnimationState(tslib.__assign({}, v)); },
+        });
+    });
+    var startAnimation = useMotionValue.useConstant(function () { return function (animationDefinition) {
+        return useMotionValue.animateVisualElement(element, animationDefinition);
+    }; });
+    return [animationState, startAnimation];
+}
+
+// Keep things reasonable and avoid scale: Infinity. In practise we might need
+// to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
+// to simply hide content at unreasonable scales.
+var maxScale = 100000;
+var invertScale = function (scale) {
+    return scale > 0.001 ? 1 / scale : maxScale;
+};
+var hasWarned = false;
+/**
+ * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
+ * of their respective parent scales.
+ *
+ * This is useful for undoing the distortion of content when scaling a parent component.
+ *
+ * By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
+ * By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
+ * of those instead.
+ *
+ * ```jsx
+ * const MyComponent = () => {
+ *   const { scaleX, scaleY } = useInvertedScale()
+ *   return <motion.div style={{ scaleX, scaleY }} />
+ * }
+ * ```
+ *
+ * @deprecated
+ * @internal
+ */
+function useInvertedScale(scale) {
+    var parentScaleX = useMotionValue.useMotionValue(1);
+    var parentScaleY = useMotionValue.useMotionValue(1);
+    var visualElement = useMotionValue.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.");
+    hasWarned = true;
+    if (scale) {
+        parentScaleX = scale.scaleX || parentScaleX;
+        parentScaleY = scale.scaleY || parentScaleY;
+    }
+    else if (visualElement) {
+        parentScaleX = visualElement.getValue("scaleX", 1);
+        parentScaleY = visualElement.getValue("scaleY", 1);
+    }
+    var scaleX = useTransform(parentScaleX, invertScale);
+    var scaleY = useTransform(parentScaleY, invertScale);
+    return { scaleX: scaleX, scaleY: scaleY };
+}
+
+exports.FlatTree = useMotionValue.FlatTree;
+exports.LayoutGroupContext = useMotionValue.LayoutGroupContext;
+exports.MotionConfigContext = useMotionValue.MotionConfigContext;
+exports.MotionValue = useMotionValue.MotionValue;
+exports.PresenceContext = useMotionValue.PresenceContext;
+exports.SwitchLayoutGroupContext = useMotionValue.SwitchLayoutGroupContext;
+exports.addScaleCorrector = useMotionValue.addScaleCorrector;
+exports.animate = useMotionValue.animate;
+exports.animateVisualElement = useMotionValue.animateVisualElement;
+exports.createMotionComponent = useMotionValue.createMotionComponent;
+exports.isValidMotionProp = useMotionValue.isValidMotionProp;
+exports.motionValue = useMotionValue.motionValue;
+exports.resolveMotionValue = useMotionValue.resolveMotionValue;
+exports.useDomEvent = useMotionValue.useDomEvent;
+exports.useIsPresent = useMotionValue.useIsPresent;
+exports.useMotionValue = useMotionValue.useMotionValue;
+exports.usePresence = useMotionValue.usePresence;
+exports.visualElement = useMotionValue.visualElement;
+exports.AnimatePresence = AnimatePresence;
+exports.AnimateSharedLayout = AnimateSharedLayout;
+exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
+exports.DragControls = DragControls;
+exports.LayoutGroup = LayoutGroup;
+exports.LazyMotion = LazyMotion;
+exports.MotionConfig = MotionConfig;
+exports.Reorder = Reorder;
+exports.animationControls = animationControls;
+exports.createDomMotionComponent = createDomMotionComponent;
+exports.domAnimation = domAnimation;
+exports.domMax = domMax;
+exports.m = m;
+exports.motion = motion;
+exports.transform = transform;
+exports.useAnimation = useAnimation;
+exports.useAnimationFrame = useAnimationFrame;
+exports.useCycle = useCycle;
+exports.useDeprecatedAnimatedState = useAnimatedState;
+exports.useDeprecatedInvertedScale = useInvertedScale;
+exports.useDragControls = useDragControls;
+exports.useElementScroll = useElementScroll;
+exports.useInstantLayoutTransition = useInstantLayoutTransition;
+exports.useInstantTransition = useInstantTransition;
+exports.useMotionTemplate = useMotionTemplate;
+exports.useReducedMotion = useReducedMotion;
+exports.useResetProjection = useResetProjection;
+exports.useSpring = useSpring;
+exports.useTime = useTime;
+exports.useTransform = useTransform;
+exports.useVelocity = useVelocity;
+exports.useViewportScroll = useViewportScroll;