unframer 2.26.0 → 2.27.0

package/esm/framer.js

@@ -1,5 +1,5 @@
 import { __commonJS, __decorateElement, __decoratorMetadata, __decoratorStart, __export, __privateAdd, __privateGet, __privateMethod, __privateSet, __publicField, __runInitializers, __toESM, } from './framer-chunks/chunk-A2PMVMFI.js';
-// /:https://app.framerstatic.com/chunk-A6RUM2JZ.mjs
+// /:https://app.framerstatic.com/chunk-BLFSVU7M.mjs
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { useCallback, useContext, useId, } from 'react';
@@ -3385,6 +3385,99 @@ function getComputedStyle2(element, name) {
     const computedStyle = window.getComputedStyle(element);
     return isCSSVar(name) ? computedStyle.getPropertyValue(name) : computedStyle[name];
 }
+function isSVGElement(element) {
+    return isObject(element) && 'ownerSVGElement' in element;
+}
+var resizeHandlers = /* @__PURE__ */ new WeakMap();
+var observer;
+var getSize = (borderBoxAxis, svgAxis, htmlAxis) => (target, borderBoxSize) => {
+    if (borderBoxSize && borderBoxSize[0]) {
+        return borderBoxSize[0][borderBoxAxis + 'Size'];
+    }
+    else if (isSVGElement(target) && 'getBBox' in target) {
+        return target.getBBox()[svgAxis];
+    }
+    else {
+        return target[htmlAxis];
+    }
+};
+var getWidth = /* @__PURE__ */ getSize('inline', 'width', 'offsetWidth');
+var getHeight = /* @__PURE__ */ getSize('block', 'height', 'offsetHeight');
+function notifyTarget({ target, borderBoxSize, }) {
+    var _a;
+    (_a = resizeHandlers.get(target)) == null ? void 0 : _a.forEach((handler) => {
+        handler(target, {
+            get width() {
+                return getWidth(target, borderBoxSize);
+            },
+            get height() {
+                return getHeight(target, borderBoxSize);
+            },
+        });
+    });
+}
+function notifyAll(entries) {
+    entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+    if (typeof ResizeObserver === 'undefined')
+        return;
+    observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+    if (!observer)
+        createResizeObserver();
+    const elements = resolveElements(target);
+    elements.forEach((element) => {
+        let elementHandlers = resizeHandlers.get(element);
+        if (!elementHandlers) {
+            elementHandlers = /* @__PURE__ */ new Set();
+            resizeHandlers.set(element, elementHandlers);
+        }
+        elementHandlers.add(handler);
+        observer == null ? void 0 : observer.observe(element);
+    });
+    return () => {
+        elements.forEach((element) => {
+            const elementHandlers = resizeHandlers.get(element);
+            elementHandlers == null ? void 0 : elementHandlers.delete(handler);
+            if (!(elementHandlers == null ? void 0 : elementHandlers.size)) {
+                observer == null ? void 0 : observer.unobserve(element);
+            }
+        });
+    };
+}
+var windowCallbacks = /* @__PURE__ */ new Set();
+var windowResizeHandler;
+function createWindowResizeHandler() {
+    windowResizeHandler = () => {
+        const info = {
+            get width() {
+                return window.innerWidth;
+            },
+            get height() {
+                return window.innerHeight;
+            },
+        };
+        windowCallbacks.forEach((callback) => callback(info));
+    };
+    window.addEventListener('resize', windowResizeHandler);
+}
+function resizeWindow(callback) {
+    windowCallbacks.add(callback);
+    if (!windowResizeHandler)
+        createWindowResizeHandler();
+    return () => {
+        windowCallbacks.delete(callback);
+        if (!windowCallbacks.size && typeof windowResizeHandler === 'function') {
+            window.removeEventListener('resize', windowResizeHandler);
+            windowResizeHandler = void 0;
+        }
+    };
+}
+function resize(a, b) {
+    return typeof a === 'function' ? resizeWindow(a) : resizeElement(a, b);
+}
 function observeTimeline(update, timeline) {
     let prevProgress;
     const onFrame = () => {
@@ -3507,9 +3600,6 @@ function recordStats() {
     frame.postRender(record, true);
     return reportStats;
 }
-function isSVGElement(element) {
-    return isObject(element) && 'ownerSVGElement' in element;
-}
 function isSVGSVGElement(element) {
     return isSVGElement(element) && element.tagName === 'svg';
 }
@@ -8023,6 +8113,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
                 this.motionValue || (this.motionValue = motionValue(0));
                 this.currentAnimation = animateSingleValue(this.motionValue, [0, 1e3,], {
                     ...options,
+                    velocity: 0,
                     isSync: true,
                     onUpdate: (latest) => {
                         this.mixTargetDelta(latest);
@@ -8811,100 +8902,6 @@ var domMin = {
 function useMotionValueEvent(value, event, callback) {
     useInsertionEffect(() => value.on(event, callback), [value, event, callback,]);
 }
-var resizeHandlers = /* @__PURE__ */ new WeakMap();
-var observer;
-function getElementSize(target, borderBoxSize) {
-    if (borderBoxSize) {
-        const { inlineSize, blockSize, } = borderBoxSize[0];
-        return {
-            width: inlineSize,
-            height: blockSize,
-        };
-    }
-    else if (isSVGElement(target) && 'getBBox' in target) {
-        return target.getBBox();
-    }
-    else {
-        return {
-            width: target.offsetWidth,
-            height: target.offsetHeight,
-        };
-    }
-}
-function notifyTarget({ target, contentRect, borderBoxSize, }) {
-    var _a;
-    (_a = resizeHandlers.get(target)) == null ? void 0 : _a.forEach((handler) => {
-        handler({
-            target,
-            contentSize: contentRect,
-            get size() {
-                return getElementSize(target, borderBoxSize);
-            },
-        });
-    });
-}
-function notifyAll(entries) {
-    entries.forEach(notifyTarget);
-}
-function createResizeObserver() {
-    if (typeof ResizeObserver === 'undefined')
-        return;
-    observer = new ResizeObserver(notifyAll);
-}
-function resizeElement(target, handler) {
-    if (!observer)
-        createResizeObserver();
-    const elements = resolveElements(target);
-    elements.forEach((element) => {
-        let elementHandlers = resizeHandlers.get(element);
-        if (!elementHandlers) {
-            elementHandlers = /* @__PURE__ */ new Set();
-            resizeHandlers.set(element, elementHandlers);
-        }
-        elementHandlers.add(handler);
-        observer == null ? void 0 : observer.observe(element);
-    });
-    return () => {
-        elements.forEach((element) => {
-            const elementHandlers = resizeHandlers.get(element);
-            elementHandlers == null ? void 0 : elementHandlers.delete(handler);
-            if (!(elementHandlers == null ? void 0 : elementHandlers.size)) {
-                observer == null ? void 0 : observer.unobserve(element);
-            }
-        });
-    };
-}
-var windowCallbacks = /* @__PURE__ */ new Set();
-var windowResizeHandler;
-function createWindowResizeHandler() {
-    windowResizeHandler = () => {
-        const size = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
-        const info = {
-            target: window,
-            size,
-            contentSize: size,
-        };
-        windowCallbacks.forEach((callback) => callback(info));
-    };
-    window.addEventListener('resize', windowResizeHandler);
-}
-function resizeWindow(callback) {
-    windowCallbacks.add(callback);
-    if (!windowResizeHandler)
-        createWindowResizeHandler();
-    return () => {
-        windowCallbacks.delete(callback);
-        if (!windowCallbacks.size && windowResizeHandler) {
-            windowResizeHandler = void 0;
-        }
-    };
-}
-function resize(a, b) {
-    return typeof a === 'function' ? resizeWindow(a) : resizeElement(a, b);
-}
 var maxElapsed2 = 50;
 var createAxisInfo = () => ({
     current: 0,
@@ -10502,7 +10499,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.C2MZBAEL.mjs
+// /:https://app.framerstatic.com/framer.6RBAH774.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -13790,6 +13787,198 @@ function patchRoutesForABTesting(routes, initialRouteId) {
     removeRoutesVariants(routes);
     return resolvedInitialRouteId;
 }
+var mainTagId = 'main';
+var generatedPageDatasetKey = 'framerGeneratedPage';
+var searchIndexMetaName = 'framer-search-index';
+var searchIndexMetaSelector = `meta[name="${searchIndexMetaName}"]`;
+var endOfHeadStartMarker = '<!-- End of headStart -->';
+var endOfHeadEndMarker = '<!-- End of headEnd -->';
+var endOfBodyStartMarker = '<!-- End of bodyStart -->';
+var endOfBodyEndMarker = '<!-- End of bodyEnd -->';
+function assert(condition, ...msg) {
+    var _a, _b;
+    if (condition)
+        return;
+    const e = Error('Assertion Error' + (msg.length > 0 ? ': ' + msg.join(' ') : ''));
+    if (e.stack) {
+        try {
+            const lines = e.stack.split('\n');
+            if ((_a = lines[1]) == null ? void 0 : _a.includes('assert')) {
+                lines.splice(1, 1);
+                e.stack = lines.join('\n');
+            }
+            else if ((_b = lines[0]) == null ? void 0 : _b.includes('assert')) {
+                lines.splice(0, 1);
+                e.stack = lines.join('\n');
+            }
+        }
+        catch { }
+    }
+    throw e;
+}
+function assertNever(x, error) {
+    throw error || new Error(x ? `Unexpected value: ${x}` : 'Application entered invalid state');
+}
+async function insertHTML(html, referenceNode, position = 'beforeend') {
+    let insertionParent, insertionPoint;
+    switch (position) {
+        case 'beforebegin':
+            assert(referenceNode.parentNode, 'Can\'t use \'beforebegin\' with a referenceNode at the top level');
+            insertionParent = referenceNode.parentNode;
+            insertionPoint = referenceNode;
+            break;
+        case 'afterend':
+            assert(referenceNode.parentNode, 'Can\'t use \'afterend\' with a referenceNode at the top level');
+            insertionParent = referenceNode.parentNode;
+            insertionPoint = referenceNode.nextSibling;
+            break;
+        case 'afterbegin':
+            insertionParent = referenceNode;
+            insertionPoint = referenceNode.firstChild;
+            break;
+        case 'beforeend':
+            insertionParent = referenceNode;
+            insertionPoint = null;
+            break;
+        default:
+            assertNever(position);
+    }
+    const range = document.createRange();
+    range.selectNodeContents(insertionParent);
+    const fragment = range.createContextualFragment(html);
+    await pump(fragment, insertionParent, insertionPoint);
+}
+async function pump(sourceNode, targetParent, beforeNode) {
+    for (let node = sourceNode.firstChild; node; node = node.nextSibling) {
+        if (node instanceof HTMLScriptElement) {
+            await handleScript(node, targetParent, beforeNode);
+            continue;
+        }
+        const clone = node.cloneNode(false);
+        targetParent.insertBefore(clone, beforeNode);
+        if (node.firstChild) {
+            await pump(node, clone, null);
+        }
+    }
+}
+async function handleScript(node, parent, beforeNode) {
+    var _a;
+    const script = node.cloneNode(true);
+    const isExternal = script.hasAttribute('src');
+    const isAsync = script.hasAttribute('async');
+    const isDefer = script.hasAttribute('defer');
+    const isModule = ((_a = script.getAttribute('type')) == null ? void 0 : _a.toLowerCase()) === 'module';
+    if (!isExternal || isAsync || isDefer || isModule) {
+        parent.insertBefore(script, beforeNode);
+    }
+    else {
+        await execExternalBlockingScript(script, parent, beforeNode);
+    }
+}
+function execExternalBlockingScript(script, parent, beforeNode) {
+    return new Promise((resolve) => {
+        script.onload = () => resolve();
+        script.onerror = () => resolve();
+        parent.insertBefore(script, beforeNode);
+    });
+}
+function useMetadata(metadata) {
+    const { isInitialNavigation, } = useRouter();
+    React2.useEffect(() => {
+        if (metadata.robots) {
+            let robotsTag = document.querySelector('meta[name="robots"]');
+            if (robotsTag) {
+                robotsTag.setAttribute('content', metadata.robots);
+            }
+            else {
+                robotsTag = document.createElement('meta');
+                robotsTag.setAttribute('name', 'robots');
+                robotsTag.setAttribute('content', metadata.robots);
+                document.head.appendChild(robotsTag);
+            }
+        }
+    }, [metadata.robots,]);
+    React2.useInsertionEffect(() => {
+        var _a;
+        document.title = metadata.title || '';
+        if (metadata.viewport) {
+            (_a = document.querySelector('meta[name="viewport"]')) == null ? void 0 : _a.setAttribute('content', metadata.viewport);
+        }
+    }, [metadata.title, metadata.viewport,]);
+    React2.useEffect(() => {
+        if (!isInitialNavigation)
+            return;
+        const mainTag = document.getElementById(mainTagId);
+        const isGeneratedPage = mainTag && mainTag.dataset[generatedPageDatasetKey] !== void 0;
+        if (isGeneratedPage)
+            return;
+        void insertCustomHTML(metadata.customHTMLHeadStart, metadata.customHTMLHeadEnd, metadata.customHTMLBodyStart, metadata.customHTMLBodyEnd);
+    }, []);
+}
+async function insertCustomHTML(customHTMLHeadStart, customHTMLHeadEnd, customHTMLBodyStart, customHTMLBodyEnd) {
+    let endOfHeadStart;
+    let endOfHeadEnd;
+    let endOfBodyStart;
+    let endOfBodyEnd;
+    if (customHTMLHeadStart || customHTMLHeadEnd) {
+        const { start: start2, end, } = findCommentMarkers(document.head.childNodes, customHTMLHeadStart ? endOfHeadStartMarker : void 0, customHTMLHeadEnd ? endOfHeadEndMarker : void 0);
+        endOfHeadStart = start2;
+        endOfHeadEnd = end;
+    }
+    if (customHTMLBodyStart || customHTMLBodyEnd) {
+        const { start: start2, end, } = findCommentMarkers(document.body.childNodes, customHTMLBodyStart ? endOfBodyStartMarker : void 0, customHTMLBodyEnd ? endOfBodyEndMarker : void 0);
+        endOfBodyStart = start2;
+        endOfBodyEnd = end;
+    }
+    if (customHTMLHeadStart && endOfHeadStart) {
+        await insertHTML(customHTMLHeadStart, endOfHeadStart, 'beforebegin');
+    }
+    if (customHTMLHeadEnd && endOfHeadEnd) {
+        await insertHTML(customHTMLHeadEnd, endOfHeadEnd, 'beforebegin');
+    }
+    if (customHTMLBodyStart && endOfBodyStart) {
+        await insertHTML(customHTMLBodyStart, endOfBodyStart, 'beforebegin');
+    }
+    if (customHTMLBodyEnd && endOfBodyEnd) {
+        await insertHTML(customHTMLBodyEnd, endOfBodyEnd, 'beforebegin');
+    }
+}
+function findCommentMarkers(nodes, startMarker, endMarker) {
+    if (!startMarker && !endMarker) {
+        return {
+            start: void 0,
+            end: void 0,
+        };
+    }
+    let start2;
+    let end;
+    let i = 0;
+    let j = nodes.length - 1;
+    while (i <= j) {
+        const startNode = nodes[i];
+        const endNode = nodes[j];
+        if (!start2 && (startNode == null ? void 0 : startNode.nodeType) === Node.COMMENT_NODE && startMarker &&
+            `<!--${startNode.nodeValue}-->` === startMarker) {
+            start2 = startNode;
+            if (!endMarker)
+                break;
+        }
+        if (!end && (endNode == null ? void 0 : endNode.nodeType) === Node.COMMENT_NODE && endMarker &&
+            `<!--${endNode.nodeValue}-->` === endMarker) {
+            end = endNode;
+            if (!startMarker)
+                break;
+        }
+        if (start2 && end)
+            break;
+        i++;
+        j--;
+    }
+    return {
+        start: start2,
+        end,
+    };
+}
 var warningMessages = /* @__PURE__ */ new Set();
 function warnOnce2(keyMessage, ...rest) {
     if (warningMessages.has(keyMessage))
@@ -13976,6 +14165,9 @@ function roundWithOffset(value, offset) {
     }
     return Math.round(value - offset) + offset;
 }
+function roundToHalfPixel(value) {
+    return Math.round(value * 2) / 2;
+}
 function Point(x, y) {
     return {
         x,
@@ -14104,30 +14296,6 @@ function Point(x, y) {
     }
     Point2.sortClockwise = sortClockwise;
 })(Point || (Point = {}));
-function assert(condition, ...msg) {
-    var _a, _b;
-    if (condition)
-        return;
-    const e = Error('Assertion Error' + (msg.length > 0 ? ': ' + msg.join(' ') : ''));
-    if (e.stack) {
-        try {
-            const lines = e.stack.split('\n');
-            if ((_a = lines[1]) == null ? void 0 : _a.includes('assert')) {
-                lines.splice(1, 1);
-                e.stack = lines.join('\n');
-            }
-            else if ((_b = lines[0]) == null ? void 0 : _b.includes('assert')) {
-                lines.splice(0, 1);
-                e.stack = lines.join('\n');
-            }
-        }
-        catch { }
-    }
-    throw e;
-}
-function assertNever(x, error) {
-    throw error || new Error(x ? `Unexpected value: ${x}` : 'Application entered invalid state');
-}
 var BezierDefaults = {
     curve: 'ease',
     duration: 1,
@@ -16321,7 +16489,10 @@ var Loop = class extends EventEmitter {
 };
 var MainLoop = /* @__PURE__ */ new Loop();
 var RenderEnvironment = {
-    target: 'PREVIEW',
+    target: 
+    // Enable static renderer when taking screenshots
+    // in screenshot-site lambda
+    safeWindow.location.origin === 'https://screenshot.framer.invalid' ? 'EXPORT' : 'PREVIEW',
     zoom: 1,
 };
 function executeInRenderEnvironment(customEnvironment, task) {
@@ -17539,11 +17710,21 @@ var Rect = {
         return rect.x === other.x && rect.y === other.y && rect.width === other.width && rect.height === other.height;
     },
     /** @internal */
+    from: (rect) => {
+        return {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+        };
+    },
+    /** @internal */
     atOrigin: (size) => {
         return {
-            ...size,
             x: 0,
             y: 0,
+            width: size.width,
+            height: size.height,
         };
     },
     /** @internal */
@@ -17707,13 +17888,13 @@ var Rect = {
         };
     },
     /** @internal */
-    boundingRectFromPoints: (ps) => {
+    boundingRectFromPoints: (points) => {
         let minX = Infinity;
         let maxX = -Infinity;
         let minY = Infinity;
         let maxY = -Infinity;
-        for (let i = 0; i < ps.length; i++) {
-            const point2 = ps[i];
+        for (let i = 0; i < points.length; i++) {
+            const point2 = points[i];
             minX = Math.min(minX, point2.x);
             maxX = Math.max(maxX, point2.x);
             minY = Math.min(minY, point2.y);
@@ -18017,20 +18198,6 @@ var Rect = {
             y: 0,
         });
     },
-    /** @internal */
-    fromAny: (rect, defaults = {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-    }) => {
-        return {
-            x: rect.x || defaults.x,
-            y: rect.y || defaults.y,
-            width: rect.width || defaults.width,
-            height: rect.height || defaults.height,
-        };
-    },
     delta: (a, b) => {
         const pointA = {
             x: Rect.minX(a),
@@ -18750,6 +18917,7 @@ var ControlType = /* @__PURE__ */ ((ControlType2) => {
     ControlType2['MultiCollectionReference'] = 'multicollectionreference';
     ControlType2['TrackingId'] = 'trackingid';
     ControlType2['VectorSetItem'] = 'vectorsetitem';
+    ControlType2['LinkRelValues'] = 'linkrelvalues';
     return ControlType2;
 })(ControlType || {});
 var isFlexboxGapSupportedCached;
@@ -20118,6 +20286,8 @@ function getControlDefaultValue(control) {
                 return isObject2(control.defaultValue) ? control.defaultValue : void 0;
             case 'font':
                 return isObject2(control.defaultValue) ? control.defaultValue : void 0;
+            case 'linkrelvalues':
+                return isArray(control.defaultValue) ? control.defaultValue : void 0;
             case 'object': {
                 const value = isObject2(control.defaultValue) ? control.defaultValue : {};
                 if (isObject2(control.controls)) {
@@ -21938,7 +22108,7 @@ function OptimizedCanvasImage({ nodeId, image, containerSize, }) {
     });
 }
 function BackgroundImageComponent({ layoutId, image, ...props }) {
-    const { motionDivToDiv, } = useLibraryFeatures();
+    const { motionDivToDivBackgroundImage, } = useLibraryFeatures();
     if (layoutId) {
         layoutId += '-background';
     }
@@ -21952,6 +22122,7 @@ function BackgroundImageComponent({ layoutId, image, ...props }) {
                 width: Math.round(backgroundSize * image.pixelWidth),
                 height: Math.round(backgroundSize * image.pixelHeight),
             };
+            const roundedBackgroundSize = roundToHalfPixel(backgroundSize * (image.pixelWidth / 2));
             const imageSource = runtime.useImageSource(image, tileSize);
             fallbackWrapperStyles = {
                 ...wrapperStyle,
@@ -21960,15 +22131,7 @@ function BackgroundImageComponent({ layoutId, image, ...props }) {
                 backgroundPosition: cssObjectPosition(image.positionX, image.positionY),
                 opacity: void 0,
                 border: 0,
-                // image.backgroundSize is a floating point number like 0.05
-                // so we need to multiply it by the pixelWidth to get the pixel
-                // value for the backgroundSize so that the size of the tile is
-                // a function of the image width + background size percentage.
-                // e.g image is 64px/64px and backgroundSize is 0.05, the tile size
-                // should be 3.2px
-                // We divide the pixel width by 2 because we assume that most designers
-                // will be working with 2x (retina) assets.
-                backgroundSize: `${(backgroundSize * (image.pixelWidth / 2)).toFixed(2)}px auto`,
+                backgroundSize: `${roundedBackgroundSize}px auto`,
             };
             imageNode = null;
             needsMotion = true;
@@ -21999,7 +22162,7 @@ function BackgroundImageComponent({ layoutId, image, ...props }) {
         ...wrapperStyle,
         ...getPlaceholderStyle(),
     };
-    return needsMotion || !motionDivToDiv
+    return needsMotion || !motionDivToDivBackgroundImage
         ? /* @__PURE__ */ jsx3(motion.div, {
             layoutId,
             style: style2,
@@ -22148,7 +22311,15 @@ var isFirefox = () => safeNavigator && /Firefox\/\d+\.\d+$/u.test(safeNavigator.
 var isFramerX = () => safeNavigator && /FramerX/u.test(safeNavigator.userAgent);
 var isEdge = () => safeNavigator && /Edg\//u.test(safeNavigator.userAgent);
 var isAndroid = () => safeNavigator && /android/iu.test(safeNavigator.userAgent);
-var isIOS = () => safeNavigator && /iPhone|iPod|iPad/iu.test(safeNavigator.platform);
+var iOSRegex = /iPhone|iPod|iPad/iu;
+var macIntelRegex = /MacIntel/iu;
+var isIOS = () => {
+    if (!safeNavigator)
+        return false;
+    if (iOSRegex.test(safeNavigator.platform))
+        return true;
+    return macIntelRegex.test(safeNavigator.platform) && safeNavigator.maxTouchPoints && safeNavigator.maxTouchPoints > 2;
+};
 var isMacOS = () => safeNavigator && /Mac/u.test(safeNavigator.platform);
 var isWindows = () => safeNavigator && /Win/u.test(safeNavigator.platform);
 var isTouch = () => safeWindow.ontouchstart === null && safeWindow.ontouchmove === null && safeWindow.ontouchend === null;
@@ -23471,39 +23642,59 @@ function useStableRefWithObserver() {
                 return ref.current;
             },
             set current(value) {
+                if (value === ref.current)
+                    return;
+                ref.current = value;
                 if (refCallback)
                     refCallback(value);
-                ref.current = value;
-                const needsCleanup = value === null;
-                callbacks.forEach((callback) => {
-                    if (needsCleanup && cleanups.has(callback))
-                        return;
-                    const cleanup = callback(value);
-                    if (cleanup)
-                        cleanups.set(callback, cleanup);
+                cleanups.forEach((cleanup, callback) => {
+                    if (cleanup) {
+                        cleanup();
+                    }
+                    else {
+                        callback(null);
+                    }
                 });
-                if (needsCleanup) {
-                    cleanups.forEach((cleanup) => cleanup());
+                if (value === null) {
                     cleanups.clear();
+                    callbacks.clear();
+                    return;
                 }
+                callbacks.forEach((callback) => {
+                    const cleanup = callback(value);
+                    cleanups.set(callback, cleanup);
+                });
             },
-            observe(fn, skipCall = false) {
-                if (callbacks.has(fn))
-                    return;
+            /**
+             * Adds `fn` to the list of callbacks to be called when the ref is updated.
+             * Executes `fn` immediately if the ref already has a value.
+             */
+            observe(fn) {
                 callbacks.add(fn);
-                if (!skipCall && ref.current)
-                    fn(ref.current);
+                const value = ref.current;
+                if (value) {
+                    const cleanup = fn(value);
+                    cleanups.set(fn, cleanup);
+                }
             },
+            /**
+             * Removes `fn` from the list of callbacks.
+             * Runs the cleanup for `fn` if it has been called before.
+             */
             unobserve(fn) {
-                if (fn)
-                    callbacks.delete(fn);
-            },
-            cleanup(fn) {
-                var _a;
-                if (!fn || !cleanups.has(fn))
-                    return false;
-                (_a = cleanups.get(fn)) == null ? void 0 : _a();
-                return true;
+                if (!fn)
+                    return;
+                callbacks.delete(fn);
+                if (!cleanups.has(fn))
+                    return;
+                const cleanupFn = cleanups.get(fn);
+                if (cleanupFn) {
+                    cleanupFn();
+                }
+                else {
+                    fn(null);
+                }
+                cleanups.delete(fn);
             },
         };
     });
@@ -23520,32 +23711,22 @@ function useObserverRef(forwardedRef) {
     });
 }
 function useRefEffect(ref, effect, deps) {
-    var _a;
     const effectRef = useRef3();
     const depsChangedRef = useRef3();
     useMemoOne(() => {
-        if (depsChangedRef.current !== void 0)
+        if (depsChangedRef.current !== void 0) {
             depsChangedRef.current = true;
+        }
     }, deps ?? [{},]);
     if (!ref)
         return;
     const depsChanged = depsChangedRef.current;
-    if (depsChanged) {
-        depsChangedRef.current = false;
-        if (!ref.cleanup(effectRef.current)) {
-            (_a = effectRef.current) == null ? void 0 : _a.call(effectRef, null);
-        }
-        const value = ref.current;
-        if (value)
-            effect == null ? void 0 : effect(value);
-    }
-    if (effectRef.current === effect)
+    if (depsChanged === false)
         return;
+    depsChangedRef.current = false;
     ref.unobserve(effectRef.current);
+    ref.observe(effect);
     effectRef.current = effect;
-    ref.observe(effect, depsChanged);
-    if (depsChangedRef.current === void 0)
-        depsChangedRef.current = false;
 }
 var SharedIntersectionObserver = class {
     constructor(options) {
@@ -26315,7 +26496,7 @@ function collectBoxShadowsForProps(props, style2) {
         return;
     style2.boxShadow = boxShadow;
 }
-function shadowForShape(boxShadows, rect, shapeId, strokeAlpha, strokeWidth, strokeClipId, svgStrokeAttributes) {
+function shadowForShape(boxShadows, rect, shapeId, fillEnabled, strokeEnabled, strokeWidth, strokeClipId, svgStrokeAttributes) {
     const definition = [];
     let outsetElement = null;
     let insetElement = null;
@@ -26402,6 +26583,7 @@ function shadowForShape(boxShadows, rect, shapeId, strokeAlpha, strokeWidth, str
                 /* @__PURE__ */ jsx3('use', {
                     href: shapeId.link,
                     fill: 'black',
+                    fillOpacity: fillEnabled ? void 0 : 0,
                 }),
             ],
         });
@@ -26412,9 +26594,10 @@ function shadowForShape(boxShadows, rect, shapeId, strokeAlpha, strokeWidth, str
             children: /* @__PURE__ */ jsx3('use', {
                 ...svgStrokeAttributes,
                 fill: 'black',
+                fillOpacity: fillEnabled ? void 0 : 0,
                 stroke: 'black',
-                strokeOpacity: strokeAlpha <= 0 ? 0 : 1,
-                strokeWidth: strokeAlpha > 0 ? strokeWidth : 0,
+                strokeOpacity: strokeEnabled ? void 0 : 0,
+                strokeWidth: strokeEnabled ? strokeWidth : 0,
                 xlinkHref: shapeId.link,
                 clipPath: strokeClipId.urlLink,
             }),
@@ -30677,7 +30860,7 @@ function useParallax(options, ref, visibilityStyle) {
     const visibility = useMotionValue(adjustPosition && originalPosition.current === null ? 'hidden' : visibilityStyle);
     const defaultValue = useMotionValue(0);
     useRefEffect(ref, (element) => {
-        if (element === null)
+        if (element === null || !parallaxTransformEnabled)
             return;
         frame.read(() => {
             var _a;
@@ -30689,8 +30872,12 @@ function useParallax(options, ref, visibilityStyle) {
                 visibility.set(visibilityStyle ?? 'initial');
             }
         });
-    }, [adjustPosition,]);
-    useOnRouteChange(() => parallaxY.set(0));
+    }, [adjustPosition, parallaxTransformEnabled,]);
+    useOnRouteChange(() => {
+        if (!parallaxTransformEnabled)
+            return;
+        parallaxY.set(0);
+    });
     return {
         values: {
             y: shouldReduceMotion || !parallaxTransformEnabled ? defaultValue : parallaxY,
@@ -31288,8 +31475,13 @@ function extractFXOptions(props) {
         },
         loop: {},
         forwardedProps: {},
+        targetOpacityValue: props.__targetOpacity,
+        withPerspective: props.__perspectiveFX,
+        inSmartComponent: props.__smartComponentFX,
     };
     for (const key7 in props) {
+        if (key7 === '__targetOpacity' || key7 === '__perspectiveFX' || key7 === '__smartComponentFX')
+            continue;
         const strippedKey = stripPrefixFromPrefixedKey(key7);
         if (strippedKey) {
             for (const group of groupValues) {
@@ -31348,9 +31540,7 @@ var withFX = (Component17) => React4.forwardRef((props, forwardedRef) => {
             ref: forwardedRef,
         });
     }
-    const { parallax = {}, styleAppear = {}, styleTransform = {}, presence = {}, loop = {}, forwardedProps, } = extractFXOptions(props);
-    const { __targetOpacity: targetOpacityValue, __perspectiveFX: withPerspective, __smartComponentFX: inSmartComponent = false, } = props;
-    const targetOpacity = useMotionValue(targetOpacityValue ?? 1);
+    const { parallax = {}, styleAppear = {}, styleTransform = {}, presence = {}, loop = {}, forwardedProps, targetOpacityValue, withPerspective, inSmartComponent = false, } = extractFXOptions(props);
     const observerRef = useObserverRef(forwardedRef);
     const { values: presenceEffectValues, style: presenceEffectStyle, } = usePresenceAnimation(presence, observerRef, inSmartComponent, props.style, props[optimizedAppearDataAttribute]);
     const { values: parallaxValues, style: parallaxStyle, } = useParallax(parallax, observerRef, (_a = props.style) == null ? void 0 : _a.visibility);
@@ -31358,16 +31548,10 @@ var withFX = (Component17) => React4.forwardRef((props, forwardedRef) => {
     const { values: appearEffectValues, style: scrollAppearStyle, } = useStyleAppearEffect(styleAppear, observerRef);
     const { values: loopValues, style: loopStyle, } = useLoop(loop, observerRef);
     const fxValues = React4.useMemo(() => {
+        const layerOpacity = new MotionValue(targetOpacityValue ?? 1);
         return {
             scale: [appearEffectValues.scale, loopValues.scale, presenceEffectValues.scale, transformValues2.scale,],
-            opacity: [
-                appearEffectValues.opacity,
-                loopValues.opacity,
-                presenceEffectValues.opacity,
-                // Ensure that the layers opacity is always represented.
-                targetOpacity,
-                transformValues2.opacity,
-            ],
+            opacity: [appearEffectValues.opacity, loopValues.opacity, presenceEffectValues.opacity, layerOpacity, transformValues2.opacity,],
             x: [appearEffectValues.x, loopValues.x, presenceEffectValues.x, transformValues2.x,],
             y: [appearEffectValues.y, loopValues.y, parallaxValues.y, presenceEffectValues.y, transformValues2.y,],
             rotate: [appearEffectValues.rotate, loopValues.rotate, presenceEffectValues.rotate, transformValues2.rotate,],
@@ -31381,7 +31565,7 @@ var withFX = (Component17) => React4.forwardRef((props, forwardedRef) => {
                 // value here on purpose.
             ],
         };
-    }, [targetOpacity, transformValues2, parallaxValues, appearEffectValues, loopValues, presenceEffectValues,]);
+    }, [targetOpacityValue, transformValues2, parallaxValues, appearEffectValues, loopValues, presenceEffectValues,]);
     addMotionValueStyle(props.style, fxValues);
     const scale2 = useTransform(fxValues.scale, multiply);
     const opacity = useTransform(fxValues.opacity, multiply);
@@ -32449,7 +32633,7 @@ function motionOriginFromFloatingPosition(placement = 'bottom', alignment = 'cen
             assertNever(placement);
     }
 }
-function getAncestorInfo(anchorRef) {
+function domReadGetAncestorInfo(anchorRef) {
     var _a;
     let el = anchorRef.current;
     const info = {
@@ -32469,12 +32653,11 @@ function getAncestorInfo(anchorRef) {
     }
     return info;
 }
-function createAnimationFrameLoop(onRead) {
-    const startLoop = () => frame.read(onRead, true);
-    const cancelLoop = () => cancelFrame(onRead);
-    return [startLoop, cancelLoop,];
+function domReadStartAnimationFrameLoop(onRead) {
+    frame.read(onRead, true);
+    return () => cancelFrame(onRead);
 }
-function createUpdateSafeArea(safeAreaRef) {
+function domWriteCreateUpdateSafeArea(safeAreaRef) {
     let x = 0;
     let y = 0;
     return (anchorRect, calculatedRect, placement, event) => {
@@ -32486,7 +32669,7 @@ function createUpdateSafeArea(safeAreaRef) {
         Object.assign(safeAreaRef.current.style, floatingPositionSafeAreaStyle(x, y, placement, anchorRect, calculatedRect));
     };
 }
-function updatePosition(floatingPositionRef, position, rect) {
+function domWriteUpdatePosition(floatingPositionRef, position, rect) {
     if (!floatingPositionRef.current)
         return;
     Object.assign(floatingPositionRef.current.style, {
@@ -32497,7 +32680,11 @@ function updatePosition(floatingPositionRef, position, rect) {
         top: ((rect == null ? void 0 : rect.y) ?? 0) + (position === 'fixed' ? 0 : safeWindow.scrollY) + 'px',
     });
 }
-var FloatingStackingContext = /* @__PURE__ */ React4.createContext(/* @__PURE__ */ new Set());
+var FloatingStackingContext = /* @__PURE__ */ (() => {
+    const Context2 = React4.createContext(/* @__PURE__ */ new Set());
+    Context2.displayName = 'FloatingStackingContext';
+    return Context2;
+})();
 function useDismissFloatingLayer(anchorRef, floatingPositionRef, safeAreaRef, { safeArea, onDismiss, }) {
     const descendantStackingContext = useConstant2(() => /* @__PURE__ */ new Set());
     const ancestorStackingContext = React4.useContext(FloatingStackingContext);
@@ -32604,70 +32791,98 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
     React4.useLayoutEffect(() => {
         if (!refHasValue(anchorRef) || !contentRef.current || !placement || !alignment)
             return;
-        const { position, scrolls, } = getAncestorInfo(anchorRef);
-        const elementRect = contentRef.current.getBoundingClientRect();
-        const initialAnchorRect = anchorRef.current.getBoundingClientRect();
         const offset = {
             x: offsetX ?? 0,
             y: offsetY ?? 0,
         };
-        const getSafePlacementRect = makeGetSafePlacementFloatingPositionRect({
-            placement,
-            alignment,
-            offset,
-            collisionDetectionSize: collisionDetection
-                ? {
-                    width: safeWindow.innerWidth,
-                    height: safeWindow.innerHeight,
-                }
-                : void 0,
-            collisionDetectionPadding,
-        });
-        const [initialSafePlacement, initialCalculatedRect,] = getSafePlacementRect(initialAnchorRect, elementRect);
-        frame.update(() => {
-            updateOrigin(initialSafePlacement);
-        });
-        frame.render(() => {
-            if (!floatingPositionRef.current)
-                return;
-            updatePosition(floatingPositionRef, position, initialCalculatedRect);
-        });
-        const updateSafeArea = createUpdateSafeArea(safeAreaRef);
-        let anchorRect = initialAnchorRect;
+        let getSafePlacementRect;
+        let position;
+        let cleanup;
+        let cleanupHasRun = false;
+        let initialUpdateHasRun = false;
+        let anchorRect;
+        let elementRect;
         let safePlacement;
         let calculatedRect;
+        let scrolls;
         let latestEvent;
-        const onUpdate = () => {
-            updateOrigin(safePlacement);
-        };
+        let updateSafeArea;
         const onRender = () => {
-            updatePosition(floatingPositionRef, position, calculatedRect);
+            if (cleanupHasRun)
+                return;
+            domWriteUpdatePosition(floatingPositionRef, position, calculatedRect);
             if (safeArea)
                 updateSafeArea(anchorRect, calculatedRect, safePlacement, latestEvent);
             latestEvent = void 0;
         };
-        const onRead = () => {
+        const initialRender = () => {
+            updateSafeArea = domWriteCreateUpdateSafeArea(safeAreaRef);
+            if (latestEvent) {
+                onRender();
+            }
+            else {
+                domWriteUpdatePosition(floatingPositionRef, position, calculatedRect);
+            }
+            initialUpdateHasRun = true;
+        };
+        const onUpdate = () => {
+            if (cleanupHasRun)
+                return;
+            updateOrigin(safePlacement);
+        };
+        const domReadUpdateSafePlacementAndRect = () => {
+            if (!getSafePlacementRect || cleanupHasRun)
+                return;
             anchorRect = anchorRef.current.getBoundingClientRect();
             const safePlacementAndRect = getSafePlacementRect(anchorRect, elementRect);
             safePlacement = safePlacementAndRect[0];
             calculatedRect = safePlacementAndRect[1];
-            frame.update(onUpdate);
-            frame.render(onRender);
         };
-        const [loop, cancelAnimationFrameLoop,] = createAnimationFrameLoop(onRead);
-        if (scrolls)
-            loop == null ? void 0 : loop();
-        if (!safeArea)
-            return () => cancelAnimationFrameLoop == null ? void 0 : cancelAnimationFrameLoop();
+        frame.read(() => {
+            if (cleanupHasRun || !contentRef.current)
+                return;
+            const ancestorInfo = domReadGetAncestorInfo(anchorRef);
+            position = ancestorInfo.position;
+            elementRect = contentRef.current.getBoundingClientRect();
+            getSafePlacementRect = makeGetSafePlacementFloatingPositionRect({
+                placement,
+                alignment,
+                offset,
+                collisionDetectionSize: collisionDetection
+                    ? {
+                        width: safeWindow.innerWidth,
+                        height: safeWindow.innerHeight,
+                    }
+                    : void 0,
+                collisionDetectionPadding,
+            });
+            domReadUpdateSafePlacementAndRect();
+            frame.update(onUpdate);
+            frame.render(initialRender);
+            if (!ancestorInfo.scrolls)
+                return;
+            cleanup = domReadStartAnimationFrameLoop(domReadUpdateSafePlacementAndRect);
+        });
+        if (!safeArea) {
+            return () => {
+                cleanup == null ? void 0 : cleanup();
+                cleanupHasRun = true;
+            };
+        }
         const handleMouseMove = (event) => {
             latestEvent = event;
-            frame.read(onRead);
+            if (!initialUpdateHasRun)
+                return;
+            frame.read(domReadUpdateSafePlacementAndRect);
+            frame.update(onUpdate, false, true);
+            frame.render(onRender, false, true);
         };
         const anchor = anchorRef.current;
         anchor.addEventListener('mousemove', handleMouseMove);
         return () => {
-            cancelAnimationFrameLoop == null ? void 0 : cancelAnimationFrameLoop();
             anchor.removeEventListener('mousemove', handleMouseMove);
+            cleanup == null ? void 0 : cleanup();
+            cleanupHasRun = true;
         };
     }, [safeArea, placement, alignment, offsetX, offsetY, anchorRef, collisionDetection, collisionDetectionPadding, updateOrigin,]);
     const descendantContext = useDismissFloatingLayer(anchorRef, floatingPositionRef, safeAreaRef, {
@@ -33325,25 +33540,23 @@ var AnchorLinkTarget = /* @__PURE__ */ ((AnchorLinkTarget2) => {
     AnchorLinkTarget2['_self'] = '_self';
     return AnchorLinkTarget2;
 })(AnchorLinkTarget || {});
-function propsForLink(href, openInNewTab = void 0, trackLinkClick) {
+function propsForLink(href, options) {
     const isInternal = isInternalURL(href);
-    const target = getTargetAttrValue(openInNewTab, isInternal);
-    const rel = !isInternal ? 'noopener' : void 0;
-    href = href === '' || isValidURL(href, isInternal) ? href : `https://${href}`;
-    return trackLinkClick
-        ? {
-            href,
-            target,
-            rel,
-            onClick() {
-                void trackLinkClick(href);
-            },
-        }
-        : {
-            href,
-            target,
-            rel,
+    const props = {
+        href: href === '' || isValidURL(href, isInternal) ? href : `https://${href}`,
+        target: getTargetAttrValue(options == null ? void 0 : options.openInNewTab, isInternal),
+        rel: !isInternal ? combineRels('noopener', options == null ? void 0 : options.rel) : void 0,
+    };
+    if (options == null ? void 0 : options.preserveParams) {
+        props.href = forwardCurrentQueryParams(props.href ?? href);
+        props['data-framer-preserve-params'] = true;
+    }
+    if (options == null ? void 0 : options.trackLinkClick) {
+        props.onClick = () => {
+            void options.trackLinkClick(href);
         };
+    }
+    return props;
 }
 function getTargetAttrValue(openInNewTab, isInternal) {
     if (openInNewTab !== void 0) {
@@ -33351,6 +33564,15 @@ function getTargetAttrValue(openInNewTab, isInternal) {
     }
     return isInternal ? void 0 : '_blank';
 }
+function combineRels(rel, otherRel) {
+    if (rel && !otherRel)
+        return rel;
+    if (!rel && otherRel)
+        return otherRel;
+    if (rel && otherRel)
+        return `${rel} ${otherRel}`;
+    return void 0;
+}
 function linkInfoKey(link) {
     var _a, _b;
     return `${link.scopeId}:${link.nodeId}:${(_a = link.furthestExternalComponent) == null ? void 0 : _a.scopeId}:${(_b = link.furthestExternalComponent) == null ? void 0 : _b.nodeId}`;
@@ -33608,15 +33830,15 @@ function createOnClickLinkHandler(router, routeId, href, trackLinkClick, element
         performNavigation(router, routeId, elementId, combinedPathVariables, smoothScroll, track);
     };
 }
-function propsForRoutePath(href, openInNewTab, router, currentRoute, trackLinkClick, implicitPathVariables, smoothScroll) {
+function propsForRoutePath(href, router, currentRoute, linkOptions, implicitPathVariables) {
     if (!currentRoute)
-        return propsForLink(href, openInNewTab, trackLinkClick);
+        return propsForLink(href, linkOptions);
     const matchedRoute = findMatchingRouteAttributesForResolvedPath(router, href, implicitPathVariables);
     if (!matchedRoute)
-        return propsForLink(href, openInNewTab, trackLinkClick);
+        return propsForLink(href, linkOptions);
     const { routeId, route, elementId, pathVariables, } = matchedRoute;
     if (!route)
-        return propsForLink(href, openInNewTab, trackLinkClick);
+        return propsForLink(href, linkOptions);
     const path = getPathForRoute(route, {
         // If the link is resolved, we trust that the slugs are resolved.
         currentRoutePath: currentRoute.path,
@@ -33629,16 +33851,16 @@ function propsForRoutePath(href, openInNewTab, router, currentRoute, trackLinkCl
         // don't preserve query params for bots
         siteCanonicalURL: router.siteCanonicalURL,
     });
-    const anchorTarget = getTargetAttrValue(openInNewTab, true);
+    const anchorTarget = getTargetAttrValue(linkOptions.openInNewTab, true);
     return {
         href: path,
         target: anchorTarget,
-        onClick: createOnClickLinkHandler(router, routeId, path, trackLinkClick, elementId, pathVariables, smoothScroll),
-        navigate: () => performNavigation(router, routeId, elementId, pathVariables, smoothScroll),
+        onClick: createOnClickLinkHandler(router, routeId, path, linkOptions.trackLinkClick, elementId, pathVariables, linkOptions.smoothScroll),
+        navigate: () => performNavigation(router, routeId, elementId, pathVariables, linkOptions.smoothScroll),
         'data-framer-page-link-current': !elementId && currentRoute.id === routeId || void 0,
     };
 }
-var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(function Link2({ children, href, openInNewTab, smoothScroll, clickTrackingId, nodeId, scopeId, motionChild, ...restProps }, forwardedRef) {
+var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(function Link2({ children, href, openInNewTab, smoothScroll, clickTrackingId, relValues, preserveParams, nodeId, scopeId, motionChild, ...restProps }, forwardedRef) {
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
@@ -33657,7 +33879,13 @@ var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(fun
         if (!pageLink)
             return {};
         if (isString(pageLink)) {
-            return propsForRoutePath(pageLink, openInNewTab, router, currentRoute, trackLinkClick, implicitPathVariables, smoothScroll);
+            return propsForRoutePath(pageLink, router, currentRoute, {
+                openInNewTab,
+                trackLinkClick,
+                rel: relValues == null ? void 0 : relValues.join(' '),
+                preserveParams,
+                smoothScroll,
+            }, implicitPathVariables);
         }
         const { routeId, href: resolvedHref, elementId, pathVariables, } = findMatchingRouteAttributesForWebPageLinkWithSuspense(router, currentRoute, pageLink, activeLocale, implicitPathVariables);
         const anchorTarget = getTargetAttrValue(openInNewTab, true);
@@ -33668,7 +33896,18 @@ var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(fun
             navigate: () => performNavigation(router, routeId, elementId, pathVariables, smoothScroll),
             'data-framer-page-link-current': currentRoute && linkMatchesRoute(currentRoute, pageLink, implicitPathVariables) || void 0,
         };
-    }, [href, router, activeLocale, implicitPathVariables, openInNewTab, currentRoute, smoothScroll, trackLinkClick,]);
+    }, [
+        href,
+        router,
+        activeLocale,
+        implicitPathVariables,
+        openInNewTab,
+        currentRoute,
+        smoothScroll,
+        trackLinkClick,
+        relValues,
+        preserveParams,
+    ]);
     const hasRef = isValidElement(children) && 'ref' in children;
     const observerRef = useObserverRef(hasRef ? children.ref : void 0);
     useRefEffect(observerRef, (node) => {
@@ -34249,6 +34488,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     const scheduleSideEffect = useScheduleRenderSideEffects(dep);
     const startNavigation = useNavigationTransition();
     const monitorNextPaintAfterRender = useMonitorNextPaintAfterRender('framer-route-change');
+    const isInitialNavigationRef = useRef3(true);
     const currentRouteRef = useRef3(initialRoute);
     const currentPathVariablesRef = useRef3(initialPathVariables);
     const currentLocaleIdRef = useRef3(initialLocaleId);
@@ -34302,6 +34542,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                         return;
                     const currentStatePaginationInfo = isHistoryState(window.history.state) ? window.history.state.paginationInfo : void 0;
                     const currentPath = localeResult.path;
+                    isInitialNavigationRef.current = false;
                     currentPathVariablesRef.current = localeResult.pathVariables;
                     currentLocaleIdRef.current = nextLocale.id;
                     const updateURL = async (ignorePushStateWrapper = false) => {
@@ -34333,6 +34574,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         monitorNextPaintAfterRender,
     ]);
     const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL) => {
+        isInitialNavigationRef.current = false;
         const currentRouteId2 = currentRouteRef.current;
         currentRouteRef.current = routeId;
         currentPathVariablesRef.current = pathVariables;
@@ -34430,6 +34672,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     const currentRoute = routes[currentRouteId];
     const currentRoutePath = currentRoute == null ? void 0 : currentRoute.path;
     const pageviewEventData = useSendPageView(currentRoute, currentRouteId, currentPathVariables, collectionUtils, activeLocale);
+    const isInitialNavigation = isInitialNavigationRef.current;
     const api = useMemo2(() => ({
         navigate,
         getRoute,
@@ -34440,6 +34683,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         preserveQueryParams,
         pageviewEventData,
         siteCanonicalURL,
+        isInitialNavigation,
     }), [
         navigate,
         getRoute,
@@ -34450,6 +34694,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         preserveQueryParams,
         siteCanonicalURL,
         pageviewEventData,
+        isInitialNavigation,
     ]);
     if (!currentRoute) {
         throw new Error(`Router cannot find route for ${currentRouteId}`);
@@ -35249,6 +35494,7 @@ var CompatibilityDatabaseCollection = class {
             assert(definition.type !== 'unknown', 'Invalid definition type');
             data2[key7] = {
                 type: definition.type,
+                // biome-ignore lint/suspicious/noExplicitAny: Existing.
                 value,
             };
         }
@@ -35553,6 +35799,23 @@ function castRichText(value) {
     }
     return null;
 }
+function compareVectorSetItem(left, right) {
+    const leftValue = left.value;
+    const rightValue = right.value;
+    if (leftValue < rightValue)
+        return -1;
+    if (leftValue > rightValue)
+        return 1;
+    return 0;
+}
+function castVectorSetItem(value) {
+    switch (value == null ? void 0 : value.type) {
+        case 'vectorsetitem': {
+            return value;
+        }
+    }
+    return null;
+}
 function compareString(left, right, collation11) {
     let leftValue = left.value;
     let rightValue = right.value;
@@ -35614,6 +35877,8 @@ var DatabaseValue = {
                 return castRichText(value);
             case 'string':
                 return castString(value);
+            case 'vectorsetitem':
+                return castVectorSetItem(value);
             case 'unknown':
                 return value;
             default:
@@ -35795,6 +36060,8 @@ var DatabaseValue = {
                 return `'${value.value}' /* Date */`;
             case 'richtext':
                 return 'RichText';
+            case 'vectorsetitem':
+                return 'VectorSetItem';
             case 'responsiveimage':
                 return 'ResponsiveImage';
             case 'file':
@@ -35858,6 +36125,10 @@ function compare(left, right, collation11) {
             assert(left.type === right.type);
             return compareRichText(left, right);
         }
+        case 'vectorsetitem': {
+            assert(left.type === right.type);
+            return compareVectorSetItem(left, right);
+        }
         case 'string': {
             assert(left.type === right.type);
             return compareString(left, right, collation11);
@@ -36098,7 +36369,7 @@ function calculateHash(name, ...values) {
     });
     return Hash(`${name}(${hashes.join(', ')})`);
 }
-var RichText = class {
+var RichTextResolver = class {
     constructor(data2, pointer) {
         this.data = data2;
         this.pointer = pointer;
@@ -36109,6 +36380,18 @@ var RichText = class {
         return this.cached;
     }
 };
+var VectorSetItemResolver = class {
+    constructor(data2, pointer) {
+        this.data = data2;
+        this.pointer = pointer;
+        __publicField(this, 'cached');
+    }
+    resolve() {
+        assert(this.data.resolveVectorSetItem, 'Can\'t resolve vector set item.');
+        this.cached ??= this.data.resolveVectorSetItem(this.pointer);
+        return this.cached;
+    }
+};
 var VIRTUAL_INDEX_FIELD = 'index';
 var Metadata = class extends Set {
     merge(other) {
@@ -36203,7 +36486,14 @@ var FieldMetadata = class {
             assert(this.collection, 'Rich text field must have a collection');
             return {
                 type: 'richtext',
-                value: new RichText(this.collection.data, value.value),
+                value: new RichTextResolver(this.collection.data, value.value),
+            };
+        }
+        if ((value == null ? void 0 : value.type) === 'vectorsetitem') {
+            assert(this.collection, 'Vector set item field must have a collection');
+            return {
+                type: 'vectorsetitem',
+                value: new VectorSetItemResolver(this.collection.data, value.value),
             };
         }
         return value ?? null;
@@ -39207,10 +39497,14 @@ var EnforcerResolve = class _EnforcerResolve extends EnforcerNode {
         for (const tuple of input.tuples) {
             for (const field of this.fields) {
                 const value = tuple.getValue(field);
-                if ((value == null ? void 0 : value.type) !== 'richtext')
-                    continue;
-                assert(value.value instanceof RichText, 'Pointer must be wrapped');
-                void value.value.resolve();
+                if ((value == null ? void 0 : value.type) === 'richtext') {
+                    assert(value.value instanceof RichTextResolver, 'Pointer must be wrapped');
+                    void value.value.resolve();
+                }
+                else if ((value == null ? void 0 : value.type) === 'vectorsetitem') {
+                    assert(value.value instanceof VectorSetItemResolver, 'Pointer must be wrapped');
+                    void value.value.resolve();
+                }
             }
         }
         const collectionItems = yield Promise.all(Array.from(collections).map(async (collection) => {
@@ -39543,7 +39837,11 @@ ${stringifyQuery(query)}`);
     }
     async resolveValue(value) {
         if ((value == null ? void 0 : value.type) === 'richtext') {
-            assert(value.value instanceof RichText, 'Pointer must be wrapped');
+            assert(value.value instanceof RichTextResolver, 'Pointer must be wrapped');
+            return value.value.resolve();
+        }
+        if ((value == null ? void 0 : value.type) === 'vectorsetitem') {
+            assert(value.value instanceof VectorSetItemResolver, 'Pointer must be wrapped');
             return value.value.resolve();
         }
         if ((value == null ? void 0 : value.type) === 'array') {
@@ -40520,9 +40818,9 @@ function useRunCallbackIfElementIsInView() {
             queuedMicrotask = true;
             queueMicrotask(() => {
                 var _a;
+                queuedMicrotask = false;
                 if (!isInViewRef.current)
                     return;
-                queuedMicrotask = false;
                 (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef);
             });
         };
@@ -40812,6 +41110,11 @@ function tryToApplyOverride(Component17, override) {
 function valueWithMirroring(value, mirror) {
     return mirror ? wrap(0, 2, value) : value;
 }
+function singleFrame() {
+    return new Promise((resolve) => {
+        frame.postRender(() => resolve());
+    });
+}
 var withV1StrokeFX = (Component17) => forwardRef((props, forwardedRef) => {
     const { strokeEffectLength, strokeEffectGap, strokeEffectOffset, strokeEffectLoop, strokeEffectTotalLength, strokeEffectLoopType, pathLengthTransition, ...restProps } = props;
     const isCanvas = isStaticRenderer();
@@ -40829,11 +41132,11 @@ var withV1StrokeFX = (Component17) => forwardRef((props, forwardedRef) => {
             while (true) {
                 if (signal.signal.aborted)
                     break;
-                const mirror = strokeEffectLoopType === 'mirror';
+                const mirror = strokeEffectLoop && strokeEffectLoopType === 'mirror';
                 const from = valueWithMirroring(index, mirror);
                 const to = valueWithMirroring(index + 1, mirror);
-                await animate(offset, [from, to,], pathLengthTransition);
-                if (!strokeEffectLoop && !mirror)
+                await Promise.all([animate(offset, [from, to,], pathLengthTransition), singleFrame(),]);
+                if (!strokeEffectLoop)
                     break;
                 if (strokeEffectLoop && strokeEffectLoopType === 'repeat')
                     continue;
@@ -42002,6 +42305,8 @@ var variantsNameToWeight = {
     extrabold: 800,
     'extrabold-italic': 800,
     black: 900,
+    extralight: 100,
+    'extralight-italic': 100,
     'black-italic': 900,
     'extra-italic': 900,
     'extra-italic-bold': 900,
@@ -42270,7 +42575,7 @@ async function loadFontsWithOpenType(source) {
             return supportedFonts == null ? void 0 : supportedFonts.default;
         }
         case 'fontshare': {
-            const supportedFonts = await import('./framer-chunks/fontshare-G3KSKQMF-6RG7QQ3J.js');
+            const supportedFonts = await import('./framer-chunks/fontshare-GSJIWLGZ-3DSFZVD7.js');
             return supportedFonts == null ? void 0 : supportedFonts.default;
         }
         default:
@@ -42284,7 +42589,7 @@ async function loadFontToOpenTypeFeatures(source) {
             return features == null ? void 0 : features.default;
         }
         case 'fontshare': {
-            const features = await import('./framer-chunks/fontshare-PSV545VO-KUZ52D7F.js');
+            const features = await import('./framer-chunks/fontshare-SSHBFVID-JIQZ2OLR.js');
             return features == null ? void 0 : features.default;
         }
         case 'framer': {
@@ -42808,10 +43113,10 @@ function loadVariationAxes(source) {
             const axes = (async () => {
                 switch (source) {
                     case 'google': {
-                        return (await import('./framer-chunks/google-LMM7WH6E-5EU2EAFQ.js')).default;
+                        return (await import('./framer-chunks/google-42BCYVR5-QT55MZO3.js')).default;
                     }
                     case 'fontshare': {
-                        return (await import('./framer-chunks/fontshare-YYTAVKI7-DXLAG4CY.js')).default;
+                        return (await import('./framer-chunks/fontshare-X6MCIXW5-UOB5XTBQ.js')).default;
                     }
                     default:
                         assertNever(source);
@@ -42993,11 +43298,12 @@ var FontStore = class {
         if (builtInFontLocator) {
             const fontVariant = BuiltInFontSource.parseVariant(builtInFontLocator.variant);
             if (isSuccessfullyParsedFontVariant(fontVariant)) {
+                const family = builtInFontLocator.isVariable ? createVariableFontFamilyName(builtInFontLocator.name) : builtInFontLocator.name;
                 return {
                     style: fontVariant.style,
                     weight: fontVariant.weight,
                     variant: builtInFontLocator.variant,
-                    family: builtInFontLocator.name,
+                    family,
                     source: 'builtIn',
                     category: void 0,
                 };
@@ -43762,14 +44068,103 @@ var trimSlugRegExp = /^-+|-+$/gu;
 function slugify(value) {
     return value.toLowerCase().replace(nonSlugCharactersRegExp, '-').replace(trimSlugRegExp, '');
 }
-var htmlRegExp = /[&<>'"]/gu;
-var escapeHTML = (str) => str.replace(htmlRegExp, (tag) => ({
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '\'': '&#39;',
-    '"': '&quot;',
-})[tag] || tag);
+var frameFromElement = (element) => {
+    const frame2 = Rect.fromRect(element.getBoundingClientRect());
+    frame2.x = frame2.x + safeWindow.scrollX;
+    frame2.y = frame2.y + safeWindow.scrollY;
+    return frame2;
+};
+var frameFromElements = (elements) => {
+    return Rect.merge(...elements.map(frameFromElement));
+};
+var convertToPageFrame = (frame2, element) => {
+    const point2 = convertToPagePoint(frame2, element);
+    return {
+        x: point2.x,
+        y: point2.y,
+        width: frame2.width,
+        height: frame2.height,
+    };
+};
+var convertFromPageFrame = (frame2, element) => {
+    const point2 = convertFromPagePoint(frame2, element);
+    return {
+        x: point2.x,
+        y: point2.y,
+        width: frame2.width,
+        height: frame2.height,
+    };
+};
+var getPageFrame = (element) => {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.left + safeWindow.scrollX,
+        y: rect.top + safeWindow.scrollY,
+        width: rect.width,
+        height: rect.height,
+    };
+};
+var fromEventForPage = (event) => {
+    return {
+        x: event.pageX,
+        y: event.pageY,
+    };
+};
+var fromEventForClient = (event) => {
+    return {
+        x: event.clientX,
+        y: event.clientY,
+    };
+};
+var convertToPagePoint = (point2, element) => {
+    const frame2 = getPageFrame(element);
+    return {
+        x: point2.x + frame2.x,
+        y: point2.y + frame2.y,
+    };
+};
+var convertFromPagePoint = (point2, element) => {
+    const frame2 = getPageFrame(element);
+    return {
+        x: point2.x - frame2.x,
+        y: point2.y - frame2.y,
+    };
+};
+var dispatchKeyDownEvent = (keyCode, options = {}) => {
+    const keyboardEvent = new KeyboardEvent('keydown', {
+        bubbles: true,
+        keyCode,
+        ...options,
+    });
+    const activeElement = document.activeElement;
+    if (activeElement) {
+        activeElement.dispatchEvent(keyboardEvent);
+    }
+};
+var DOM = {
+    frameFromElement,
+    frameFromElements,
+    convertToPageFrame,
+    convertFromPageFrame,
+    getPageFrame,
+    fromEventForPage,
+    fromEventForClient,
+    convertToPagePoint,
+    convertFromPagePoint,
+};
+var parser;
+var supportsNativeParseHTML = /* @__PURE__ */ (() => 
+// Firefox has rare-random issues with the native parser: https://framer-team.slack.com/archives/C01B14R6E22/p1724159313153969
+!isFirefox() && typeof Document !== 'undefined' && typeof Document.parseHTMLUnsafe === 'function')();
+function domParser(html, type) {
+    if (supportsNativeParseHTML && !type)
+        return Document.parseHTMLUnsafe(html);
+    parser ??= new DOMParser();
+    return parser.parseFromString(html, type ?? 'text/html');
+}
+function escapeHTML(value) {
+    return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll('\'', '&#39;');
+}
 var regex = /(<([a-z]+)(?:\s+(?!href[\s=])[^=\s]+=(?:'[^']*'|"[^"]*"))*)(?:(\s+href\s*=)(?:'([^']*)'|"([^"]*)"))?((?:\s+[^=\s]+=(?:'[^']*'|"[^"]*"))*>)/gi;
 function replaceFramerPageLinks(rawHTML, getRoute, currentRoute, implicitPathVariables) {
     return rawHTML.replace(regex, (original, pre1, tag, pre2, value1, value2, post) => {
@@ -43814,18 +44209,6 @@ function replaceFramerPageLinks(rawHTML, getRoute, currentRoute, implicitPathVar
 function isShallowEqualArray(a, b) {
     return a.length === b.length && a.every((v, i) => v === b[i]);
 }
-var htmlEscapes = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    '\'': '&#39;',
-};
-var reUnescapedHtml = /[&<>"']/gu;
-var reHasUnescapedHtml = /* @__PURE__ */ (() => new RegExp(reUnescapedHtml.source))();
-function escapeHTML2(str) {
-    return str && reHasUnescapedHtml.test(str) ? str.replace(reUnescapedHtml, (chr) => htmlEscapes[chr] ?? '') : str || '';
-}
 var deprecatedRichTextPlaceholder = '{{ text-placeholder }}';
 var richTextWrapperClassName = 'rich-text-wrapper';
 var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props, forwardedRef) {
@@ -43850,14 +44233,14 @@ var DeprecatedRichText = /* @__PURE__ */ React2.forwardRef(function Text(props,
     }
     let innerHTML = '';
     if (textOrOverride) {
-        const escapedText = escapeHTML2(textOrOverride);
+        const escapedText = escapeHTML(textOrOverride);
         innerHTML = __htmlStructure ? __htmlStructure.replace(deprecatedRichTextPlaceholder, escapedText) : `<p>${escapedText}</p>`;
     }
     else if (html) {
         innerHTML = html;
     }
     else if (textFromDesign) {
-        const escapedText = escapeHTML2(textFromDesign);
+        const escapedText = escapeHTML(textFromDesign);
         innerHTML = __htmlStructure ? __htmlStructure.replace(deprecatedRichTextPlaceholder, escapedText) : `<p>${escapedText}</p>`;
     }
     else if (htmlFromDesign) {
@@ -44421,13 +44804,21 @@ function createLineGroups(elements) {
     groups2.push(currentGroup);
     return groups2;
 }
-var FitText = /* @__PURE__ */ forwardRef(({ viewBoxScale, viewBox, children, ...props }, ref) => {
+var BaseSVG = /* @__PURE__ */ forwardRef(function BaseSVG2(props, forwardedRef) {
     return (
     // biome-ignore lint/a11y/noSvgWithoutTitle: FIXME: FitText might be inaccessible to screen readers because it’s wrapped in an svg
     /* @__PURE__ */
-    jsx3(motion.svg, {
-        ref,
+    jsx3('svg', {
         ...props,
+        ref: forwardedRef,
+        children: props.children,
+    }));
+});
+var MotionSVG = /* @__PURE__ */ motion.create(BaseSVG);
+var FitText = /* @__PURE__ */ forwardRef(function FitText2({ viewBoxScale, viewBox, children, ...props }, forwardedRef) {
+    return /* @__PURE__ */ jsx3(MotionSVG, {
+        ...props,
+        ref: forwardedRef,
         viewBox,
         children: /* @__PURE__ */ jsx3(motion.foreignObject, {
             width: '100%',
@@ -44440,16 +44831,18 @@ var FitText = /* @__PURE__ */ forwardRef(({ viewBoxScale, viewBox, children, ...
             },
             children,
         }),
-    }));
+    });
 });
-var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(props, ref) {
-    const { __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, anchorLinkOffsetY, as: _as, bottom, center, children, environment: environment2 = RenderTarget.current, fonts = [], height, isEditable = false, left, name, opacity, positionSticky, positionStickyBottom, positionStickyLeft, positionStickyRight, positionStickyTop, right, rotation = 0, style: style2, _initialStyle, stylesPresetsClassNames, text: plainText, top, verticalAlignment = 'top', visible = true, width, withExternalLayout = false, viewBox, viewBoxScale = 1, effect, ...rest } = props;
+var defaultFonts = [];
+var richTextContainerComponentType = 'RichTextContainer';
+var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(props, forwardedRef) {
+    const { __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, anchorLinkOffsetY, as: _as, bottom, center, children, environment: environment2 = RenderTarget.current, fonts = defaultFonts, height, isEditable = false, left, name, opacity, positionSticky, positionStickyBottom, positionStickyLeft, positionStickyRight, positionStickyTop, right, rotation = 0, style: style2, _initialStyle, stylesPresetsClassNames, text: plainText, top, verticalAlignment = 'top', visible = true, width, withExternalLayout = false, viewBox, viewBoxScale = 1, effect, ...rest } = props;
     const parentSize = useParentSize();
     const isOnCanvas = useIsOnFramerCanvas();
     const inCodeComponent = useContext(ComponentContainerContext);
     const layoutId = useLayoutId2(props);
     const fallbackRef = useRef3(null);
-    const containerRef = ref ?? fallbackRef;
+    const containerRef = forwardedRef ?? fallbackRef;
     useMeasureLayout(props, containerRef);
     useLoadFonts(fonts, __fromCanvasComponent, containerRef);
     useInsertionEffect(() => {
@@ -44518,6 +44911,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
         rest.layout = 'preserve-aspect';
     }
     const Component17 = htmlElementAsMotionComponent(props.as);
+    const dataFramerName = rest['data-framer-name'] ?? name;
     if (isString(props.viewBox)) {
         if (props.as !== void 0) {
             return /* @__PURE__ */ jsx3(Component17, {
@@ -44526,8 +44920,8 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
                 style: containerStyle,
                 layoutId,
                 transformTemplate: template,
-                'data-framer-name': rest['data-framer-name'] ?? name,
-                'data-framer-component-type': 'RichTextContainer',
+                'data-framer-name': dataFramerName,
+                'data-framer-component-type': richTextContainerComponentType,
                 children: /* @__PURE__ */ jsx3(FitText, {
                     viewBox,
                     viewBoxScale,
@@ -44548,8 +44942,8 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
                 viewBox,
                 viewBoxScale,
                 transformTemplate: template,
-                'data-framer-name': rest['data-framer-name'] ?? name,
-                'data-framer-component-type': 'RichTextContainer',
+                'data-framer-name': dataFramerName,
+                'data-framer-component-type': richTextContainerComponentType,
                 children: processedChildren,
             });
         }
@@ -44560,8 +44954,8 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
         style: containerStyle,
         layoutId,
         transformTemplate: template,
-        'data-framer-name': rest['data-framer-name'] ?? name,
-        'data-framer-component-type': 'RichTextContainer',
+        'data-framer-name': dataFramerName,
+        'data-framer-component-type': richTextContainerComponentType,
         children: processedChildren,
     });
 });
@@ -44637,7 +45031,7 @@ function extractTextFromReactNode(node) {
     }
     return '';
 }
-var RichText2 = /* @__PURE__ */ forwardRef(function RichText3({ children, html, htmlFromDesign, ...props }, ref) {
+var RichText = /* @__PURE__ */ forwardRef(function RichText2({ children, html, htmlFromDesign, ...props }, forwardedRef) {
     const content = html || children || htmlFromDesign;
     if (isString(content)) {
         if (!props.stylesPresetsClassName && isObject2(props.stylesPresetsClassNames)) {
@@ -44650,7 +45044,7 @@ var RichText2 = /* @__PURE__ */ forwardRef(function RichText3({ children, html,
         return /* @__PURE__ */ jsx3(DeprecatedRichText, {
             ...props,
             ...contentProp,
-            ref,
+            ref: forwardedRef,
         });
     }
     if (!props.stylesPresetsClassNames && isString(props.stylesPresetsClassName)) {
@@ -44670,7 +45064,7 @@ var RichText2 = /* @__PURE__ */ forwardRef(function RichText3({ children, html,
     }
     return /* @__PURE__ */ jsx3(RichTextContainer, {
         ...props,
-        ref,
+        ref: forwardedRef,
         children: isValidElement(content) ? content : void 0,
     });
 });
@@ -44876,100 +45270,6 @@ var ImagePatternElement = ({ id: id3, path, transform: transform2, repeat, width
         }, href),
     });
 };
-var frameFromElement = (element) => {
-    const frame2 = Rect.fromRect(element.getBoundingClientRect());
-    frame2.x = frame2.x + safeWindow.scrollX;
-    frame2.y = frame2.y + safeWindow.scrollY;
-    return frame2;
-};
-var frameFromElements = (elements) => {
-    return Rect.merge(...elements.map(frameFromElement));
-};
-var convertToPageFrame = (frame2, element) => {
-    const point2 = convertToPagePoint(frame2, element);
-    return {
-        x: point2.x,
-        y: point2.y,
-        width: frame2.width,
-        height: frame2.height,
-    };
-};
-var convertFromPageFrame = (frame2, element) => {
-    const point2 = convertFromPagePoint(frame2, element);
-    return {
-        x: point2.x,
-        y: point2.y,
-        width: frame2.width,
-        height: frame2.height,
-    };
-};
-var getPageFrame = (element) => {
-    const rect = element.getBoundingClientRect();
-    return {
-        x: rect.left + safeWindow.scrollX,
-        y: rect.top + safeWindow.scrollY,
-        width: rect.width,
-        height: rect.height,
-    };
-};
-var fromEventForPage = (event) => {
-    return {
-        x: event.pageX,
-        y: event.pageY,
-    };
-};
-var fromEventForClient = (event) => {
-    return {
-        x: event.clientX,
-        y: event.clientY,
-    };
-};
-var convertToPagePoint = (point2, element) => {
-    const frame2 = getPageFrame(element);
-    return {
-        x: point2.x + frame2.x,
-        y: point2.y + frame2.y,
-    };
-};
-var convertFromPagePoint = (point2, element) => {
-    const frame2 = getPageFrame(element);
-    return {
-        x: point2.x - frame2.x,
-        y: point2.y - frame2.y,
-    };
-};
-var dispatchKeyDownEvent = (keyCode, options = {}) => {
-    const keyboardEvent = new KeyboardEvent('keydown', {
-        bubbles: true,
-        keyCode,
-        ...options,
-    });
-    const activeElement = document.activeElement;
-    if (activeElement) {
-        activeElement.dispatchEvent(keyboardEvent);
-    }
-};
-var DOM = {
-    frameFromElement,
-    frameFromElements,
-    convertToPageFrame,
-    convertFromPageFrame,
-    getPageFrame,
-    fromEventForPage,
-    fromEventForClient,
-    convertToPagePoint,
-    convertFromPagePoint,
-};
-var parser;
-var supportsNativeParseHTML = /* @__PURE__ */ (() => 
-// Firefox has rare-random issues with the native parser: https://framer-team.slack.com/archives/C01B14R6E22/p1724159313153969
-!isFirefox() && typeof Document !== 'undefined' && typeof Document.parseHTMLUnsafe === 'function')();
-function domParser(html, type) {
-    if (supportsNativeParseHTML && !type)
-        return Document.parseHTMLUnsafe(html);
-    parser ??= new DOMParser();
-    return parser.parseFromString(html, type ?? 'text/html');
-}
 var useDOM = /* @__PURE__ */ isBrowser2();
 var SharedSVGEntry = class {
     constructor(id3, svg, innerHTML, viewBox, count = 0) {
@@ -46326,7 +46626,7 @@ var Vector = /* @__PURE__ */ (() => {
     return _a = class extends Layer {
         render() {
             countNodeRender();
-            const { opacity, calculatedPath, calculatedPathBoundingBox, d, insideStroke, strokeEnabled, strokeClipId, strokeWidth, idAttribute, shadows, strokeAlpha, name, includeTransform, isRootVectorNode, rotation, id: id3, lineCap, lineJoin, strokeColor, strokeMiterLimit, strokeDashArray, strokeDashOffset, fill, variants, transition, fillOpacity, visible, x, y, width, height, } = this.props;
+            const { opacity, calculatedPath, calculatedPathBoundingBox, d, insideStroke, strokeEnabled, strokeClipId, strokeWidth, idAttribute, shadows, name, includeTransform, isRootVectorNode, rotation, id: id3, lineCap, lineJoin, strokeColor, strokeMiterLimit, strokeDashArray, strokeDashOffset, fill, variants, transition, fillOpacity, visible, x, y, width, height, } = this.props;
             if (!visible)
                 return null;
             if (!id3 || !strokeClipId)
@@ -46425,7 +46725,7 @@ var Vector = /* @__PURE__ */ (() => {
             // Shadow filter uses 'objectBoundingBox' as filter units, so calculations should be
             // relative to the referenced object itself (path), instead of the node rect, which
             // can be larger than the path bounding box.
-            calculatedPathBoundingBox, internalShapeId, strokeAlpha, strokeWidth, internalStrokeClipId, svgStrokeAttributes);
+            calculatedPathBoundingBox, internalShapeId, Boolean(fill), strokeEnabled, strokeWidth, internalStrokeClipId, svgStrokeAttributes);
             const currentName = target === RenderTarget.preview ? name || void 0 : void 0;
             if (shadow.insetElement !== null || shadow.outsetElement !== null || insideStroke) {
                 pathAttributes.id = internalShapeId.id;
@@ -46993,8 +47293,8 @@ var package_default = {
     scripts: {
         coverage: 'yarn :jest --coverage',
         lint: 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet --cache',
-        'lint:ci': 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet --cache --cache-strategy content',
-        'lint:fix': 'yarn lint --fix --cache',
+        'lint:ci': 'yarn lint --cache-strategy content --cache-location $HOME/.cache/eslint/framer-library',
+        'lint:fix': 'yarn lint --fix',
         test: 'yarn :jest',
         watch: 'yarn :jest --watch',
         postinstall: 'node postinstall.cjs',
@@ -47053,7 +47353,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop2.start();
 }
-export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addAttrValue, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addStyleValue, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, attachSpring, attrEffect, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, Instance, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isHTMLElement, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isObject, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isSVGElement, isSVGSVGElement, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, propEffect, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText2 as RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, springValue, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, svgEffect, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useSVGTemplate, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldToMain, };
+export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addAttrValue, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addStyleValue, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, attachSpring, attrEffect, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, Instance, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isHTMLElement, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isObject, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isSVGElement, isSVGSVGElement, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, propEffect, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, resize, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, springValue, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, svgEffect, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMetadata, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useSVGTemplate, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldToMain, };
 //! Credit to Astro | MIT License
 /**
  * @license Emotion v11.0.0