unframer 3.0.6 → 3.2.0

package/esm/framer.js

@@ -10499,7 +10499,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.JQQVEEM4.mjs
+// /:https://app.framerstatic.com/framer.UWLYDHV3.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -11971,33 +11971,10 @@ function useRouteHandler(routeId, preload = false, elementId) {
     const handler = React4.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
     return handler;
 }
-var timezone;
-var visitorLocale;
-function setTimezoneAndLocaleForTracking() {
-    const resolvedDateTimeOptions = Intl.DateTimeFormat().resolvedOptions();
-    timezone = resolvedDateTimeOptions.timeZone;
-    visitorLocale = resolvedDateTimeOptions.locale;
-}
-requestIdleCallback(setTimezoneAndLocaleForTracking);
+var pageviewEventVersion = 2;
 function sendTrackingEvent(eventType, eventData, sendOn = 'lazy') {
-    if (!safeWindow.__framer_events)
-        return;
-    if (!timezone || !visitorLocale)
-        setTimezoneAndLocaleForTracking();
-    safeWindow.__framer_events.push([eventType, {
-            // Base properties common to all events
-            referrer: null,
-            // The first pageview event will always be sent before hydration, in a script in `exportToHTML.ts`.
-            url: safeWindow.location.href,
-            hostname: safeWindow.location.hostname || null,
-            pathname: safeWindow.location.pathname || null,
-            hash: safeWindow.location.hash || null,
-            search: safeWindow.location.search || null,
-            timezone,
-            locale: visitorLocale,
-            // Additional properties specific to custom events
-            ...eventData,
-        }, sendOn,]);
+    var _a;
+    (_a = safeWindow.__framer_events) == null ? void 0 : _a.push([eventType, eventData, sendOn,]);
     switch (eventType) {
         case 'published_site_click': {
             const { trackingId, href, } = eventData;
@@ -12901,7 +12878,7 @@ function usePopStateHandler(currentRouteId, setCurrentRouteId) {
         const stopMonitoringINPRelatedInputs = monitorINPRelatedInputs();
         void nextRender.promise.finally(stopMonitoringINPRelatedInputs);
         const changeRoute = () => {
-            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, isObject2(pathVariables) ? pathVariables : void 0, true, nextRender, false);
+            setCurrentRouteId(routeId, isString(localeId) ? localeId : void 0, isString(hash2) ? hash2 : void 0, window.location.pathname + window.location.search + window.location.hash, isObject2(pathVariables) ? pathVariables : void 0, true, nextRender, false);
         };
         const viewTransition = await startViewTransition2(currentRouteId.current, routeId, changeRoute);
         const navigationTransition = (_d = window.navigation) == null ? void 0 : _d.transition;
@@ -15708,6 +15685,14 @@ var P3Color = class _P3Color {
             return color2;
         return value.toString('srgb');
     }
+    static multiplyAlpha(color2, alpha2) {
+        return new _P3Color({
+            r: color2.r,
+            g: color2.g,
+            b: color2.b,
+            a: color2.a * alpha2,
+        });
+    }
 };
 function clampRGB(color2) {
     return P3Color.srgbFromValue(color2);
@@ -18367,8 +18352,14 @@ var DimensionType = /* @__PURE__ */ ((DimensionType2) => {
     DimensionType2[DimensionType2['Auto'] = 2] = 'Auto';
     DimensionType2[DimensionType2['FractionOfFreeSpace'] = 3] = 'FractionOfFreeSpace';
     DimensionType2[DimensionType2['Viewport'] = 4] = 'Viewport';
+    DimensionType2[DimensionType2['FitImage'] = 5] = 'FitImage';
     return DimensionType2;
 })(DimensionType || {});
+function isAutoDimensionType(dimensionType) {
+    if (isUndefined(dimensionType))
+        return false;
+    return dimensionType === 2 || dimensionType === 5;
+}
 function isConstraintSupportingChild(child) {
     if (!isReactChild(child) || !isReactElement(child)) {
         return false;
@@ -18379,7 +18370,7 @@ var ConstraintMask = {
     // Modifies the constraint mask to remove invalid (mutually exclusive) options and returns the original.
     // TODO: this removes major inconsistencies but probably needs to be merged with ConstraintSolver.
     quickfix: (constraints) => {
-        if (constraints.widthType === 2 || constraints.heightType === 2) {
+        if (isAutoDimensionType(constraints.widthType) || isAutoDimensionType(constraints.heightType)) {
             constraints.aspectRatio = null;
         }
         if (isFiniteNumber(constraints.aspectRatio)) {
@@ -18397,13 +18388,13 @@ var ConstraintMask = {
             }
         }
         if (constraints.left && constraints.right) {
-            if (constraints.fixedSize || constraints.widthType === 2 || isFiniteNumber(constraints.maxWidth)) {
+            if (constraints.fixedSize || isAutoDimensionType(constraints.widthType) || isFiniteNumber(constraints.maxWidth)) {
                 constraints.right = false;
             }
             constraints.widthType = 0;
         }
         if (constraints.top && constraints.bottom) {
-            if (constraints.fixedSize || constraints.heightType === 2 || isFiniteNumber(constraints.maxHeight)) {
+            if (constraints.fixedSize || isAutoDimensionType(constraints.heightType) || isFiniteNumber(constraints.maxHeight)) {
                 constraints.bottom = false;
             }
             constraints.heightType = 0;
@@ -18512,7 +18503,7 @@ var ConstraintValues = {
         if (parentWidth && isFiniteNumber(hOpposingPinsOffset)) {
             width = parentWidth - hOpposingPinsOffset;
         }
-        else if (autoSize && values.widthType === 2) {
+        else if (autoSize && isAutoDimensionType(values.widthType)) {
             width = autoSize.width;
         }
         else if (isFiniteNumber(values.width)) {
@@ -18530,6 +18521,7 @@ var ConstraintValues = {
                     }
                     break;
                 case 2:
+                case 5:
                     break;
                 default:
                     assertNever(values.widthType);
@@ -18539,7 +18531,7 @@ var ConstraintValues = {
         if (parentHeight && isFiniteNumber(vOpposingPinsOffset)) {
             height = parentHeight - vOpposingPinsOffset;
         }
-        else if (autoSize && values.heightType === 2) {
+        else if (autoSize && isAutoDimensionType(values.heightType)) {
             height = autoSize.height;
         }
         else if (isFiniteNumber(values.height)) {
@@ -18557,6 +18549,7 @@ var ConstraintValues = {
                     }
                     break;
                 case 2:
+                case 5:
                     break;
                 default:
                     assertNever(values.heightType);
@@ -19429,6 +19422,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         li.framer-text,
         ol.framer-text,
         ul.framer-text,
+        mark.framer-text,
         span.framer-text:not([data-text-fill]) {
             font-family: var(--framer-blockquote-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
             font-style: var(--framer-blockquote-font-style, var(--framer-font-style, normal));
@@ -19454,6 +19448,24 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             text-wrap: var(--framer-text-wrap-override, var(--framer-text-wrap));
         }
     `, /* css */
+    `
+        mark.framer-text,
+        p.framer-text,
+        div.framer-text,
+        h1.framer-text,
+        h2.framer-text,
+        h3.framer-text,
+        h4.framer-text,
+        h5.framer-text,
+        h6.framer-text,
+        li.framer-text,
+        ol.framer-text,
+        ul.framer-text {
+            background-color: var(--framer-blockquote-text-background-color, var(--framer-text-background-color, initial));
+            border-radius: var(--framer-blockquote-text-background-radius, var(--framer-text-background-radius, initial));
+            padding: var(--framer-blockquote-text-background-padding, var(--framer-text-background-padding, initial));
+        }
+    `, /* css */
     `
         @supports not (color: color(display-p3 1 1 1)) {
             p.framer-text,
@@ -19471,6 +19483,10 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
                 color: ${createRGBVariableFallbacks(['--framer-blockquote-text-color', '--framer-text-color',], '#000')};
                 -webkit-text-stroke-color: ${createRGBVariableFallbacks(['--framer-text-stroke-color',], 'initial')};
             }
+
+            mark.framer-text {
+                background-color: ${createRGBVariableFallbacks(['--framer-blockquote-text-background-color', '--framer-text-background-color',], 'initial')};
+            }
         }
     `, /* css */
     `
@@ -19593,6 +19609,10 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             text-transform: var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
             /* Cursor inherit to overwrite the user agent stylesheet on rich text links. */
             cursor: var(--framer-custom-cursors, pointer);
+            /* Don't inherit background styles from any parent text style. */
+            background-color: var(--framer-link-text-background-color, initial);
+            border-radius: var(--framer-link-text-background-radius, initial);
+            padding: var(--framer-link-text-background-padding, initial);
         }
     `,
     // Text decoration can't be applied to the nested spans of links because it breaks animations
@@ -19615,6 +19635,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             span.framer-text[data-nested-link],
             span.framer-text[data-nested-link] span.framer-text:not([data-text-fill]) {
                 color: ${createRGBVariableFallbacks(['--framer-blockquote-text-color', '--framer-link-text-color', '--framer-text-color',], '#000')};
+                background-color: ${createRGBVariableFallbacks(['--framer-link-text-background-color',], 'initial')};
             }
         }
     `, /* css */
@@ -19656,6 +19677,9 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-hover-text-transform, var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
+            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial)));
+            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial)));
+            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial)));
         }
     `, /* css */
     `
@@ -19681,6 +19705,11 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         '--framer-link-text-color',
         '--framer-text-color',
     ], '#000')};
+            background-color: ${createRGBVariableFallbacks([
+        '--framer-link-hover-text-background-color',
+        '--framer-link-text-background-color',
+        '--framer-text-background-color',
+    ], 'initial')};
         }
     }
     `, /* css */
@@ -19722,6 +19751,9 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
             font-size: calc(var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
+            background-color: var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial));
+            border-radius: var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial));
+            padding: var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial));
         }
     `, /* css */
     `
@@ -19742,6 +19774,11 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             span.framer-text[data-framer-page-link-current],
             span.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) {
                 color: ${createRGBVariableFallbacks(['--framer-link-current-text-color', '--framer-link-text-color', '--framer-text-color',], '#000')};
+                background-color: ${createRGBVariableFallbacks([
+        '--framer-link-current-text-background-color',
+        '--framer-link-text-background-color',
+        '--framer-text-background-color',
+    ], 'initial')};
             }
         }
     `, /* css */
@@ -19769,6 +19806,11 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         '--framer-code-text-color',
         '--framer-text-color',
     ], '#000')};
