unframer 3.0.6 → 3.2.0

package/src/framer.js

@@ -11214,7 +11214,7 @@ function stagger(duration = 0.1, {
   };
 }
 
-// /: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';
@@ -12649,31 +12649,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 {
@@ -13646,6 +13625,7 @@ function usePopStateHandler(currentRouteId, 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,
@@ -16609,6 +16589,14 @@ var P3Color = class _P3Color {
     if (!value) 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,);
@@ -19306,8 +19294,13 @@ 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;
@@ -19318,7 +19311,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,)) {
@@ -19336,13 +19329,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;
@@ -19451,7 +19444,7 @@ var ConstraintValues = {
     const hOpposingPinsOffset = pinnedOffset(values.left, values.right,);
     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,)) {
       switch (values.widthType) {
@@ -19468,6 +19461,7 @@ var ConstraintValues = {
           }
           break;
         case 2:
+        case 5:
           break;
         default:
           assertNever(values.widthType,);
@@ -19476,7 +19470,7 @@ var ConstraintValues = {
     const vOpposingPinsOffset = pinnedOffset(values.top, values.bottom,);
     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,)) {
       switch (values.heightType) {
@@ -19493,6 +19487,7 @@ var ConstraintValues = {
           }
           break;
         case 2:
+        case 5:
           break;
         default:
           assertNever(values.heightType,);
@@ -20366,6 +20361,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));
@@ -20391,6 +20387,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,
@@ -20408,6 +20422,12 @@ 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 */
   `
@@ -20532,6 +20552,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
@@ -20556,6 +20580,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
                 color: ${
     createRGBVariableFallbacks(['--framer-blockquote-text-color', '--framer-link-text-color', '--framer-text-color',], '#000',)
   };
+                background-color: ${createRGBVariableFallbacks(['--framer-link-text-background-color',], 'initial',)};
             }
         }
     `, /* css */
@@ -20599,6 +20624,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 */
   `
@@ -20625,6 +20653,13 @@ 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',)
   };
         }
     }
@@ -20669,6 +20704,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 */
   `
@@ -20690,6 +20728,13 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
             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',)
   };
             }
         }
@@ -20719,6 +20764,13 @@ 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',)
   };
             }
         }
@@ -20734,6 +20786,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 */
   `
@@ -20761,6 +20816,13 @@ 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',)
   };
             }
         }
@@ -20775,6 +20837,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 */
   `
@@ -20791,6 +20856,13 @@ 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',)
   };
             }
         }
@@ -20820,6 +20892,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 */
   `
@@ -21271,6 +21346,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,),
@@ -21290,6 +21369,7 @@ var combineCSSRules =
     ...svgCSSRules,
     ...resetCSS,
     ...hideScrollbars,
+    ...overflowClipFallbackCSSRules,
   ];
 export var combinedCSSRules = /* @__PURE__ */ combineCSSRules(false,);
 var combinedCSSRulesForPreview = /* @__PURE__ */ combineCSSRules(true,);
@@ -23019,13 +23099,6 @@ 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,);
@@ -23055,6 +23128,7 @@ var implementation = {
   canRenderOptimizedCanvasImage() {
     return false;
   },
+  isOnPageCanvas: false,
 };
 var isRuntimeInjected = false;
 var runtimeProxy = {
@@ -23076,6 +23150,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',
@@ -23336,7 +23417,7 @@ var key = 'src';
 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,) {
@@ -23377,6 +23458,29 @@ 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'];
 }
@@ -24358,7 +24462,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;
@@ -24367,8 +24471,12 @@ function useStyleAndRect(props,) {
       resultStyle.bottom = props.positionStickyBottom;
       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;
@@ -24481,6 +24589,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,
@@ -34231,14 +34344,14 @@ 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__ */ (() => {
@@ -34383,12 +34496,13 @@ function Floating({
     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;
     };
@@ -34397,7 +34511,7 @@ function Floating({
       if (latestEvent) {
         onRender();
       } else {
-        domWriteUpdatePosition(floatingPositionRef, position, calculatedRect,);
+        domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY,);
       }
       initialUpdateHasRun = true;
     };
@@ -34407,6 +34521,13 @@ function Floating({
     };
     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];
@@ -36064,64 +36185,77 @@ 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;
+      } else {
+        sendTrackingEvent('published_site_pageview', eventData, 'eager',);
       }
-      const eventData = await pageviewEventDataPromise;
-      pageviewEventData.current = eventData;
-      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',);
       }
@@ -36130,7 +36264,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';
@@ -36242,6 +36376,7 @@ function Router({
     return (fn) => fn();
   }, [synchronousNavigationOnDesktop,],);
   const isInitialNavigationRef = useRef3(true,);
+  const currentPathnameWithHashRef = useRef3();
   const currentRouteRef = useRef3(initialRoute,);
   const currentPathVariablesRef = useRef3(initialPathVariables,);
   const currentLocaleIdRef = useRef3(initialLocaleId,);
@@ -36337,12 +36472,13 @@ function Router({
     transitionFn,
   ],);
   const setCurrentRouteId = useCallback(
-    (routeId, localeId, hash2, pathVariables, isHistoryTransition, nextRender, smoothScroll = false, updateURL,) => {
+    (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,);
       },);
@@ -36436,10 +36572,22 @@ function Router({
         siteCanonicalURL,
       }, ignorePushStateWrapper,);
     };
+    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,
@@ -36449,10 +36597,18 @@ function Router({
   }, [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,
@@ -36505,7 +36661,7 @@ function Router({
                 /* @__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, {
@@ -44065,6 +44221,9 @@ function assert2(condition, ...msg) {
 }
 var missing = Symbol('missing',);
 var frozenEmptyArray = Object.freeze([],);
+function emptyArray() {
+  return frozenEmptyArray;
+}
 var errorReporter;
 function reportError({
   error: maybeError,
@@ -44342,7 +44501,11 @@ 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 {
@@ -44356,7 +44519,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 {}
     };
   }
@@ -45377,11 +45540,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:
@@ -45391,11 +45554,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': {
@@ -45943,10 +46106,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,);
@@ -47039,12 +47202,35 @@ var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
     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;
   }
@@ -49304,7 +49490,7 @@ var TextComponent = /* @__PURE__ */ (() => {
       } = this.props;
       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,);
     }
@@ -50331,8 +50517,9 @@ 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) {