unframer 2.26.0 → 2.27.0

package/dist/framer.js

@@ -193,6 +193,7 @@ exports.recordStats = recordStats;
 exports.removeHiddenBreakpointLayers = removeHiddenBreakpointLayers;
 exports.removeHiddenBreakpointLayersV2 = removeHiddenBreakpointLayersV2;
 exports.removeItem = removeItem;
+exports.resize = resize;
 exports.resolveElements = resolveElements;
 exports.resolveLink = resolveLink;
 exports.resolveMotionValue = resolveMotionValue;
@@ -269,6 +270,7 @@ exports.useLocaleInfo = useLocaleInfo;
 exports.useLocalesForCurrentRoute = useLocalesForCurrentRoute;
 exports.useLocalizationInfo = useLocalizationInfo;
 exports.useMeasureLayout = useMeasureLayout;
+exports.useMetadata = useMetadata;
 exports.useMotionTemplate = useMotionTemplate;
 exports.useMotionValue = useMotionValue;
 exports.useMotionValueEvent = useMotionValueEvent;
@@ -322,7 +324,7 @@ exports.withShape = withShape;
 exports.yieldToMain = yieldToMain;
 exports.Router = Router;
 const chunk_A2PMVMFI_js_1 = require("./framer-chunks/chunk-A2PMVMFI.js");
-// /:https://app.framerstatic.com/chunk-A6RUM2JZ.mjs
+// /:https://app.framerstatic.com/chunk-BLFSVU7M.mjs
 const react_1 = require("react");
 const react_2 = require("react");
 const react_3 = require("react");
@@ -3812,6 +3814,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 = () => {
@@ -3934,9 +4029,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';
 }
@@ -8471,6 +8563,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);
@@ -9263,100 +9356,6 @@ exports.domMin = domMin;
 function useMotionValueEvent(value, event, callback) {
     (0, react_5.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,
@@ -10959,7 +10958,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
 const react_10 = require("react");
 const react_11 = __importDefault(require("react"));
 const react_12 = require("react");
@@ -14249,6 +14248,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))
@@ -14436,6 +14627,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,
@@ -14564,30 +14758,6 @@ function Point(x, y) {
     }
     Point2.sortClockwise = sortClockwise;
 })(Point || (exports.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,
@@ -16790,7 +16960,10 @@ var Loop = class extends EventEmitter {
 var MainLoop = /* @__PURE__ */ new Loop();
 exports.MainLoop = MainLoop;
 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) {
@@ -18013,11 +18186,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 */
@@ -18181,13 +18364,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);
@@ -18491,20 +18674,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),
@@ -19229,6 +19398,7 @@ var ControlType = /* @__PURE__ */ ((ControlType2) => {
     ControlType2['MultiCollectionReference'] = 'multicollectionreference';
     ControlType2['TrackingId'] = 'trackingid';
     ControlType2['VectorSetItem'] = 'vectorsetitem';
+    ControlType2['LinkRelValues'] = 'linkrelvalues';
     return ControlType2;
 })(ControlType || {});
 exports.ControlType = ControlType;
@@ -20599,6 +20769,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)) {
@@ -22423,7 +22595,7 @@ function OptimizedCanvasImage({ nodeId, image, containerSize, }) {
     });
 }
 function BackgroundImageComponent({ layoutId, image, ...props }) {
-    const { motionDivToDiv, } = useLibraryFeatures();
+    const { motionDivToDivBackgroundImage, } = useLibraryFeatures();
     if (layoutId) {
         layoutId += '-background';
     }
@@ -22437,6 +22609,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,
@@ -22445,15 +22618,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;
@@ -22484,7 +22649,7 @@ function BackgroundImageComponent({ layoutId, image, ...props }) {
         ...wrapperStyle,
         ...getPlaceholderStyle(),
     };
-    return needsMotion || !motionDivToDiv
+    return needsMotion || !motionDivToDivBackgroundImage
         ? /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.div, {
             layoutId,
             style: style2,
@@ -22634,7 +22799,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;
@@ -23965,39 +24138,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);
             },
         };
     });
@@ -24014,32 +24207,22 @@ function useObserverRef(forwardedRef) {
     });
 }
 function useRefEffect(ref, effect, deps) {
-    var _a;
     const effectRef = (0, react_4.useRef)();
     const depsChangedRef = (0, react_4.useRef)();
     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) {
@@ -26818,7 +27001,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;
@@ -26905,6 +27088,7 @@ function shadowForShape(boxShadows, rect, shapeId, strokeAlpha, strokeWidth, str
                 /* @__PURE__ */ (0, jsx_runtime_1.jsx)('use', {
                     href: shapeId.link,
                     fill: 'black',
+                    fillOpacity: fillEnabled ? void 0 : 0,
                 }),
             ],
         });
