unframer 3.2.0 → 3.2.4

package/esm/framer.js

@@ -1,5 +1,5 @@
 import { __commonJS, __decorateElement, __decoratorMetadata, __decoratorStart, __export, __privateAdd, __privateGet, __privateMethod, __privateSet, __publicField, __runInitializers, __toESM, } from './framer-chunks/chunk-A2PMVMFI.js';
-// /:https://app.framerstatic.com/chunk-BLFSVU7M.mjs
+// /:https://app.framerstatic.com/chunk-VDW2YK33.mjs
 import { createContext, } from 'react';
 import { useEffect, useLayoutEffect, } from 'react';
 import { useCallback, useContext, useId, } from 'react';
@@ -340,11 +340,11 @@ 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;
     }, {});
-    const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps2;
+    const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps22;
     const processBatch = () => {
         const timestamp = MotionGlobalConfig.useManualTiming ? state.timestamp : performance.now();
         runNextFrame = false;
@@ -375,7 +375,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();
@@ -385,14 +385,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 { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame : noop, true);
@@ -544,6 +544,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) {
@@ -621,7 +626,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);
@@ -812,7 +817,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)})`;
 };
@@ -3896,7 +3901,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) => {
@@ -3909,8 +3914,8 @@ var ViewTransitionBuilder = class {
         };
         addToQueue(this);
     }
-    get(selector) {
-        this.currentTarget = selector;
+    get(subject) {
+        this.currentSubject = subject;
         return this;
     }
     layout(keyframes2, options) {
@@ -3943,11 +3948,11 @@ var ViewTransitionBuilder = class {
         return this;
     }
     updateTarget(target, keyframes2, options = {}) {
-        const { currentTarget, targets, } = this;
-        if (!targets.has(currentTarget)) {
-            targets.set(currentTarget, {});
+        const { currentSubject, targets, } = this;
+        if (!targets.has(currentSubject)) {
+            targets.set(currentSubject, {});
         }
-        const targetData = targets.get(currentTarget);
+        const targetData = targets.get(currentSubject);
         targetData[target] = {
             keyframes: keyframes2,
             options,
@@ -4020,7 +4025,7 @@ var PopChildMeasure = class extends React2.Component {
         return this.props.children;
     }
 };
-function PopChild({ children, isPresent: isPresent2, anchorX, }) {
+function PopChild({ children, isPresent: isPresent2, anchorX, root, }) {
     const id4 = useId();
     const ref = useRef3(null);
     const size = useRef3({
@@ -4040,7 +4045,8 @@ function PopChild({ children, isPresent: isPresent2, anchorX, }) {
         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}"] {
@@ -4053,8 +4059,9 @@ function PopChild({ children, isPresent: isPresent2, anchorX, }) {
         `);
         }
         return () => {
-            if (document.head.contains(style2)) {
-                document.head.removeChild(style2);
+            parent.removeChild(style2);
+            if (parent.contains(style2)) {
+                parent.removeChild(style2);
             }
         };
     }, [isPresent2,]);
@@ -4067,7 +4074,7 @@ function PopChild({ children, isPresent: isPresent2, anchorX, }) {
         }),
     });
 }
