unframer 3.2.0 → 3.2.4

package/src/framer.js

@@ -13,7 +13,7 @@ import {
   __toESM,
 } from './framer-chunks/chunk-A2PMVMFI.js';
 
-// /:https://app.framerstatic.com/chunk-BLFSVU7M.mjs
+// /:https://app.framerstatic.com/chunk-VDW2YK33.mjs
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { useCallback, useContext, useId, } from 'react';
@@ -343,7 +343,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive,) {
     isProcessing: false,
   };
   const flagRunNextFrame = () => runNextFrame = true;
-  const steps2 = stepsOrder.reduce((acc, key7,) => {
+  const steps22 = stepsOrder.reduce((acc, key7,) => {
     acc[key7] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key7 : void 0,);
     return acc;
   }, {},);
@@ -356,7 +356,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive,) {
     preRender,
     render,
     postRender,
-  } = steps2;
+  } = steps22;
   const processBatch = () => {
     const timestamp = MotionGlobalConfig.useManualTiming ? state.timestamp : performance.now();
     runNextFrame = false;
@@ -387,7 +387,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive,) {
     }
   };
   const schedule = stepsOrder.reduce((acc, key7,) => {
-    const step2 = steps2[key7];
+    const step2 = steps22[key7];
     acc[key7] = (process2, keepAlive = false, immediate = false,) => {
       if (!runNextFrame) wake();
       return step2.schedule(process2, keepAlive, immediate,);
@@ -396,14 +396,14 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive,) {
   }, {},);
   const cancel = (process2) => {
     for (let i = 0; i < stepsOrder.length; i++) {
-      steps2[stepsOrder[i]].cancel(process2,);
+      steps22[stepsOrder[i]].cancel(process2,);
     }
   };
   return {
     schedule,
     cancel,
     state,
-    steps: steps2,
+    steps: steps22,
   };
 }
 var {
@@ -569,6 +569,11 @@ var color = {
   transform: (v) => {
     return typeof v === 'string' ? v : v.hasOwnProperty('red',) ? rgba.transform(v,) : hsla.transform(v,);
   },
+  getAnimatableNone: (v) => {
+    const parsed = color.parse(v,);
+    parsed.alpha = 0;
+    return color.transform(parsed,);
+  },
 };
 var colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 function test(v,) {
@@ -646,7 +651,7 @@ function createTransformer(source,) {
     return output;
   };
 }
-var convertNumbersToZero = (v) => typeof v === 'number' ? 0 : v;
+var convertNumbersToZero = (v) => typeof v === 'number' ? 0 : color.test(v,) ? color.getAnimatableNone(v,) : v;
 function getAnimatableNone(v,) {
   const parsed = parseComplexValue(v,);
   const transformer = createTransformer(v,);
@@ -833,7 +838,7 @@ var generateLinearEasing = (easing, duration, resolution = 10,) => {
   let points = '';
   const numPoints = Math.max(Math.round(duration / resolution,), 2,);
   for (let i = 0; i < numPoints; i++) {
-    points += easing(i / (numPoints - 1),) + ', ';
+    points += Math.round(easing(i / (numPoints - 1),) * 1e4,) / 1e4 + ', ';
   }
   return `linear(${points.substring(0, points.length - 2,)})`;
 };
@@ -4064,7 +4069,7 @@ function addToQueue(builder,) {
 }
 var ViewTransitionBuilder = class {
   constructor(update, options = {},) {
-    this.currentTarget = 'root';
+    this.currentSubject = 'root';
     this.targets = /* @__PURE__ */ new Map();
     this.notifyReady = noop;
     this.readyPromise = new Promise((resolve) => {
@@ -4077,8 +4082,8 @@ var ViewTransitionBuilder = class {
     };
     addToQueue(this,);
   }
-  get(selector,) {
-    this.currentTarget = selector;
+  get(subject,) {
+    this.currentSubject = subject;
     return this;
   }
   layout(keyframes2, options,) {
@@ -4112,13 +4117,13 @@ var ViewTransitionBuilder = class {
   }
   updateTarget(target, keyframes2, options = {},) {
     const {
-      currentTarget,
+      currentSubject,
       targets,
     } = this;
-    if (!targets.has(currentTarget,)) {
-      targets.set(currentTarget, {},);
+    if (!targets.has(currentSubject,)) {
+      targets.set(currentSubject, {},);
     }
-    const targetData = targets.get(currentTarget,);
+    const targetData = targets.get(currentSubject,);
     targetData[target] = {
       keyframes: keyframes2,
       options,
@@ -4198,6 +4203,7 @@ function PopChild({
   children,
   isPresent: isPresent2,
   anchorX,
+  root,
 },) {
   const id4 = useId();
   const ref = useRef3(null,);
@@ -4224,7 +4230,8 @@ function PopChild({
     ref.current.dataset.motionPopId = id4;
     const style2 = document.createElement('style',);
     if (nonce) style2.nonce = nonce;
-    document.head.appendChild(style2,);
+    const parent = root ?? document.head;
+    parent.appendChild(style2,);
     if (style2.sheet) {
       style2.sheet.insertRule(`
           [data-motion-pop-id="${id4}"] {
@@ -4237,8 +4244,9 @@ function PopChild({
         `,);
     }
     return () => {
-      if (document.head.contains(style2,)) {
-        document.head.removeChild(style2,);
+      parent.removeChild(style2,);
+      if (parent.contains(style2,)) {
+        parent.removeChild(style2,);
       }
     };
   }, [isPresent2,],);
@@ -4260,6 +4268,7 @@ var PresenceChild = ({
   presenceAffectsLayout,
   mode,
   anchorX,
+  root,
 },) => {
   const presenceChildren = useConstant(newChildrenMap,);
   const id4 = useId();
@@ -4299,6 +4308,7 @@ var PresenceChild = ({
     children = jsx3(PopChild, {
       isPresent: isPresent2,
       anchorX,
+      root,
       children,
     },);
   }
@@ -4327,6 +4337,7 @@ var AnimatePresence = ({
   mode = 'sync',
   propagate = false,
   anchorX = 'left',
+  root,
 },) => {
   const [isParentPresent, safeToRemove,] = usePresence(propagate,);
   const presentChildren = useMemo2(() => onlyElements(children,), [children,],);
@@ -4403,6 +4414,7 @@ var AnimatePresence = ({
         custom,
         presenceAffectsLayout,
         mode,
+        root,
         onExitComplete: isPresent2 ? void 0 : onExit,
         anchorX,
         children: child,
@@ -4586,7 +4598,7 @@ function isValidMotionProp(key7,) {
 }
 var shouldForward = (key7) => !isValidMotionProp(key7,);
 function loadExternalIsValidProp(isValidProp,) {
-  if (!isValidProp) return;
+  if (typeof isValidProp !== 'function') return;
   shouldForward = (key7) => key7.startsWith('on',) ? !isValidMotionProp(key7,) : isValidProp(key7,);
 }
 try {
@@ -7979,6 +7991,7 @@ function createProjectionNode2({
     constructor(latestValues = {}, parent = defaultParent == null ? void 0 : defaultParent(),) {
       this.id = id2++;
       this.animationId = 0;
+      this.animationCommitId = 0;
       this.children = /* @__PURE__ */ new Set();
       this.options = {};
       this.isTreeAnimating = false;
@@ -8211,9 +8224,14 @@ function createProjectionNode2({
         this.nodes.forEach(clearMeasurements,);
         return;
       }
+      if (this.animationId <= this.animationCommitId) {
+        this.nodes.forEach(clearIsLayoutDirty,);
+        return;
+      }
       if (!this.isUpdating) {
         this.nodes.forEach(clearIsLayoutDirty,);
       }
+      this.animationCommitId = this.animationId;
       this.isUpdating = false;
       this.nodes.forEach(resetTransformStyle,);
       this.nodes.forEach(updateLayout,);
@@ -10190,6 +10208,8 @@ function calcNextTime(current2, next2, prev, labels,) {
     return Math.max(0, current2 + parseFloat(next2,),);
   } else if (next2 === '<') {
     return prev;
+  } else if (next2.startsWith('<',)) {
+    return Math.max(0, prev + parseFloat(next2.slice(1,),),);
   } else {
     return labels.get(next2,) ?? current2;
   }
@@ -10277,7 +10297,7 @@ function createAnimationsFromSequence(
       } = valueTransition;
       const calculatedDelay = typeof delay2 === 'function' ? delay2(elementIndex, numSubjects,) : delay2;
       const numKeyframes = valueKeyframesAsList.length;
-      const createGenerator = isGenerator(type,) ? type : generators == null ? void 0 : generators[type];
+      const createGenerator = isGenerator(type,) ? type : generators == null ? void 0 : generators[type || 'keyframes'];
       if (numKeyframes <= 2 && createGenerator) {
         let absoluteDelta = 100;
         if (numKeyframes === 2 && isNumberKeyframesArray(valueKeyframesAsList,)) {
@@ -10553,6 +10573,9 @@ function createScopedAnimate(scope,) {
     const animation = new GroupAnimationWithThen(animations2,);
     if (scope) {
       scope.animations.push(animation,);
+      animation.finished.then(() => {
+        removeItem(scope.animations, animation,);
+      },);
     }
     return animation;
   }
@@ -10568,6 +10591,7 @@ function useAnimate() {
   const animate22 = useConstant(() => createScopedAnimate(scope,));
   useUnmountEffect(() => {
     scope.animations.forEach((animation) => animation.stop());
+    scope.animations.length = 0;
   },);
   return [scope, animate22,];
 }
@@ -10841,6 +10865,20 @@ function useInstantTransition() {
 function disableInstantTransitions() {
   MotionGlobalConfig.instantAnimations = false;
 }
+function usePageInView() {
+  const [isInView, setIsInView,] = useState(true,);
+  useEffect(() => {
+    const handleVisibilityChange = () => setIsInView(!document.hidden,);
+    if (document.hidden) {
+      handleVisibilityChange();
+    }
+    document.addEventListener('visibilitychange', handleVisibilityChange,);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange,);
+    };
+  }, [],);
+  return isInView;
+}
 var appearAnimationStore = /* @__PURE__ */ new Map();
 var appearComplete = /* @__PURE__ */ new Map();
 var appearStoreId = (elementId, valueName,) => {
@@ -11214,15 +11252,17 @@ function stagger(duration = 0.1, {
   };
 }
 
-// /:https://app.framerstatic.com/framer.UWLYDHV3.mjs
-import { lazy as ReactLazy, } from 'react';
+// /:https://app.framerstatic.com/framer.L7DRXRFF.mjs
+
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
 import { Suspense as Suspense2, } from 'react';
 import { memo as memo2, } from 'react';
 import ReactDOM from 'react-dom';
+import { useSyncExternalStore, } from 'react';
 import { createRef, } from 'react';
 import { useTransition, } from 'react';
+import { createPortal, } from 'react-dom';
 import { cloneElement as cloneElement32, } from 'react';
 var __unframerNavigator2 = typeof window !== 'undefined' ? navigator : void 0;
 var require_hsluv = __commonJS({
@@ -12150,37 +12190,46 @@ var preloadKey = 'preload';
 function isLazyComponentType(componentType,) {
   return typeof componentType === 'object' && componentType !== null && !isValidElement(componentType,) && preloadKey in componentType;
 }
-function lazy(factory,) {
-  const LazyComponent = ReactLazy(factory,);
+function lazy(factory, moduleName = 'default',) {
   let factoryPromise;
   let LoadedComponent;
   let hasRendered = false;
-  const Component17 = forwardRef(function LazyWithPreload(props, ref,) {
-    useEffect(() => {
-      hasRendered = true;
-    }, [],);
-    const Comp = LoadedComponent ?? LazyComponent;
-    return /* @__PURE__ */ jsx3(Comp, {
-      ref,
-      ...props,
-    },);
-  },);
-  Component17.preload = () => {
+  let error;
+  const load = () => {
     if (!factoryPromise) {
       factoryPromise = factory().then((module) => {
-        LoadedComponent = module.default;
+        if (!(moduleName in module)) throw new Error(`Module does not contain export '${moduleName}'`,);
+        LoadedComponent = module[moduleName];
         return LoadedComponent;
+      },).catch((err) => {
+        error = err;
       },);
     }
     return factoryPromise;
   };
-  Component17.getStatus = () => {
+  const Component18 = forwardRef(function LazyWithPreload(props, ref,) {
+    useEffect(() => {
+      hasRendered = true;
+    }, [],);
+    if (error) {
+      throw error;
+    }
+    if (!LoadedComponent) {
+      throw load();
+    }
+    return /* @__PURE__ */ jsx3(LoadedComponent, {
+      ref,
+      ...props,
+    },);
+  },);
+  Component18.preload = load;
+  Component18.getStatus = () => {
     return {
       hasLoaded: LoadedComponent !== void 0,
       hasRendered,
     };
   };
-  return Component17;
+  return Component18;
 }
 var objectKeys = Object.keys;
 function hasProp(o, prop,) {
@@ -12842,23 +12891,26 @@ function forwardCurrentQueryParams(href,) {
   }
   return forwardQueryParams(queryParamsString, href,);
 }
+var FRAMER_VARIANT_KEY = 'framer_variant';
 function forwardQueryParams(queryParamsString, href,) {
   const startOfHash = href.indexOf('#',);
   const hrefWithoutHash = startOfHash === -1 ? href : href.substring(0, startOfHash,);
   const hash2 = startOfHash === -1 ? '' : href.substring(startOfHash,);
   const startOfSearch = hrefWithoutHash.indexOf('?',);
-  if (startOfSearch === -1) {
-    return hrefWithoutHash + queryParamsString + hash2;
-  }
+  const baseUrl = startOfSearch === -1 ? hrefWithoutHash : hrefWithoutHash.substring(0, startOfSearch,);
+  const searchString = startOfSearch === -1 ? '' : hrefWithoutHash.substring(startOfSearch,);
+  const newSearchParams = new URLSearchParams(searchString,);
   const currentSearchParams = new URLSearchParams(queryParamsString,);
-  const newSearchString = hrefWithoutHash.substring(startOfSearch + 1,);
-  const newSearchParams = new URLSearchParams(newSearchString,);
   for (const [key7, value,] of currentSearchParams) {
-    if (!newSearchParams.has(key7,)) {
-      newSearchParams.append(key7, value,);
-    }
+    if (newSearchParams.has(key7,)) continue;
+    if (key7 === FRAMER_VARIANT_KEY) continue;
+    newSearchParams.append(key7, value,);
+  }
+  const newSearchString = newSearchParams.toString();
+  if (newSearchString === '') {
+    return hrefWithoutHash + hash2;
   }
-  return hrefWithoutHash.substring(0, startOfSearch + 1,) + newSearchParams.toString() + hash2;
+  return baseUrl + '?' + newSearchString + hash2;
 }
 async function replacePathVariables(path, currentLocale, nextLocale, defaultLocale, collectionId, pathVariables, collectionUtils,) {
   var _a;
@@ -20331,8 +20383,38 @@ var inputIconCSSDeclaration = {
 function createRGBVariableFallbacks(variables, fallback,) {
   return css2.variable(...variables.flatMap((variable) => [`${variable}-rgb`, variable,]), fallback,);
 }
+var defaultRichTextContainerStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+};
+var defaultTextFillStyle = {
+  display: 'inline-block',
+};
+var defaultImageStyle = {
+  display: 'block',
+};
 var richTextCSSRules = /* @__PURE__ */ (() => [
+  /**
+   * RichTextContainer styles can get overridden by other static or inline styles collected in
+   * style collectors, as well as styles defined directly in the @link{RichText.tsx} component.
+   *
+   * NOTE: `display: flex` can get overridden with `display: -webkit-box` in
+   * @link{collectTextTruncation.ts} if the text is truncated. In this case, the flex-specific
+   * properties are not supported, e.g. `justify-content`. This is ok because truncated text has
+   * auto height and doesn't support vertical alignment. In any case, keep this in mind when
+   * using other flex-specific properties.
+   */
   /* css */
+  `
+        [data-framer-component-type="RichTextContainer"] {
+            display: ${defaultRichTextContainerStyle.display};
+            flex-direction: ${defaultRichTextContainerStyle.flexDirection};
+            justify-content: ${defaultRichTextContainerStyle.justifyContent};
+            outline: none;
+            flex-shrink: 0;
+        }
+    `, /* css */
   `
         p.framer-text,
         div.framer-text,
@@ -20499,7 +20581,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
   /* css */
   `
         .framer-text[data-text-fill] {
-            display: inline-block;
+            display: ${defaultTextFillStyle.display};
             background-clip: text;
             -webkit-background-clip: text;
             /* make this a transparent color if you want to visualise the clipping  */
@@ -20869,7 +20951,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
     `, /* css */
   `
         .framer-image.framer-text {
-            display: block;
+            display: ${defaultImageStyle.display};
             max-width: 100%;
             height: auto;
         }
@@ -21027,6 +21109,42 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
         }
     `,
 ])();
+var textTruncationDisplayInlineVariableForSafari16 = '--text-truncation-display-inline-for-safari-16';
+var textTruncationDisplayNoneVariableForSafari16 = '--text-truncation-display-none-for-safari-16';
+var textTruncationLineBreakVariableForSafari16 = '--text-truncation-line-break-for-safari-16';
+var blockLikeElementSelectors = [
+  'div.framer-text',
+  'p.framer-text',
+  'h1.framer-text',
+  'h2.framer-text',
+  'h3.framer-text',
+  'h4.framer-text',
+  'h5.framer-text',
+  'h6.framer-text',
+  'ol.framer-text',
+  'ul.framer-text',
+  'li.framer-text',
+  'blockquote.framer-text',
+  '.framer-text.framer-image',
+];
+var anySafariVersion = '(background: -webkit-named-image(i))';
+var safari17OrGreater = '(contain-intrinsic-size: inherit)';
+var safari16TextTruncationFix = /* @__PURE__ */ (() => [`@supports ${anySafariVersion} and (not ${safari17OrGreater}) {
+        /* Render block-like elements inline when text is truncated, otherwise default to user agent (revert)  */
+        ${blockLikeElementSelectors.join(', ',)} { display: var(${textTruncationDisplayInlineVariableForSafari16}, revert) }
+
+        /* Add a line break after each block-like element that we render inline, to resemble the block-like behavior */
+        ${
+  blockLikeElementSelectors.map((selector) => `${selector}::after`).join(', ',)
+} { content: var(${textTruncationLineBreakVariableForSafari16}); white-space: pre; }
+
+        /* Don't render modules (e.g. videos, code-blocks), or tables when text is truncated, because often these can't be truncated and their children might be block elements */
+        .framer-text.framer-text-module,
+        .framer-text.framer-table-wrapper { display: var(${textTruncationDisplayNoneVariableForSafari16}, revert) }
+
+        /* Render text-fill elements inline when text is truncated, otherwise default to their default value (e.g. inline-block) */
+        p.framer-text[data-text-fill] { display: var(${textTruncationDisplayInlineVariableForSafari16}, ${defaultTextFillStyle.display}) }
+    }`,])();
 var defaultCache = /* @__PURE__ */ new Set();
 var defaultSheet;
 function injectCSSRule(cssRule, sheet, cache2 = defaultCache,) {
@@ -21301,6 +21419,7 @@ var pageContentWrapperWrapperCSSRules = [
   `[data-framer-component-type="PageContentWrapper"] > *, [data-framer-component-type="PageContentWrapper"] > [data-framer-component-type] { position: relative; }`,
 ];
 var presenceCSS = [`[data-is-present="false"], [data-is-present="false"] * { pointer-events: none !important; }`,];
+var lightboxCSS = [`.framer-lightbox-container { opacity: 1 !important; pointer-events: auto !important; }`,];
 var cursorCSS = [
   `[data-framer-cursor="pointer"] { cursor: pointer; }`,
   `[data-framer-cursor="grab"] { cursor: grab; }`,
@@ -21333,13 +21452,13 @@ var hideScrollbars = [
 ];
 var willChangeOverrideCSSVariable = '--framer-will-change-override';
 var willChangeEffectOverrideCSSVariable = '--framer-will-change-effect-override';
-var anySafariVersion = '(background: -webkit-named-image(i))';
+var anySafariVersion2 = '(background: -webkit-named-image(i))';
 var safari16OrGreater = '(grid-template-rows: subgrid)';
 var willChangeTransformRules = (isPreview) =>
   isPreview
     ? [
       `body { ${willChangeOverrideCSSVariable}: none; }`,
-      `@supports ${anySafariVersion} and (not ${safari16OrGreater}) { body { ${willChangeOverrideCSSVariable}: transform; } }`,
+      `@supports ${anySafariVersion2} and (not ${safari16OrGreater}) { body { ${willChangeOverrideCSSVariable}: transform; } }`,
     ]
     : [`body { ${willChangeOverrideCSSVariable}: none; ${willChangeEffectOverrideCSSVariable}: none; }`,];
 var frameCSSRules = (isPreview) => {
@@ -21370,6 +21489,8 @@ var combineCSSRules =
     ...resetCSS,
     ...hideScrollbars,
     ...overflowClipFallbackCSSRules,
+    ...lightboxCSS,
+    ...safari16TextTruncationFix,
   ];
 export var combinedCSSRules = /* @__PURE__ */ combineCSSRules(false,);
 var combinedCSSRulesForPreview = /* @__PURE__ */ combineCSSRules(true,);
@@ -23199,23 +23320,45 @@ function getImageStyle(image,) {
     objectFit: cssObjectFit(image.fit,),
   };
 }
+function useDecodingAttribute(avoidAsyncDecoding,) {
+  const currentDecoding = React4.useRef(avoidAsyncDecoding ? 'auto' : 'async',);
+  const switchDecodingToAuto = useCallback((node) => {
+    currentDecoding.current = 'auto';
+    node.decoding = 'auto';
+  }, [],);
+  const onImageLoad = useCallback((event) => {
+    switchDecodingToAuto(event.currentTarget,);
+  }, [switchDecodingToAuto,],);
+  const onImageMount = useCallback((node) => {
+    if (node == null ? void 0 : node.complete) switchDecodingToAuto(node,);
+  }, [switchDecodingToAuto,],);
+  return {
+    decoding: currentDecoding.current,
+    onImageLoad,
+    onImageMount,
+  };
+}
 function StaticImage({
   image,
   containerSize,
   nodeId,
   alt,
   draggable,
-  syncDecoding,
+  avoidAsyncDecoding,
 },) {
   const source = runtime.useImageSource(image, containerSize, nodeId,);
   const imageStyle = getImageStyle(image,);
-  const imageRef = React4.useRef(null,);
+  const {
+    decoding,
+    onImageLoad,
+    onImageMount,
+  } = useDecodingAttribute(avoidAsyncDecoding,);
   return (
     // eslint-disable-next-line framer-studio/require-async-decoding -- we conditionally apply it
     /* @__PURE__ */
     jsx3('img', {
-      ref: imageRef,
-      decoding: syncDecoding ? 'sync' : 'async',
+      ref: onImageMount,
+      decoding,
       fetchPriority: image.fetchPriority,
       loading: image.loading,
       width: image.pixelWidth,
@@ -23223,6 +23366,7 @@ function StaticImage({
       sizes: image.sizes,
       srcSet: image.srcSet,
       src: source,
+      onLoad: onImageLoad,
       alt: alt ?? image.alt ?? '',
       style: imageStyle,
       draggable,
@@ -23312,7 +23456,7 @@ function BackgroundImageComponent({
     } else if (RenderTarget.current() !== RenderTarget.canvas) {
       imageNode = /* @__PURE__ */ jsx3(StaticImage, {
         image,
-        syncDecoding: RenderTarget.current() === RenderTarget.export,
+        avoidAsyncDecoding: RenderTarget.current() === RenderTarget.export,
         ...props,
       },);
     } else if (
@@ -23466,17 +23610,10 @@ function getIntrinsicSizeForBackgroundImage(background,) {
       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) {
+  if (background.src === void 0) {
     return {
-      width: parseInt(width,),
-      height: parseInt(height,),
+      width: 1,
+      height: 1,
     };
   }
   return void 0;
@@ -23774,7 +23911,7 @@ function useMeasuredSize(ref,) {
   return size.current;
 }
 var SIZE_COMPATIBILITY_WRAPPER_ATTRIBUTE = 'data-framer-size-compatibility-wrapper';
-var withMeasuredSize = (Component17) => (props) => {
+var withMeasuredSize = (Component18) => (props) => {
   const ref = React4.useRef(null,);
   const size = useMeasuredSize(ref,);
   const dataProps = {
@@ -23791,7 +23928,7 @@ var withMeasuredSize = (Component17) => (props) => {
     },
     ref,
     ...dataProps,
-    children: shouldRender && /* @__PURE__ */ jsx3(Component17, {
+    children: shouldRender && /* @__PURE__ */ jsx3(Component18, {
       ...props,
       width: (size == null ? void 0 : size.width) ?? fallbackWidth,
       height: (size == null ? void 0 : size.height) ?? fallbackHeight,
@@ -26771,7 +26908,7 @@ var clamp2 = (value, a, b,) => {
 var DraggingContext = /* @__PURE__ */ React4.createContext({
   dragging: false,
 },);
-function WithDragging(Component17,) {
+function WithDragging(Component18,) {
   const _WithDraggingHOC = class _WithDraggingHOC2 extends React4.Component {
     constructor(props, defaultProps,) {
       super(props, defaultProps,);
@@ -27392,7 +27529,7 @@ function WithDragging(Component17,) {
         value: {
           dragging: this.state.isDragging,
         },
-        children: /* @__PURE__ */ jsx3(Component17, {
+        children: /* @__PURE__ */ jsx3(Component18, {
           ...originalProps,
         },),
       },);
@@ -27429,10 +27566,10 @@ function WithDragging(Component17,) {
     constraints: {},
     mouseWheel: false,
   },);
-  __publicField(_WithDraggingHOC, 'defaultProps', Object.assign({}, Component17.defaultProps, _WithDraggingHOC.draggingDefaultProps,),);
+  __publicField(_WithDraggingHOC, 'defaultProps', Object.assign({}, Component18.defaultProps, _WithDraggingHOC.draggingDefaultProps,),);
   let WithDraggingHOC = _WithDraggingHOC;
   const withDragging = WithDraggingHOC;
-  (0, import_hoist_non_react_statics2.default)(withDragging, Component17,);
+  (0, import_hoist_non_react_statics2.default)(withDragging, Component18,);
   return withDragging;
 }
 var hoverProps = {
@@ -28683,7 +28820,7 @@ function useInfiniteScroll({
     enabled: paginationInfo.currentPage < paginationInfo.totalPages,
   },);
 }
-function withInfiniteScroll(Component17,) {
+function withInfiniteScroll(Component18,) {
   return React4.forwardRef(({
     __paginationInfo,
     __loadMore,
@@ -28696,7 +28833,7 @@ function withInfiniteScroll(Component17,) {
       ref: infiniteScrollRef,
       paginationInfo: __paginationInfo,
     },);
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ...props,
       ref: infiniteScrollRef,
     },);
@@ -31603,7 +31740,7 @@ function convertColorProps(props,) {
   }
   return props;
 }
-function WithOverride(Component17, override,) {
+function WithOverride(Component18, override,) {
   const useOverride = typeof override === 'function' ? (props) => override(convertColorProps(props,),) : () => convertColorProps(override,);
   const ComponentWithOverride = function (props,) {
     useContext(DataObserverContext,);
@@ -31612,14 +31749,14 @@ function WithOverride(Component17, override,) {
       style: style2,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ...rest,
       ...overrideProps,
       _initialStyle: style2,
     },);
   };
-  (0, import_hoist_non_react_statics4.default)(ComponentWithOverride, Component17,);
-  ComponentWithOverride['displayName'] = `WithOverride(${Component17.displayName || Component17.name})`;
+  (0, import_hoist_non_react_statics4.default)(ComponentWithOverride, Component18,);
+  ComponentWithOverride['displayName'] = `WithOverride(${Component18.displayName || Component18.name})`;
   return ComponentWithOverride;
 }
 var prefix = '__framer__';
@@ -31758,7 +31895,7 @@ var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
   return new Set(componentsWithSSRStylesAttr.split(' ',),);
 })();
 var framerCSSMarker = 'data-framer-css-ssr';
-var withCSS = (Component17, escapedCSS, componentSerializationId,) =>
+var withCSS = (Component18, escapedCSS, componentSerializationId,) =>
   React4.forwardRef((props, ref,) => {
     const {
       sheet,
@@ -31768,23 +31905,7 @@ var withCSS = (Component17, escapedCSS, componentSerializationId,) =>
     if (!isBrowser2()) {
       if (isFunction(escapedCSS,)) escapedCSS = escapedCSS(RenderTarget.current(),);
       const concatenatedCSS = Array.isArray(escapedCSS,) ? escapedCSS.join('\n',) : escapedCSS;
-      return /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          /* @__PURE__ */ jsx3('style', {
-            ...{
-              [framerCSSMarker]: true,
-            },
-            'data-framer-component': id3,
-            dangerouslySetInnerHTML: {
-              __html: concatenatedCSS,
-            },
-          },),
-          /* @__PURE__ */ jsx3(Component17, {
-            ...props,
-            ref,
-          },),
-        ],
-      },);
+      cssCollector.add(concatenatedCSS, id3,);
     }
     useInsertionEffect(() => {
       if (id3 && componentsWithServerRenderedStyles.has(id3,)) return;
@@ -31795,11 +31916,32 @@ var withCSS = (Component17, escapedCSS, componentSerializationId,) =>
         : escapedCSS.split('\n',);
       css22.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2,));
     }, [],);
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ...props,
       ref,
     },);
   },);
+var CSSCollector = class {
+  constructor() {
+    __publicField(this, 'styles', /* @__PURE__ */ new Set(),);
+    __publicField(this, 'componentIds', /* @__PURE__ */ new Set(),);
+  }
+  add(css22, componentId,) {
+    this.styles.add(css22,);
+    if (componentId) this.componentIds.add(componentId,);
+  }
+  getStyles() {
+    return this.styles;
+  }
+  getComponentIds() {
+    return this.componentIds;
+  }
+  clear() {
+    this.styles.clear();
+    this.componentIds.clear();
+  }
+};
+var cssCollector = /* @__PURE__ */ new CSSCollector();
 var SSRParentVariantsContext = /* @__PURE__ */ React4.createContext(void 0,);
 var SSRVariantClassName = 'ssr-variant';
 function renderBranchedChildrenFromPropertyOverrides(
@@ -32083,7 +32225,7 @@ var AnimationCollector = class {
 };
 _variantHashes = /* @__PURE__ */ new WeakMap();
 var framerAppearEffects = /* @__PURE__ */ new AnimationCollector();
-function withOptimizedAppearEffect(Component17,) {
+function withOptimizedAppearEffect(Component18,) {
   return React4.forwardRef(({
     optimized,
     ...props
@@ -32106,7 +32248,7 @@ function withOptimizedAppearEffect(Component17,) {
       );
     }
     const disabledProps = getDisabledFXPropsInStaticRenderer(props,);
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ref,
       ...props,
       ...disabledProps,
@@ -32402,8 +32544,11 @@ function useParallax(options, ref, visibilityStyle,) {
       : effectDisabledStyle,
   };
 }
+function isTargetAndTransition(value,) {
+  return typeof value === 'object' && value !== null;
+}
 function getTransition(value,) {
-  if (isString(value,) || !isObject2(value,)) return void 0;
+  if (!isTargetAndTransition(value,)) return void 0;
   return value == null ? void 0 : value.transition;
 }
 function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, instant,) {
@@ -32413,7 +32558,9 @@ function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, i
       if (shouldReduceMotion && key7 !== 'opacity') return resolve();
       const motionValue2 = effect.values[key7];
       motionValue2.stop();
-      let value = !isObject2(target,) ? defaultFXValues[key7] : (target == null ? void 0 : target[key7]) ?? defaultFXValues[key7];
+      let value = !isTargetAndTransition(target,)
+        ? defaultFXValues[key7]
+        : (target == null ? void 0 : target[key7]) ?? defaultFXValues[key7];
       if (isMotionValue(value,)) value = value.get();
       if (!isNumber2(value,)) return resolve();
       const visualElement = visualElementStore.get(ref.current,);
@@ -33060,11 +33207,11 @@ function addMotionValueStyle(style2, values,) {
 function isVariantOrVariantList2(value,) {
   return isString(value,) || Array.isArray(value,);
 }
-var withFX = (Component17) =>
+var withFX = (Component18) =>
   React4.forwardRef((props, forwardedRef,) => {
     var _a;
     if (props.__withFX) {
-      return /* @__PURE__ */ jsx3(Component17, {
+      return /* @__PURE__ */ jsx3(Component18, {
         ...props,
         animate: void 0,
         initial: void 0,
@@ -33074,7 +33221,7 @@ var withFX = (Component17) =>
     }
     const disabledProps = getDisabledFXPropsInStaticRenderer(props,);
     if (disabledProps) {
-      return /* @__PURE__ */ jsx3(Component17, {
+      return /* @__PURE__ */ jsx3(Component18, {
         ...props,
         ...disabledProps,
         ref: forwardedRef,
@@ -33169,7 +33316,7 @@ var withFX = (Component17) =>
         exit,
       }
       : {};
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ...forwardedProps,
       ...motionGestures,
       __withFX: true,
@@ -33234,10 +33381,10 @@ var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(function Compo
     children: cloneWithPropsAndRef(children, rest,),
   },);
 },);
-var withGeneratedLayoutId = (Component17) =>
+var withGeneratedLayoutId = (Component18) =>
   React4.forwardRef((props, ref,) => {
     const layoutId = useLayoutId2(props,);
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       layoutId,
       ...props,
       layoutIdKey: void 0,
@@ -33271,7 +33418,7 @@ var SynchronousSuspenseErrorBoundary = class extends Component2 {
       error,
       '\n\nComponent stack:\n',
       componentStack,
-      '\n\nThis error indicates a state update wasn\u2019t wrapped with startTransition. Some of the UI might flash as a result. If you are the author of this website, check recently added custom code, and if the issue persists, report it to the Framer team via https://www.framer.com/contact/.',
+      '\n\nThis error indicates a state update wasn\u2019t wrapped with `startTransition`. Some of the UI might flash as a result. If you are the author of this website, update external components and check recently added custom code or code overrides. In case the issue persists, report it to the Framer team via https://www.framer.com/contact/.',
     );
     const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : void 0;
     sendTrackingEvent('published_site_load_recoverable_error', {
@@ -33650,10 +33797,10 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
   );
   const tagName = props.as ?? 'div';
   if (props.rendersWithMotion) {
-    const Component17 = htmlElementAsMotionComponent(tagName,);
+    const Component18 = htmlElementAsMotionComponent(tagName,);
     return /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
       value: nodeId ?? null,
-      children: /* @__PURE__ */ jsx3(Component17, {
+      children: /* @__PURE__ */ jsx3(Component18, {
         ...otherProps,
         ref,
         style: props.style,
@@ -33661,7 +33808,7 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
       },),
     },);
   } else {
-    const Component17 = tagName;
+    const Component18 = tagName;
     const {
       layoutId,
       layoutDependency,
@@ -33669,7 +33816,7 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
     } = otherProps;
     return /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
       value: nodeId ?? null,
-      children: /* @__PURE__ */ jsx3(Component17, {
+      children: /* @__PURE__ */ jsx3(Component18, {
         ...plainHTMLRenderableProps,
         ref,
         style: props.style,
@@ -33962,6 +34109,336 @@ function useCustomCursors(webPageCursors,) {
     return registerCursors(cursors, id3,);
   }, [registerCursors, id3,],);
 }
+var linkKey = 'webPageId';
+function isLinkToWebPage(link,) {
+  return Boolean(link && typeof link === 'object' && linkKey in link,);
+}
+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
+  }`;
+}
+var NestedLinksCollector = class {
+  constructor() {
+    __publicField(this, 'collectedLinks', /* @__PURE__ */ new Map(),);
+    __publicField(this, 'nestingInfo', /* @__PURE__ */ new Map(),);
+  }
+  clear() {
+    this.collectedLinks.clear();
+    this.nestingInfo.clear();
+  }
+  /**
+   * Returns a Map of outer links to their inner links.
+   *
+   * NOTE: This function is called in the SSG renderer sandbox (<root>/src/ssg/src/ssg-sandbox-renderer/sandbox/worker/renderer.ts)
+   */
+  getLinks() {
+    const result = /* @__PURE__ */ new Map();
+    for (const [outerLinkKey, innerLinkKeys,] of this.nestingInfo) {
+      const outerLinkInfo = this.collectedLinks.get(outerLinkKey,);
+      assert(outerLinkInfo, `Outer link not found: ${outerLinkKey}`,);
+      const links = Array.from(innerLinkKeys,).map((innerLinkKey) => {
+        const innerLinkInfo = this.collectedLinks.get(innerLinkKey,);
+        assert(innerLinkInfo, `Inner link not found: ${innerLinkKey}`,);
+        return innerLinkInfo;
+      },);
+      result.set(outerLinkInfo, links,);
+    }
+    return result;
+  }
+  collectNestedLink(outerLink, innerLink,) {
+    if (isWindow && !isTest() || !outerLink.nodeId || !innerLink.nodeId) {
+      return;
+    }
+    this.collectedLinks.set(linkInfoKey(outerLink,), outerLink,);
+    this.collectedLinks.set(linkInfoKey(innerLink,), innerLink,);
+    const outerLinkNestingInfo = this.nestingInfo.get(linkInfoKey(outerLink,),) ?? /* @__PURE__ */ new Set();
+    outerLinkNestingInfo.add(linkInfoKey(innerLink,),);
+    this.nestingInfo.set(linkInfoKey(outerLink,), outerLinkNestingInfo,);
+  }
+};
+var nestedLinksCollector = /* @__PURE__ */ new NestedLinksCollector();
+function useIsOnFramerCanvas() {
+  return RenderTarget.current() === RenderTarget.canvas;
+}
+function isInternalURL(href,) {
+  if (href === void 0) return false;
+  if (href.startsWith('#',) || href.startsWith('/',) || href.startsWith('.',)) return true;
+  return false;
+}
+function isValidURL(href, isInternal,) {
+  try {
+    const url = new URL(href,);
+    return Boolean(url.protocol,);
+  } catch {}
+  return isInternal;
+}
+function getRouteFromPageLink(pageLink, router, currentRoute,) {
+  var _a;
+  if (isString(pageLink,)) {
+    const isInternal = isInternalURL(pageLink,);
+    if (!router.routes || !router.getRoute || !currentRoute || !isInternal) {
+      return;
+    }
+    const [pathnameWithQueryParams,] = pageLink.split('#', 2,);
+    if (pathnameWithQueryParams === void 0) return;
+    const [pathname,] = pathnameWithQueryParams.split('?', 2,);
+    if (pathname === void 0) return;
+    const {
+      routeId,
+    } = inferInitialRouteFromPath(router.routes, pathname,);
+    return router.getRoute(routeId,);
+  }
+  const {
+    webPageId,
+  } = pageLink;
+  return (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId,);
+}
+var elementKey = 'element';
+var collectionKey = 'collection';
+var collectionItemIdKey = 'collectionItemId';
+var pathVariablesKey = 'pathVariables';
+var mediaType = 'framer/page-link,';
+function isFramerPageLink(value,) {
+  return isString(value,) && value.startsWith(`data:${mediaType}`,);
+}
+function createFramerPageLink(targetId = null, options = {},) {
+  const target = targetId ? targetId : 'none';
+  const link = new URL(`data:${mediaType}${target}`,);
+  if (options.element) {
+    link.searchParams.append(elementKey, options.element,);
+  }
+  if (options.collectionItem) {
+    link.searchParams.append(collectionKey, options.collectionItem.collection,);
+    link.searchParams.append(collectionItemIdKey, options.collectionItem.collectionItemId,);
+    link.searchParams.append(pathVariablesKey, new URLSearchParams(options.collectionItem.pathVariables,).toString(),);
+  }
+  return link.href;
+}
+function parseFramerPageLink(link,) {
+  if (!isFramerPageLink(link,)) return;
+  try {
+    const url = new URL(link,);
+    const target = url.pathname.substring(mediaType.length,);
+    const searchParams = url.searchParams;
+    const element = searchParams.has(elementKey,) ? searchParams.get(elementKey,) : void 0;
+    let collectionItem;
+    const collection = searchParams.get(collectionKey,);
+    const collectionItemId = searchParams.get(collectionItemIdKey,);
+    const pathVariablesValue = searchParams.get(pathVariablesKey,);
+    if (collection && collectionItemId && pathVariablesValue) {
+      const pathVariables = Object.fromEntries(new URLSearchParams(pathVariablesValue,).entries(),);
+      collectionItem = {
+        collection,
+        collectionItemId,
+        pathVariables,
+      };
+    }
+    return {
+      target: target === 'none' ? null : target,
+      /**
+       * For historical reason we used to set "element=none" into the
+       * datalink, we no longer do that today, but we still keep this code
+       * so we could parse legacy links correctly.
+       */
+      element: element === 'none' ? void 0 : element,
+      collectionItem,
+    };
+  } catch {
+    return;
+  }
+}
+function shouldOpenLinkInNewTab(link,) {
+  return !isFramerPageLink(link,);
+}
+function navigateFromAttributes(navigate, element, implicitPathVariables,) {
+  var _a;
+  let routeId = element.getAttribute('data-framer-page-link-target',/* Page */
+  );
+  let elementId;
+  let pathVariables;
+  if (routeId) {
+    elementId = element.getAttribute('data-framer-page-link-element',/* Element */
+    ) ?? void 0;
+    const pathVariablesRaw = element.getAttribute('data-framer-page-link-path-variables',/* PathVariables */
+    );
+    if (pathVariablesRaw) {
+      pathVariables = Object.fromEntries(new URLSearchParams(pathVariablesRaw,).entries(),);
+    }
+  } else {
+    const href = element.getAttribute('href',);
+    if (!href) return false;
+    const link = parseFramerPageLink(href,);
+    if (!link || !link.target) return false;
+    routeId = link.target;
+    elementId = link.element ?? void 0;
+    pathVariables = (_a = link.collectionItem) == null ? void 0 : _a.pathVariables;
+  }
+  const smoothScroll = elementId ? element.dataset.framerSmoothScroll !== void 0 : void 0;
+  navigate(routeId, elementId, Object.assign({}, implicitPathVariables, pathVariables,), smoothScroll,);
+  return true;
+}
+function linkFromFramerPageLink(link,) {
+  if (!isFramerPageLink(link,)) return link;
+  const parsed = parseFramerPageLink(link,);
+  if (!parsed) return void 0;
+  const {
+    target,
+    element,
+    collectionItem,
+  } = parsed;
+  if (!target) return void 0;
+  return {
+    webPageId: target,
+    hash: element ?? void 0,
+    pathVariables: createVariablesFromPageLinkCollectionItem(collectionItem,),
+  };
+}
+function createVariablesFromPageLinkCollectionItem(collectionItem,) {
+  if (!collectionItem) return void 0;
+  const variables = {};
+  for (const pathVariablesKey2 in collectionItem.pathVariables) {
+    const value = collectionItem.pathVariables[pathVariablesKey2];
+    if (value) variables[pathVariablesKey2] = value;
+  }
+  return variables;
+}
+var OuterLinkContext = /* @__PURE__ */ createContext(void 0,);
+function ResetOuterLinkContext({
+  children,
+},) {
+  return /* @__PURE__ */ jsx3(OuterLinkContext.Provider, {
+    value: void 0,
+    children,
+  },);
+}
+function useReplaceNestedLinks(children, scopeId, nodeId, href, propsAddedByLink, observerRef,) {
+  const outerLink = useContext(OuterLinkContext,);
+  const furthestExternalComponent = useFurthestExternalComponent();
+  const innerLink = useMemo2(() => ({
+    scopeId,
+    nodeId,
+    furthestExternalComponent,
+  }), [scopeId, nodeId, furthestExternalComponent,],);
+  const router = useRouter();
+  const currentRoute = useCurrentRoute();
+  const route = useMemo2(() => {
+    const pageLink = isLinkToWebPage(href,) ? href : linkFromFramerPageLink(href,);
+    if (!pageLink) return;
+    return getRouteFromPageLink(pageLink, router, currentRoute,);
+  }, [currentRoute, href, router,],);
+  const isOnFramerCanvas = useIsOnFramerCanvas();
+  const shouldReplaceLink = Boolean(!isOnFramerCanvas && (outerLink == null ? void 0 : outerLink.nodeId) && innerLink.nodeId,);
+  const onClick = useCallback((event) => {
+    var _a;
+    if (!propsAddedByLink.href) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const isAppleDevice = /Mac|iPod|iPhone|iPad/u.test(__unframerNavigator2.userAgent,);
+    if (isAppleDevice ? event.metaKey : event.ctrlKey) {
+      openExternalLink(propsAddedByLink.href, '', '_blank',);
+      return;
+    }
+    if (route) {
+      (_a = propsAddedByLink.navigate) == null ? void 0 : _a.call(propsAddedByLink,);
+    } else {
+      openExternalLink(propsAddedByLink.href, propsAddedByLink.rel, propsAddedByLink.target,);
+    }
+  }, [propsAddedByLink, route,],);
+  const onAuxClick = useCallback((event) => {
+    if (!propsAddedByLink.href) return;
+    event.preventDefault();
+    event.stopPropagation();
+    openExternalLink(propsAddedByLink.href, '', '_blank',);
+  }, [propsAddedByLink,],);
+  const onKeyDown = useCallback((event) => {
+    var _a;
+    if (!propsAddedByLink.href) return;
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (route) {
+      (_a = propsAddedByLink.navigate) == null ? void 0 : _a.call(propsAddedByLink,);
+    } else {
+      openExternalLink(propsAddedByLink.href, propsAddedByLink.rel, propsAddedByLink.target,);
+    }
+  }, [propsAddedByLink, route,],);
+  useRefEffect(observerRef, (node) => {
+    if (node === null) return;
+    if (!shouldReplaceLink) return;
+    node.dataset.hydrated = 'true';
+  }, [shouldReplaceLink,],);
+  let replacedChildren = children;
+  if (shouldReplaceLink) {
+    Children.forEach(children, (child) => {
+      if (!isChildReplaceable(child,)) return;
+      assert(
+        linkInfoIsCollectable(outerLink,),
+        'outerLink must have nodeId defined at this point; this was verified with `shouldReplaceLink` above',
+      );
+      assert(
+        linkInfoIsCollectable(innerLink,),
+        'innerLink must have nodeId defined at this point; this was verified with `shouldReplaceLink` above',
+      );
+      nestedLinksCollector.collectNestedLink(outerLink, innerLink,);
+    },);
+    replacedChildren = Children.map(children, (child) => {
+      if (!isChildReplaceable(child,)) return child;
+      const tag = maybeReplaceAnchorWithSpan(child.type,);
+      const {
+        children: childChildren,
+        ...childProps
+      } = child.props;
+      const props = {
+        ...childProps,
+        // This attribute is used in `ssg/src/ssg-sandbox-renderer/worker/nestedLinks.ts` to handle the nested links clicks
+        'data-nested-link': true,
+        role: 'link',
+        tabIndex: 0,
+        onClick,
+        onAuxClick,
+        onKeyDown,
+        as: childProps.as && maybeReplaceAnchorWithSpan(childProps.as,),
+      };
+      const ref = 'ref' in child ? child.ref : void 0;
+      return createElement(tag, // We need to pass the ref here again, otherwise it will be lost
+      {
+        ...props,
+        ref,
+      }, childChildren,);
+    },);
+  }
+  return /* @__PURE__ */ jsx3(OuterLinkContext.Provider, {
+    value: innerLink,
+    children: replacedChildren,
+  },);
+}
+function linkInfoIsCollectable(linkInfo,) {
+  return !isUndefined(linkInfo == null ? void 0 : linkInfo.nodeId,);
+}
+function isChildReplaceable(child,) {
+  return isValidElement(child,) &&
+    (maybeReplaceAnchorWithSpan(child.type,) !== child.type || maybeReplaceAnchorWithSpan(child.props.as,) !== child.props.as);
+}
+function openExternalLink(href, rel, target,) {
+  const link = document.createElement('a',);
+  link.href = href;
+  if (rel) {
+    link.rel = rel;
+  }
+  if (target) {
+    link.target = target;
+  }
+  document.body.appendChild(link,);
+  link.click();
+  link.remove();
+}
+function maybeReplaceAnchorWithSpan(component,) {
+  if (component === 'a') return 'span';
+  if (isMotionComponent(component,) && unwrapMotionComponent(component,) === 'a') return motion.span;
+  return component;
+}
 var Polygon = {
   /**
    * Determine if the vertices are ordered clockwise or counter-clockwise. This works for simple
@@ -34487,19 +34964,31 @@ function Floating({
       x: offsetX ?? 0,
       y: offsetY ?? 0,
     };
-    let getSafePlacementRect;
-    let position;
     let cleanup;
     let cleanupHasRun = false;
     let initialUpdateHasRun = false;
     let anchorRect;
-    let elementRect;
     let safePlacement;
     let calculatedRect;
     let latestEvent;
     let updateSafeArea;
     let scrollX = 0;
     let scrollY = 0;
+    const ancestorInfo = domReadGetAncestorInfo(anchorRef,);
+    const position = ancestorInfo.position;
+    const elementRect = contentRef.current.getBoundingClientRect();
+    const getSafePlacementRect = makeGetSafePlacementFloatingPositionRect({
+      placement,
+      alignment,
+      offset,
+      collisionDetectionSize: collisionDetection
+        ? {
+          width: safeWindow.innerWidth,
+          height: safeWindow.innerHeight,
+        }
+        : void 0,
+      collisionDetectionPadding,
+    },);
     const onRender = () => {
       if (cleanupHasRun) return;
       domWriteUpdatePosition(floatingPositionRef, position, calculatedRect, scrollX, scrollY,);
@@ -34533,29 +35022,12 @@ function Floating({
       safePlacement = safePlacementAndRect[0];
       calculatedRect = safePlacementAndRect[1];
     };
-    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;
+    domReadUpdateSafePlacementAndRect();
+    onUpdate();
+    initialRender();
+    if (ancestorInfo.scrolls) {
       cleanup = domReadStartAnimationFrameLoop(domReadUpdateSafePlacementAndRect,);
-    },);
+    }
     if (!safeArea) {
       return () => {
         cleanup == null ? void 0 : cleanup();
@@ -34620,9 +35092,11 @@ function Floating({
           },),
         /* @__PURE__ */ jsx3(FloatingStackingContext.Provider, {
           value: descendantContext,
-          children: /* @__PURE__ */ jsx3('div', {
-            ref: contentRef,
-            children: childrenWithOrigin(children, origin,),
+          children: /* @__PURE__ */ jsx3(ResetOuterLinkContext, {
+            children: /* @__PURE__ */ jsx3('div', {
+              ref: contentRef,
+              children: childrenWithOrigin(children, origin,),
+            },),
           },),
         },),
       ],
@@ -34631,11 +35105,11 @@ function Floating({
   );
 }
 var Instance = /* @__PURE__ */ React4.forwardRef(function Instance2({
-  Component: Component17,
+  Component: Component18,
   ...props
 }, ref,) {
-  return Component17
-    ? /* @__PURE__ */ jsx3(Component17, {
+  return Component18
+    ? /* @__PURE__ */ jsx3(Component18, {
       ...props,
       ref,
     },)
@@ -34796,20 +35270,16 @@ function ChildrenCanSuspend({
     children,
   },);
 }
-function withChildrenCanSuspend(Component17,) {
+function withChildrenCanSuspend(Component18,) {
   return forwardRef(function withChildrenCanSuspendInner(props, ref,) {
     return /* @__PURE__ */ jsx3(ChildrenCanSuspend, {
-      children: /* @__PURE__ */ jsx3(Component17, {
+      children: /* @__PURE__ */ jsx3(Component18, {
         ...props,
         ref,
       },),
     },);
   },);
 }
-var linkKey = 'webPageId';
-function isLinkToWebPage(link,) {
-  return Boolean(link && typeof link === 'object' && linkKey in link,);
-}
 var PRELOAD_AFTER_MS = 500;
 var OBSERVER_THRESHOLD = 0.9;
 var LOW_MEMORY_THRESHOLD = 1.7;
@@ -34983,18 +35453,6 @@ function resolveSlugsWithSuspense(unresolvedPathSlugs, unresolvedHashSlugs, coll
   }
   return result;
 }
-function isInternalURL(href,) {
-  if (href === void 0) return false;
-  if (href.startsWith('#',) || href.startsWith('/',) || href.startsWith('.',)) return true;
-  return false;
-}
-function isValidURL(href, isInternal,) {
-  try {
-    const url = new URL(href,);
-    return Boolean(url.protocol,);
-  } catch {}
-  return isInternal;
-}
 async function findMatchingRouteAttributesForWebPageLink(router, currentRoute, pageLink, activeLocale, implicitPathVariables,) {
   const {
     webPageId,
@@ -35082,136 +35540,6 @@ function getRouteAttributes(router, currentRoute, routeId, hash2, implicitPathVa
     pathVariables: combinedPathVariables,
   };
 }
-function getRouteFromPageLink(pageLink, router, currentRoute,) {
-  var _a;
-  if (isString(pageLink,)) {
-    const isInternal = isInternalURL(pageLink,);
-    if (!router.routes || !router.getRoute || !currentRoute || !isInternal) {
-      return;
-    }
-    const [pathnameWithQueryParams,] = pageLink.split('#', 2,);
-    if (pathnameWithQueryParams === void 0) return;
-    const [pathname,] = pathnameWithQueryParams.split('?', 2,);
-    if (pathname === void 0) return;
-    const {
-      routeId,
-    } = inferInitialRouteFromPath(router.routes, pathname,);
-    return router.getRoute(routeId,);
-  }
-  const {
-    webPageId,
-  } = pageLink;
-  return (_a = router.getRoute) == null ? void 0 : _a.call(router, webPageId,);
-}
-var elementKey = 'element';
-var collectionKey = 'collection';
-var collectionItemIdKey = 'collectionItemId';
-var pathVariablesKey = 'pathVariables';
-var mediaType = 'framer/page-link,';
-function isFramerPageLink(value,) {
-  return isString(value,) && value.startsWith(`data:${mediaType}`,);
-}
-function createFramerPageLink(targetId = null, options = {},) {
-  const target = targetId ? targetId : 'none';
-  const link = new URL(`data:${mediaType}${target}`,);
-  if (options.element) {
-    link.searchParams.append(elementKey, options.element,);
-  }
-  if (options.collectionItem) {
-    link.searchParams.append(collectionKey, options.collectionItem.collection,);
-    link.searchParams.append(collectionItemIdKey, options.collectionItem.collectionItemId,);
-    link.searchParams.append(pathVariablesKey, new URLSearchParams(options.collectionItem.pathVariables,).toString(),);
-  }
-  return link.href;
-}
-function parseFramerPageLink(link,) {
-  if (!isFramerPageLink(link,)) return;
-  try {
-    const url = new URL(link,);
-    const target = url.pathname.substring(mediaType.length,);
-    const searchParams = url.searchParams;
-    const element = searchParams.has(elementKey,) ? searchParams.get(elementKey,) : void 0;
-    let collectionItem;
-    const collection = searchParams.get(collectionKey,);
-    const collectionItemId = searchParams.get(collectionItemIdKey,);
-    const pathVariablesValue = searchParams.get(pathVariablesKey,);
-    if (collection && collectionItemId && pathVariablesValue) {
-      const pathVariables = Object.fromEntries(new URLSearchParams(pathVariablesValue,).entries(),);
-      collectionItem = {
-        collection,
-        collectionItemId,
-        pathVariables,
-      };
-    }
-    return {
-      target: target === 'none' ? null : target,
-      /**
-       * For historical reason we used to set "element=none" into the
-       * datalink, we no longer do that today, but we still keep this code
-       * so we could parse legacy links correctly.
-       */
-      element: element === 'none' ? void 0 : element,
-      collectionItem,
-    };
-  } catch {
-    return;
-  }
-}
-function shouldOpenLinkInNewTab(link,) {
-  return !isFramerPageLink(link,);
-}
-function navigateFromAttributes(navigate, element, implicitPathVariables,) {
-  var _a;
-  let routeId = element.getAttribute('data-framer-page-link-target',/* Page */
-  );
-  let elementId;
-  let pathVariables;
-  if (routeId) {
-    elementId = element.getAttribute('data-framer-page-link-element',/* Element */
-    ) ?? void 0;
-    const pathVariablesRaw = element.getAttribute('data-framer-page-link-path-variables',/* PathVariables */
-    );
-    if (pathVariablesRaw) {
-      pathVariables = Object.fromEntries(new URLSearchParams(pathVariablesRaw,).entries(),);
-    }
-  } else {
-    const href = element.getAttribute('href',);
-    if (!href) return false;
-    const link = parseFramerPageLink(href,);
-    if (!link || !link.target) return false;
-    routeId = link.target;
-    elementId = link.element ?? void 0;
-    pathVariables = (_a = link.collectionItem) == null ? void 0 : _a.pathVariables;
-  }
-  const smoothScroll = elementId ? element.dataset.framerSmoothScroll !== void 0 : void 0;
-  navigate(routeId, elementId, Object.assign({}, implicitPathVariables, pathVariables,), smoothScroll,);
-  return true;
-}
-function linkFromFramerPageLink(link,) {
-  if (!isFramerPageLink(link,)) return link;
-  const parsed = parseFramerPageLink(link,);
-  if (!parsed) return void 0;
-  const {
-    target,
-    element,
-    collectionItem,
-  } = parsed;
-  if (!target) return void 0;
-  return {
-    webPageId: target,
-    hash: element ?? void 0,
-    pathVariables: createVariablesFromPageLinkCollectionItem(collectionItem,),
-  };
-}
-function createVariablesFromPageLinkCollectionItem(collectionItem,) {
-  if (!collectionItem) return void 0;
-  const variables = {};
-  for (const pathVariablesKey2 in collectionItem.pathVariables) {
-    const value = collectionItem.pathVariables[pathVariablesKey2];
-    if (value) variables[pathVariablesKey2] = value;
-  }
-  return variables;
-}
 var pathVariablesRegExp2 = /:([a-z]\w*)/gi;
 var PathVariablesContext = /* @__PURE__ */ createContext(void 0,);
 function useImplicitPathVariables() {
@@ -35281,187 +35609,6 @@ function combineRels(rel, 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
-  }`;
-}
-var NestedLinksCollector = class {
-  constructor() {
-    __publicField(this, 'collectedLinks', /* @__PURE__ */ new Map(),);
-    __publicField(this, 'nestingInfo', /* @__PURE__ */ new Map(),);
-  }
-  clear() {
-    this.collectedLinks.clear();
-    this.nestingInfo.clear();
-  }
-  /**
-   * Returns a Map of outer links to their inner links.
-   *
-   * NOTE: This function is called in the SSG renderer sandbox (<root>/src/ssg/src/ssg-sandbox-renderer/sandbox/worker/renderer.ts)
-   */
-  getLinks() {
-    const result = /* @__PURE__ */ new Map();
-    for (const [outerLinkKey, innerLinkKeys,] of this.nestingInfo) {
-      const outerLinkInfo = this.collectedLinks.get(outerLinkKey,);
-      assert(outerLinkInfo, `Outer link not found: ${outerLinkKey}`,);
-      const links = Array.from(innerLinkKeys,).map((innerLinkKey) => {
-        const innerLinkInfo = this.collectedLinks.get(innerLinkKey,);
-        assert(innerLinkInfo, `Inner link not found: ${innerLinkKey}`,);
-        return innerLinkInfo;
-      },);
-      result.set(outerLinkInfo, links,);
-    }
-    return result;
-  }
-  collectNestedLink(outerLink, innerLink,) {
-    if (isWindow && !isTest() || !outerLink.nodeId || !innerLink.nodeId) {
-      return;
-    }
-    this.collectedLinks.set(linkInfoKey(outerLink,), outerLink,);
-    this.collectedLinks.set(linkInfoKey(innerLink,), innerLink,);
-    const outerLinkNestingInfo = this.nestingInfo.get(linkInfoKey(outerLink,),) ?? /* @__PURE__ */ new Set();
-    outerLinkNestingInfo.add(linkInfoKey(innerLink,),);
-    this.nestingInfo.set(linkInfoKey(outerLink,), outerLinkNestingInfo,);
-  }
-};
-var nestedLinksCollector = /* @__PURE__ */ new NestedLinksCollector();
-function useIsOnFramerCanvas() {
-  return RenderTarget.current() === RenderTarget.canvas;
-}
-var OuterLinkContext = /* @__PURE__ */ createContext(void 0,);
-function useReplaceNestedLinks(children, scopeId, nodeId, href, propsAddedByLink, observerRef,) {
-  const outerLink = useContext(OuterLinkContext,);
-  const furthestExternalComponent = useFurthestExternalComponent();
-  const innerLink = useMemo2(() => ({
-    scopeId,
-    nodeId,
-    furthestExternalComponent,
-  }), [scopeId, nodeId, furthestExternalComponent,],);
-  const router = useRouter();
-  const currentRoute = useCurrentRoute();
-  const route = useMemo2(() => {
-    const pageLink = isLinkToWebPage(href,) ? href : linkFromFramerPageLink(href,);
-    if (!pageLink) return;
-    return getRouteFromPageLink(pageLink, router, currentRoute,);
-  }, [currentRoute, href, router,],);
-  const {
-    replaceNestedLinks,
-  } = useLibraryFeatures();
-  const isOnFramerCanvas = useIsOnFramerCanvas();
-  const shouldReplaceLink = Boolean(
-    replaceNestedLinks && !isOnFramerCanvas && (outerLink == null ? void 0 : outerLink.nodeId) && innerLink.nodeId,
-  );
-  const onClick = useCallback((event) => {
-    var _a;
-    if (!propsAddedByLink.href) return;
-    event.preventDefault();
-    event.stopPropagation();
-    const isAppleDevice = /Mac|iPod|iPhone|iPad/u.test(__unframerNavigator2.userAgent,);
-    if (isAppleDevice ? event.metaKey : event.ctrlKey) {
-      openExternalLink(propsAddedByLink.href, '', '_blank',);
-      return;
-    }
-    if (route) {
-      (_a = propsAddedByLink.navigate) == null ? void 0 : _a.call(propsAddedByLink,);
-    } else {
-      openExternalLink(propsAddedByLink.href, propsAddedByLink.rel, propsAddedByLink.target,);
-    }
-  }, [propsAddedByLink, route,],);
-  const onAuxClick = useCallback((event) => {
-    if (!propsAddedByLink.href) return;
-    event.preventDefault();
-    event.stopPropagation();
-    openExternalLink(propsAddedByLink.href, '', '_blank',);
-  }, [propsAddedByLink,],);
-  const onKeyDown = useCallback((event) => {
-    var _a;
-    if (!propsAddedByLink.href) return;
-    if (event.key !== 'Enter') return;
-    event.preventDefault();
-    event.stopPropagation();
-    if (route) {
-      (_a = propsAddedByLink.navigate) == null ? void 0 : _a.call(propsAddedByLink,);
-    } else {
-      openExternalLink(propsAddedByLink.href, propsAddedByLink.rel, propsAddedByLink.target,);
-    }
-  }, [propsAddedByLink, route,],);
-  useRefEffect(observerRef, (node) => {
-    if (node === null) return;
-    if (!shouldReplaceLink) return;
-    node.dataset.hydrated = 'true';
-  }, [shouldReplaceLink,],);
-  let replacedChildren = children;
-  if (shouldReplaceLink) {
-    Children.forEach(children, (child) => {
-      if (!isChildReplaceable(child,)) return;
-      assert(
-        linkInfoIsCollectable(outerLink,),
-        'outerLink must have nodeId defined at this point; this was verified with `shouldReplaceLink` above',
-      );
-      assert(
-        linkInfoIsCollectable(innerLink,),
-        'innerLink must have nodeId defined at this point; this was verified with `shouldReplaceLink` above',
-      );
-      nestedLinksCollector.collectNestedLink(outerLink, innerLink,);
-    },);
-    replacedChildren = Children.map(children, (child) => {
-      if (!isChildReplaceable(child,)) return child;
-      const tag = maybeReplaceAnchorWithSpan(child.type,);
-      const {
-        children: childChildren,
-        ...childProps
-      } = child.props;
-      const props = {
-        ...childProps,
-        // This attribute is used in `ssg/src/ssg-sandbox-renderer/worker/nestedLinks.ts` to handle the nested links clicks
-        'data-nested-link': true,
-        role: 'link',
-        tabIndex: 0,
-        onClick,
-        onAuxClick,
-        onKeyDown,
-        as: childProps.as && maybeReplaceAnchorWithSpan(childProps.as,),
-      };
-      const ref = 'ref' in child ? child.ref : void 0;
-      return createElement(tag, // We need to pass the ref here again, otherwise it will be lost
-      {
-        ...props,
-        ref,
-      }, childChildren,);
-    },);
-  }
-  return /* @__PURE__ */ jsx3(OuterLinkContext.Provider, {
-    value: innerLink,
-    children: replacedChildren,
-  },);
-}
-function linkInfoIsCollectable(linkInfo,) {
-  return !isUndefined(linkInfo == null ? void 0 : linkInfo.nodeId,);
-}
-function isChildReplaceable(child,) {
-  return isValidElement(child,) &&
-    (maybeReplaceAnchorWithSpan(child.type,) !== child.type || maybeReplaceAnchorWithSpan(child.props.as,) !== child.props.as);
-}
-function openExternalLink(href, rel, target,) {
-  const link = document.createElement('a',);
-  link.href = href;
-  if (rel) {
-    link.rel = rel;
-  }
-  if (target) {
-    link.target = target;
-  }
-  document.body.appendChild(link,);
-  link.click();
-  link.remove();
-}
-function maybeReplaceAnchorWithSpan(component,) {
-  if (component === 'a') return 'span';
-  if (isMotionComponent(component,) && unwrapMotionComponent(component,) === 'a') return motion.span;
-  return component;
-}
 function useTrackLinkClick({
   nodeId,
   clickTrackingId,
@@ -35804,23 +35951,6 @@ function resolvePageScope(pageLink, router,) {
     siteCanonicalURL: void 0,
   },);
 }
-var IgnoreErrors = class extends Component2 {
-  constructor() {
-    super(...arguments,);
-    __publicField(this, 'state', {
-      error: void 0,
-    },);
-  }
-  static getDerivedStateFromError(error,) {
-    return {
-      error,
-    };
-  }
-  render() {
-    if (this.state.error) return null;
-    return this.props.children;
-  }
-};
 var salt = 'framer';
 var difficulty = 3;
 var tokenLength = 30;
@@ -36033,6 +36163,7 @@ var FormContainer = /* @__PURE__ */ React4.forwardRef(function FormContainer2({
     onError,
     onLoading,
   };
+  const submissionInProgressRef = React4.useRef(false,);
   async function redirectTo(link,) {
     var _a, _b;
     if (isString(link,)) {
@@ -36061,15 +36192,18 @@ var FormContainer = /* @__PURE__ */ React4.forwardRef(function FormContainer2({
   const handleSubmit = async (event) => {
     var _a, _b, _c, _d, _e, _f;
     event.preventDefault();
-    if (!action || !projectHash) return;
-    dispatch({
-      type: 'submit',
-    },);
+    if (!action || !projectHash || submissionInProgressRef.current) return;
+    submissionInProgressRef.current = true;
     const data2 = new FormData(event.currentTarget,);
     await yieldToMain({
-      priority: 'user-blocking',
+      priority: 'user-visible',
       continueAfter: 'paint',
     },);
+    startTransition2(() =>
+      dispatch({
+        type: 'submit',
+      },)
+    );
     addUTMTagsToFormData(data2, safeWindow.document,);
     for (const [key7, value,] of data2) {
       if (value instanceof File) data2.delete(key7,);
@@ -36101,6 +36235,7 @@ var FormContainer = /* @__PURE__ */ React4.forwardRef(function FormContainer2({
       (_f = (_e = callbacks.current).onError) == null ? void 0 : _f.call(_e,);
       console.error(error,);
     }
+    submissionInProgressRef.current = false;
   };
   const handleKeyDown = (event) => {
     const {
@@ -36177,6 +36312,61 @@ function responseHasError(response,) {
   return typeof response === 'object' && response !== null && 'error' in response && isObject2(response.error,) &&
     'message' in response.error && typeof response.error.message === 'string';
 }
+var FORCE_SHOW_EDITORBAR_LOCALSTORAGE_KEY = '__framer_force_showing_editorbar_since';
+var IgnoreErrors = class extends Component2 {
+  constructor() {
+    super(...arguments,);
+    __publicField(this, 'state', {
+      error: void 0,
+    },);
+  }
+  static getDerivedStateFromError(error,) {
+    return {
+      error,
+    };
+  }
+  render() {
+    if (this.state.error) return null;
+    return this.props.children;
+  }
+};
+var isPrioritized = () => {
+  try {
+    return !!localStorage[FORCE_SHOW_EDITORBAR_LOCALSTORAGE_KEY];
+  } catch (e) {
+    return false;
+  }
+};
+var isntPrioritized = () => !isPrioritized();
+var getServerSnapshot = () => false;
+var noOpSubscribe = () => () => {};
+function EditorBarLauncher({
+  EditorBar,
+  fast = false,
+},) {
+  const libraryFeatures = useLibraryFeatures();
+  const framerSiteId = useContext(FormContext,);
+  const enabled = useSyncExternalStore(noOpSubscribe, fast ? isPrioritized : isntPrioritized, getServerSnapshot,);
+  const editorBarFeatures = useMemo2(() => {
+    const features = {};
+    let key7;
+    for (key7 in libraryFeatures) {
+      if (libraryFeatures.hasOwnProperty(key7,) && key7.startsWith('editorBar',)) {
+        features[key7] = libraryFeatures[key7];
+      }
+    }
+    return features;
+  }, [libraryFeatures,],);
+  if (!EditorBar || !framerSiteId || !enabled) return null;
+  return /* @__PURE__ */ jsx3(IgnoreErrors, {
+    children: /* @__PURE__ */ jsx3(Suspense2, {
+      children: /* @__PURE__ */ jsx3(EditorBar, {
+        framerSiteId,
+        features: editorBarFeatures,
+      },),
+    },),
+  },);
+}
 function isSamePage(a, b,) {
   if (a.routeId !== b.routeId) return false;
   if (a.pathVariables === b.pathVariables) return true;
@@ -36351,7 +36541,7 @@ function Router({
   locales = EMPTY_ARRAY,
   preserveQueryParams = false,
   LayoutTemplate,
-  editorBar,
+  EditorBar,
   siteCanonicalURL,
 },) {
   useMarkRouterEffects();
@@ -36648,38 +36838,46 @@ function Router({
   }));
   return /* @__PURE__ */ jsx3(RouterAPIProvider, {
     api,
-    children: /* @__PURE__ */ jsx3(LocaleInfoContext.Provider, {
+    children: /* @__PURE__ */ jsxs(LocaleInfoContext.Provider, {
       value: localeInfo,
-      children: /* @__PURE__ */ jsx3(SynchronousSuspenseErrorBoundary, {
-        children: /* @__PURE__ */ jsxs(SuspenseThatPreservesDom, {
-          children: [
-            /* @__PURE__ */ jsxs(NotFoundErrorBoundary, {
-              notFoundPage,
-              defaultPageStyle,
-              forceUpdateKey: dep,
-              children: [
-                /* @__PURE__ */ jsx3(MarkSuspenseEffects.Start, {},),
-                /* @__PURE__ */ jsx3(WithLayoutTemplate, {
-                  LayoutTemplate,
-                  routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
-                  style: defaultPageStyle,
-                  children: (inLayoutTemplate) => {
-                    return /* @__PURE__ */ jsx3(Fragment, {
-                      children: pageExistsInCurrentLocale
-                        ? renderPage(currentRoute.page, inLayoutTemplate ? templatePageStyle : defaultPageStyle,)
-                        : // LAYOUT_TEMPLATE @TODO: display: content for not found page?
-                        notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
-                    }, remountKey,);
-                  },
-                },),
-              ],
-            },),
-            editorBar,
-            /* @__PURE__ */ jsx3(TurnOnReactEventHandling, {},),
-            /* @__PURE__ */ jsx3(MarkSuspenseEffects.End, {},),
-          ],
+      children: [
+        EditorBar && /* @__PURE__ */ jsx3(EditorBarLauncher, {
+          EditorBar,
+          fast: true,
         },),
-      },),
+        /* @__PURE__ */ jsx3(SynchronousSuspenseErrorBoundary, {
+          children: /* @__PURE__ */ jsxs(SuspenseThatPreservesDom, {
+            children: [
+              /* @__PURE__ */ jsxs(NotFoundErrorBoundary, {
+                notFoundPage,
+                defaultPageStyle,
+                forceUpdateKey: dep,
+                children: [
+                  /* @__PURE__ */ jsx3(MarkSuspenseEffects.Start, {},),
+                  /* @__PURE__ */ jsx3(WithLayoutTemplate, {
+                    LayoutTemplate,
+                    routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
+                    style: defaultPageStyle,
+                    children: (inLayoutTemplate) => {
+                      return /* @__PURE__ */ jsx3(Fragment, {
+                        children: pageExistsInCurrentLocale
+                          ? renderPage(currentRoute.page, inLayoutTemplate ? templatePageStyle : defaultPageStyle,)
+                          : // LAYOUT_TEMPLATE @TODO: display: content for not found page?
+                          notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
+                      }, remountKey,);
+                    },
+                  },),
+                ],
+              },),
+              EditorBar && /* @__PURE__ */ jsx3(EditorBarLauncher, {
+                EditorBar,
+              },),
+              /* @__PURE__ */ jsx3(TurnOnReactEventHandling, {},),
+              /* @__PURE__ */ jsx3(MarkSuspenseEffects.End, {},),
+            ],
+          },),
+        },),
+      ],
     },),
   },);
 }
@@ -36781,20 +36979,12 @@ function resolveFetchDataValue(result, request,) {
   }
   return resolvedValue;
 }
+var minimumCacheDurationMs = 5e3;
 function isCacheExpired(insertionTimestamp, cacheDuration,) {
   if (RenderTarget.current() === RenderTarget.canvas) {
     return false;
   }
-  const cacheDurationMs = cacheDuration === 0
-    ? // When the cache is set to 0 seconds we set use a 500ms cache delay
-    // to avoid triggering refetching when a variant switches from
-    // preloading to rendering the component (and
-    // resubscribing to the fetch client). When another component
-    // relying on the same endpoint (eg another page) is mounted again
-    // and the cache time is set to 0, the the data will be fetched
-    // again.
-    500
-    : cacheDuration * 1e3;
+  const cacheDurationMs = Math.max(cacheDuration * 1e3, minimumCacheDurationMs,);
   const currentTimestamp = Date.now();
   const expirationTimestamp = insertionTimestamp + cacheDurationMs;
   return currentTimestamp >= expirationTimestamp;
@@ -37234,9 +37424,7 @@ function PageRoot({
                 width: 'auto',
               },
               preserveQueryParams,
-              editorBar: /* @__PURE__ */ jsx3(EditorBarLauncher, {
-                EditorBar,
-              },),
+              EditorBar,
               disableHistory,
               LayoutTemplate,
               siteCanonicalURL,
@@ -37264,37 +37452,6 @@ function PageRoot({
     },);
   }
 }
-function EditorBarLauncher({
-  EditorBar,
-},) {
-  const libraryFeatures = useLibraryFeatures();
-  const [mounted, setMounted,] = useState(false,);
-  const framerSiteId = useContext(FormContext,);
-  const editorBarFeatures = useMemo2(() => {
-    const features = {};
-    let key7;
-    for (key7 in libraryFeatures) {
-      if (libraryFeatures.hasOwnProperty(key7,) && key7.startsWith('editorBar',)) {
-        features[key7] = libraryFeatures[key7];
-      }
-    }
-    return features;
-  }, [libraryFeatures,],);
-  useEffect(() => {
-    startTransition2(() => {
-      setMounted(true,);
-    },);
-  }, [],);
-  if (!EditorBar || !framerSiteId || !mounted) return null;
-  return /* @__PURE__ */ jsx3(IgnoreErrors, {
-    children: /* @__PURE__ */ jsx3(Suspense2, {
-      children: /* @__PURE__ */ jsx3(EditorBar, {
-        framerSiteId,
-        features: editorBarFeatures,
-      },),
-    },),
-  },);
-}
 var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwardRef(function ResolveLinksInner({
   links,
   children,
@@ -42541,12 +42698,12 @@ function usePrototypeNavigate({
       navigation.goBack();
       return false;
     }
-    const Component17 = typeof target === 'string'
+    const Component18 = typeof target === 'string'
       ? await componentForRoute(getRoute == null ? void 0 : getRoute(target,),).catch(() => {},)
       : React4.isValidElement(target,)
       ? target
       : null;
-    if (!Component17) return;
+    if (!Component18) return;
     const {
       appearsFrom,
       backdropColor,
@@ -42555,40 +42712,40 @@ function usePrototypeNavigate({
     const transitionType = options.transition || 'instant';
     switch (transitionType) {
       case 'instant':
-        navigation.instant(Component17,);
+        navigation.instant(Component18,);
         break;
       case 'fade':
-        navigation.fade(Component17, {
+        navigation.fade(Component18, {
           animation,
         },);
         break;
       case 'push':
-        navigation.push(Component17, {
+        navigation.push(Component18, {
           appearsFrom,
           animation,
         },);
         break;
       case 'flip':
-        navigation.flip(Component17, {
+        navigation.flip(Component18, {
           appearsFrom,
           animation,
         },);
         break;
       case 'magicMotion':
-        navigation.magicMotion(Component17, {
+        navigation.magicMotion(Component18, {
           animation,
         },);
         break;
       // Overlay stack navigation doesn't support updating the browser's
       // path.
       case 'modal':
-        navigation.modal(Component17, {
+        navigation.modal(Component18, {
           backdropColor,
           animation,
         },);
         break;
       case 'overlay':
-        navigation.overlay(Component17, {
+        navigation.overlay(Component18, {
           appearsFrom,
           backdropColor,
           animation,
@@ -43126,16 +43283,16 @@ function safeCSSValue(value,) {
   if (reUnsafeCharacters.test(value,)) return 'none';
   return value;
 }
-function withCodeBoundaryForOverrides(Component17, {
+function withCodeBoundaryForOverrides(Component18, {
   scopeId,
   nodeId,
   override,
   inComponentSlot,
 },) {
   if (!shouldEnableCodeBoundaries()) {
-    return override(Component17,);
+    return override(Component18,);
   }
-  const appliedOverride = tryToApplyOverride(Component17, override,);
+  const appliedOverride = tryToApplyOverride(Component18, override,);
   let hasErrorBeenLogged = false;
   function CodeBoundaryForOverrides(props, ref,) {
     const nearestExternalComponent = useNearestExternalComponent();
@@ -43151,7 +43308,7 @@ function withCodeBoundaryForOverrides(Component17, {
           value: nodeId,
           children: /* @__PURE__ */ jsx3(CodeComponentBoundary, {
             getErrorMessage: getErrorMessageForOverride.bind(null, scopeId, nodeId,),
-            fallback: /* @__PURE__ */ jsx3(Component17, {
+            fallback: /* @__PURE__ */ jsx3(Component18, {
               ...props,
               ref,
             },),
@@ -43168,7 +43325,7 @@ function withCodeBoundaryForOverrides(Component17, {
           collectErrorToAnalytics(appliedOverride.error,);
           hasErrorBeenLogged = true;
         }
-        return /* @__PURE__ */ jsx3(Component17, {
+        return /* @__PURE__ */ jsx3(Component18, {
           ...props,
           ref,
         },);
@@ -43189,9 +43346,9 @@ function withCodeBoundaryForOverrides(Component17, {
   }
   return React4.forwardRef(CodeBoundaryForOverrides,);
 }
-function tryToApplyOverride(Component17, override,) {
+function tryToApplyOverride(Component18, override,) {
   try {
-    const ComponentWithOverrides = override(Component17,);
+    const ComponentWithOverrides = override(Component18,);
     return {
       status: 'success',
       Component: ComponentWithOverrides,
@@ -43211,7 +43368,7 @@ function singleFrame() {
     frame.postRender(() => resolve());
   },);
 }
-var withV1StrokeFX = (Component17) =>
+var withV1StrokeFX = (Component18) =>
   forwardRef((props, forwardedRef,) => {
     const {
       strokeEffectLength,
@@ -43264,7 +43421,7 @@ var withV1StrokeFX = (Component17) =>
         strokeDashoffset: value,
       }
       : void 0;
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ...restProps,
       ...effect,
       ref: forwardedRef,
@@ -43280,14 +43437,14 @@ function extractMappingFromInfo(info,) {
     return void 0;
   }
 }
-function withMappedReactProps(Component17, info,) {
+function withMappedReactProps(Component18, info,) {
   return (rawProps) => {
     const props = {};
     const mapping = extractMappingFromInfo(info,);
     for (const key7 in rawProps) {
       asRecord(props,)[(mapping == null ? void 0 : mapping[key7]) ?? key7] = rawProps[key7];
     }
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ...props,
     },);
   };
@@ -43328,10 +43485,10 @@ function createInputOutputRanges2(transformTargets, threshold, exitTarget,) {
     outputRange: [-1, -1, ...outputRange,],
   };
 }
-var withVariantAppearEffect = (Component17) =>
+var withVariantAppearEffect = (Component18) =>
   React4.forwardRef((props, forwardedRef,) => {
     if (RenderTarget.current() === RenderTarget.canvas) {
-      return /* @__PURE__ */ jsx3(Component17, {
+      return /* @__PURE__ */ jsx3(Component18, {
         ...props,
         ref: forwardedRef,
       },);
@@ -43403,18 +43560,18 @@ var withVariantAppearEffect = (Component17) =>
       startTransition2(() => setVariant(target,));
     },);
     if (!('variantAppearEffectEnabled' in options) || variantAppearEffectEnabled === true) {
-      return /* @__PURE__ */ jsx3(Component17, {
+      return /* @__PURE__ */ jsx3(Component18, {
         ...rest,
         variant: activeVariant ?? props.variant,
         ref: observerRef,
       },);
     } else {
-      return /* @__PURE__ */ jsx3(Component17, {
+      return /* @__PURE__ */ jsx3(Component18, {
         ...rest,
       },);
     }
   },);
-var withVariantFX = (Component17) =>
+var withVariantFX = (Component18) =>
   React4.forwardRef(({
     initial,
     animate: animate3,
@@ -43431,7 +43588,7 @@ var withVariantFX = (Component17) =>
       observerRef,
       true,
     );
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
       ...props,
       style: {
         ...(props == null ? void 0 : props.style),
@@ -44189,6 +44346,27 @@ function createVariantName(weight, style2,) {
   }
   return `${fontWeightNames[weight]}`;
 }
+var MapWithHash = class extends Map {
+  constructor() {
+    super(...arguments,);
+    __publicField(this, '_hash', 0,);
+  }
+  get hash() {
+    return this._hash;
+  }
+  set(key7, value,) {
+    this._hash++;
+    return super.set(key7, value,);
+  }
+  delete(key7,) {
+    this._hash++;
+    return super.delete(key7,);
+  }
+  clear() {
+    this._hash++;
+    return super.clear();
+  }
+};
 function isVariableFont(font,) {
   return Boolean(font.variationAxes,);
 }
@@ -44705,8 +44883,10 @@ var Mixed = Symbol('Mixed',);
 var DEPENDENCIES_MODULE_NAME = 'dependencies';
 var DEPENDENCIES_MODULE_TYPE = 'config';
 var DEPENDENCIES_MODULE_TYPE_SLASH_NAME = `${DEPENDENCIES_MODULE_TYPE}/${DEPENDENCIES_MODULE_NAME}`;
-var IMPORT_MAP_FILE_ID = `${DEPENDENCIES_MODULE_TYPE_SLASH_NAME}/importMap.json`;
-var DEPENDENCIES_FILE_ID = `${DEPENDENCIES_MODULE_TYPE_SLASH_NAME}/dependencies.json`;
+var IMPORT_MAP_FILE_NAME = 'importMap.json';
+var DEPENDENCIES_FILE_NAME = 'dependencies.json';
+var IMPORT_MAP_FILE_ID = `${DEPENDENCIES_MODULE_TYPE_SLASH_NAME}/${IMPORT_MAP_FILE_NAME}`;
+var DEPENDENCIES_FILE_ID = `${DEPENDENCIES_MODULE_TYPE_SLASH_NAME}/${DEPENDENCIES_FILE_NAME}`;
 var USE_FREEZE = false;
 var List;
 ((List2) => {
@@ -46135,7 +46315,7 @@ function isValidVariationAxes(data2,) {
 var FontStore = class {
   constructor() {
     __publicField(this, 'enabled', false,);
-    __publicField(this, 'bySelector', /* @__PURE__ */ new Map(),);
+    __publicField(this, 'bySelector', new MapWithHash(),);
     __publicField(this, 'loadedSelectors', /* @__PURE__ */ new Set(),);
     __publicField(this, 'getGoogleFontsListPromise',);
     __publicField(this, 'getFontshareFontsListPromise',);
@@ -46153,20 +46333,29 @@ var FontStore = class {
     __publicField(this, 'builtIn',);
     __publicField(this, 'framer',);
     __publicField(this, 'custom',);
+    __publicField(this, 'bySelectorValuesCache',);
     this.local = new LocalFontSource();
     this.google = new GoogleFontSource();
     this.fontshare = new FontshareSource();
     this.framer = new FramerFontSource();
     this.custom = new CustomFontSource();
     this.builtIn = new BuiltInFontSource();
-    this.bySelector = /* @__PURE__ */ new Map();
     this.importLocalFonts();
   }
+  get hash() {
+    return this.bySelector.hash;
+  }
   addFont(font,) {
     this.bySelector.set(font.selector, font,);
   }
   getAvailableFonts() {
-    return Array.from(this.bySelector.values(),);
+    if (!this.bySelectorValuesCache || this.bySelectorValuesCache.hash !== this.bySelector.hash) {
+      this.bySelectorValuesCache = {
+        result: Array.from(this.bySelector.values(),),
+        hash: this.bySelector.hash,
+      };
+    }
+    return this.bySelectorValuesCache.result;
   }
   importLocalFonts() {
     for (const font of this.local.importFonts()) {
@@ -47196,7 +47385,367 @@ var styles3 = /* @__PURE__ */ (() => [
   },),
 ])();
 var FormSelect = /* @__PURE__ */ withCSS(Select, styles3, 'framer-lib-form-select',);
-var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
+function useEscToClose(isOpen, close,) {
+  useEffect(() => {
+    function handleKeyDown(e,) {
+      if (e.key === 'Escape' && isOpen) {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      }
+    }
+    window.addEventListener('keyup', handleKeyDown,);
+    return () => window.removeEventListener('keyup', handleKeyDown,);
+  }, [isOpen, close,],);
+}
+var steps2 = [512, 1024, 2048, 4096,];
+function calculateImageWidth(aspectRatio2, maxWidth, totalHorizontalPadding, totalVerticalPadding,) {
+  const availableHeight = window.innerHeight - totalVerticalPadding;
+  const availableWidth = Math.min(window.innerWidth - totalHorizontalPadding, maxWidth,);
+  const maxWidthBasedOnHeight = availableHeight / aspectRatio2;
+  return Math.min(availableWidth, maxWidthBasedOnHeight,);
+}
+function optimisticallyDecodeImage(image, {
+  width,
+  height,
+},) {
+  if (!image.src || !image.srcSet) return;
+  const i = new window.Image();
+  i.src = image.src;
+  i.srcset = image.srcSet;
+  i.width = width;
+  i.height = height;
+  return i.decode();
+}
+function getPortalContainer2() {
+  return document.getElementById(templateOverlayContainerId,) ?? document.getElementById(overlayContainerId,) ?? document.body;
+}
+function getSidePadding(value, padding,) {
+  if (isNumber2(value,)) return value;
+  return padding ?? 0;
+}
+function getTotalVerticalPadding(lightbox,) {
+  return getSidePadding(lightbox == null ? void 0 : lightbox.paddingTop, lightbox == null ? void 0 : lightbox.padding,) +
+    getSidePadding(lightbox == null ? void 0 : lightbox.paddingBottom, lightbox == null ? void 0 : lightbox.padding,);
+}
+function getTotalHorizontalPadding(lightbox,) {
+  return getSidePadding(lightbox == null ? void 0 : lightbox.paddingLeft, lightbox == null ? void 0 : lightbox.padding,) +
+    getSidePadding(lightbox == null ? void 0 : lightbox.paddingRight, lightbox == null ? void 0 : lightbox.padding,);
+}
+function useStableCallback(callback,) {
+  const latest = useRef3(callback,);
+  latest.current = callback;
+  return useCallback((...args) => latest.current(...args,), [],);
+}
+function createImageWithSrcSet(lightbox, background,) {
+  if (!lightbox || !background || !background.src) return background;
+  const base = new URL(background.src,);
+  base.searchParams.delete('scale-down-to',);
+  base.searchParams.delete('lossless',);
+  return {
+    ...background,
+    sizes: `min(100vw, ${lightbox.maxWidth - getTotalHorizontalPadding(lightbox,)}px)`,
+    // Use all steps since the lightbox can scale up and down with the viewport.
+    srcSet: steps2.map((size) => {
+      const src = new URL(base,);
+      src.searchParams.set('scale-down-to', size.toString(),);
+      return `${src.toString()} ${size}w`;
+    },).join(', ',),
+  };
+}
+var distortionTransforms = /* @__PURE__ */ (() => ({
+  x: void 0,
+  y: void 0,
+  z: 0,
+  translateX: void 0,
+  translateY: void 0,
+  translateZ: 0,
+  rotate: void 0,
+  rotateX: 0,
+  rotateY: 0,
+  rotateZ: void 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  scaleZ: 1,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  originX: void 0,
+  originY: void 0,
+  originZ: void 0,
+  perspective: 0,
+  transformPerspective: 0,
+}))();
+function isDistortionTransform(values,) {
+  if (!values) return false;
+  for (const k in values) {
+    if (!(k in distortionTransforms)) continue;
+    const identityValue = distortionTransforms[k];
+    const value = values[k];
+    if (!isNumber2(identityValue,) || !isNumber2(value,)) continue;
+    if (identityValue === value) continue;
+    return true;
+  }
+  return false;
+}
+function isDistorted(ref,) {
+  var _a, _b;
+  const element = visualElementStore.get(ref.current,);
+  if (!element) return false;
+  if (isDistortionTransform((_a = element.projection) == null ? void 0 : _a.latestValues,)) return true;
+  const path = (_b = element.projection) == null ? void 0 : _b.path;
+  if (!path || path.length === 0) return false;
+  for (const p of path) {
+    if (isDistortionTransform(p.latestValues,)) return true;
+  }
+  return false;
+}
+var enterExitBackdropAnimation = {
+  opacity: 0,
+};
+var targetBackdropAnimation = {
+  opacity: 1,
+};
+function withLightboxEffect(Component18,) {
+  return forwardRef(function LightboxEffect({
+    lightbox,
+    lightboxClassName,
+    onClick,
+    ...props
+  }, forwardedRef,) {
+    const config = useContext(MotionConfigContext,);
+    const fallbackRef = useRef3(null,);
+    const ref = forwardedRef ?? fallbackRef;
+    const decodePromiseRef = useRef3();
+    const image = useMemo2(() => createImageWithSrcSet(lightbox, props.background,), [lightbox, props.background,],);
+    const [open, setOpen,] = useState(false,);
+    const [openOverrides, setOpenOverrides,] = useState();
+    const onOpen = useCallback(() => {
+      if (!lightbox) return;
+      if (open) {
+        startTransition2(() => {
+          setOpen(true,);
+        },);
+        return;
+      }
+      frame.read(() => {
+        if (!ref.current) return;
+        const style22 = getComputedStyle(ref.current,);
+        const hasBorder = ref.current.getAttribute('data-border',) === 'true';
+        const borderStyle2 = hasBorder ? getComputedStyle(ref.current, '::after',) : void 0;
+        const width = ref.current.offsetWidth ?? 1;
+        const height = ref.current.offsetHeight ?? 1;
+        const transition2 = isDistorted(ref,)
+          ? {
+            duration: 0,
+          }
+          : lightbox.transition;
+        startTransition2(() => {
+          setOpenOverrides({
+            borderRadius: style22.borderRadius,
+            aspectRatio: width / (height || 1),
+            borderTop: borderStyle2 == null ? void 0 : borderStyle2.borderTopWidth,
+            borderRight: borderStyle2 == null ? void 0 : borderStyle2.borderRightWidth,
+            borderBottom: borderStyle2 == null ? void 0 : borderStyle2.borderBottomWidth,
+            borderLeft: borderStyle2 == null ? void 0 : borderStyle2.borderLeftWidth,
+            borderStyle: borderStyle2 == null ? void 0 : borderStyle2.borderStyle,
+            borderColor: borderStyle2 == null ? void 0 : borderStyle2.borderColor,
+            transition: transition2,
+            imageRendering: style22.imageRendering,
+            filter: style22.filter,
+          },);
+          setOpen(true,);
+        },);
+      },);
+    }, [lightbox, open, ref,],);
+    const aspectRatio2 = (openOverrides == null ? void 0 : openOverrides.aspectRatio) ?? 1;
+    const decode = useStableCallback(() => {
+      var _a;
+      if (!lightbox || !image || !image.src) return;
+      const srcDecodePromise = (_a = decodePromiseRef.current) == null ? void 0 : _a[image.src];
+      if (srcDecodePromise) return srcDecodePromise;
+      const width = calculateImageWidth(
+        aspectRatio2,
+        lightbox.maxWidth,
+        getTotalHorizontalPadding(lightbox,),
+        getTotalVerticalPadding(lightbox,),
+      );
+      const promise = optimisticallyDecodeImage(image, {
+        width,
+        height: width * aspectRatio2,
+      },);
+      decodePromiseRef.current = {
+        [image.src]: promise,
+      };
+      return promise;
+    },);
+    const handleClick = useCallback(async (e) => {
+      onClick == null ? void 0 : onClick(e,);
+      if (open || !lightbox || !image) return;
+      await decode();
+      onOpen();
+    }, [onClick, onOpen, open, image, lightbox, decode,],);
+    const onClose = useCallback((e) => {
+      e == null ? void 0 : e.stopPropagation();
+      startTransition2(() => {
+        setOpen(false,);
+      },);
+    }, [],);
+    useEscToClose(open, onClose,);
+    useEffect(() => {
+      if (!lightbox) return;
+      let timer;
+      function enter() {
+        timer = setTimeout(() => {
+          void decode();
+        }, 50,);
+      }
+      function clear() {
+        clearTimeout(timer,);
+      }
+      const currentRef = ref.current;
+      currentRef == null ? void 0 : currentRef.addEventListener('mouseenter', enter,);
+      currentRef == null ? void 0 : currentRef.addEventListener('mouseleave', clear,);
+      currentRef == null ? void 0 : currentRef.addEventListener('pointerdown', decode,);
+      return () => {
+        clear();
+        currentRef == null ? void 0 : currentRef.removeEventListener('mouseenter', enter,);
+        currentRef == null ? void 0 : currentRef.removeEventListener('mouseleave', clear,);
+        currentRef == null ? void 0 : currentRef.removeEventListener('pointerdown', decode,);
+      };
+    }, [decode, ref, lightbox,],);
+    const fallbackLayoutId = useId();
+    const transition = (openOverrides == null ? void 0 : openOverrides.transition) ?? props.transition ?? config.transition;
+    const borderRadius2 = openOverrides == null ? void 0 : openOverrides.borderRadius;
+    const imageRendering = openOverrides == null ? void 0 : openOverrides.imageRendering;
+    const filter2 = openOverrides == null ? void 0 : openOverrides.filter;
+    const borderTop = openOverrides == null ? void 0 : openOverrides.borderTop;
+    const borderRight = openOverrides == null ? void 0 : openOverrides.borderRight;
+    const borderBottom = openOverrides == null ? void 0 : openOverrides.borderBottom;
+    const borderLeft = openOverrides == null ? void 0 : openOverrides.borderLeft;
+    const borderStyle = openOverrides == null ? void 0 : openOverrides.borderStyle;
+    const borderColor = openOverrides == null ? void 0 : openOverrides.borderColor;
+    const hasAnyBorder = Boolean(borderTop || borderRight || borderBottom || borderLeft || borderStyle || borderColor,);
+    const border = hasAnyBorder
+      ? {
+        '--border-top-width': borderTop,
+        '--border-right-width': borderRight,
+        '--border-bottom-width': borderBottom,
+        '--border-left-width': borderLeft,
+        '--border-style': borderStyle,
+        '--border-color': borderColor,
+      }
+      : void 0;
+    const portalProps = {
+      [portalIdAttribute]: props.id,
+    };
+    const paddingTop = getSidePadding(lightbox == null ? void 0 : lightbox.paddingTop, lightbox == null ? void 0 : lightbox.padding,);
+    const paddingBottom = getSidePadding(lightbox == null ? void 0 : lightbox.paddingBottom, lightbox == null ? void 0 : lightbox.padding,);
+    const paddingLeft = getSidePadding(lightbox == null ? void 0 : lightbox.paddingLeft, lightbox == null ? void 0 : lightbox.padding,);
+    const paddingRight = getSidePadding(lightbox == null ? void 0 : lightbox.paddingRight, lightbox == null ? void 0 : lightbox.padding,);
+    const style2 = (openOverrides == null ? void 0 : openOverrides.borderRadius)
+      ? {
+        ...props.style,
+        borderRadius: openOverrides.borderRadius,
+      }
+      : props.style;
+    const layoutDependency = open ? props.layoutDependency ? `${props.layoutDependency}-open` : 'open' : props.layoutDependency;
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx3(Component18, {
+          ...props,
+          style: style2,
+          onClick: handleClick,
+          layoutId: props.layoutId ?? (lightbox ? fallbackLayoutId : void 0),
+          ref,
+          layoutDependency,
+          transition,
+        },),
+        /* @__PURE__ */ jsx3(AnimatePresence, {
+          children: open && lightbox && image && /* @__PURE__ */ jsx3(Fragment, {
+            children: createPortal(
+              /* @__PURE__ */ jsxs(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx3(motion.div, {
+                    ...portalProps,
+                    className: lightboxClassName,
+                    onClick: onClose,
+                    style: {
+                      position: 'fixed',
+                      inset: 0,
+                      zIndex: lightbox.zIndex,
+                      backgroundColor: lightbox.backdrop ?? 'transparent',
+                    },
+                    transition,
+                    initial: enterExitBackdropAnimation,
+                    animate: targetBackdropAnimation,
+                    exit: enterExitBackdropAnimation,
+                    onTransitionEnd: () => {
+                      startTransition2(() => {
+                        setOpenOverrides(void 0,);
+                      },);
+                    },
+                  },),
+                  /* @__PURE__ */ jsx3('div', {
+                    ...portalProps,
+                    className: lightboxClassName,
+                    style: {
+                      alignItems: 'center',
+                      display: 'flex',
+                      inset: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+                      justifyContent: 'center',
+                      pointerEvents: 'none',
+                      position: 'fixed',
+                      zIndex: lightbox.zIndex,
+                    },
+                    children: /* @__PURE__ */ jsx3('div', {
+                      style: {
+                        alignItems: 'center',
+                        aspectRatio: aspectRatio2,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        maxHeight: '100%',
+                        position: 'relative',
+                        width: '100%',
+                        maxWidth: lightbox.maxWidth,
+                      },
+                      children: /* @__PURE__ */ jsx3(motion.div, {
+                        layoutId: props.layoutId ?? fallbackLayoutId,
+                        transition,
+                        onClick: onOpen,
+                        className: 'framer-lightbox-container',
+                        'data-border': hasAnyBorder,
+                        style: {
+                          aspectRatio: aspectRatio2,
+                          borderRadius: borderRadius2,
+                          bottom: 0,
+                          position: 'absolute',
+                          top: 0,
+                          userSelect: 'none',
+                          imageRendering,
+                          filter: filter2,
+                          ...border,
+                        },
+                        children: /* @__PURE__ */ jsx3(BackgroundImageComponent, {
+                          image,
+                          alt: image.alt,
+                          draggable: props.draggable,
+                        },),
+                      },),
+                    },),
+                  },),
+                ],
+              },),
+              getPortalContainer2(),
+            ),
+          }, 'backdrop',),
+        },),
+      ],
+    },);
+  },);
+}
+var Component16 = /* @__PURE__ */ React4.forwardRef(function Image2(props, ref,) {
   const {
     background,
     children,
@@ -47249,6 +47798,7 @@ var Image2 = /* @__PURE__ */ React4.forwardRef(function Image3(props, ref,) {
     ],
   },);
 },);
+var Image3 = /* @__PURE__ */ withLightboxEffect(Component16,);
 var frameFromElement = (element) => {
   const frame2 = Rect.fromRect(element.getBoundingClientRect(),);
   frame2.x = frame2.x + safeWindow.scrollX;
@@ -47620,13 +48170,14 @@ var defaultValues2 = {
 function isEffectKey(key7,) {
   return key7 in defaultValues2;
 }
-function createKeyframes(effect,) {
+function createKeyframes(effect, shouldReduceMotion,) {
   const out = {};
   for (const key7 in effect) {
     if (!isEffectKey(key7,)) continue;
     const effectValue = effect[key7];
     const defaultValue = defaultValues2[key7];
     if (isUndefined(effectValue,) || isUndefined(defaultValue,)) continue;
+    if (shouldReduceMotion && key7 !== 'opacity') continue;
     out[key7] = [effectValue, defaultValue,];
   }
   return out;
@@ -47637,7 +48188,16 @@ var emojiSplitRe = /* @__PURE__ */ (() => {
     'gu',
   );
 })();
-function tokenizeText(text, tokenization = 'character', elements, style2,) {
+function tokenizeText(text, tokenization = 'character', elements, shouldReduceMotion, style2,) {
+  if (shouldReduceMotion) {
+    const ref = newOverrideableRef();
+    elements.add(ref,);
+    return /* @__PURE__ */ jsx3('span', {
+      ref,
+      style: style2,
+      children: text,
+    },);
+  }
   switch (tokenization) {
     case 'character':
     // When we want to animate "lines" that aren't split by newlines, but
@@ -47723,7 +48283,7 @@ function transformString(effect,) {
   if (isNumber2(effect.skewY,)) transforms.push(`skewY(${effect.skewY}deg)`,);
   return transforms.join(' ',);
 }
-function getInitialEffectStyle(canPlay, canAnimate2, effect,) {
+function getInitialEffectStyle(canPlay, canAnimate2, effect, shouldReduceMotion,) {
   if (!effect || !effect.effect) return void 0;
   const type = effect.type;
   switch (type) {
@@ -47733,8 +48293,8 @@ function getInitialEffectStyle(canPlay, canAnimate2, effect,) {
           if (!canPlay || !canAnimate2) return void 0;
           return {
             opacity: effect.effect.opacity,
-            filter: effect.effect.filter,
-            transform: transformString(effect.effect,),
+            filter: shouldReduceMotion ? void 0 : effect.effect.filter,
+            transform: shouldReduceMotion ? void 0 : transformString(effect.effect,),
           };
         case 'line':
         case 'word':
@@ -47748,8 +48308,8 @@ function getInitialEffectStyle(canPlay, canAnimate2, effect,) {
           return {
             display: 'inline-block',
             opacity: effect.effect.opacity,
-            filter: effect.effect.filter,
-            transform: transformString(effect.effect,),
+            filter: shouldReduceMotion ? void 0 : effect.effect.filter,
+            transform: shouldReduceMotion ? void 0 : transformString(effect.effect,),
           };
       }
     default:
@@ -47760,6 +48320,7 @@ function useTextEffect(config, ref, preview,) {
   const elements = useConstant2(() => /* @__PURE__ */ new Set());
   const isRenderingStaticContent = isStaticRenderer();
   const canPlay = preview || !isRenderingStaticContent;
+  const shouldReduceMotion = useReducedMotionConfig();
   const state = React2.useRef({
     hasMounted: false,
     hasAnimatedOnce: false,
@@ -47796,7 +48357,7 @@ function useTextEffect(config, ref, preview,) {
           const cleanupRef = {
             current: void 0,
           };
-          void runAppearEffect(tokenization2, effect.effect, elements, transition, startDelay, repeat, () => {
+          void runAppearEffect(tokenization2, effect.effect, elements, transition, startDelay, repeat, shouldReduceMotion, () => {
             Object.assign(state.current, {
               isAnimating: false,
             },);
@@ -47852,9 +48413,10 @@ function useTextEffect(config, ref, preview,) {
         canPlay,
         preview || mayAnimate(hasMounted, hasAnimatedOnce, effect,),
         state.current.effect,
+        shouldReduceMotion,
       );
       return {
-        text: (text) => tokenizeText(text, tokenization, elements, effectStyle,),
+        text: (text) => tokenizeText(text, tokenization, elements, shouldReduceMotion, effectStyle,),
         props: (style2) => {
           if ((effect == null ? void 0 : effect.tokenization) !== 'element') return void 0;
           const r = newOverrideableRef();
@@ -47881,7 +48443,7 @@ function useTextEffect(config, ref, preview,) {
             transition,
             startDelay,
           } = effect;
-          void runAppearEffect(tokenization, effect.effect, elements, transition, startDelay,);
+          void runAppearEffect(tokenization, effect.effect, elements, transition, startDelay, false, shouldReduceMotion,);
           break;
         }
         default:
@@ -47909,10 +48471,11 @@ async function runAppearEffect(
   transition,
   startDelay = 0,
   repeat = false,
+  shouldReduceMotion,
   callback,
   cleanupRef,
 ) {
-  const enter = createKeyframes(effect,);
+  const enter = createKeyframes(effect, shouldReduceMotion,);
   const controller = new AbortController();
   if (cleanupRef) cleanupRef.current = () => controller.abort();
   switch (tokenization) {
@@ -47929,14 +48492,20 @@ async function runAppearEffect(
         },),
       },).then(() => callback == null ? void 0 : callback());
       if (!repeat || !cleanupRef) return;
-      cleanupRef.current = () =>
-        void animate(list, effect, {
+      cleanupRef.current = () => {
+        const actualEffect = shouldReduceMotion
+          ? {
+            opacity: effect.opacity,
+          }
+          : effect;
+        void animate(list, actualEffect, {
           ...transition,
           restDelta: 1e-3,
           delay: stagger((transition == null ? void 0 : transition.delay) ?? 0, {
             startDelay,
           },),
         },);
+      };
       return;
     }
     case 'line': {
@@ -47969,8 +48538,13 @@ async function runAppearEffect(
       if (!repeat || !cleanupRef) return;
       cleanupRef.current = () => {
         if (list.length === 0) return;
+        const actualEffect = shouldReduceMotion
+          ? {
+            opacity: effect.opacity,
+          }
+          : effect;
         list.forEach((group, i,) => {
-          void animate(group, effect, {
+          void animate(group, actualEffect, {
             ...transition,
             restDelta: 1e-3,
             delay: startDelay + i * ((transition == null ? void 0 : transition.delay) ?? 0),
@@ -48110,13 +48684,12 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
   if (!visible) return null;
   const isHidden = isEditable && environment2() === RenderTarget.canvas;
   const containerStyle = {
-    outline: 'none',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: convertVerticalAlignment(verticalAlignment,),
     opacity: isHidden ? 0 : opacity,
-    flexShrink: 0,
   };
+  const justifyContent = convertVerticalAlignment(verticalAlignment,);
+  if (justifyContent !== defaultRichTextContainerStyle.justifyContent) {
+    containerStyle.justifyContent = justifyContent;
+  }
   const positionStyle = {};
   const restrictedRenderTarget = RenderTarget.hasRestrictions();
   const frame2 = calculateRect(props, parentSize || 0, false,);
@@ -48160,11 +48733,11 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
   if (layoutId) {
     rest.layout = 'preserve-aspect';
   }
-  const Component17 = htmlElementAsMotionComponent(props.as,);
+  const Component18 = htmlElementAsMotionComponent(props.as,);
   const dataFramerName = rest['data-framer-name'] ?? name;
   if (isString(props.viewBox,)) {
     if (props.as !== void 0) {
-      return /* @__PURE__ */ jsx3(Component17, {
+      return /* @__PURE__ */ jsx3(Component18, {
         ...rest,
         ref: containerRef,
         style: containerStyle,
@@ -48197,7 +48770,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
       },);
     }
   }
-  return /* @__PURE__ */ jsx3(Component17, {
+  return /* @__PURE__ */ jsx3(Component18, {
     ...rest,
     ref: containerRef,
     style: containerStyle,
@@ -50688,10 +51261,13 @@ function initialRouteComponent(component,) {
 function useInitialRouteComponent(routes, homeNodeId,) {
   var _a;
   const InitialRouteComponent = (_a = routes[homeNodeId]) == null ? void 0 : _a.page;
-  const [RouteComponent, setRouteComponent,] = useState(initialRouteComponent(InitialRouteComponent,),);
+  const [RouteComponent, setRouteComponent,] = useState(() => initialRouteComponent(InitialRouteComponent,));
   useEffect(() => {
     if (withPreload(InitialRouteComponent,)) {
-      void InitialRouteComponent.preload().then(setRouteComponent,);
+      void (async () => {
+        await InitialRouteComponent.preload();
+        setRouteComponent(InitialRouteComponent,);
+      })();
     }
   }, [],);
   return RouteComponent;
@@ -50728,12 +51304,12 @@ var package_default = {
     '@types/dom-navigation': '^1.0.5',
     '@types/fontfaceobserver': '2.1',
     '@types/google.fonts': '1.0',
-    '@types/node': '22.16',
+    '@types/node': '22.18',
     '@types/react': '18.2',
     '@types/react-dom': '18.2',
     '@types/yargs': '^17.0.33',
-    '@typescript-eslint/eslint-plugin': '^8.36.0',
-    '@typescript-eslint/parser': '^8.36.0',
+    '@typescript-eslint/eslint-plugin': '^8.40.0',
+    '@typescript-eslint/parser': '^8.40.0',
     chalk: '^4.1.2',
     eslint: '^8.57.1',
     'eslint-plugin-framer-studio': 'workspace:*',
@@ -50742,15 +51318,14 @@ var package_default = {
     'jest-diff': '^29.3.1',
     'jest-environment-jsdom': '^29.3.1',
     'jest-environment-jsdom-global': '^4.0.0',
-    'jest-junit': '^15.0.0',
     react: '^18.2.0',
     'react-dom': '^18.2.0',
     semver: '^7.7.1',
-    typescript: '^5.8.3',
+    typescript: '^5.9.2',
     yargs: '^17.7.2',
   },
   peerDependencies: {
-    'framer-motion': '>=12.14.0',
+    'framer-motion': '12.20.2',
     react: '^18.2.0',
     'react-dom': '^18.2.0',
   },
@@ -50854,6 +51429,7 @@ export {
   createRendererMotionComponent,
   createScopedAnimate,
   cssBackgroundSize,
+  cssCollector,
   cubicBezier,
   cubicBezierAsString,
   CustomCursorHost,
@@ -50965,7 +51541,7 @@ export {
   hover,
   hsla,
   hslaToRgba,
-  Image2 as Image,
+  Image3 as Image,
   imagePatternPropsForFill,
   imageUrlForAsset,
   inertia,
@@ -51120,6 +51696,7 @@ export {
   removeHiddenBreakpointLayersV2,
   removeItem,
   RenderTarget,
+  ResetOuterLinkContext,
   resize,
   resolveElements,
   resolveLink,
@@ -51246,6 +51823,7 @@ export {
   useOnVariantChange,
   useOverlayState,
   usePageEffects,
+  usePageInView,
   usePrefetch,
   usePreloadQuery,
   usePresence,