@@ -26915,9 +27099,10 @@ function shadowForShape(boxShadows, rect, shapeId, strokeAlpha, strokeWidth, str
             children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)('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,
             }),
@@ -31205,7 +31390,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;
@@ -31217,8 +31402,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,
@@ -31816,8 +32005,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) {
@@ -31876,9 +32070,7 @@ var withFX = (Component17) => react_11.default.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);
@@ -31886,16 +32078,10 @@ var withFX = (Component17) => react_11.default.forwardRef((props, forwardedRef)
     const { values: appearEffectValues, style: scrollAppearStyle, } = useStyleAppearEffect(styleAppear, observerRef);
     const { values: loopValues, style: loopStyle, } = useLoop(loop, observerRef);
     const fxValues = react_11.default.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,],
@@ -31909,7 +32095,7 @@ var withFX = (Component17) => react_11.default.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);
@@ -32986,7 +33172,7 @@ function motionOriginFromFloatingPosition(placement = 'bottom', alignment = 'cen
             assertNever(placement);
     }
 }
-function getAncestorInfo(anchorRef) {
+function domReadGetAncestorInfo(anchorRef) {
     var _a;
     let el = anchorRef.current;
     const info = {
@@ -33006,12 +33192,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) => {
@@ -33023,7 +33208,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, {
@@ -33034,7 +33219,11 @@ function updatePosition(floatingPositionRef, position, rect) {
         top: ((rect == null ? void 0 : rect.y) ?? 0) + (position === 'fixed' ? 0 : safeWindow.scrollY) + 'px',
     });
 }
-var FloatingStackingContext = /* @__PURE__ */ react_11.default.createContext(/* @__PURE__ */ new Set());
+var FloatingStackingContext = /* @__PURE__ */ (() => {
+    const Context2 = react_11.default.createContext(/* @__PURE__ */ new Set());
+    Context2.displayName = 'FloatingStackingContext';
+    return Context2;
+})();
 function useDismissFloatingLayer(anchorRef, floatingPositionRef, safeAreaRef, { safeArea, onDismiss, }) {
     const descendantStackingContext = useConstant2(() => /* @__PURE__ */ new Set());
     const ancestorStackingContext = react_11.default.useContext(FloatingStackingContext);
@@ -33141,70 +33330,98 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
     react_11.default.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, {
@@ -33867,25 +34084,23 @@ var AnchorLinkTarget = /* @__PURE__ */ ((AnchorLinkTarget2) => {
     return AnchorLinkTarget2;
 })(AnchorLinkTarget || {});
 exports.AnchorLinkTarget = 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) {
@@ -33893,6 +34108,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}`;
@@ -34151,15 +34375,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,
@@ -34172,16 +34396,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__ */ (0, react_7.forwardRef)(function Link2({ children, href, openInNewTab, smoothScroll, clickTrackingId, nodeId, scopeId, motionChild, ...restProps }, forwardedRef) {
+var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, react_7.forwardRef)(function Link2({ children, href, openInNewTab, smoothScroll, clickTrackingId, relValues, preserveParams, nodeId, scopeId, motionChild, ...restProps }, forwardedRef) {
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
@@ -34200,7 +34424,13 @@ var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, react_7.fo
         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);
@@ -34211,7 +34441,18 @@ var Link = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, react_7.fo
             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 = (0, react_6.isValidElement)(children) && 'ref' in children;
     const observerRef = useObserverRef(hasRef ? children.ref : void 0);
     useRefEffect(observerRef, (node) => {
@@ -34796,6 +35037,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     const scheduleSideEffect = useScheduleRenderSideEffects(dep);
     const startNavigation = useNavigationTransition();
     const monitorNextPaintAfterRender = useMonitorNextPaintAfterRender('framer-route-change');
+    const isInitialNavigationRef = (0, react_4.useRef)(true);
     const currentRouteRef = (0, react_4.useRef)(initialRoute);
     const currentPathVariablesRef = (0, react_4.useRef)(initialPathVariables);
     const currentLocaleIdRef = (0, react_4.useRef)(initialLocaleId);
@@ -34849,6 +35091,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) => {
@@ -34880,6 +35123,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         monitorNextPaintAfterRender,
     ]);
     const setCurrentRouteId = (0, react_3.useCallback)((routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL) => {
+        isInitialNavigationRef.current = false;
         const currentRouteId2 = currentRouteRef.current;
         currentRouteRef.current = routeId;
         currentPathVariablesRef.current = pathVariables;
@@ -34977,6 +35221,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 = (0, react_4.useMemo)(() => ({
         navigate,
         getRoute,
@@ -34987,6 +35232,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         preserveQueryParams,
         pageviewEventData,
         siteCanonicalURL,
+        isInitialNavigation,
     }), [
         navigate,
         getRoute,
@@ -34997,6 +35243,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         preserveQueryParams,
         siteCanonicalURL,
         pageviewEventData,
+        isInitialNavigation,
     ]);
     if (!currentRoute) {
         throw new Error(`Router cannot find route for ${currentRouteId}`);
@@ -35800,6 +36047,7 @@ var CompatibilityDatabaseCollection = class {
             assert(definition.type !== 'unknown', 'Invalid definition type');
             data2[key7] = {
                 type: definition.type,
+                // biome-ignore lint/suspicious/noExplicitAny: Existing.
                 value,
             };
         }
@@ -36104,6 +36352,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;
@@ -36165,6 +36430,8 @@ var DatabaseValue = {
                 return castRichText(value);
             case 'string':
                 return castString(value);
+            case 'vectorsetitem':
+                return castVectorSetItem(value);
             case 'unknown':
                 return value;
             default:
@@ -36346,6 +36613,8 @@ var DatabaseValue = {
                 return `'${value.value}' /* Date */`;
             case 'richtext':
                 return 'RichText';
+            case 'vectorsetitem':
+                return 'VectorSetItem';
             case 'responsiveimage':
                 return 'ResponsiveImage';
             case 'file':
@@ -36409,6 +36678,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);
@@ -36649,7 +36922,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;
@@ -36660,6 +36933,18 @@ var RichText = class {
         return this.cached;
     }
 };
+var VectorSetItemResolver = class {
+    constructor(data2, pointer) {
+        this.data = data2;
+        this.pointer = pointer;
+        (0, chunk_A2PMVMFI_js_1.__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) {
@@ -36754,7 +37039,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;
@@ -39758,10 +40050,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) => {
@@ -40094,7 +40390,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') {
@@ -41076,9 +41376,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);
             });
         };
@@ -41368,6 +41668,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) => (0, react_7.forwardRef)((props, forwardedRef) => {
     const { strokeEffectLength, strokeEffectGap, strokeEffectOffset, strokeEffectLoop, strokeEffectTotalLength, strokeEffectLoopType, pathLengthTransition, ...restProps } = props;
     const isCanvas = isStaticRenderer();
@@ -41385,11 +41690,11 @@ var withV1StrokeFX = (Component17) => (0, react_7.forwardRef)((props, forwardedR
             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;
@@ -42566,6 +42871,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,
@@ -42834,7 +43141,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:
@@ -42848,7 +43155,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': {
@@ -43373,10 +43680,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);
@@ -43558,11 +43865,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,
                 };
@@ -44333,14 +44641,107 @@ 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;
+};
+exports.frameFromElement = frameFromElement;
+var frameFromElements = (elements) => {
+    return Rect.merge(...elements.map(frameFromElement));
+};
+exports.frameFromElements = frameFromElements;
+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);
+    }
+};
+exports.dispatchKeyDownEvent = dispatchKeyDownEvent;
+var DOM = {
+    frameFromElement,
+    frameFromElements,
+    convertToPageFrame,
+    convertFromPageFrame,
+    getPageFrame,
+    fromEventForPage,
+    fromEventForClient,
+    convertToPagePoint,
+    convertFromPagePoint,
+};
+exports.DOM = DOM;
+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) => {
@@ -44385,18 +44786,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) {
@@ -44421,14 +44810,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) {
@@ -44992,13 +45381,21 @@ function createLineGroups(elements) {
     groups2.push(currentGroup);
     return groups2;
 }
-var FitText = /* @__PURE__ */ (0, react_7.forwardRef)(({ viewBoxScale, viewBox, children, ...props }, ref) => {
+var BaseSVG = /* @__PURE__ */ (0, react_7.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__ */
-    (0, jsx_runtime_1.jsx)(motion.svg, {
-        ref,
+    (0, jsx_runtime_1.jsx)('svg', {
+        ...props,
+        ref: forwardedRef,
+        children: props.children,
+    }));
+});
+var MotionSVG = /* @__PURE__ */ motion.create(BaseSVG);
+var FitText = /* @__PURE__ */ (0, react_7.forwardRef)(function FitText2({ viewBoxScale, viewBox, children, ...props }, forwardedRef) {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MotionSVG, {
         ...props,
+        ref: forwardedRef,
         viewBox,
         children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.foreignObject, {
             width: '100%',
@@ -45011,16 +45408,18 @@ var FitText = /* @__PURE__ */ (0, react_7.forwardRef)(({ viewBoxScale, viewBox,
             },
             children,
         }),
-    }));
+    });
 });
-var RichTextContainer = /* @__PURE__ */ (0, react_7.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__ */ (0, react_7.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 = (0, react_3.useContext)(ComponentContainerContext);
     const layoutId = useLayoutId2(props);
     const fallbackRef = (0, react_4.useRef)(null);
-    const containerRef = ref ?? fallbackRef;
+    const containerRef = forwardedRef ?? fallbackRef;
     useMeasureLayout(props, containerRef);
     useLoadFonts(fonts, __fromCanvasComponent, containerRef);
     (0, react_5.useInsertionEffect)(() => {
@@ -45089,6 +45488,7 @@ var RichTextContainer = /* @__PURE__ */ (0, react_7.forwardRef)(function RichTex
         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__ */ (0, jsx_runtime_1.jsx)(Component17, {
@@ -45097,8 +45497,8 @@ var RichTextContainer = /* @__PURE__ */ (0, react_7.forwardRef)(function RichTex
                 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__ */ (0, jsx_runtime_1.jsx)(FitText, {
                     viewBox,
                     viewBoxScale,
@@ -45119,8 +45519,8 @@ var RichTextContainer = /* @__PURE__ */ (0, react_7.forwardRef)(function RichTex
                 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,
             });
         }
@@ -45131,8 +45531,8 @@ var RichTextContainer = /* @__PURE__ */ (0, react_7.forwardRef)(function RichTex
         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,
     });
 });
@@ -45208,7 +45608,7 @@ function extractTextFromReactNode(node) {
     }
     return '';
 }
-var RichText2 = /* @__PURE__ */ (0, react_7.forwardRef)(function RichText3({ children, html, htmlFromDesign, ...props }, ref) {
+var RichText = /* @__PURE__ */ (0, react_7.forwardRef)(function RichText2({ children, html, htmlFromDesign, ...props }, forwardedRef) {
     const content = html || children || htmlFromDesign;
     if (isString(content)) {
         if (!props.stylesPresetsClassName && isObject2(props.stylesPresetsClassNames)) {
@@ -45221,7 +45621,7 @@ var RichText2 = /* @__PURE__ */ (0, react_7.forwardRef)(function RichText3({ chi
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(DeprecatedRichText, {
             ...props,
             ...contentProp,
-            ref,
+            ref: forwardedRef,
         });
     }
     if (!props.stylesPresetsClassNames && isString(props.stylesPresetsClassName)) {
@@ -45241,11 +45641,11 @@ var RichText2 = /* @__PURE__ */ (0, react_7.forwardRef)(function RichText3({ chi
     }
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(RichTextContainer, {
         ...props,
-        ref,
+        ref: forwardedRef,
         children: (0, react_6.isValidElement)(content) ? content : void 0,
     });
 });
-exports.RichText = RichText2;
+exports.RichText = RichText;
 function linearGradientLine(angle) {
     var _a, _b;
     const rad = angle * Math.PI / 180;
@@ -45448,104 +45848,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;
-};
-exports.frameFromElement = frameFromElement;
-var frameFromElements = (elements) => {
-    return Rect.merge(...elements.map(frameFromElement));
-};
-exports.frameFromElements = frameFromElements;
-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);
-    }
-};
-exports.dispatchKeyDownEvent = dispatchKeyDownEvent;
-var DOM = {
-    frameFromElement,
-    frameFromElements,
-    convertToPageFrame,
-    convertFromPageFrame,
-    getPageFrame,
-    fromEventForPage,
-    fromEventForClient,
-    convertToPagePoint,
-    convertFromPagePoint,
-};
-exports.DOM = DOM;
-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) {
@@ -46908,7 +47210,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)
@@ -47007,7 +47309,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;
@@ -47578,8 +47880,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',