-var PresenceChild = ({ children, initial, isPresent: isPresent2, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
+var PresenceChild = ({ children, initial, isPresent: isPresent2, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root, }) => {
     const presenceChildren = useConstant(newChildrenMap);
     const id4 = useId();
     let isReusedContext = true;
@@ -4107,6 +4114,7 @@ var PresenceChild = ({ children, initial, isPresent: isPresent2, onExitComplete,
         children = jsx3(PopChild, {
             isPresent: isPresent2,
             anchorX,
+            root,
             children,
         });
     }
@@ -4127,7 +4135,7 @@ function onlyElements(children) {
     });
     return filtered;
 }
-var AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = 'sync', propagate = false, anchorX = 'left', }) => {
+var AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = 'sync', propagate = false, anchorX = 'left', root, }) => {
     const [isParentPresent, safeToRemove,] = usePresence(propagate);
     const presentChildren = useMemo2(() => onlyElements(children), [children,]);
     const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
@@ -4202,6 +4210,7 @@ var AnimatePresence = ({ children, custom, initial = true, onExitComplete, prese
                 custom,
                 presenceAffectsLayout,
                 mode,
+                root,
                 onExitComplete: isPresent2 ? void 0 : onExit,
                 anchorX,
                 children: child,
@@ -4371,7 +4380,7 @@ function isValidMotionProp(key7) {
 }
 var shouldForward = (key7) => !isValidMotionProp(key7);
 function loadExternalIsValidProp(isValidProp) {
-    if (!isValidProp)
+    if (typeof isValidProp !== 'function')
         return;
     shouldForward = (key7) => key7.startsWith('on') ? !isValidMotionProp(key7) : isValidProp(key7);
 }
@@ -7443,6 +7452,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
         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;
@@ -7662,9 +7672,14 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
                 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);
@@ -9541,6 +9556,9 @@ function calcNextTime(current2, next2, prev, labels) {
     else if (next2 === '<') {
         return prev;
     }
+    else if (next2.startsWith('<')) {
+        return Math.max(0, prev + parseFloat(next2.slice(1)));
+    }
     else {
         return labels.get(next2) ?? current2;
     }
@@ -9613,7 +9631,7 @@ function createAnimationsFromSequence(sequence2, { defaultTransition = {}, ...se
             let { ease: ease2 = defaultTransition.ease || 'easeOut', duration, } = 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)) {
@@ -9872,6 +9890,9 @@ function createScopedAnimate(scope) {
         const animation = new GroupAnimationWithThen(animations2);
         if (scope) {
             scope.animations.push(animation);
+            animation.finished.then(() => {
+                removeItem(scope.animations, animation);
+            });
         }
         return animation;
     }
@@ -9887,6 +9908,7 @@ function useAnimate() {
     const animate22 = useConstant(() => createScopedAnimate(scope));
     useUnmountEffect(() => {
         scope.animations.forEach((animation) => animation.stop());
+        scope.animations.length = 0;
     });
     return [scope, animate22,];
 }
@@ -10144,6 +10166,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) => {
@@ -10499,15 +10535,16 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /: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({
@@ -11443,37 +11480,47 @@ 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) {
@@ -12167,23 +12214,28 @@ 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;
@@ -19392,8 +19444,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,
@@ -19558,7 +19640,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  */
@@ -19900,7 +19982,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
     `, /* css */
     `
         .framer-image.framer-text {
-            display: block;
+            display: ${defaultImageStyle.display};
             max-width: 100%;
             height: auto;
         }
@@ -20058,6 +20140,40 @@ 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) {
@@ -20335,6 +20451,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; }`,
@@ -20367,12 +20484,12 @@ 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) => {
@@ -20402,6 +20519,8 @@ var combineCSSRules = (isPreview) => [
     ...resetCSS,
     ...hideScrollbars,
     ...overflowClipFallbackCSSRules,
+    ...lightboxCSS,
+    ...safari16TextTruncationFix,
 ];
 export var combinedCSSRules = /* @__PURE__ */ combineCSSRules(false);
 var combinedCSSRulesForPreview = /* @__PURE__ */ combineCSSRules(true);
@@ -22216,16 +22335,35 @@ function getImageStyle(image) {
         objectFit: cssObjectFit(image.fit),
     };
 }
-function StaticImage({ image, containerSize, nodeId, alt, draggable, syncDecoding, }) {
+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, 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,
@@ -22233,6 +22371,7 @@ function StaticImage({ image, containerSize, nodeId, alt, draggable, syncDecodin
         sizes: image.sizes,
         srcSet: image.srcSet,
         src: source,
+        onLoad: onImageLoad,
         alt: alt ?? image.alt ?? '',
         style: imageStyle,
         draggable,
@@ -22310,7 +22449,7 @@ function BackgroundImageComponent({ layoutId, image, ...props }) {
         else if (RenderTarget.current() !== RenderTarget.canvas) {
             imageNode = /* @__PURE__ */ jsx3(StaticImage, {
                 image,
-                syncDecoding: RenderTarget.current() === RenderTarget.export,
+                avoidAsyncDecoding: RenderTarget.current() === RenderTarget.export,
                 ...props,
             });
         }
@@ -22458,18 +22597,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;
@@ -22784,7 +22915,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 = {
@@ -22801,7 +22932,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,
@@ -25721,7 +25852,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);
@@ -26291,7 +26422,7 @@ function WithDragging(Component17) {
                 value: {
                     dragging: this.state.isDragging,
                 },
-                children: /* @__PURE__ */ jsx3(Component17, {
+                children: /* @__PURE__ */ jsx3(Component18, {
                     ...originalProps,
                 }),
             });
@@ -26328,10 +26459,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 = {
@@ -27597,7 +27728,7 @@ function useInfiniteScroll({ ref: observerRef, loadMore, rootMargin = '0px', pag
         enabled: paginationInfo.currentPage < paginationInfo.totalPages,
     });
 }
-function withInfiniteScroll(Component17) {
+function withInfiniteScroll(Component18) {
     return React4.forwardRef(({ __paginationInfo, __loadMore, ...props }, ref) => {
         const infiniteScrollRef = useObserverRef(ref);
         useInfiniteScroll({
@@ -27606,7 +27737,7 @@ function withInfiniteScroll(Component17) {
             ref: infiniteScrollRef,
             paginationInfo: __paginationInfo,
         });
-        return /* @__PURE__ */ jsx3(Component17, {
+        return /* @__PURE__ */ jsx3(Component18, {
             ...props,
             ref: infiniteScrollRef,
         });
@@ -30345,20 +30476,20 @@ 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);
         const overrideProps = useOverride(props);
         const { 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__';
@@ -30496,30 +30627,14 @@ var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
     return new Set(componentsWithSSRStylesAttr.split(' '));
 })();
 var framerCSSMarker = 'data-framer-css-ssr';
-var withCSS = (Component17, escapedCSS, componentSerializationId) => React4.forwardRef((props, ref) => {
+var withCSS = (Component18, escapedCSS, componentSerializationId) => React4.forwardRef((props, ref) => {
     const { sheet, cache: cache2, } = React4.useContext(StyleSheetContext) ?? {};
     const id3 = 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))
@@ -30531,11 +30646,33 @@ var withCSS = (Component17, escapedCSS, componentSerializationId) => React4.forw
                 : 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(overrides, children, props, variantClassNames, primaryVariantId, parentVariants, cloneChildren, activeVariantId) {
@@ -30783,7 +30920,7 @@ var AnimationCollector = class {
 };
 _variantHashes = /* @__PURE__ */ new WeakMap();
 var framerAppearEffects = /* @__PURE__ */ new AnimationCollector();
-function withOptimizedAppearEffect(Component17) {
+function withOptimizedAppearEffect(Component18) {
     return React4.forwardRef(({ optimized, ...props }, ref) => {
         var _a;
         const generatedComponentContext = React4.useContext(GeneratedComponentContext);
@@ -30799,7 +30936,7 @@ function withOptimizedAppearEffect(Component17) {
             optimized ? props : null, generatedComponentContext);
         }
         const disabledProps = getDisabledFXPropsInStaticRenderer(props);
-        return /* @__PURE__ */ jsx3(Component17, {
+        return /* @__PURE__ */ jsx3(Component18, {
             ref,
             ...props,
             ...disabledProps,
@@ -31099,8 +31236,11 @@ function useParallax(options, ref, visibilityStyle) {
             : effectDisabledStyle,
     };
 }
+function isTargetAndTransition(value) {
+    return typeof value === 'object' && value !== null;
+}
 function getTransition(value) {
-    if (isString(value) || !isObject2(value))
+    if (!isTargetAndTransition(value))
         return void 0;
     return value == null ? void 0 : value.transition;
 }
@@ -31112,7 +31252,9 @@ function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, i
                 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))
@@ -31730,10 +31872,10 @@ function addMotionValueStyle(style2, values) {
 function isVariantOrVariantList2(value) {
     return isString(value) || Array.isArray(value);
 }
-var withFX = (Component17) => React4.forwardRef((props, forwardedRef) => {
+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,
@@ -31743,7 +31885,7 @@ var withFX = (Component17) => React4.forwardRef((props, forwardedRef) => {
     }
     const disabledProps = getDisabledFXPropsInStaticRenderer(props);
     if (disabledProps) {
-        return /* @__PURE__ */ jsx3(Component17, {
+        return /* @__PURE__ */ jsx3(Component18, {
             ...props,
             ...disabledProps,
             ref: forwardedRef,
@@ -31811,7 +31953,7 @@ var withFX = (Component17) => React4.forwardRef((props, forwardedRef) => {
             exit,
         }
         : {};
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
         ...forwardedProps,
         ...motionGestures,
         __withFX: true,
@@ -31864,9 +32006,9 @@ var ComponentViewportProvider = /* @__PURE__ */ React4.forwardRef(function Compo
         children: cloneWithPropsAndRef(children, rest),
     });
 });
-var withGeneratedLayoutId = (Component17) => React4.forwardRef((props, ref) => {
+var withGeneratedLayoutId = (Component18) => React4.forwardRef((props, ref) => {
     const layoutId = useLayoutId2(props);
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
         layoutId,
         ...props,
         layoutIdKey: void 0,
@@ -31896,7 +32038,7 @@ var SynchronousSuspenseErrorBoundary = class extends Component2 {
         if (!isSuspense426Error(error))
             return;
         const componentStack = errorInfo == null ? void 0 : errorInfo.componentStack;
-        console.error('Caught an error in SynchronousSuspenseErrorBoundary:\n\n', 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/.');
+        console.error('Caught an error in SynchronousSuspenseErrorBoundary:\n\n', 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, 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', {
             message: String(error),
@@ -32195,10 +32337,10 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
     const childrenWithCodeBoundary = useMaybeWrapComponentWithCodeBoundary(children, scopeId, nodeId, isAuthoredByUser, isModuleExternal, inComponentSlot);
     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,
@@ -32207,11 +32349,11 @@ var SmartComponentScopedContainer = /* @__PURE__ */ React4.forwardRef((props, re
         });
     }
     else {
-        const Component17 = tagName;
+        const Component18 = tagName;
         const { layoutId, layoutDependency, ...plainHTMLRenderableProps } = otherProps;
         return /* @__PURE__ */ jsx3(NodeIdContext.Provider, {
             value: nodeId ?? null,
-            children: /* @__PURE__ */ jsx3(Component17, {
+            children: /* @__PURE__ */ jsx3(Component18, {
                 ...plainHTMLRenderableProps,
                 ref,
                 style: props.style,
@@ -32510,6 +32652,340 @@ 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');
+    let elementId;
+    let pathVariables;
+    if (routeId) {
+        elementId = element.getAttribute('data-framer-page-link-element') ?? void 0;
+        const pathVariablesRaw = element.getAttribute('data-framer-page-link-path-variables');
+        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
@@ -33019,19 +33495,31 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
             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;
@@ -33071,31 +33559,12 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
             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();
@@ -33161,17 +33630,19 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
                     }),
             /* @__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),
+                    }),
                 }),
             }),
         ],
     }), getPortalContainer(portalSelector, inComponent));
 }
-var Instance = /* @__PURE__ */ React4.forwardRef(function Instance2({ Component: Component17, ...props }, ref) {
-    return Component17
-        ? /* @__PURE__ */ jsx3(Component17, {
+var Instance = /* @__PURE__ */ React4.forwardRef(function Instance2({ Component: Component18, ...props }, ref) {
+    return Component18
+        ? /* @__PURE__ */ jsx3(Component18, {
             ...props,
             ref,
         })
@@ -33322,20 +33793,16 @@ function ChildrenCanSuspend({ children, }) {
         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;
@@ -33521,21 +33988,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, hash: hash2, pathVariables, hashVariables, unresolvedHashSlugs, unresolvedPathSlugs, } = pageLink;
     const resolvedSlugs = await resolveSlugs(unresolvedPathSlugs, unresolvedHashSlugs, router.collectionUtils, activeLocale);
@@ -33607,137 +34059,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');
-    let elementId;
-    let pathVariables;
-    if (routeId) {
-        elementId = element.getAttribute('data-framer-page-link-element') ?? void 0;
-        const pathVariablesRaw = element.getAttribute('data-framer-page-link-path-variables');
-        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() {
@@ -33810,185 +34131,6 @@ function combineRels(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, router, href, activeLocale, }) {
     return useCallback(async (hrefAttribute) => {
         var _a, _b, _c, _d, _e;
@@ -34273,24 +34415,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;
@@ -34483,6 +34607,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)) {
@@ -34503,16 +34628,17 @@ var FormContainer = /* @__PURE__ */ React4.forwardRef(function FormContainer2({
     const handleSubmit = async (event) => {
         var _a, _b, _c, _d, _e, _f;
         event.preventDefault();
-        if (!action || !projectHash)
+        if (!action || !projectHash || submissionInProgressRef.current)
             return;
-        dispatch({
-            type: 'submit',
-        });
+        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)
@@ -34542,6 +34668,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 { target: input, currentTarget: form, key: key7, } = event;
@@ -34618,6 +34745,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;
@@ -34791,7 +34973,7 @@ function useNavigationTransition() {
         announceNavigation();
     }, [startNativeSpinner,]);
 }
-function Router({ defaultPageStyle, disableHistory, initialPathVariables, initialRoute, notFoundPage, collectionUtils, routes, initialLocaleId, locales = EMPTY_ARRAY, preserveQueryParams = false, LayoutTemplate, editorBar, siteCanonicalURL, }) {
+function Router({ defaultPageStyle, disableHistory, initialPathVariables, initialRoute, notFoundPage, collectionUtils, routes, initialLocaleId, locales = EMPTY_ARRAY, preserveQueryParams = false, LayoutTemplate, EditorBar, siteCanonicalURL, }) {
     useMarkRouterEffects();
     useReplaceInitialState({
         disabled: disableHistory,
@@ -35049,38 +35231,46 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     }));
     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, {}),
+                        ],
+                    }),
+                }),
+            ],
         }),
     });
 }
@@ -35179,20 +35369,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;
@@ -35632,9 +35814,7 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
                                 width: 'auto',
                             },
                             preserveQueryParams,
-                            editorBar: /* @__PURE__ */ jsx3(EditorBarLauncher, {
-                                EditorBar,
-                            }),
+                            EditorBar,
                             disableHistory,
                             LayoutTemplate,
                             siteCanonicalURL,
@@ -35661,36 +35841,6 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
         });
     }
 }
-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, ...rest }, ref) {
     const router = useRouter();
     const { activeLocale, } = useLocaleInfo();
@@ -40866,51 +41016,51 @@ function usePrototypeNavigate({ preload, } = {}) {
             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)
+        if (!Component18)
             return;
         const { appearsFrom, backdropColor, animation, } = options;
         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,
@@ -41403,11 +41553,11 @@ function safeCSSValue(value) {
         return 'none';
     return value;
 }
-function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override, inComponentSlot, }) {
+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();
@@ -41418,7 +41568,7 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
                     value: nodeId,
                     children: /* @__PURE__ */ jsx3(CodeComponentBoundary, {
                         getErrorMessage: getErrorMessageForOverride.bind(null, scopeId, nodeId),
-                        fallback: /* @__PURE__ */ jsx3(Component17, {
+                        fallback: /* @__PURE__ */ jsx3(Component18, {
                             ...props,
                             ref,
                         }),
@@ -41436,7 +41586,7 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
                     collectErrorToAnalytics(appliedOverride.error);
                     hasErrorBeenLogged = true;
                 }
-                return /* @__PURE__ */ jsx3(Component17, {
+                return /* @__PURE__ */ jsx3(Component18, {
                     ...props,
                     ref,
                 });
@@ -41459,9 +41609,9 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
     }
     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,
@@ -41482,7 +41632,7 @@ function singleFrame() {
         frame.postRender(() => resolve());
     });
 }
-var withV1StrokeFX = (Component17) => forwardRef((props, forwardedRef) => {
+var withV1StrokeFX = (Component18) => forwardRef((props, forwardedRef) => {
     const { strokeEffectLength, strokeEffectGap, strokeEffectOffset, strokeEffectLoop, strokeEffectTotalLength, strokeEffectLoopType, pathLengthTransition, ...restProps } = props;
     const isCanvas = isStaticRenderer();
     const offset = useMotionValue(0);
@@ -41526,7 +41676,7 @@ var withV1StrokeFX = (Component17) => forwardRef((props, forwardedRef) => {
             strokeDashoffset: value,
         }
         : void 0;
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
         ...restProps,
         ...effect,
         ref: forwardedRef,
@@ -41544,14 +41694,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,
         });
     };
@@ -41594,9 +41744,9 @@ function createInputOutputRanges2(transformTargets, threshold, exitTarget) {
         outputRange: [-1, -1, ...outputRange,],
     };
 }
-var withVariantAppearEffect = (Component17) => React4.forwardRef((props, forwardedRef) => {
+var withVariantAppearEffect = (Component18) => React4.forwardRef((props, forwardedRef) => {
     if (RenderTarget.current() === RenderTarget.canvas) {
-        return /* @__PURE__ */ jsx3(Component17, {
+        return /* @__PURE__ */ jsx3(Component18, {
             ...props,
             ref: forwardedRef,
         });
@@ -41665,26 +41815,26 @@ var withVariantAppearEffect = (Component17) => React4.forwardRef((props, forward
         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) => React4.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
+var withVariantFX = (Component18) => React4.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
     const observerRef = useObserverRef(forwardedRef);
     const effect = usePresenceAnimation({
         initial,
         animate: animate3,
         exit,
     }, observerRef, true);
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
         ...props,
         style: {
             ...(props == null ? void 0 : props.style),
@@ -42434,6 +42584,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);
 }
@@ -42993,8 +43164,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) => {
@@ -44445,7 +44618,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');
@@ -44459,20 +44632,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()) {
@@ -45348,7 +45530,369 @@ 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, alt, draggable, fitImageDimension, style: styleFromProps, ...rest } = props;
     const style2 = {
         ...styleFromProps,
@@ -45396,6 +45940,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;
@@ -45738,7 +46283,7 @@ 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))
@@ -45747,6 +46292,8 @@ function createKeyframes(effect) {
         const defaultValue = defaultValues2[key7];
         if (isUndefined(effectValue) || isUndefined(defaultValue))
             continue;
+        if (shouldReduceMotion && key7 !== 'opacity')
+            continue;
         out[key7] = [effectValue, defaultValue,];
     }
     return out;
@@ -45754,7 +46301,16 @@ function createKeyframes(effect) {
 var emojiSplitRe = /* @__PURE__ */ (() => {
     return new RegExp('\\p{Regional_Indicator}{2}|\\p{Emoji}\\p{Emoji_Modifier}?\\p{Variation_Selector}?(?:\\u{200d}\\p{Emoji}\\p{Emoji_Modifier}?\\p{Variation_Selector}?)*|.', '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
@@ -45847,7 +46403,7 @@ function transformString(effect) {
         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;
@@ -45859,8 +46415,8 @@ function getInitialEffectStyle(canPlay, canAnimate2, effect) {
                         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':
@@ -45874,8 +46430,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:
@@ -45886,6 +46442,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,
@@ -45919,7 +46476,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,
                         });
@@ -45970,9 +46527,9 @@ function useTextEffect(config, ref, preview) {
             if (!effectEnabled)
                 return void 0;
             const { hasMounted, hasAnimatedOnce, effect, } = state.current;
-            const effectStyle = getInitialEffectStyle(canPlay, preview || mayAnimate(hasMounted, hasAnimatedOnce, effect), state.current.effect);
+            const effectStyle = getInitialEffectStyle(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;
@@ -45996,7 +46553,7 @@ function useTextEffect(config, ref, preview) {
             switch (type) {
                 case 'appear': {
                     const { transition, startDelay, } = effect;
-                    void runAppearEffect(tokenization, effect.effect, elements, transition, startDelay);
+                    void runAppearEffect(tokenization, effect.effect, elements, transition, startDelay, false, shouldReduceMotion);
                     break;
                 }
                 default:
@@ -46016,8 +46573,8 @@ function mayAnimate(hasMounted, hasAnimatedOnce, effect) {
         hasAnimatedOnce && !(effect == null ? void 0 : effect.repeat) &&
             ((effect == null ? void 0 : effect.trigger) === 'onInView' || (effect == null ? void 0 : effect.trigger) === 'onScrollTarget'));
 }
-async function runAppearEffect(tokenization = 'character', effect, elements, transition, startDelay = 0, repeat = false, callback, cleanupRef) {
-    const enter = createKeyframes(effect);
+async function runAppearEffect(tokenization = 'character', effect, elements, transition, startDelay = 0, repeat = false, shouldReduceMotion, callback, cleanupRef) {
+    const enter = createKeyframes(effect, shouldReduceMotion);
     const controller = new AbortController();
     if (cleanupRef)
         cleanupRef.current = () => controller.abort();
@@ -46037,13 +46594,20 @@ async function runAppearEffect(tokenization = 'character', effect, elements, tra
             }).then(() => callback == null ? void 0 : callback());
             if (!repeat || !cleanupRef)
                 return;
-            cleanupRef.current = () => void animate(list, effect, {
-                ...transition,
-                restDelta: 1e-3,
-                delay: stagger((transition == null ? void 0 : transition.delay) ?? 0, {
-                    startDelay,
-                }),
-            });
+            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': {
@@ -46080,8 +46644,13 @@ async function runAppearEffect(tokenization = 'character', effect, elements, tra
             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),
@@ -46186,13 +46755,12 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
         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);
@@ -46238,11 +46806,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,
@@ -46276,7 +46844,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef(function RichTextContainer2(p
             });
         }
     }
-    return /* @__PURE__ */ jsx3(Component17, {
+    return /* @__PURE__ */ jsx3(Component18, {
         ...rest,
         ref: containerRef,
         style: containerStyle,
@@ -48605,10 +49173,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;
@@ -48645,12 +49216,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:*',
@@ -48659,15 +49230,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',
     },
@@ -48685,7 +49255,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop2.start();
 }
-export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addAttrValue, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addStyleValue, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, attachSpring, attrEffect, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, Instance, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isHTMLElement, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isObject, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isSVGElement, isSVGSVGElement, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, propEffect, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, resize, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, springValue, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, svgEffect, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMetadata, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useSVGTemplate, useTime, useTracking, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldToMain, };
+export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addAttrValue, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addStyleValue, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, attachSpring, attrEffect, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cssCollector, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image3 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, Instance, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isHTMLElement, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isObject, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isSVGElement, isSVGSVGElement, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, propEffect, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, ResetOuterLinkContext, resize, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, springValue, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, svgEffect, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMetadata, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePageInView, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useSVGTemplate, useTime, useTracking, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldToMain, };
 //! Credit to Astro | MIT License
 /**
  * @license Emotion v11.0.0