+                background-color: ${createRGBVariableFallbacks([
+        '--framer-link-current-text-background-color',
+        '--framer-link-text-background-color',
+        '--framer-text-background-color',
+    ], 'initial')};
             }
         }
     `, /* css */
@@ -19783,6 +19825,9 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-hover-text-transform, var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
+            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial)));
+            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial)));
+            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial)));
         }
     `, /* css */
     `
@@ -19809,6 +19854,11 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         '--framer-code-text-color',
         '--framer-text-color',
     ], '#000')};
+                background-color: ${createRGBVariableFallbacks([
+        '--framer-link-hover-text-background-color',
+        '--framer-link-current-text-background-color',
+        '--framer-link-text-background-color',
+    ], 'initial')};
             }
         }
     `, /* css */
@@ -19822,6 +19872,9 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
             color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
+            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial))));
+            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial))));
+            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial))));
         }
     `, /* css */
     `
@@ -19837,6 +19890,11 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         '--framer-code-text-color',
         '--framer-text-color',
     ], '#000')};
+                background-color: ${createRGBVariableFallbacks([
+        '--framer-link-hover-text-background-color',
+        '--framer-link-current-text-background-color',
+        '--framer-link-text-background-color',
+    ], 'initial')};
             }
         }
     `, /* css */
@@ -19865,6 +19923,9 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             --framer-line-height: 1.2em;
             --framer-text-alignment: start;
             --framer-font-open-type-features: normal;
+            --framer-text-background-color: initial;
+            --framer-text-background-radius: initial;
+            --framer-text-background-padding: initial;
         }
     `, /* css */
     `
@@ -20318,6 +20379,10 @@ var frameCSSRules = (isPreview) => {
     return isPreview ? frameCSS : [];
 };
 var svgCSSRules = [`.svgContainer svg { display: block; }`,];
+var overflowClipFallbackCSSVariable = '--overflow-clip-fallback';
+var overflowClipFallbackCSSRules = /* @__PURE__ */ (() => [`@supports (not (overflow: clip)) {
+        :root { ${overflowClipFallbackCSSVariable}: hidden; }
+    }`,])();
 var combineCSSRules = (isPreview) => [
     ...willChangeTransformRules(isPreview),
     ...componentCSSRules,
@@ -20336,6 +20401,7 @@ var combineCSSRules = (isPreview) => [
     ...svgCSSRules,
     ...resetCSS,
     ...hideScrollbars,
+    ...overflowClipFallbackCSSRules,
 ];
 export var combinedCSSRules = /* @__PURE__ */ combineCSSRules(false);
 var combinedCSSRulesForPreview = /* @__PURE__ */ combineCSSRules(true);
@@ -22049,13 +22115,6 @@ var reactPropsRegex = /^(?:children|dangerouslySetInnerHTML|key|ref|autoFocus|de
 var isPropValid = /* @__PURE__ */ memoize((prop) => reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91
 /* Z+1 */
 );
-var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0);
-LibraryFeaturesContext.displayName = 'LibraryFeaturesContext';
-var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
-var useLibraryFeatures = () => {
-    const context = React4.useContext(LibraryFeaturesContext);
-    return context ?? {};
-};
 var mockWithWarning = (message) => {
     return () => {
         warnOnce2(message);
@@ -22085,6 +22144,7 @@ var implementation = {
     canRenderOptimizedCanvasImage() {
         return false;
     },
+    isOnPageCanvas: false,
 };
 var isRuntimeInjected = false;
 var runtimeProxy = {
@@ -22106,6 +22166,13 @@ function _injectRuntime(injectedRuntime) {
     Object.assign(implementation, injectedRuntime);
     isRuntimeInjected = true;
 }
+var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0);
+LibraryFeaturesContext.displayName = 'LibraryFeaturesContext';
+var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
+var useLibraryFeatures = () => {
+    const context = React4.useContext(LibraryFeaturesContext);
+    return context ?? {};
+};
 var wrapperStyle = {
     position: 'absolute',
     borderRadius: 'inherit',
@@ -22347,7 +22414,7 @@ var BackgroundImage = {
     isImageObject: function (image) {
         if (!image || typeof image === 'string')
             return false;
-        return key in image;
+        return typeof image === 'object' && key in image;
     },
 };
 function applyForwardOverrides(background, props) {
@@ -22382,6 +22449,31 @@ function backgroundImageFromProps(props) {
     }
     return applyForwardOverrides(backgroundImage, props);
 }
+function getIntrinsicSizeForBackgroundImage(background) {
+    if (!background)
+        return void 0;
+    if (background.pixelHeight && background.pixelWidth) {
+        return {
+            width: background.pixelWidth,
+            height: background.pixelHeight,
+        };
+    }
+    return parseImageSizeFromSrc(background.src);
+}
+function parseImageSizeFromSrc(src) {
+    if (!src)
+        return void 0;
+    const url = new URL(src);
+    const width = url.searchParams.get('width');
+    const height = url.searchParams.get('height');
+    if (width && height) {
+        return {
+            width: parseInt(width),
+            height: parseInt(height),
+        };
+    }
+    return void 0;
+}
 function htmlElementAsMotionComponent(asElem) {
     return asElem && asElem !== 'search' && asElem !== 'slot' && asElem !== 'template' ? motion[asElem] : motion['div'];
 }
@@ -23368,7 +23460,7 @@ function useStyleAndRect(props) {
     }
     const isRenderingStaticContent = isStaticRenderer();
     if (props.positionSticky) {
-        if (!isRenderingStaticContent || inCodeComponent) {
+        if (!isRenderingStaticContent || runtime.isOnPageCanvas || inCodeComponent) {
             resultStyle.position = 'sticky';
             resultStyle.willChange = 'transform';
             resultStyle.zIndex = 1;
@@ -23378,8 +23470,13 @@ function useStyleAndRect(props) {
             resultStyle.left = props.positionStickyLeft;
         }
     }
-    else if (isRenderingStaticContent && (props.positionFixed || props.positionAbsolute)) {
-        resultStyle.position = 'absolute';
+    else if (isRenderingStaticContent) {
+        if (props.positionFixed) {
+            resultStyle.position = runtime.isOnPageCanvas ? 'fixed' : 'absolute';
+        }
+        else if (props.positionAbsolute) {
+            resultStyle.position = 'absolute';
+        }
     }
     if ('rotate' in resultStyle && resultStyle.rotate === void 0) {
         delete resultStyle.rotate;
@@ -23484,6 +23581,11 @@ var VisibleFrame = /* @__PURE__ */ forwardRef(function VisibleFrame2(props, forw
         ],
     }), parentSize);
     const MotionComponent = htmlElementAsMotionComponent(props.as);
+    const intrinsicSize = getIntrinsicSizeForBackgroundImage(backgroundImage);
+    if (props.fitImageDimension && intrinsicSize) {
+        currentStyle[props.fitImageDimension] = 'auto';
+        currentStyle.aspectRatio = intrinsicSize.width / intrinsicSize.height;
+    }
     return /* @__PURE__ */ jsxs(MotionComponent, {
         ...dataProps,
         ...motionProps,
@@ -32791,15 +32893,15 @@ function domWriteCreateUpdateSafeArea(safeAreaRef) {
         Object.assign(safeAreaRef.current.style, floatingPositionSafeAreaStyle(x, y, placement, anchorRect, calculatedRect));
     };
 }
-function domWriteUpdatePosition(floatingPositionRef, position, rect) {
+function domWriteUpdatePosition(floatingPositionRef, position, rect, scrollX, scrollY) {
     if (!floatingPositionRef.current)
         return;
     Object.assign(floatingPositionRef.current.style, {
         position,
         visibility: 'visible',
         // Append "px" because we are assigning this object straight to style.
-        left: ((rect == null ? void 0 : rect.x) ?? 0) + (position === 'fixed' ? 0 : safeWindow.scrollX) + 'px',
-        top: ((rect == null ? void 0 : rect.y) ?? 0) + (position === 'fixed' ? 0 : safeWindow.scrollY) + 'px',
+        left: ((rect == null ? void 0 : rect.x) ?? 0) + scrollX + 'px',
+        top: ((rect == null ? void 0 : rect.y) ?? 0) + scrollY + 'px',
     });
 }
 var FloatingStackingContext = /* @__PURE__ */ (() => {
@@ -32926,13 +33028,14 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         let elementRect;
         let safePlacement;
         let calculatedRect;
-        let scrolls;
         let latestEvent;
         let updateSafeArea;
+        let scrollX = 0;
+        let scrollY = 0;
         const onRender = () => {
             if (cleanupHasRun)
                 return;
-            domWriteUpdatePosition(floatingPositionRef, position, calculatedRect);
+            domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY);
             if (safeArea)
                 updateSafeArea(anchorRect, calculatedRect, safePlacement, latestEvent);
             latestEvent = void 0;
@@ -32943,7 +33046,7 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
                 onRender();
             }
             else {
-                domWriteUpdatePosition(floatingPositionRef, position, calculatedRect);
+                domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY);
             }
             initialUpdateHasRun = true;
         };
@@ -32955,6 +33058,14 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         const domReadUpdateSafePlacementAndRect = () => {
             if (!getSafePlacementRect || cleanupHasRun)
                 return;
+            if (position === 'fixed') {
+                scrollX = 0;
+                scrollY = 0;
+            }
+            else {
+                scrollX = safeWindow.scrollX;
+                scrollY = safeWindow.scrollY;
+            }
             anchorRect = anchorRef.current.getBoundingClientRect();
             const safePlacementAndRect = getSafePlacementRect(anchorRect, elementRect);
             safePlacement = safePlacementAndRect[0];
@@ -34517,57 +34628,79 @@ function isSamePage(a, b) {
     return aPathVariables.length === bPathVariables.length &&
         Object.keys(aPathVariables).every((key7) => aPathVariables[key7] === bPathVariables[key7]);
 }
-function getPageviewEventData({ abTestId, framerSiteId, routeId, routePath, collectionItemId, localeCode, }) {
-    return {
-        abTestId,
-        framerSiteId,
-        routePath: routePath || '/',
-        collectionItemId,
-        framerLocale: localeCode,
-        webPageId: routeId,
-    };
+var timezone = null;
+var visitorLocale = null;
+function setTimezoneAndLocaleForTracking() {
+    const resolvedDateTimeOptions = Intl.DateTimeFormat().resolvedOptions();
+    timezone = resolvedDateTimeOptions.timeZone;
+    visitorLocale = resolvedDateTimeOptions.locale;
 }
-var useSendPageView = (currentRoute, currentRouteId, currentPathVariables, collectionUtils, activeLocale) => {
+requestIdleCallback(setTimezoneAndLocaleForTracking);
+var useSendPageView = (currentRoute, currentRouteId, currentPathnameWithHash, currentPathVariables, collectionUtils, activeLocale) => {
     const framerSiteId = useContext(FormContext);
     const pageviewEventData = useRef3();
     const skipFirstPageView = useRef3(true);
     useEffect(() => {
-        const getFullPageviewEventData = async () => {
-            var _a;
-            let collectionItemId = null;
-            if ((currentRoute == null ? void 0 : currentRoute.collectionId) && collectionUtils && currentPathVariables) {
-                const utils = await ((_a = collectionUtils[currentRoute.collectionId]) == null ? void 0 : _a.call(collectionUtils));
-                const [slug,] = Object.values(currentPathVariables);
-                if (utils && typeof slug === 'string') {
-                    collectionItemId = (await utils.getRecordIdBySlug(slug, activeLocale || void 0)) ?? null;
-                }
-            }
-            return getPageviewEventData({
+        function getFullPageviewEventData() {
+            if (!timezone || !visitorLocale)
+                setTimezoneAndLocaleForTracking();
+            const currentLocation = currentPathnameWithHash
+                ? new URL(safeWindow.location.origin + currentPathnameWithHash)
+                : safeWindow.location;
+            const eventData = {
+                version: pageviewEventVersion,
                 abTestId: currentRoute == null ? void 0 : currentRoute.abTestId,
                 framerSiteId: framerSiteId ?? null,
                 // If we are in a variant route, let's use the variant ID as the route ID instead, so that the analytics panel will be able to show the correct tracking data.
-                routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
-                routePath: currentRoute == null ? void 0 : currentRoute.path,
-                collectionItemId,
-                localeCode: (activeLocale == null ? void 0 : activeLocale.code) || null,
-            });
-        };
+                webPageId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
+                routePath: (currentRoute == null ? void 0 : currentRoute.path) || '/',
+                collectionItemId: null,
+                framerLocale: (activeLocale == null ? void 0 : activeLocale.code) || null,
+                referrer: null,
+                // The first pageview event will always be sent before hydration, in a script in `exportToHTML.ts`.
+                url: currentLocation.href,
+                hostname: currentLocation.hostname,
+                // Capture the current location before the user moves to a new page to prevent
+                // tracking wrong pathnames due to a race condition caused by async operations
+                // when resolving the collection item ID below
+                pathname: currentLocation.pathname,
+                search: currentLocation.search || null,
+                hash: currentLocation.hash || null,
+                timezone,
+                locale: visitorLocale,
+            };
+            return (currentRoute == null ? void 0 : currentRoute.collectionId) && collectionUtils && currentPathVariables
+                ? (async () => {
+                    var _a;
+                    let collectionItemId = null;
+                    const utils = currentRoute.collectionId &&
+                        (await ((_a = collectionUtils[currentRoute.collectionId]) == null ? void 0 : _a.call(collectionUtils)));
+                    const [slug,] = Object.values(currentPathVariables);
+                    if (utils && typeof slug === 'string') {
+                        collectionItemId = (await utils.getRecordIdBySlug(slug, activeLocale || void 0)) ?? null;
+                    }
+                    return {
+                        ...eventData,
+                        collectionItemId,
+                    };
+                })()
+                : eventData;
+        }
         void (async () => {
-            const pageviewEventDataPromise = getFullPageviewEventData();
-            pageviewEventData.current = pageviewEventDataPromise;
+            const eventDataOrPromise = pageviewEventData.current = getFullPageviewEventData();
+            const eventData = eventDataOrPromise instanceof Promise ? await eventDataOrPromise : eventDataOrPromise;
+            pageviewEventData.current = eventData;
             if (skipFirstPageView.current) {
                 skipFirstPageView.current = false;
-                return;
             }
-            const eventData = await pageviewEventDataPromise;
-            pageviewEventData.current = eventData;
-            sendTrackingEvent('published_site_pageview', eventData, 'eager');
+            else {
+                sendTrackingEvent('published_site_pageview', eventData, 'eager');
+            }
         })();
         const listener = async (event) => {
             if (event.persisted) {
-                const pageviewEventDataPromise = getFullPageviewEventData();
-                pageviewEventData.current = pageviewEventDataPromise;
-                const eventData = await getFullPageviewEventData();
+                const eventDataOrPromise = pageviewEventData.current = getFullPageviewEventData();
+                const eventData = eventDataOrPromise instanceof Promise ? await eventDataOrPromise : eventDataOrPromise;
                 pageviewEventData.current = eventData;
                 sendTrackingEvent('published_site_pageview', eventData, 'eager');
             }
@@ -34576,7 +34709,7 @@ var useSendPageView = (currentRoute, currentRouteId, currentPathVariables, colle
         return () => {
             window.removeEventListener('pageshow', listener);
         };
-    }, [currentRoute, currentRouteId, currentPathVariables, collectionUtils, activeLocale, framerSiteId,]);
+    }, [currentRoute, currentRouteId, currentPathnameWithHash, currentPathVariables, collectionUtils, activeLocale, framerSiteId,]);
     return pageviewEventData;
 };
 var defaultLocaleId = 'default';
@@ -34679,6 +34812,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         return (fn) => fn();
     }, [synchronousNavigationOnDesktop,]);
     const isInitialNavigationRef = useRef3(true);
+    const currentPathnameWithHashRef = useRef3();
     const currentRouteRef = useRef3(initialRoute);
     const currentPathVariablesRef = useRef3(initialPathVariables);
     const currentLocaleIdRef = useRef3(initialLocaleId);
@@ -34764,12 +34898,13 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
         monitorNextPaintAfterRender,
         transitionFn,
     ]);
-    const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL) => {
+    const setCurrentRouteId = useCallback((routeId, localeId, hash2, pathnameWithHash, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL) => {
         isInitialNavigationRef.current = false;
         const currentRouteId2 = currentRouteRef.current;
         currentRouteRef.current = routeId;
         currentPathVariablesRef.current = pathVariables;
         currentLocaleIdRef.current = localeId;
+        currentPathnameWithHashRef.current = pathnameWithHash;
         scheduleSideEffect(() => {
             updateScrollPosition(hash2, smoothScroll, isHistoryTransition);
         });
@@ -34855,14 +34990,26 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                 siteCanonicalURL,
             }, ignorePushStateWrapper);
         };
-        setCurrentRouteId(routeId, currentRouteLocaleId, routeElementId, pathVariables, false, nextRender, smoothScroll, disableHistory ? void 0 : updateURL);
+        const pathnameWithHash = getSitePrefix(siteCanonicalURL) + getPathForRoute(newRoute, {
+            currentRoutePath: currentRoute2 == null ? void 0 : currentRoute2.path,
+            currentPathVariables: currentPathVariables2,
+            hash: hash2,
+            pathVariables,
+            localeId: currentRouteLocaleId,
+            preserveQueryParams,
+            siteCanonicalURL,
+            relative: false,
+            // We need an absolute path for the hash
+        });
+        setCurrentRouteId(routeId, currentRouteLocaleId, routeElementId, pathnameWithHash, pathVariables, false, nextRender, smoothScroll, disableHistory ? void 0 : updateURL);
     }, [routes, setCurrentRouteId, disableHistory, preserveQueryParams, siteCanonicalURL, monitorNextPaintAfterRender,]);
     const getRoute = useGetRouteCallback(routes);
     const currentRouteId = currentRouteRef.current;
+    const currentPathnameWithHash = currentPathnameWithHashRef.current;
     const currentPathVariables = currentPathVariablesRef.current;
     const currentRoute = routes[currentRouteId];
     const currentRoutePath = currentRoute == null ? void 0 : currentRoute.path;
-    const pageviewEventData = useSendPageView(currentRoute, currentRouteId, currentPathVariables, collectionUtils, activeLocale);
+    const pageviewEventData = useSendPageView(currentRoute, currentRouteId, currentPathnameWithHash, currentPathVariables, collectionUtils, activeLocale);
     const isInitialNavigation = isInitialNavigationRef.current;
     const api = useMemo2(() => ({
         navigate,
@@ -34915,7 +35062,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                                 /* @__PURE__ */ jsx3(MarkSuspenseEffects.Start, {}),
                                 /* @__PURE__ */ jsx3(WithLayoutTemplate, {
                                     LayoutTemplate,
-                                    routeId: currentRouteId,
+                                    routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
                                     style: defaultPageStyle,
                                     children: (inLayoutTemplate) => {
                                         return /* @__PURE__ */ jsx3(Fragment, {
@@ -42322,6 +42469,9 @@ function assert2(condition, ...msg) {
 }
 var missing = Symbol('missing');
 var frozenEmptyArray = Object.freeze([]);
+function emptyArray() {
+    return frozenEmptyArray;
+}
 var errorReporter;
 function reportError({ error: maybeError, tags, extras, critical, caller, }) {
     assert2(errorReporter, 'Set up an error callback with setErrorReporter, or configure Sentry with initializeEnvironment');
@@ -42624,7 +42774,9 @@ try {
 catch { }
 var postLogEntry;
 try {
-    if (typeof window !== 'undefined' && !!window.postMessage && window.top !== window) {
+    if (typeof window !== 'undefined' && !!window.postMessage && window.parent !== window &&
+        // Don't post messages to the top-level site from the Editor Bar
+        !window.location.pathname.startsWith('/edit')) {
         postLogEntry = (entry) => {
             var _a;
             try {
@@ -42638,7 +42790,7 @@ try {
                     parts,
                     printed,
                 };
-                (_a = window.top) == null ? void 0 : _a.postMessage(data2, getServiceMap().app);
+                (_a = window.parent) == null ? void 0 : _a.postMessage(data2, getServiceMap().app);
             }
             catch { }
         };
@@ -43720,11 +43872,11 @@ function getAssetOwnerType(asset) {
 async function loadFontsWithOpenType(source) {
     switch (source) {
         case 'google': {
-            const supportedFonts = await import('./framer-chunks/google-3ASCFEEO-3R47BR2A.js');
+            const supportedFonts = await import('./framer-chunks/google-2KFYDWCN-PJC2DDXK.js');
             return supportedFonts == null ? void 0 : supportedFonts.default;
         }
         case 'fontshare': {
-            const supportedFonts = await import('./framer-chunks/fontshare-4J2ZFRBB-H5VQLZTM.js');
+            const supportedFonts = await import('./framer-chunks/fontshare-EOIRPPWV-VDFFNW4K.js');
             return supportedFonts == null ? void 0 : supportedFonts.default;
         }
         default:
@@ -43734,11 +43886,11 @@ async function loadFontsWithOpenType(source) {
 async function loadFontToOpenTypeFeatures(source) {
     switch (source) {
         case 'google': {
-            const features = await import('./framer-chunks/google-FDB6LUFQ-PFSUZGKF.js');
+            const features = await import('./framer-chunks/google-HSMCYMMG-DWNQGSHN.js');
             return features == null ? void 0 : features.default;
         }
         case 'fontshare': {
-            const features = await import('./framer-chunks/fontshare-622CVMZZ-HFPH543A.js');
+            const features = await import('./framer-chunks/fontshare-Y53BJZLK-EUQIV252.js');
             return features == null ? void 0 : features.default;
         }
         case 'framer': {
@@ -44262,10 +44414,10 @@ function loadVariationAxes(source) {
             const axes = (async () => {
                 switch (source) {
                     case 'google': {
-                        return (await import('./framer-chunks/google-C62SNV32-LCI4F7VO.js')).default;
+                        return (await import('./framer-chunks/google-S367OFIE-AWJEPMSF.js')).default;
                     }
                     case 'fontshare': {
-                        return (await import('./framer-chunks/fontshare-JGEKH7YN-QOX3MC3K.js')).default;
+                        return (await import('./framer-chunks/fontshare-2X4LZ75B-D2V5BX73.js')).default;
                     }
                     default:
                         assertNever(source);
@@ -45197,10 +45349,35 @@ var styles3 = /* @__PURE__ */ (() => [
 ])();
 var FormSelect = /* @__PURE__ */ withCSS(Select, styles3, 'framer-lib-form-select');
 var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref) {
-    const { background, children, alt, draggable, style: styleFromProps, ...rest } = props;
+    const { background, children, alt, draggable, fitImageDimension, style: styleFromProps, ...rest } = props;
     const style2 = {
         ...styleFromProps,
     };
+    const intrinsicSize = useMemo2(() => getIntrinsicSizeForBackgroundImage(background), [background,]);
+    const [fallbackIntrinsicSize, setFallbackIntrinsicSize,] = useState();
+    React4.useLayoutEffect(() => {
+        if (!(background == null ? void 0 : background.src))
+            return;
+        if (!fitImageDimension)
+            return;
+        if (intrinsicSize)
+            return;
+        const img = document.createElement('img');
+        img.onload = () => {
+            if (img.naturalWidth && img.naturalHeight) {
+                setFallbackIntrinsicSize({
+                    width: img.naturalWidth,
+                    height: img.naturalHeight,
+                });
+            }
+        };
+        img.src = background.src;
+    }, [background == null ? void 0 : background.src, fitImageDimension, intrinsicSize,]);
+    const size = intrinsicSize ?? fallbackIntrinsicSize;
+    if (fitImageDimension && size) {
+        style2[fitImageDimension] = 'auto';
+        style2.aspectRatio = size.width / size.height;
+    }
     if (background) {
         delete style2.background;
     }
@@ -47317,7 +47494,7 @@ var TextComponent = /* @__PURE__ */ (() => {
             if (this.props.transformTemplate)
                 return this.props.transformTemplate;
             const frame2 = this.frame;
-            const isDOMLayoutAutoSized = _usesDOMRect && (widthType === 2 || heightType === 2);
+            const isDOMLayoutAutoSized = _usesDOMRect && (isAutoDimensionType(widthType) || isAutoDimensionType(heightType));
             const hasTransformTemplate = !frame2 || !RenderTarget.hasRestrictions() || __fromCanvasComponent || isDOMLayoutAutoSized;
             if (hasTransformTemplate)
                 return transformTemplate(this.props.center);
@@ -48251,8 +48428,10 @@ function addFonts(component, passedFonts, flags) {
     });
 }
 function getFonts(component) {
+    if (!component)
+        return emptyArray();
     const fonts = component.fonts;
-    return fonts ?? [];
+    return fonts ?? emptyArray();
 }
 function getFontsFromSharedStyle(fonts) {
     if (fonts.length === 0) {