unframer 3.2.0 → 3.2.4

package/dist/framer.js

@@ -36,12 +36,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomCursorHost = exports.cubicBezierAsString = exports.createBox = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.ConstraintMask = exports.ComponentViewportProvider = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.collectMotionValues = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelMicrotask = exports.cancelFrame = exports.callEach = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.BackgroundImage = exports.attrEffect = exports.AsyncMotionValueAnimation = exports.AnyInterpolation = exports.anticipate = exports.animations = exports.animationMapKey = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animateMini = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.alpha = exports.addStyleValue = exports.addPointerInfo = exports.addAttrValue = exports.activeAnimations = exports.acceleratedValues = exports.combinedCSSRules = void 0;
-exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.fontStore = exports.FontSourceNames = exports.FlatTree = exports.findValueType = exports.findDimensionValueType = exports.Fetcher = exports.environment = exports.easingDefinitionToFunction = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.DOMKeyframesResolver = exports.domAnimation = exports.DOM = exports.distance = exports.dispatchKeyDownEvent = exports.dimensionValueTypes = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.degrees = exports.defaultValueTypes = exports.defaultDeviceProps = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = void 0;
-exports.millisecondsToSeconds = exports.microtask = exports.maxGeneratorDuration = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.KeyframeResolver = exports.JSAnimation = exports.isZeroValueString = exports.isPrimaryPointer = exports.isNumericalString = exports.isNodeOrChild = exports.isMotionValue = exports.isEasingArray = exports.isDragging = exports.isCSSVariableToken = exports.isCSSVariableName = exports.isBrowser = exports.isBezierDefinition = exports.invisibleValues = exports.invariant = exports.InternalID = exports.Instance = exports.Image = exports.hsla = exports.hex = exports.GroupAnimationWithThen = exports.GroupAnimation = exports.GracefullyDegradingErrorBoundary = exports.getValueAsType = exports.getDefaultValueType = exports.generateLinearEasing = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.frameSteps = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = void 0;
-exports.ResolveLinks = exports.RenderTarget = exports.Rect = exports.readTransformValue = exports.RadialGradient = exports.QueryEngine = exports.QueryCache = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.propEffect = exports.progressPercentage = exports.progress = exports.PresenceContext = exports.positionalKeys = exports.Polygon = exports.pipe = exports.percent = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.numberValueTypes = exports.number = exports.NotFoundError = exports.noop = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.NativeAnimationWrapper = exports.NativeAnimationExtended = exports.NativeAnimation = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mixNumber = exports.mixLinearColor = exports.mixComplex = exports.mixColor = exports.mirrorEasing = void 0;
-exports.WindowContext = exports.WillChangeMotionValue = exports.warning = exports.vw = exports.visualElementStore = exports.VisualElement = exports.ViewTransitionBuilder = exports.vh = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.transformValueTypes = exports.transformProps = exports.transformPropOrder = exports.time = exports.Text = exports.testValueType = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.svgEffect = exports.SVG = exports.supportsScrollTimeline = exports.supportsPartialKeyframes = exports.supportsLinearEasing = exports.supportsFlags = exports.supportedWaapiEasing = exports.SubscriptionManager = exports.StyleSheetContext = exports.styleEffect = exports.statsBuffer = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.SmartComponentScopedContainer = exports.Size = exports.sharedSVGManager = exports.Shadow = exports.secondsToMilliseconds = exports.Scroll = exports.scale = exports.RichText = exports.rgbUnit = exports.rgba = exports.reverseEasing = void 0;
-exports.LocaleInfoContext = exports.FormContext = exports.FetchClientProvider = exports.FramerLink = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withV1StrokeFX = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = void 0;
+exports.cubicBezierAsString = exports.cssCollector = exports.createBox = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.ConstraintMask = exports.ComponentViewportProvider = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.collectMotionValues = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelMicrotask = exports.cancelFrame = exports.callEach = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.BackgroundImage = exports.attrEffect = exports.AsyncMotionValueAnimation = exports.AnyInterpolation = exports.anticipate = exports.animations = exports.animationMapKey = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animateMini = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.alpha = exports.addStyleValue = exports.addPointerInfo = exports.addAttrValue = exports.activeAnimations = exports.acceleratedValues = exports.combinedCSSRules = void 0;
+exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.fontStore = exports.FontSourceNames = exports.FlatTree = exports.findValueType = exports.findDimensionValueType = exports.Fetcher = exports.environment = exports.easingDefinitionToFunction = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.DOMKeyframesResolver = exports.domAnimation = exports.DOM = exports.distance = exports.dispatchKeyDownEvent = exports.dimensionValueTypes = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.degrees = exports.defaultValueTypes = exports.defaultDeviceProps = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = exports.CustomCursorHost = void 0;
+exports.microtask = exports.maxGeneratorDuration = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.KeyframeResolver = exports.JSAnimation = exports.isZeroValueString = exports.isPrimaryPointer = exports.isNumericalString = exports.isNodeOrChild = exports.isMotionValue = exports.isEasingArray = exports.isDragging = exports.isCSSVariableToken = exports.isCSSVariableName = exports.isBrowser = exports.isBezierDefinition = exports.invisibleValues = exports.invariant = exports.InternalID = exports.Instance = exports.Image = exports.hsla = exports.hex = exports.GroupAnimationWithThen = exports.GroupAnimation = exports.GracefullyDegradingErrorBoundary = exports.getValueAsType = exports.getDefaultValueType = exports.generateLinearEasing = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.frameSteps = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = void 0;
+exports.RenderTarget = exports.Rect = exports.readTransformValue = exports.RadialGradient = exports.QueryEngine = exports.QueryCache = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.propEffect = exports.progressPercentage = exports.progress = exports.PresenceContext = exports.positionalKeys = exports.Polygon = exports.pipe = exports.percent = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.numberValueTypes = exports.number = exports.NotFoundError = exports.noop = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.NativeAnimationWrapper = exports.NativeAnimationExtended = exports.NativeAnimation = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mixNumber = exports.mixLinearColor = exports.mixComplex = exports.mixColor = exports.mirrorEasing = exports.millisecondsToSeconds = void 0;
+exports.WillChangeMotionValue = exports.warning = exports.vw = exports.visualElementStore = exports.VisualElement = exports.ViewTransitionBuilder = exports.vh = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.transformValueTypes = exports.transformProps = exports.transformPropOrder = exports.time = exports.Text = exports.testValueType = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.svgEffect = exports.SVG = exports.supportsScrollTimeline = exports.supportsPartialKeyframes = exports.supportsLinearEasing = exports.supportsFlags = exports.supportedWaapiEasing = exports.SubscriptionManager = exports.StyleSheetContext = exports.styleEffect = exports.statsBuffer = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.SmartComponentScopedContainer = exports.Size = exports.sharedSVGManager = exports.Shadow = exports.secondsToMilliseconds = exports.Scroll = exports.scale = exports.RichText = exports.rgbUnit = exports.rgba = exports.reverseEasing = exports.ResolveLinks = void 0;
+exports.LocaleInfoContext = exports.FormContext = exports.FetchClientProvider = exports.FramerLink = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withV1StrokeFX = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = void 0;
 exports._injectRuntime = _injectRuntime;
 exports.addActionControls = addActionControls;
 exports.addFonts = addFonts;
@@ -193,6 +193,7 @@ exports.recordStats = recordStats;
 exports.removeHiddenBreakpointLayers = removeHiddenBreakpointLayers;
 exports.removeHiddenBreakpointLayersV2 = removeHiddenBreakpointLayersV2;
 exports.removeItem = removeItem;
+exports.ResetOuterLinkContext = ResetOuterLinkContext;
 exports.resize = resize;
 exports.resolveElements = resolveElements;
 exports.resolveLink = resolveLink;
@@ -282,6 +283,7 @@ exports.useOnCurrentTargetChange = useOnCurrentTargetChange;
 exports.useOnVariantChange = useOnVariantChange;
 exports.useOverlayState = useOverlayState;
 exports.usePageEffects = usePageEffects;
+exports.usePageInView = usePageInView;
 exports.usePrefetch = usePrefetch;
 exports.usePreloadQuery = usePreloadQuery;
 exports.usePresence = usePresence;
@@ -325,7 +327,7 @@ exports.withShape = withShape;
 exports.yieldToMain = yieldToMain;
 exports.Router = Router;
 const chunk_A2PMVMFI_js_1 = require("./framer-chunks/chunk-A2PMVMFI.js");
-// /:https://app.framerstatic.com/chunk-BLFSVU7M.mjs
+// /:https://app.framerstatic.com/chunk-VDW2YK33.mjs
 const react_1 = require("react");
 const react_2 = require("react");
 const react_3 = require("react");
@@ -698,11 +700,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;
@@ -733,7 +735,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();
@@ -743,14 +745,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);
@@ -923,6 +925,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);
+    },
 };
 exports.color = color;
 var colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
@@ -1001,7 +1008,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);
@@ -1198,7 +1205,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)})`;
 };
@@ -4327,7 +4334,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) => {
@@ -4340,8 +4347,8 @@ var ViewTransitionBuilder = class {
         };
         addToQueue(this);
     }
-    get(selector) {
-        this.currentTarget = selector;
+    get(subject) {
+        this.currentSubject = subject;
         return this;
     }
     layout(keyframes2, options) {
@@ -4374,11 +4381,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,
@@ -4455,7 +4462,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 = (0, react_3.useId)();
     const ref = (0, react_4.useRef)(null);
     const size = (0, react_4.useRef)({
@@ -4475,7 +4482,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}"] {
@@ -4488,8 +4496,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,]);
@@ -4502,7 +4511,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 = (0, react_3.useId)();
     let isReusedContext = true;
@@ -4542,6 +4551,7 @@ var PresenceChild = ({ children, initial, isPresent: isPresent2, onExitComplete,
         children = (0, jsx_runtime_1.jsx)(PopChild, {
             isPresent: isPresent2,
             anchorX,
+            root,
             children,
         });
     }
@@ -4562,7 +4572,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 = (0, react_4.useMemo)(() => onlyElements(children), [children,]);
     const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
@@ -4637,6 +4647,7 @@ var AnimatePresence = ({ children, custom, initial = true, onExitComplete, prese
                 custom,
                 presenceAffectsLayout,
                 mode,
+                root,
                 onExitComplete: isPresent2 ? void 0 : onExit,
                 anchorX,
                 children: child,
@@ -4810,7 +4821,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);
 }
@@ -7894,6 +7905,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;
@@ -8113,9 +8125,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);
@@ -9997,6 +10014,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;
     }
@@ -10069,7 +10089,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)) {
@@ -10328,6 +10348,9 @@ function createScopedAnimate(scope) {
         const animation = new GroupAnimationWithThen(animations2);
         if (scope) {
             scope.animations.push(animation);
+            animation.finished.then(() => {
+                removeItem(scope.animations, animation);
+            });
         }
         return animation;
     }
@@ -10343,6 +10366,7 @@ function useAnimate() {
     const animate22 = useConstant(() => createScopedAnimate(scope));
     useUnmountEffect(() => {
         scope.animations.forEach((animation) => animation.stop());
+        scope.animations.length = 0;
     });
     return [scope, animate22,];
 }
@@ -10603,6 +10627,20 @@ function useInstantTransition() {
 function disableInstantTransitions() {
     MotionGlobalConfig.instantAnimations = false;
 }
+function usePageInView() {
+    const [isInView, setIsInView,] = (0, react_4.useState)(true);
+    (0, react_2.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) => {
@@ -10959,15 +10997,16 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.UWLYDHV3.mjs
-const react_10 = require("react");
-const react_11 = __importDefault(require("react"));
+// /:https://app.framerstatic.com/framer.L7DRXRFF.mjs
+const react_10 = __importDefault(require("react"));
+const react_11 = require("react");
 const react_12 = require("react");
 const react_13 = require("react");
-const react_14 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
+const react_14 = require("react");
 const react_15 = require("react");
 const react_16 = require("react");
+const react_dom_2 = require("react-dom");
 const react_17 = require("react");
 var __unframerNavigator2 = typeof window !== 'undefined' ? navigator : void 0;
 var require_hsluv = (0, chunk_A2PMVMFI_js_1.__commonJS)({
@@ -11903,37 +11942,47 @@ var preloadKey = 'preload';
 function isLazyComponentType(componentType) {
     return typeof componentType === 'object' && componentType !== null && !(0, react_6.isValidElement)(componentType) && preloadKey in componentType;
 }
-function lazy(factory) {
-    const LazyComponent = (0, react_10.lazy)(factory);
+function lazy(factory, moduleName = 'default') {
     let factoryPromise;
     let LoadedComponent;
     let hasRendered = false;
-    const Component17 = (0, react_7.forwardRef)(function LazyWithPreload(props, ref) {
-        (0, react_2.useEffect)(() => {
-            hasRendered = true;
-        }, []);
-        const Comp = LoadedComponent ?? LazyComponent;
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(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 = (0, react_7.forwardRef)(function LazyWithPreload(props, ref) {
+        (0, react_2.useEffect)(() => {
+            hasRendered = true;
+        }, []);
+        if (error) {
+            throw error;
+        }
+        if (!LoadedComponent) {
+            throw load();
+        }
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(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) {
@@ -12113,9 +12162,9 @@ function isEqual(a, b, deep = true) {
     }
 }
 function useGetRouteCallback(routes) {
-    return react_11.default.useCallback((routeId) => routes[routeId], [routes,]);
+    return react_10.default.useCallback((routeId) => routes[routeId], [routes,]);
 }
-var RouterContext = /* @__PURE__ */ (() => react_11.default.createContext({}))();
+var RouterContext = /* @__PURE__ */ (() => react_10.default.createContext({}))();
 function RouterAPIProvider({ api, children, }) {
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(RouterContext.Provider, {
         value: api,
@@ -12123,7 +12172,7 @@ function RouterAPIProvider({ api, children, }) {
     });
 }
 function useRouter() {
-    return react_11.default.useContext(RouterContext);
+    return react_10.default.useContext(RouterContext);
 }
 function RoutesProvider({ routes, children, }) {
     const getRoute = useGetRouteCallback(routes);
@@ -12135,7 +12184,7 @@ function RoutesProvider({ routes, children, }) {
         children,
     });
 }
-var CurrentRouteContext = /* @__PURE__ */ (() => react_11.default.createContext({}))();
+var CurrentRouteContext = /* @__PURE__ */ (() => react_10.default.createContext({}))();
 function useCurrentRoute() {
     var _a;
     const router = useRouter();
@@ -12165,7 +12214,7 @@ function useCurrentRouteId() {
 }
 function useOnRouteChange(cb) {
     const currentRoute = useCurrentRoute();
-    const lastRoute = react_11.default.useRef(currentRoute);
+    const lastRoute = react_10.default.useRef(currentRoute);
     if (isEqual(lastRoute.current, currentRoute) || !currentRoute)
         return;
     lastRoute.current = currentRoute;
@@ -12216,7 +12265,7 @@ function monitorINPRelatedInputs(signal) {
 function useRouteElementId(id3, targetRouteId) {
     const currentRoute = useCurrentRoute();
     const route = useRoute(targetRouteId) ?? currentRoute;
-    return react_11.default.useMemo(() => {
+    return react_10.default.useMemo(() => {
         if (!route)
             return id3;
         return getRouteElementId(route, id3);
@@ -12428,7 +12477,7 @@ async function preloadRoute(route) {
 function useRouteHandler(routeId, preload = false, elementId) {
     const { navigate, } = useRouter();
     useRoutePreloader([routeId,], preload);
-    const handler = react_11.default.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
+    const handler = react_10.default.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
     return handler;
 }
 var pageviewEventVersion = 2;
@@ -12627,23 +12676,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;
@@ -12748,7 +12802,7 @@ var defaultSitePageEffects = {
     global: void 0,
     routes: {},
 };
-var PageEffectsContext = /* @__PURE__ */ react_11.default.createContext(defaultSitePageEffects);
+var PageEffectsContext = /* @__PURE__ */ react_10.default.createContext(defaultSitePageEffects);
 function PageEffectsProvider({ children, value, }) {
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(PageEffectsContext.Provider, {
         value,
@@ -12756,7 +12810,7 @@ function PageEffectsProvider({ children, value, }) {
     });
 }
 function usePageEffects() {
-    return react_11.default.useContext(PageEffectsContext);
+    return react_10.default.useContext(PageEffectsContext);
 }
 function getPageEffectForRoute(currentRouteId, nextRouteId, { global, routes, }) {
     var _a;
@@ -13508,7 +13562,7 @@ var trimSlugRegExp = /^-+|-+$/gu;
 function slugify(value) {
     return value.toLowerCase().replace(nonSlugCharactersRegExp, '-').replace(trimSlugRegExp, '');
 }
-var NodeIdContext = /* @__PURE__ */ react_11.default.createContext(null);
+var NodeIdContext = /* @__PURE__ */ react_10.default.createContext(null);
 function useTracking() {
     const router = useRouter();
     const nodeId = (0, react_3.useContext)(NodeIdContext);
@@ -13542,15 +13596,15 @@ function useRouteAnchor(routeId, { elementId, hash: linkHash, } = {}) {
     const currentRoute = useRoute(currentRouteId ?? '');
     useRoutePreloader([routeId,], true);
     const hash2 = linkHash ?? elementId;
-    const href = react_11.default.useMemo(() => getPathForRoute(route, {
+    const href = react_10.default.useMemo(() => getPathForRoute(route, {
         currentRoutePath: currentRoute == null ? void 0 : currentRoute.path,
         currentPathVariables,
         hash: hash2,
         preserveQueryParams,
         siteCanonicalURL,
     }), [currentRoute, currentPathVariables, hash2, preserveQueryParams, route, siteCanonicalURL,]);
-    const navigateToRoute = react_11.default.useCallback(() => navigate == null ? void 0 : navigate(routeId, hash2), [hash2, navigate, routeId,]);
-    const onClick = react_11.default.useCallback((event) => {
+    const navigateToRoute = react_10.default.useCallback(() => navigate == null ? void 0 : navigate(routeId, hash2), [hash2, navigate, routeId,]);
+    const onClick = react_10.default.useCallback((event) => {
         event.preventDefault();
         navigateToRoute();
     }, [navigateToRoute,]);
@@ -13625,22 +13679,22 @@ var defaultLocaleInfo = {
     locales: [],
     setLocale: noopAsync,
 };
-var LocaleInfoContext = /* @__PURE__ */ react_11.default.createContext(defaultLocaleInfo);
+var LocaleInfoContext = /* @__PURE__ */ react_10.default.createContext(defaultLocaleInfo);
 exports.LocaleInfoContext = LocaleInfoContext;
 function useLocaleInfo() {
-    return react_11.default.useContext(LocaleInfoContext);
+    return react_10.default.useContext(LocaleInfoContext);
 }
 function useLocalesForCurrentRoute() {
     const { currentRouteId, routes, collectionUtils, currentPathVariables, } = useRouter();
     const { activeLocale, locales, } = useLocaleInfo();
-    const [localesForCurrentRoute, setLocalesForCurrentRoute,] = react_11.default.useState(() => activeLocale ? [activeLocale,] : []);
+    const [localesForCurrentRoute, setLocalesForCurrentRoute,] = react_10.default.useState(() => activeLocale ? [activeLocale,] : []);
     const currentRoute = currentRouteId ? routes == null ? void 0 : routes[currentRouteId] : void 0;
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         let active = true;
         getLocalesForCurrentRoute(activeLocale, locales, currentRoute, currentPathVariables, collectionUtils).then((localesSubset) => {
             if (!active)
                 return;
-            react_11.default.startTransition(() => {
+            react_10.default.startTransition(() => {
                 if (localesSubset) {
                     setLocalesForCurrentRoute(localesSubset);
                 }
@@ -13994,7 +14048,7 @@ function renderPage(Page4, defaultPageStyle) {
         style: defaultPageStyle,
         'data-framer-root': '',
     };
-    return react_11.default.isValidElement(Page4) ? react_11.default.cloneElement(Page4, props) : /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Page4, {
+    return react_10.default.isValidElement(Page4) ? react_10.default.cloneElement(Page4, props) : /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Page4, {
         ...props,
     });
 }
@@ -17488,7 +17542,7 @@ var animate2 = /* @__PURE__ */ (() => {
     return animate3;
 })();
 exports.animate = animate2;
-var LayoutIdContext = /* @__PURE__ */ react_11.default.createContext({
+var LayoutIdContext = /* @__PURE__ */ react_10.default.createContext({
     getLayoutId: (args) => null,
     persistLayoutIdCache: () => { },
     top: false,
@@ -17869,15 +17923,15 @@ var ErrorBoundary = class extends react_9.Component {
 };
 function Device({ canResize = false, children, ResizeObserver: ResizeObserver2 = safeWindow.ResizeObserver, ...options }) {
     var _a, _b;
-    const optionsRef = react_11.default.useRef(void 0);
+    const optionsRef = react_10.default.useRef(void 0);
     if (optionsRef.current === void 0)
         optionsRef.current = options;
     const deviceAppearance = (_a = options.deviceOptions) == null ? void 0 : _a.appearance.type;
-    const scaleDataRef = react_11.default.useRef();
-    const containerRef = react_11.default.useRef(null);
-    const deviceRef = react_11.default.useRef(null);
-    const screenRef = react_11.default.useRef(null);
-    const updateImperativeScale = react_11.default.useCallback(({ scale: scale2, screenScalePixelFix, }) => {
+    const scaleDataRef = react_10.default.useRef();
+    const containerRef = react_10.default.useRef(null);
+    const deviceRef = react_10.default.useRef(null);
+    const screenRef = react_10.default.useRef(null);
+    const updateImperativeScale = react_10.default.useCallback(({ scale: scale2, screenScalePixelFix, }) => {
         if (!scaleDataRef.current || !deviceRef.current || !screenRef.current)
             return;
         deviceRef.current.style.transform = `scale(${scale2})`;
@@ -17887,7 +17941,7 @@ function Device({ canResize = false, children, ResizeObserver: ResizeObserver2 =
         const scale2 = scaleDataRef.current = getScaleData(options.deviceOptions, options.scaleTo);
         updateImperativeScale(scale2);
     }
-    const invertScale2 = react_11.default.useCallback((point2) => {
+    const invertScale2 = react_10.default.useCallback((point2) => {
         if (!scaleDataRef.current)
             return point2;
         const { scale: scale2 = 1, } = scaleDataRef.current;
@@ -17896,7 +17950,7 @@ function Device({ canResize = false, children, ResizeObserver: ResizeObserver2 =
             y: point2.y / scale2,
         };
     }, []);
-    const updateScale = react_11.default.useCallback(() => {
+    const updateScale = react_10.default.useCallback(() => {
         const { deviceOptions, scaleTo, } = optionsRef.current ?? {};
         if (!deviceOptions || !scaleTo || scaleTo !== 'dynamic' || !containerRef.current)
             return;
@@ -17914,17 +17968,17 @@ function Device({ canResize = false, children, ResizeObserver: ResizeObserver2 =
         }
         return new ResizeObserver2(() => updateScale());
     });
-    react_11.default.useLayoutEffect(() => {
+    react_10.default.useLayoutEffect(() => {
         optionsRef.current = {
             deviceOptions: options.deviceOptions,
             overrideTheme: options.overrideTheme,
             scaleTo: options.scaleTo,
         };
     }, [options.deviceOptions, options.overrideTheme, options.scaleTo,]);
-    react_11.default.useLayoutEffect(() => {
+    react_10.default.useLayoutEffect(() => {
         updateScale();
     }, [updateScale,]);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (!observer2 || !containerRef.current)
             return;
         observer2.observe(containerRef.current);
@@ -19342,7 +19396,7 @@ var ParentSizeState = /* @__PURE__ */ ((ParentSizeState2) => {
     return ParentSizeState2;
 })(ParentSizeState || {});
 exports.ParentSizeState = ParentSizeState;
-var ConstraintsContext = /* @__PURE__ */ react_11.default.createContext({
+var ConstraintsContext = /* @__PURE__ */ react_10.default.createContext({
     parentSize: 0,
     /* Unknown */
 });
@@ -19353,7 +19407,7 @@ function deprecatedParentSize(parentSize) {
     return parentSize;
 }
 function useParentSize() {
-    return react_11.default.useContext(ConstraintsContext).parentSize;
+    return react_10.default.useContext(ConstraintsContext).parentSize;
 }
 function isSize(o) {
     return typeof o === 'object';
@@ -19361,7 +19415,7 @@ function isSize(o) {
 var ProvideParentSize = (props) => {
     const currentParentSize = useParentSize();
     const { parentSize, children, } = props;
-    const value = react_11.default.useMemo(() => ({
+    const value = react_10.default.useMemo(() => ({
         parentSize,
     }), [getParentWidth(parentSize), getParentHeight(parentSize),]);
     if (currentParentSize === 1) {
@@ -19806,8 +19860,8 @@ function isInvalid(validity) {
     return false;
 }
 function useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus) {
-    const isValidRef = react_11.default.useRef(null);
-    const handleInvalid = react_11.default.useCallback((e) => {
+    const isValidRef = react_10.default.useRef(null);
+    const handleInvalid = react_10.default.useCallback((e) => {
         if (!onInvalid)
             return;
         if (isValidRef.current === false)
@@ -19817,7 +19871,7 @@ function useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus) {
         e.currentTarget.reportValidity();
         onInvalid(e);
     }, [onInvalid,]);
-    const handleChange = react_11.default.useCallback((e) => {
+    const handleChange = react_10.default.useCallback((e) => {
         onChange == null ? void 0 : onChange(e);
         if (!onInvalid && !onValid)
             return;
@@ -19829,7 +19883,7 @@ function useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus) {
             onValid == null ? void 0 : onValid();
         }
     }, [onInvalid, onValid, onChange,]);
-    const handleBlur = react_11.default.useCallback((e) => {
+    const handleBlur = react_10.default.useCallback((e) => {
         if (!onInvalid) {
             onBlur == null ? void 0 : onBlur(e);
             return;
@@ -19843,7 +19897,7 @@ function useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus) {
         }
         onBlur == null ? void 0 : onBlur(e);
     }, [handleInvalid, onBlur, onInvalid,]);
-    return react_11.default.useMemo(() => {
+    return react_10.default.useMemo(() => {
         return {
             onInvalid: handleInvalid,
             onChange: handleChange,
@@ -19875,8 +19929,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,
@@ -20041,7 +20125,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  */
@@ -20383,7 +20467,7 @@ var richTextCSSRules = /* @__PURE__ */ (() => [
     `, /* css */
     `
         .framer-image.framer-text {
-            display: block;
+            display: ${defaultImageStyle.display};
             max-width: 100%;
             height: auto;
         }
@@ -20541,6 +20625,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) {
@@ -20818,6 +20936,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; }`,
@@ -20850,12 +20969,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) => {
@@ -20885,6 +21004,8 @@ var combineCSSRules = (isPreview) => [
     ...resetCSS,
     ...hideScrollbars,
     ...overflowClipFallbackCSSRules,
+    ...lightboxCSS,
+    ...safari16TextTruncationFix,
 ];
 exports.combinedCSSRules = combineCSSRules(false);
 var combinedCSSRulesForPreview = /* @__PURE__ */ combineCSSRules(true);
@@ -22397,7 +22518,7 @@ function applyMetaTag(name, props) {
     }
 }
 function usePrototypingMetaTags() {
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         applyMetaTag('mobile-web-app-capable', {
             content: 'yes',
         });
@@ -22417,7 +22538,7 @@ var DeviceCodeComponentInner = ({ children, ...props }) => {
     const deviceOptions = convertPropsToDeviceOptions(props, {
         forceOldClay: true,
     });
-    react_11.default.useInsertionEffect(() => {
+    react_10.default.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
     if (!deviceOptions) {
@@ -22435,8 +22556,8 @@ var DeviceCodeComponentInner = ({ children, ...props }) => {
         });
     }
     const child = Array.isArray(children) ? children[0] : children;
-    const resizedChild = child && react_11.default.isValidElement(child)
-        ? react_11.default.cloneElement(child, {
+    const resizedChild = child && react_10.default.isValidElement(child)
+        ? react_10.default.cloneElement(child, {
             width: deviceOptions.screenWidth,
             height: deviceOptions.screenHeight,
         })
@@ -22653,12 +22774,12 @@ function _injectRuntime(injectedRuntime) {
     Object.assign(implementation, injectedRuntime);
     isRuntimeInjected = true;
 }
-var LibraryFeaturesContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var LibraryFeaturesContext = /* @__PURE__ */ react_10.default.createContext(void 0);
 LibraryFeaturesContext.displayName = 'LibraryFeaturesContext';
 var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
 exports.LibraryFeaturesProvider = LibraryFeaturesProvider;
 var useLibraryFeatures = () => {
-    const context = react_11.default.useContext(LibraryFeaturesContext);
+    const context = react_10.default.useContext(LibraryFeaturesContext);
     return context ?? {};
 };
 var wrapperStyle = {
@@ -22704,16 +22825,35 @@ function getImageStyle(image) {
         objectFit: cssObjectFit(image.fit),
     };
 }
-function StaticImage({ image, containerSize, nodeId, alt, draggable, syncDecoding, }) {
+function useDecodingAttribute(avoidAsyncDecoding) {
+    const currentDecoding = react_10.default.useRef(avoidAsyncDecoding ? 'auto' : 'async');
+    const switchDecodingToAuto = (0, react_3.useCallback)((node) => {
+        currentDecoding.current = 'auto';
+        node.decoding = 'auto';
+    }, []);
+    const onImageLoad = (0, react_3.useCallback)((event) => {
+        switchDecodingToAuto(event.currentTarget);
+    }, [switchDecodingToAuto,]);
+    const onImageMount = (0, react_3.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 = react_11.default.useRef(null);
+    const { decoding, onImageLoad, onImageMount, } = useDecodingAttribute(avoidAsyncDecoding);
     return (
     // eslint-disable-next-line framer-studio/require-async-decoding -- we conditionally apply it
     /* @__PURE__ */
     (0, jsx_runtime_1.jsx)('img', {
-        ref: imageRef,
-        decoding: syncDecoding ? 'sync' : 'async',
+        ref: onImageMount,
+        decoding,
         fetchPriority: image.fetchPriority,
         loading: image.loading,
         width: image.pixelWidth,
@@ -22721,16 +22861,17 @@ 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,
     }));
 }
 function CanvasImage({ image, containerSize, nodeId, }) {
-    const wrapperRef = react_11.default.useRef(null);
+    const wrapperRef = react_10.default.useRef(null);
     const imageElement = runtime.useImageElement(image, containerSize, nodeId);
     const imageStyle = getImageStyle(image);
-    react_11.default.useLayoutEffect(() => {
+    react_10.default.useLayoutEffect(() => {
         const wrapper = wrapperRef.current;
         if (wrapper === null)
             return;
@@ -22749,9 +22890,9 @@ function CanvasImage({ image, containerSize, nodeId, }) {
     });
 }
 function OptimizedCanvasImage({ nodeId, image, containerSize, }) {
-    const wrapperRef = react_11.default.useRef(null);
+    const wrapperRef = react_10.default.useRef(null);
     const source = runtime.useImageSource(image, containerSize, nodeId);
-    react_11.default.useLayoutEffect(() => {
+    react_10.default.useLayoutEffect(() => {
         const wrapper = wrapperRef.current;
         if (wrapper === null)
             return;
@@ -22798,7 +22939,7 @@ function BackgroundImageComponent({ layoutId, image, ...props }) {
         else if (RenderTarget.current() !== RenderTarget.canvas) {
             imageNode = /* @__PURE__ */ (0, jsx_runtime_1.jsx)(StaticImage, {
                 image,
-                syncDecoding: RenderTarget.current() === RenderTarget.export,
+                avoidAsyncDecoding: RenderTarget.current() === RenderTarget.export,
                 ...props,
             });
         }
@@ -22947,18 +23088,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;
@@ -23151,10 +23284,10 @@ function processOverrideForwarding(props, children) {
             children,
         };
     }
-    children = react_11.default.Children.map(children, (child) => {
-        if (!react_11.default.isValidElement(child))
+    children = react_10.default.Children.map(children, (child) => {
+        if (!react_10.default.isValidElement(child))
             return child;
-        return react_11.default.cloneElement(child, {
+        return react_10.default.cloneElement(child, {
             _forwardedOverrides,
         });
     });
@@ -23201,11 +23334,11 @@ function useLayoutId2(props, { specificLayoutId, postfix, } = {}) {
     }, [enabled,]);
 }
 var useIsomorphicLayoutEffect2 = typeof document !== 'undefined' ? react_2.useLayoutEffect : react_2.useEffect;
-var ComponentContainerContext = /* @__PURE__ */ react_11.default.createContext(false);
+var ComponentContainerContext = /* @__PURE__ */ react_10.default.createContext(false);
 exports.ComponentContainerContext = ComponentContainerContext;
 function useForceUpdate2() {
-    const [_, setForcedRenderCount,] = react_11.default.useState(0);
-    return react_11.default.useCallback(() => setForcedRenderCount((v) => v + 1), []);
+    const [_, setForcedRenderCount,] = react_10.default.useState(0);
+    return react_10.default.useCallback(() => setForcedRenderCount((v) => v + 1), []);
 }
 var DEFAULT_SIZE = 200;
 var SharedObserver = class {
@@ -23245,7 +23378,7 @@ function useRerenderOnResize(ref) {
 }
 function useMeasuredSize(ref) {
     const forceUpdate = useForceUpdate2();
-    const size = react_11.default.useRef(null);
+    const size = react_10.default.useRef(null);
     function updateSize(newSize) {
         if (newSize.width === 0 && newSize.height === 0)
             return;
@@ -23275,8 +23408,8 @@ function useMeasuredSize(ref) {
     return size.current;
 }
 var SIZE_COMPATIBILITY_WRAPPER_ATTRIBUTE = 'data-framer-size-compatibility-wrapper';
-var withMeasuredSize = (Component17) => (props) => {
-    const ref = react_11.default.useRef(null);
+var withMeasuredSize = (Component18) => (props) => {
+    const ref = react_10.default.useRef(null);
     const size = useMeasuredSize(ref);
     const dataProps = {
         [SIZE_COMPATIBILITY_WRAPPER_ATTRIBUTE]: true,
@@ -23292,7 +23425,7 @@ var withMeasuredSize = (Component17) => (props) => {
         },
         ref,
         ...dataProps,
-        children: shouldRender && /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        children: shouldRender && /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             width: (size == null ? void 0 : size.width) ?? fallbackWidth,
             height: (size == null ? void 0 : size.height) ?? fallbackHeight,
@@ -23882,7 +24015,7 @@ var defaultFrameRect = {
     height: 200,
 };
 function useStyleAndRect(props) {
-    react_11.default.useInsertionEffect(() => {
+    react_10.default.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
     const inCodeComponent = (0, react_3.useContext)(ComponentContainerContext);
@@ -23902,7 +24035,7 @@ function useStyleAndRect(props) {
     if (shouldDisablePointerEvents && safeToEditPointerEvents) {
         defaultStyle.pointerEvents = 'none';
     }
-    const addTextCentering = react_11.default.Children.count(props.children) > 0 && react_11.default.Children.toArray(props.children).every((child) => {
+    const addTextCentering = react_10.default.Children.count(props.children) > 0 && react_10.default.Children.toArray(props.children).every((child) => {
         return typeof child === 'string' || typeof child === 'number';
     });
     const centerTextStyle = addTextCentering && {
@@ -24130,7 +24263,7 @@ function resolveParentSize(props, unwrappedProps, rect, inCodeComponent) {
 }
 function EmptyState({ title = '', description = 'Click and drag the connector to any frame on the canvas \u2192', children, size, hide, insideUserCodeComponent = false, position = 'absolute', }) {
     const { target, } = RenderEnvironment;
-    const childCount = react_11.default.Children.count(children);
+    const childCount = react_10.default.Children.count(children);
     if (insideUserCodeComponent && childCount === 0) {
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FrameWithMotion, {
             ...size,
@@ -24213,7 +24346,7 @@ function Description({ children, }) {
     });
 }
 var TREE_ROOT_ID = '__LAYOUT_TREE_ROOT';
-var SharedLayoutContext = /* @__PURE__ */ react_11.default.createContext({
+var SharedLayoutContext = /* @__PURE__ */ react_10.default.createContext({
     schedulePromoteTree: () => { },
     scheduleProjectionDidUpdate: () => { },
     initLead: () => { },
@@ -24491,14 +24624,14 @@ function _useSharedIntersectionObserver(ref, callback, options) {
 }
 var useSharedIntersectionObserver = typeof IntersectionObserver === 'undefined' ? noop2 : _useSharedIntersectionObserver;
 var thresholds2 = /* @__PURE__ */ new Array(100).fill(void 0).map((_, i) => i * 0.01);
-var ViewportContext = /* @__PURE__ */ react_11.default.createContext(null);
+var ViewportContext = /* @__PURE__ */ react_10.default.createContext(null);
 function useAppearEffect(ref, appearCallback, options) {
-    const internalState = react_11.default.useRef({
+    const internalState = react_10.default.useRef({
         isInView: false,
         hasAnimatedOnce: false,
     });
     const { enabled, animateOnce, threshold, rootMargin = `0px 0px 0px 0px`, } = options;
-    const callback = react_11.default.useCallback((entry) => {
+    const callback = react_10.default.useCallback((entry) => {
         const { isInView, hasAnimatedOnce, } = internalState.current;
         const isIntersecting = isIntersectingWithThreshold(entry, (threshold == null ? void 0 : threshold.y) ?? 0);
         if (isIntersecting && !isInView) {
@@ -24607,13 +24740,13 @@ var LayoutTree = class extends react_9.Component {
     }
 };
 var SharedLayoutTree = (props) => {
-    const sharedLayoutContext = react_11.default.useContext(SharedLayoutContext);
+    const sharedLayoutContext = react_10.default.useContext(SharedLayoutContext);
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(LayoutTree, {
         ...props,
         sharedLayoutContext,
     });
 };
-var NavigationContainerContext = /* @__PURE__ */ react_11.default.createContext(true);
+var NavigationContainerContext = /* @__PURE__ */ react_10.default.createContext(true);
 function useIsInCurrentNavigationTarget() {
     const isInCurrentNavigationTarget = (0, react_3.useContext)(NavigationContainerContext);
     return isInCurrentNavigationTarget;
@@ -24677,7 +24810,7 @@ function useOnCurrentTargetChange(callback, deps = []) {
         return () => deregister(callback);
     }, [register, deregister, ...deps,]);
 }
-var NavigationContainer = /* @__PURE__ */ react_11.default.memo(function NavigationContainer2({ isLayeredContainer, isCurrent, isPrevious, isOverlayed = false, visible, transitionProps, children, backdropColor, onTapBackdrop, backfaceVisible, exitBackfaceVisible, animation, exitAnimation, instant, initialProps, exitProps, position = {
+var NavigationContainer = /* @__PURE__ */ react_10.default.memo(function NavigationContainer2({ isLayeredContainer, isCurrent, isPrevious, isOverlayed = false, visible, transitionProps, children, backdropColor, onTapBackdrop, backfaceVisible, exitBackfaceVisible, animation, exitAnimation, instant, initialProps, exitProps, position = {
     top: 0,
     right: 0,
     bottom: 0,
@@ -25487,10 +25620,10 @@ function sequence(direction, transition, animation) {
 }
 var NavigationConsumer = /* @__PURE__ */ (() => NavigationContext.Consumer)();
 exports.NavigationConsumer = NavigationConsumer;
-var NavigationCallbackContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var NavigationCallbackContext = /* @__PURE__ */ react_10.default.createContext(void 0);
 var NavigationCallbackProvider = /* @__PURE__ */ (() => NavigationCallbackContext.Provider)();
 exports.NavigationCallbackProvider = NavigationCallbackProvider;
-var IsInitialNavigationContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var IsInitialNavigationContext = /* @__PURE__ */ react_10.default.createContext(void 0);
 var Navigation = /* @__PURE__ */ (() => {
     var _lastEventTimeStamp, _a, _Navigation_instances, getStackState_fn, isSameEventTransition_fn, _navigationAction, transition_fn;
     return _a = class extends react_9.Component {
@@ -25936,7 +26069,7 @@ function containerIsVisible(containerIndex, stackState) {
     return false;
 }
 function containerContent(item) {
-    const content = react_11.default.Children.map(item.component, (child) => {
+    const content = react_10.default.Children.map(item.component, (child) => {
         var _a;
         if (!isReactChild(child) || !isReactElement(child) || !child.props) {
             return child;
@@ -25962,7 +26095,7 @@ function containerContent(item) {
             if (canStretchStyle)
                 props.style.height = '100%';
         }
-        return react_11.default.cloneElement(child, props);
+        return react_10.default.cloneElement(child, props);
     });
     return content;
 }
@@ -25973,7 +26106,7 @@ function backdropTapAction(transition, goBackAction) {
 function NavigationWrapper(props) {
     const resetProjection = useResetProjection();
     const skipLayoutAnimation = useInstantLayoutTransition();
-    react_11.default.useInsertionEffect(() => {
+    react_10.default.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Navigation, {
@@ -26001,7 +26134,7 @@ var NavigationTransitionType = /* @__PURE__ */ ((NavigationTransitionType2) => {
 })(NavigationTransitionType || {});
 exports.NavigationTransitionType = NavigationTransitionType;
 function WithNavigator(BaseComponent, navigationTransition, navigationTransitionDirection, NavigationTarget, navigationTransitionOptions) {
-    const InternalWithNavigator = class extends react_11.default.Component {
+    const InternalWithNavigator = class extends react_10.default.Component {
         render() {
             return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(NavigationContext.Consumer, {
                 children: (navigation) => {
@@ -26221,11 +26354,11 @@ var clamp2 = (value, a, b) => {
     }
     return value;
 };
-var DraggingContext = /* @__PURE__ */ react_11.default.createContext({
+var DraggingContext = /* @__PURE__ */ react_10.default.createContext({
     dragging: false,
 });
-function WithDragging(Component17) {
-    const _WithDraggingHOC = class _WithDraggingHOC2 extends react_11.default.Component {
+function WithDragging(Component18) {
+    const _WithDraggingHOC = class _WithDraggingHOC2 extends react_10.default.Component {
         constructor(props, defaultProps) {
             super(props, defaultProps);
             (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'state', {
@@ -26794,7 +26927,7 @@ function WithDragging(Component17) {
                 value: {
                     dragging: this.state.isDragging,
                 },
-                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                     ...originalProps,
                 }),
             });
@@ -26831,10 +26964,10 @@ function WithDragging(Component17) {
         constraints: {},
         mouseWheel: false,
     });
-    (0, chunk_A2PMVMFI_js_1.__publicField)(_WithDraggingHOC, 'defaultProps', Object.assign({}, Component17.defaultProps, _WithDraggingHOC.draggingDefaultProps));
+    (0, chunk_A2PMVMFI_js_1.__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 = {
@@ -26856,13 +26989,13 @@ var eventHandlerMapping = {
 var tapEventKeys = /* @__PURE__ */ new Set(['tapstart', 'tap', 'tapend',]);
 function WithEvents(BaseComponent) {
     var _a;
-    const withEvents = (_a = class extends react_11.default.Component {
+    const withEvents = (_a = class extends react_10.default.Component {
         constructor() {
             super(...arguments);
             (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'shouldCancelTap', false);
             (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'activeEventListeners', /* @__PURE__ */ new Map());
             (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'hasFramerEventListener', false);
-            (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'component', react_11.default.createRef());
+            (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'component', react_10.default.createRef());
         }
         get element() {
             return this.component.current && this.component.current.element;
@@ -27938,16 +28071,16 @@ var DeprecatedFrame = /* @__PURE__ */ (() => {
         }
         layoutChildren() {
             const _forwardedOverrides = this.props._forwardedOverrides;
-            let children = react_11.default.Children.map(this.props.children, (child) => {
+            let children = react_10.default.Children.map(this.props.children, (child) => {
                 if (isConstraintSupportingChild(child)) {
-                    return react_11.default.cloneElement(child, {
+                    return react_10.default.cloneElement(child, {
                         parentSize: this.state.size,
                         _forwardedOverrides,
                         // biome-ignore lint/suspicious/noExplicitAny: deprecated code
                     });
                 }
                 else if (_forwardedOverrides && child) {
-                    return react_11.default.cloneElement(child, {
+                    return react_10.default.cloneElement(child, {
                         _forwardedOverrides,
                     });
                 }
@@ -28083,7 +28216,7 @@ var Draggable = /* @__PURE__ */ WithDragging(DeprecatedFrameWithEvents);
 exports.Draggable = Draggable;
 function useInfiniteScroll({ ref: observerRef, loadMore, rootMargin = '0px', paginationInfo, }) {
     const isVisibleRef = (0, react_4.useRef)(false);
-    const callback = react_11.default.useCallback((entry) => {
+    const callback = react_10.default.useCallback((entry) => {
         if (!entry.isIntersecting) {
             isVisibleRef.current = false;
             return;
@@ -28106,8 +28239,8 @@ function useInfiniteScroll({ ref: observerRef, loadMore, rootMargin = '0px', pag
         enabled: paginationInfo.currentPage < paginationInfo.totalPages,
     });
 }
-function withInfiniteScroll(Component17) {
-    return react_11.default.forwardRef(({ __paginationInfo, __loadMore, ...props }, ref) => {
+function withInfiniteScroll(Component18) {
+    return react_10.default.forwardRef(({ __paginationInfo, __loadMore, ...props }, ref) => {
         const infiniteScrollRef = useObserverRef(ref);
         useInfiniteScroll({
             rootMargin: '500px',
@@ -28115,7 +28248,7 @@ function withInfiniteScroll(Component17) {
             ref: infiniteScrollRef,
             paginationInfo: __paginationInfo,
         });
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             ref: infiniteScrollRef,
         });
@@ -28240,10 +28373,10 @@ function makePaddingString({ top, left, bottom, right, }) {
     return `${top}px ${right}px ${bottom}px ${left}px`;
 }
 var Stack = /* @__PURE__ */ (() => {
-    const StackInner = react_11.default.forwardRef(function StackInner2(stackProps, forwardedRef) {
+    const StackInner = react_10.default.forwardRef(function StackInner2(stackProps, forwardedRef) {
         const { as = 'div', direction = 'vertical', distribution = 'start', alignment = 'center', gap = 10, wrap: wrap2 = false, useFlexboxGap: externalUseFlexboxGap = true, children, style: styleProp, className: className2, willChangeTransform, __fromCodeComponentNode, parentSize, __contentWrapperStyle, ...containerProps } = stackProps;
         const useFlexboxGap = externalUseFlexboxGap || wrap2;
-        const stackRef = react_11.default.useRef(null);
+        const stackRef = react_10.default.useRef(null);
         const flexDirection = toFlexDirection(direction);
         const isReverse = isReverseDirection(flexDirection);
         const justifyContent = toJustifyOrAlignment(distribution);
@@ -28383,7 +28516,7 @@ function fraction(dimension) {
     return isFiniteNumber(value) ? value : 0;
 }
 function handleFraction(children, direction, widthType, heightType) {
-    return react_11.default.Children.map(children, (child) => {
+    return react_10.default.Children.map(children, (child) => {
         if (!isReactChild(child) || !isReactElement(child))
             return;
         const isVertical = direction === 'vertical';
@@ -28442,7 +28575,7 @@ function handleFraction(children, direction, widthType, heightType) {
             ...propsStyle,
             ...style2,
         };
-        return react_11.default.cloneElement(child, {
+        return react_10.default.cloneElement(child, {
             width: newWidth,
             height: newHeight,
             style: nextStyle,
@@ -28577,7 +28710,7 @@ function PageContainer({ children, effect, dragEnabled, direction, contentHeight
         }, effect ? Object.keys(effect).join('') : ''),
     });
 }
-var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, forwardedRef) {
+var Page = /* @__PURE__ */ react_10.default.forwardRef(function Page2(props, forwardedRef) {
     var _a;
     const { direction = 'horizontal', contentWidth = 'stretch', contentHeight = 'stretch', alignment = 'start', currentPage = 0, animateCurrentPageUpdate = true, gap: gapValue = 10, padding: _padding = 0, momentum = false, dragEnabled = true, defaultEffect: _defaultEffect = 'none', background = 'transparent', overflow = 'hidden', __fromCodeComponentNode, effect: _effect, children, contentOffsetX, contentOffsetY, onChangePage, onScrollStart, onScroll, onDragStart, onDrag, onDragEnd, directionLock, onScrollEnd, onDirectionLock: _onDirectionLock, onUpdate: _onUpdate, wheelEnabled = false, layoutId: specificLayoutId, ...rest } = props;
     const layoutId = useLayoutId2(props, {
@@ -28588,7 +28721,7 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
         ...rest,
         background,
     };
-    const hasMountedRef = react_11.default.useRef(false);
+    const hasMountedRef = react_10.default.useRef(false);
     const hasFixedSize = RenderTarget.hasRestrictions() && props.__fromCodeComponentNode && isFiniteNumber(containerProps.width) &&
         isFiniteNumber(containerProps.height);
     if (!hasFixedSize && __fromCodeComponentNode && !containerProps.__fromCanvasComponent) {
@@ -28598,7 +28731,7 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
             enabled: true,
         };
     }
-    const { initial, prev, } = react_11.default.useRef({
+    const { initial, prev, } = react_10.default.useRef({
         initial: {
             x: 0,
             y: 0,
@@ -28614,36 +28747,36 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
         warnOnce2(`The 'gap' property of Page component can not be negative, but is ${gapValue}.`);
         gap = 0;
     }
-    react_11.default.useInsertionEffect(() => {
+    react_10.default.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
-    const pageCount = react_11.default.Children.count(children);
-    const maxOffsetRef = react_11.default.useRef(0);
-    const constraints = react_11.default.useRef({
+    const pageCount = react_10.default.Children.count(children);
+    const maxOffsetRef = react_10.default.useRef(0);
+    const constraints = react_10.default.useRef({
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
     });
-    const fallbackContainerRef = react_11.default.useRef(null);
+    const fallbackContainerRef = react_10.default.useRef(null);
     const containerRef = forwardedRef || fallbackContainerRef;
-    const scrollableRef = react_11.default.useRef(null);
-    const pageEffectValuesRef = react_11.default.useRef([]);
-    const pageRectsRef = react_11.default.useRef([]);
+    const scrollableRef = react_10.default.useRef(null);
+    const pageEffectValuesRef = react_10.default.useRef([]);
+    const pageRectsRef = react_10.default.useRef([]);
     const internalX = useMotionValue(isMotionValue2(contentOffsetX) ? 0 : contentOffsetX ?? 0);
     const internalY = useMotionValue(isMotionValue2(contentOffsetY) ? 0 : contentOffsetY ?? 0);
-    const contentOffsetRef = react_11.default.useRef({
+    const contentOffsetRef = react_10.default.useRef({
         x: isMotionValue2(contentOffsetX) ? contentOffsetX : internalX,
         y: isMotionValue2(contentOffsetY) ? contentOffsetY : internalY,
     });
-    const currentContentPageRef = react_11.default.useRef(currentPage);
-    const propsBoundedCurrentPageRef = react_11.default.useRef(currentPage);
-    const latestPropsRef = react_11.default.useRef(props);
+    const currentContentPageRef = react_10.default.useRef(currentPage);
+    const propsBoundedCurrentPageRef = react_10.default.useRef(currentPage);
+    const latestPropsRef = react_10.default.useRef(props);
     latestPropsRef.current = props;
-    const lastDirectionRef = react_11.default.useRef(props.direction);
+    const lastDirectionRef = react_10.default.useRef(props.direction);
     const snapToPage = useSnapToPage(currentContentPageRef, contentOffsetRef, isHorizontal);
-    const [_, setForceUpdateCount,] = react_11.default.useState(0);
-    const containerSizeRef = react_11.default.useRef({
+    const [_, setForceUpdateCount,] = react_10.default.useState(0);
+    const containerSizeRef = react_10.default.useRef({
         width: 200,
         height: 200,
     });
@@ -28651,11 +28784,11 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
         containerSizeRef.current.width = containerProps.width;
         containerSizeRef.current.height = containerProps.height;
     }
-    const updateOnResize = react_11.default.useCallback(() => {
+    const updateOnResize = react_10.default.useCallback(() => {
         if (!hasFixedSize)
-            (0, react_12.startTransition)(() => setForceUpdateCount((v) => v + 1));
+            (0, react_11.startTransition)(() => setForceUpdateCount((v) => v + 1));
     }, [hasFixedSize,]);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (RenderTarget.current() !== RenderTarget.preview)
             return;
         globalThis.addEventListener('resize', updateOnResize);
@@ -28732,7 +28865,7 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
             updateAndSnapToPage(currentContentPageRef.current, true);
         });
     }, []);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (currentPage !== currentContentPageRef.current)
             updateAndSnapToPage(currentPage);
     }, [currentPage,]);
@@ -28830,7 +28963,7 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
         });
     };
     pageEffectValuesRef.current = [];
-    const childComponents = react_11.default.Children.map(children, (child, index) => {
+    const childComponents = react_10.default.Children.map(children, (child, index) => {
         if (!isReactChild(child) || !isReactElement(child)) {
             return child;
         }
@@ -28882,7 +29015,7 @@ var Page = /* @__PURE__ */ react_11.default.forwardRef(function Page2(props, for
             onDrag: onDragHandler,
             onDragEnd: onDragEndHandler,
             layoutId: layoutId ? `${layoutId}-${index}` : void 0,
-            children: react_11.default.cloneElement(child, update),
+            children: react_10.default.cloneElement(child, update),
         }, index);
     });
     useWheelScroll(scrollableRef, {
@@ -29838,7 +29971,7 @@ function convertScrollDirectionToDrag(scrollDirection) {
 }
 var useUpdateChildSize = ({ dragDirection, children, fromCanvasComponent, }) => {
     return (0, react_4.useMemo)(() => {
-        return react_11.default.Children.map(children, (child) => {
+        return react_10.default.Children.map(children, (child) => {
             if (child === null || typeof child !== 'object' || typeof child.type === 'string') {
                 return child;
             }
@@ -29858,14 +29991,14 @@ var useUpdateChildSize = ({ dragDirection, children, fromCanvasComponent, }) =>
                     style: Object.assign({}, child.props.style, updatedSize),
                 }
                 : updatedSize;
-            return react_11.default.cloneElement(child, update);
+            return react_10.default.cloneElement(child, update);
         });
     }, [dragDirection, children, fromCanvasComponent,]);
 };
 var numberFromOptionalMotionValue = (value) => {
     return typeof value === 'number' ? value : value.get();
 };
-var EmulatedScroll = /* @__PURE__ */ react_11.default.forwardRef(function EmulatedScroll2(props, forwardedRef) {
+var EmulatedScroll = /* @__PURE__ */ react_10.default.forwardRef(function EmulatedScroll2(props, forwardedRef) {
     const { direction = 'vertical', directionLock = false, dragEnabled = true, dragElastic, dragMomentum, dragTransition, wheelEnabled = true, contentOffsetX = 0, contentOffsetY = 0, contentWidth, contentHeight, onScrollStart, onScroll, onScrollEnd, onDragStart, onDrag, onDragEnd, onUpdate, onDirectionLock, style: style2, children, scrollAnimate, resetOffset, overdragEnabled = true, layoutId: specificLayoutId, native: _native, ...containerProps } = props;
     const layoutId = useLayoutId2(props, {
         specificLayoutId,
@@ -29953,7 +30086,7 @@ var EmulatedScroll = /* @__PURE__ */ react_11.default.forwardRef(function Emulat
             return;
         measureAndUpdateScrollOffset();
     }, []);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (shouldResetScroll(isInTarget))
             measureAndUpdateScrollOffset();
         if (isInTarget === false)
@@ -30068,7 +30201,7 @@ var EmulatedScroll = /* @__PURE__ */ react_11.default.forwardRef(function Emulat
             setScrollY(currentY);
         return y.on('change', setScrollY);
     }, [y, overdragY, scheduleUpdateScrollListeners, overdragEnabled,]);
-    const nativeOnScroll = react_11.default.useCallback(() => {
+    const nativeOnScroll = react_10.default.useCallback(() => {
         const element = containerRef.current;
         if (!(element instanceof HTMLDivElement))
             return;
@@ -30079,7 +30212,7 @@ var EmulatedScroll = /* @__PURE__ */ react_11.default.forwardRef(function Emulat
         if (yDelta > 1)
             y.set(-element.scrollTop);
     }, [x, y,]);
-    const isEmpty2 = react_11.default.Children.count(children) === 0;
+    const isEmpty2 = react_10.default.Children.count(children) === 0;
     const width = direction !== 'vertical' && !isEmpty2 ? 'auto' : '100%';
     const height = direction !== 'horizontal' && !isEmpty2 ? 'auto' : '100%';
     const size = !containerProps.__fromCanvasComponent
@@ -30313,7 +30446,7 @@ function useEmulateTouchScroll(ref, direction, enabled) {
         return emptyObject;
     if (RenderTarget.current() !== RenderTarget.preview)
         return emptyObject;
-    const scrollAnimationControlsRef = react_11.default.useRef(null);
+    const scrollAnimationControlsRef = react_10.default.useRef(null);
     (0, react_2.useEffect)(() => {
         if (!ref.current)
             return;
@@ -30466,7 +30599,7 @@ function useEmulateTouchScroll(ref, direction, enabled) {
             (_a = scrollAnimationControlsRef.current) == null ? void 0 : _a.stop();
         };
     }, [ref, direction, enabled,]);
-    return react_11.default.useMemo(() => {
+    return react_10.default.useMemo(() => {
         return {
             cancelEmulatedTouchScrollAnimation: () => {
                 var _a;
@@ -30521,7 +30654,7 @@ function useUpdateScrollOffset(ref, side, offset, cancelEmulatedTouchScrollAnima
         }
     }, [offset,]);
 }
-var NativeScroll = /* @__PURE__ */ react_11.default.forwardRef(function NativeScroll2(props, forwardedRef) {
+var NativeScroll = /* @__PURE__ */ react_10.default.forwardRef(function NativeScroll2(props, forwardedRef) {
     const { direction = 'vertical', scrollBarVisible = false, dragEnabled = true, contentOffsetX = 0, contentOffsetY = 0, contentWidth: _contentWidth, contentHeight: _contentHeight, children, resetOffset, onScroll, className: className2, 
     // Not (yet) supported
     directionLock: _directionLock = false, wheelEnabled: _wheelEnabled = true, scrollAnimate: _scrollAnimate, dragTransition: _dragTransition, dragMomentum: _dragMomentum, dragElastic: _dragElastic, overdragEnabled: _overdragEnabled = true, onScrollStart: _onScrollStart, onScrollEnd: _onScrollEnd, onDragStart: _onDragStart, onDrag: _onDrag, onDragEnd: _onDragEnd, onUpdate: _onUpdate, onDirectionLock: _onDirectionLock, layoutId: specificLayoutId, native: _native, 
@@ -30531,14 +30664,14 @@ var NativeScroll = /* @__PURE__ */ react_11.default.forwardRef(function NativeSc
         specificLayoutId,
         postfix: 'scroll',
     });
-    const fallbackRef = react_11.default.useRef(null);
+    const fallbackRef = react_10.default.useRef(null);
     const ref = forwardedRef || fallbackRef;
     const { cancelEmulatedTouchScrollAnimation, } = useEmulateTouchScroll(ref, direction, dragEnabled);
     (0, react_5.useInsertionEffect)(() => {
         injectComponentCSSRules();
     }, []);
     const isInTarget = useIsInCurrentNavigationTarget();
-    const previousIsInTargetRef = react_11.default.useRef(isInTarget);
+    const previousIsInTargetRef = react_10.default.useRef(isInTarget);
     const updateScrollOffsetHandler = () => {
         if (!resetOffset)
             return;
@@ -30595,7 +30728,7 @@ var NativeScroll = /* @__PURE__ */ react_11.default.forwardRef(function NativeSc
     });
 });
 var Scroll = /* @__PURE__ */ (() => {
-    const ScrollInner = react_11.default.forwardRef(function ScrollInner2(props, forwardedRef) {
+    const ScrollInner = react_10.default.forwardRef(function ScrollInner2(props, forwardedRef) {
         if (props.native) {
             return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(NativeScroll, {
                 ref: forwardedRef,
@@ -30787,12 +30920,12 @@ function createData(defaultState2, actions) {
 var initialState = {
     update: 0,
 };
-var DataObserverContext = /* @__PURE__ */ react_11.default.createContext({
+var DataObserverContext = /* @__PURE__ */ react_10.default.createContext({
     update: NaN,
 });
 exports.DataObserverContext = DataObserverContext;
 function useObserveData() {
-    const context = react_11.default.useContext(DataObserverContext);
+    const context = react_10.default.useContext(DataObserverContext);
     return !Number.isNaN(context.update);
 }
 var DataObserver = class extends react_9.Component {
@@ -30864,20 +30997,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) {
         (0, react_3.useContext)(DataObserverContext);
         const overrideProps = useOverride(props);
         const { style: style2, ...rest } = props;
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(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__';
@@ -30901,7 +31034,7 @@ function stripPrefixFromPrefixedKey(key7) {
     }
     return void 0;
 }
-var GeneratedComponentContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var GeneratedComponentContext = /* @__PURE__ */ react_10.default.createContext(void 0);
 exports.GeneratedComponentContext = GeneratedComponentContext;
 function cloneChildrenWithProps(children, props, asNode) {
     const cloned = React2.Children.map(children, (child) => {
@@ -31002,7 +31135,7 @@ function createRefFunction(state) {
         setRef(prevForwardedRef, value);
     };
 }
-var StyleSheetContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var StyleSheetContext = /* @__PURE__ */ react_10.default.createContext(void 0);
 exports.StyleSheetContext = StyleSheetContext;
 var framerPostSSRCSSSelector = 'style[data-framer-css-ssr-minified]';
 var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
@@ -31018,30 +31151,14 @@ var componentsWithServerRenderedStyles = /* @__PURE__ */ (() => {
 })();
 var framerCSSMarker = 'data-framer-css-ssr';
 exports.framerCSSMarker = framerCSSMarker;
-var withCSS = (Component17, escapedCSS, componentSerializationId) => react_11.default.forwardRef((props, ref) => {
-    const { sheet, cache: cache2, } = react_11.default.useContext(StyleSheetContext) ?? {};
+var withCSS = (Component18, escapedCSS, componentSerializationId) => react_10.default.forwardRef((props, ref) => {
+    const { sheet, cache: cache2, } = react_10.default.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__ */ (0, jsx_runtime_2.jsxs)(jsx_runtime_1.Fragment, {
-            children: [
-                /* @__PURE__ */ (0, jsx_runtime_1.jsx)('style', {
-                    ...{
-                        [framerCSSMarker]: true,
-                    },
-                    'data-framer-component': id3,
-                    dangerouslySetInnerHTML: {
-                        __html: concatenatedCSS,
-                    },
-                }),
-                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
-                    ...props,
-                    ref,
-                }),
-            ],
-        });
+        cssCollector.add(concatenatedCSS, id3);
     }
     (0, react_5.useInsertionEffect)(() => {
         if (id3 && componentsWithServerRenderedStyles.has(id3))
@@ -31053,18 +31170,41 @@ var withCSS = (Component17, escapedCSS, componentSerializationId) => react_11.de
                 : escapedCSS.split('\n');
         css22.forEach((rule) => rule && injectCSSRule(rule, sheet, cache2));
     }, []);
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...props,
         ref,
     });
 });
 exports.withCSS = withCSS;
-var SSRParentVariantsContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var CSSCollector = class {
+    constructor() {
+        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'styles', /* @__PURE__ */ new Set());
+        (0, chunk_A2PMVMFI_js_1.__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();
+exports.cssCollector = cssCollector;
+var SSRParentVariantsContext = /* @__PURE__ */ react_10.default.createContext(void 0);
 var SSRVariantClassName = 'ssr-variant';
 function renderBranchedChildrenFromPropertyOverrides(overrides, children, props, variantClassNames, primaryVariantId, parentVariants, cloneChildren, activeVariantId) {
-    const childrenArray = react_11.default.Children.toArray(children);
+    const childrenArray = react_10.default.Children.toArray(children);
     const child = childrenArray[0];
-    if (childrenArray.length !== 1 || !react_11.default.isValidElement(child)) {
+    if (childrenArray.length !== 1 || !react_10.default.isValidElement(child)) {
         console.warn('PropertyOverrides: expected exactly one React element for a child', children);
         return cloneChildren(children, props);
     }
@@ -31134,7 +31274,7 @@ function renderBranchedChildrenFromPropertyOverrides(overrides, children, props,
     assert(!activeVariantId || renderedBranches.length === 1, 'Must render exactly one branch when activeVariantId is given');
     return renderedBranches;
 }
-var SSRVariants = /* @__PURE__ */ react_11.default.forwardRef(function SSRVariants2({ id: _nodeId, children, ...props }, ref) {
+var SSRVariants = /* @__PURE__ */ react_10.default.forwardRef(function SSRVariants2({ id: _nodeId, children, ...props }, ref) {
     const cloneWithRefs = useCloneChildrenWithPropsAndRef(ref);
     if (isBrowser2()) {
         return cloneWithRefs(children, props);
@@ -31179,10 +31319,10 @@ function propsForBreakpoint(variant, props, overrides) {
 var noopSubscribe = () => () => { };
 var returnTrue = () => true;
 var returnFalse = () => false;
-var PropertyOverridesWithoutCSS = /* @__PURE__ */ react_11.default.forwardRef(function PropertyOverrides(props, ref) {
+var PropertyOverridesWithoutCSS = /* @__PURE__ */ react_10.default.forwardRef(function PropertyOverrides(props, ref) {
     const cloneWithRefs = useCloneChildrenWithPropsAndRef(ref);
-    const ancestorCtx = react_11.default.useContext(SSRParentVariantsContext);
-    const isHydrationOrSSR = react_11.default.useSyncExternalStore(noopSubscribe, returnFalse, returnTrue);
+    const ancestorCtx = react_10.default.useContext(SSRParentVariantsContext);
+    const isHydrationOrSSR = react_10.default.useSyncExternalStore(noopSubscribe, returnFalse, returnTrue);
     const action = useConstant2(() => {
         if (isHydrationOrSSR) {
             if (isBrowser2()) {
@@ -31196,7 +31336,7 @@ var PropertyOverridesWithoutCSS = /* @__PURE__ */ react_11.default.forwardRef(fu
             return 0;
         }
     });
-    const generatedComponentContext = react_11.default.useContext(GeneratedComponentContext);
+    const generatedComponentContext = react_10.default.useContext(GeneratedComponentContext);
     return useMemoOne(() => {
         const { breakpoint, overrides, children, ...restProps } = props;
         if (!generatedComponentContext) {
@@ -31309,11 +31449,11 @@ var AnimationCollector = class {
 _variantHashes = /* @__PURE__ */ new WeakMap();
 var framerAppearEffects = /* @__PURE__ */ new AnimationCollector();
 exports.framerAppearEffects = framerAppearEffects;
-function withOptimizedAppearEffect(Component17) {
-    return react_11.default.forwardRef(({ optimized, ...props }, ref) => {
+function withOptimizedAppearEffect(Component18) {
+    return react_10.default.forwardRef(({ optimized, ...props }, ref) => {
         var _a;
-        const generatedComponentContext = react_11.default.useContext(GeneratedComponentContext);
-        const variants = (_a = react_11.default.useContext(SSRParentVariantsContext)) == null ? void 0 : _a.variants;
+        const generatedComponentContext = react_10.default.useContext(GeneratedComponentContext);
+        const variants = (_a = react_10.default.useContext(SSRParentVariantsContext)) == null ? void 0 : _a.variants;
         const id3 = props[framerAppearIdKey];
         if (id3 && !isBrowser2()) {
             framerAppearEffects.setAll(id3, variants, 
@@ -31325,7 +31465,7 @@ function withOptimizedAppearEffect(Component17) {
             optimized ? props : null, generatedComponentContext);
         }
         const disabledProps = getDisabledFXPropsInStaticRenderer(props);
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ref,
             ...props,
             ...disabledProps,
@@ -31421,7 +31561,7 @@ function useFXValues(values, enabled) {
     const effect = useConstant2(() => ({
         values: makeFXValues(enabled ? values : void 0),
     }));
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (enabled)
             return;
         for (const key7 of effectValuesKeys) {
@@ -31498,7 +31638,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
         if (shouldRunRef.current)
             return;
         shouldRunRef.current = true;
-        (0, react_12.startTransition)(() => setIsRunning(true));
+        (0, react_11.startTransition)(() => setIsRunning(true));
         void animateLoop();
     }, [animateLoop,]);
     const stop = (0, react_3.useCallback)((overrideRunRef = true) => {
@@ -31511,7 +31651,7 @@ function useLoop({ loopEffectEnabled, loopRepeatDelay, loopTransition, loopRepea
         mirrorStateRef.current = false;
         if (overrideRunRef) {
             shouldRunRef.current = false;
-            (0, react_12.startTransition)(() => setIsRunning(false));
+            (0, react_11.startTransition)(() => setIsRunning(false));
         }
     }, []);
     const hasLoop = loopEffectEnabled && loop;
@@ -31584,9 +31724,9 @@ function parallaxTransform(scrollY, originalPosition, speed, offset, adjustPosit
 var parallaxOptionsKeys = /* @__PURE__ */ new Set(['speed', 'adjustPosition', 'offset', 'parallaxTransformEnabled',]);
 function useParallax(options, ref, visibilityStyle) {
     const { speed = 100, offset = 0, adjustPosition = false, parallaxTransformEnabled, } = options;
-    const originalPosition = react_11.default.useRef(null);
+    const originalPosition = react_10.default.useRef(null);
     const shouldReduceMotion = useReducedMotionConfig();
-    const transform2 = react_11.default.useCallback((yValue) => {
+    const transform2 = react_10.default.useCallback((yValue) => {
         if (originalPosition.current === null)
             return 0;
         if (speed === 100)
@@ -31630,8 +31770,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;
 }
@@ -31643,7 +31786,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))
@@ -31814,7 +31959,7 @@ function useScrollDirectionChange(scrollDirection, cb, options = {}) {
     const { direction, target, } = scrollDirection ?? {};
     const { repeat = true, enabled = true, } = options;
     const currentRouteKey = useCurrentRouteKey();
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (!direction || !enabled)
             return;
         const _ = currentRouteKey;
@@ -31912,7 +32057,7 @@ function makeStyle(defaults) {
     };
 }
 function useAnimationVariants({ opacity, targetOpacity, perspective: transformPerspective, enter, exit, animate: animateVariant2, ...defaultStyles }) {
-    return react_11.default.useMemo(() => ({
+    return react_10.default.useMemo(() => ({
         initial: enter ?? makeStyle({
             ...defaultStyles,
             opacity: opacity ?? targetOpacity ?? 1,
@@ -31930,14 +32075,14 @@ function useStyleAppearEffect(options, ref) {
     const variants = useAnimationVariants(options);
     const enabled = options.styleAppearEffectEnabled;
     const effect = useFXValues(enabled ? variants.initial : variants.animate, enabled);
-    const playState = react_11.default.useRef({
+    const playState = react_10.default.useRef({
         isPlaying: false,
         scheduledAppearState: void 0,
         lastAppearState: !options.styleAppearEffectEnabled,
     });
     const currentRouteKey = useCurrentRouteKey();
-    const animation = react_11.default.useRef();
-    const runAnimation = react_11.default.useCallback(async ({ transition, ...target }, fromInitial) => {
+    const animation = react_10.default.useRef();
+    const runAnimation = react_10.default.useCallback(async ({ transition, ...target }, fromInitial) => {
         const transitionWithFallback = transition ?? variants.animate.transition ?? options.transition;
         await animation.current;
         const visualElement = visualElementStore.get(ref.current);
@@ -31989,7 +32134,7 @@ function useStyleAppearEffect(options, ref) {
         },
     });
     const animateWithScrollInfo = options.targets && enabled && !options.scrollDirection;
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (!animateWithScrollInfo)
             return;
         const playedState = {
@@ -32069,8 +32214,8 @@ var defaultRanges2 = () => ({
     transformPerspective: [],
 });
 function useAttachOptionalSpring(values, spring2) {
-    const springs = react_11.default.useRef({});
-    react_11.default.useEffect(() => {
+    const springs = react_10.default.useRef({});
+    react_10.default.useEffect(() => {
         if (spring2 === void 0)
             return;
         for (const key7 of objectKeys(values)) {
@@ -32185,7 +32330,7 @@ function useStyleTransform({ transformTrigger, styleTransformEffectEnabled, tran
             effect.values[key7].set((values == null ? void 0 : values[key7]) ?? defaultFXValues[key7]);
         }
     });
-    return react_11.default.useMemo(() => {
+    return react_10.default.useMemo(() => {
         return {
             values: effect.values,
             style: styleTransformEffectEnabled ? effectEnabledStyle : effectDisabledStyle,
@@ -32261,10 +32406,10 @@ function addMotionValueStyle(style2, values) {
 function isVariantOrVariantList2(value) {
     return isString(value) || Array.isArray(value);
 }
-var withFX = (Component17) => react_11.default.forwardRef((props, forwardedRef) => {
+var withFX = (Component18) => react_10.default.forwardRef((props, forwardedRef) => {
     var _a;
     if (props.__withFX) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             animate: void 0,
             initial: void 0,
@@ -32274,7 +32419,7 @@ var withFX = (Component17) => react_11.default.forwardRef((props, forwardedRef)
     }
     const disabledProps = getDisabledFXPropsInStaticRenderer(props);
     if (disabledProps) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             ...disabledProps,
             ref: forwardedRef,
@@ -32287,7 +32432,7 @@ var withFX = (Component17) => react_11.default.forwardRef((props, forwardedRef)
     const { values: transformValues2, style: scrollStyle, } = useStyleTransform(styleTransform, observerRef);
     const { values: appearEffectValues, style: scrollAppearStyle, } = useStyleAppearEffect(styleAppear, observerRef);
     const { values: loopValues, style: loopStyle, } = useLoop(loop, observerRef);
-    const fxValues = react_11.default.useMemo(() => {
+    const fxValues = react_10.default.useMemo(() => {
         const layerOpacity = new MotionValue(targetOpacityValue ?? 1);
         return {
             scale: [appearEffectValues.scale, loopValues.scale, presenceEffectValues.scale, transformValues2.scale,],
@@ -32342,7 +32487,7 @@ var withFX = (Component17) => react_11.default.forwardRef((props, forwardedRef)
             exit,
         }
         : {};
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...forwardedProps,
         ...motionGestures,
         __withFX: true,
@@ -32380,12 +32525,12 @@ function ComponentPresetsConsumer({ componentIdentifier, children, }) {
     const presetProps = componentPresets[componentIdentifier] ?? {};
     return children(presetProps);
 }
-var ComponentViewportContext = /* @__PURE__ */ react_11.default.createContext({});
+var ComponentViewportContext = /* @__PURE__ */ react_10.default.createContext({});
 function useComponentViewport() {
-    return react_11.default.useContext(ComponentViewportContext);
+    return react_10.default.useContext(ComponentViewportContext);
 }
-var ComponentViewportProvider = /* @__PURE__ */ react_11.default.forwardRef(function ComponentViewportProvider2({ width, height, y, children, ...rest }, ref) {
-    const componentViewport = react_11.default.useMemo(() => {
+var ComponentViewportProvider = /* @__PURE__ */ react_10.default.forwardRef(function ComponentViewportProvider2({ width, height, y, children, ...rest }, ref) {
+    const componentViewport = react_10.default.useMemo(() => {
         return {
             width,
             height,
@@ -32399,9 +32544,9 @@ var ComponentViewportProvider = /* @__PURE__ */ react_11.default.forwardRef(func
     });
 });
 exports.ComponentViewportProvider = ComponentViewportProvider;
-var withGeneratedLayoutId = (Component17) => react_11.default.forwardRef((props, ref) => {
+var withGeneratedLayoutId = (Component18) => react_10.default.forwardRef((props, ref) => {
     const layoutId = useLayoutId2(props);
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         layoutId,
         ...props,
         layoutIdKey: void 0,
@@ -32432,7 +32577,7 @@ var SynchronousSuspenseErrorBoundary = class extends react_9.Component {
         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),
@@ -32478,7 +32623,7 @@ function SuspenseThatPreservesDom({ children, }) {
             children,
         });
     }
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_13.Suspense, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_12.Suspense, {
         fallback: suspend,
         children,
     });
@@ -32554,7 +32699,7 @@ function ServerSideErrorBoundary({ children, fallback = nullFallback, }) {
         ? // On the server, Suspense fallback is activated by errors. So we use the actual Suspense,
             // and render the actual error fallback if Suspense activates.
             /* @__PURE__ */
-            (0, jsx_runtime_1.jsx)(react_13.Suspense, {
+            (0, jsx_runtime_1.jsx)(react_12.Suspense, {
                 fallback,
                 children,
             })
@@ -32591,13 +32736,13 @@ var DeprecatedContainerErrorBoundary = class extends react_9.Component {
         return hasError ? null : children;
     }
 };
-var ExternalComponentContext = /* @__PURE__ */ (() => react_11.default.createContext(void 0))();
+var ExternalComponentContext = /* @__PURE__ */ (() => react_10.default.createContext(void 0))();
 function useNearestExternalComponent() {
-    return react_11.default.useContext(ExternalComponentContext);
+    return react_10.default.useContext(ExternalComponentContext);
 }
 function useFurthestExternalComponent() {
     const nearestExternalComponent = useNearestExternalComponent();
-    const furthestExternalComponent = react_11.default.useMemo(() => {
+    const furthestExternalComponent = react_10.default.useMemo(() => {
         if (!nearestExternalComponent)
             return void 0;
         let item = nearestExternalComponent;
@@ -32610,7 +32755,7 @@ function useFurthestExternalComponent() {
 }
 function IsExternalComponent({ children, scopeId, nodeId, }) {
     const parent = useNearestExternalComponent();
-    const newValue = react_11.default.useMemo(() => ({
+    const newValue = react_10.default.useMemo(() => ({
         level: ((parent == null ? void 0 : parent.level) ?? 0) + 1,
         scopeId,
         nodeId,
@@ -32690,12 +32835,12 @@ function useMaybeWrapComponentWithCodeBoundary(children, scopeId, nodeId, isAuth
     }
     return children;
 }
-var ContainerInner = /* @__PURE__ */ react_11.default.forwardRef(({ children, layoutId, as, scopeId, nodeId, isAuthoredByUser, isModuleExternal, inComponentSlot, ...props }, ref) => {
+var ContainerInner = /* @__PURE__ */ react_10.default.forwardRef(({ children, layoutId, as, scopeId, nodeId, isAuthoredByUser, isModuleExternal, inComponentSlot, ...props }, ref) => {
     const outerLayoutId = useConstant2(() => layoutId ? `${layoutId}-container` : void 0);
     const MotionComponent = htmlElementAsMotionComponent(as);
-    const clonedChildren = react_11.default.Children.map(children, (child) => {
-        return react_11.default.isValidElement(child)
-            ? react_11.default.cloneElement(child, {
+    const clonedChildren = react_10.default.Children.map(children, (child) => {
+        return react_10.default.isValidElement(child)
+            ? react_10.default.cloneElement(child, {
                 layoutId,
             })
             : child;
@@ -32723,7 +32868,7 @@ var ContainerInner = /* @__PURE__ */ react_11.default.forwardRef(({ children, la
 });
 var Container = /* @__PURE__ */ withGeneratedLayoutId(ContainerInner);
 exports.Container = Container;
-var SmartComponentScopedContainer = /* @__PURE__ */ react_11.default.forwardRef((props, ref) => {
+var SmartComponentScopedContainer = /* @__PURE__ */ react_10.default.forwardRef((props, ref) => {
     const { as, children, 
     // Code boundary-specific props
     scopeId, nodeId, isAuthoredByUser, rendersWithMotion, isModuleExternal, inComponentSlot, 
@@ -32732,10 +32877,10 @@ var SmartComponentScopedContainer = /* @__PURE__ */ react_11.default.forwardRef(
     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__ */ (0, jsx_runtime_1.jsx)(NodeIdContext.Provider, {
             value: nodeId ?? null,
-            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                 ...otherProps,
                 ref,
                 style: props.style,
@@ -32744,11 +32889,11 @@ var SmartComponentScopedContainer = /* @__PURE__ */ react_11.default.forwardRef(
         });
     }
     else {
-        const Component17 = tagName;
+        const Component18 = tagName;
         const { layoutId, layoutDependency, ...plainHTMLRenderableProps } = otherProps;
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(NodeIdContext.Provider, {
             value: nodeId ?? null,
-            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                 ...plainHTMLRenderableProps,
                 ref,
                 style: props.style,
@@ -32775,7 +32920,7 @@ function getActiveDefinitions(map2, previousDefinitions, newDefinitions) {
     }
     return allCursors;
 }
-var CustomCursorContextProvider = /* @__PURE__ */ (0, react_14.memo)(function CustomCursorList({ children, }) {
+var CustomCursorContextProvider = /* @__PURE__ */ (0, react_13.memo)(function CustomCursorList({ children, }) {
     const value = useConstant2(() => {
         const events = /* @__PURE__ */ new Set();
         let allCursors = {};
@@ -32876,7 +33021,7 @@ function isEmptyObject(object) {
         return false;
     return true;
 }
-var CustomCursorComponent = /* @__PURE__ */ (0, react_14.memo)(function CustomCursorComponent2() {
+var CustomCursorComponent = /* @__PURE__ */ (0, react_13.memo)(function CustomCursorComponent2() {
     const { onRegisterCursors, } = (0, react_3.useContext)(CustomCursorContext);
     const [hasHoverCapability, setHasHoverCapability,] = (0, react_4.useState)(false);
     const pointerX = useMotionValue(0);
@@ -32892,7 +33037,7 @@ var CustomCursorComponent = /* @__PURE__ */ (0, react_14.memo)(function CustomCu
         const noHoverMQ = safeWindow.matchMedia('(any-hover: none)');
         function updateRender(e) {
             if (e.matches) {
-                (0, react_12.startTransition)(() => setHasHoverCapability(false));
+                (0, react_11.startTransition)(() => setHasHoverCapability(false));
             }
             else {
                 setHasHoverCapability(true);
@@ -33025,7 +33170,7 @@ var CustomCursorComponent = /* @__PURE__ */ (0, react_14.memo)(function CustomCu
     ]);
     if (!hasHoverCapability || !cursor || !Cursor)
         return null;
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_13.Suspense, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_12.Suspense, {
         children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Cursor, {
             transformTemplate: transformTemplate2,
             style: {
@@ -33049,6 +33194,341 @@ 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() {
+        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'collectedLinks', /* @__PURE__ */ new Map());
+        (0, chunk_A2PMVMFI_js_1.__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();
+exports.nestedLinksCollector = 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__ */ (0, react_1.createContext)(void 0);
+function ResetOuterLinkContext({ children, }) {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(OuterLinkContext.Provider, {
+        value: void 0,
+        children,
+    });
+}
+function useReplaceNestedLinks(children, scopeId, nodeId, href, propsAddedByLink, observerRef) {
+    const outerLink = (0, react_3.useContext)(OuterLinkContext);
+    const furthestExternalComponent = useFurthestExternalComponent();
+    const innerLink = (0, react_4.useMemo)(() => ({
+        scopeId,
+        nodeId,
+        furthestExternalComponent,
+    }), [scopeId, nodeId, furthestExternalComponent,]);
+    const router = useRouter();
+    const currentRoute = useCurrentRoute();
+    const route = (0, react_4.useMemo)(() => {
+        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 = (0, react_3.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 = (0, react_3.useCallback)((event) => {
+        if (!propsAddedByLink.href)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        openExternalLink(propsAddedByLink.href, '', '_blank');
+    }, [propsAddedByLink,]);
+    const onKeyDown = (0, react_3.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) {
+        react_6.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 = react_6.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 (0, react_8.createElement)(tag, // We need to pass the ref here again, otherwise it will be lost
+            {
+                ...props,
+                ref,
+            }, childChildren);
+        });
+    }
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(OuterLinkContext.Provider, {
+        value: innerLink,
+        children: replacedChildren,
+    });
+}
+function linkInfoIsCollectable(linkInfo) {
+    return !isUndefined(linkInfo == null ? void 0 : linkInfo.nodeId);
+}
+function isChildReplaceable(child) {
+    return (0, react_6.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
@@ -33445,15 +33925,15 @@ function domWriteUpdatePosition(floatingPositionRef, position, rect, scrollX, sc
     });
 }
 var FloatingStackingContext = /* @__PURE__ */ (() => {
-    const Context2 = react_11.default.createContext(/* @__PURE__ */ new Set());
+    const Context2 = react_10.default.createContext(/* @__PURE__ */ new Set());
     Context2.displayName = 'FloatingStackingContext';
     return Context2;
 })();
 function useDismissFloatingLayer(anchorRef, floatingPositionRef, safeAreaRef, { safeArea, onDismiss, }) {
     const descendantStackingContext = useConstant2(() => /* @__PURE__ */ new Set());
-    const ancestorStackingContext = react_11.default.useContext(FloatingStackingContext);
+    const ancestorStackingContext = react_10.default.useContext(FloatingStackingContext);
     const [isPresent2, safeToRemove,] = usePresence();
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (isPresent2) {
             if (!floatingPositionRef.current)
                 return;
@@ -33468,7 +33948,7 @@ function useDismissFloatingLayer(anchorRef, floatingPositionRef, safeAreaRef, {
             safeToRemove();
         }
     }, [isPresent2, safeToRemove, floatingPositionRef, ancestorStackingContext,]);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (!safeArea) {
             const handleEscape = (e) => {
                 if (e.key !== 'Escape')
@@ -33530,7 +34010,7 @@ function childrenWithOrigin(child, { x, y, }) {
         originX: x,
         originY: y,
     };
-    return react_11.default.cloneElement(child, {
+    return react_10.default.cloneElement(child, {
         style: style2,
     });
 }
@@ -33548,30 +34028,42 @@ function getPortalContainer(deprecatedSelector, inComponent) {
     return document.body;
 }
 function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef, className: className2, children, portalSelector, zIndex, collisionDetection = false, collisionDetectionPadding, onDismiss, ...rest }) {
-    const floatingPositionRef = react_11.default.useRef(null);
-    const safeAreaRef = react_11.default.useRef(null);
-    const contentRef = react_11.default.useRef(null);
+    const floatingPositionRef = react_10.default.useRef(null);
+    const safeAreaRef = react_10.default.useRef(null);
+    const contentRef = react_10.default.useRef(null);
     const [origin, updateOrigin,] = useDynamicMotionOrigin(placement, alignment);
-    react_11.default.useLayoutEffect(() => {
+    react_10.default.useLayoutEffect(() => {
         if (!refHasValue(anchorRef) || !contentRef.current || !placement || !alignment)
             return;
         const offset = {
             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;
@@ -33611,31 +34103,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();
@@ -33701,17 +34174,19 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
                     }),
             /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FloatingStackingContext.Provider, {
                 value: descendantContext,
-                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)('div', {
-                    ref: contentRef,
-                    children: childrenWithOrigin(children, origin),
+                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ResetOuterLinkContext, {
+                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)('div', {
+                        ref: contentRef,
+                        children: childrenWithOrigin(children, origin),
+                    }),
                 }),
             }),
         ],
     }), getPortalContainer(portalSelector, inComponent));
 }
-var Instance = /* @__PURE__ */ react_11.default.forwardRef(function Instance2({ Component: Component17, ...props }, ref) {
-    return Component17
-        ? /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+var Instance = /* @__PURE__ */ react_10.default.forwardRef(function Instance2({ Component: Component18, ...props }, ref) {
+    return Component18
+        ? /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             ref,
         })
@@ -33865,20 +34340,16 @@ function ChildrenCanSuspend({ children, }) {
         children,
     });
 }
-function withChildrenCanSuspend(Component17) {
+function withChildrenCanSuspend(Component18) {
     return (0, react_7.forwardRef)(function withChildrenCanSuspendInner(props, ref) {
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(ChildrenCanSuspend, {
-            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(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;
@@ -34064,21 +34535,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);
@@ -34150,137 +34606,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__ */ (0, react_1.createContext)(void 0);
 exports.PathVariablesContext = PathVariablesContext;
@@ -34355,186 +34680,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() {
-        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'collectedLinks', /* @__PURE__ */ new Map());
-        (0, chunk_A2PMVMFI_js_1.__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();
-exports.nestedLinksCollector = nestedLinksCollector;
-function useIsOnFramerCanvas() {
-    return RenderTarget.current() === RenderTarget.canvas;
-}
-var OuterLinkContext = /* @__PURE__ */ (0, react_1.createContext)(void 0);
-function useReplaceNestedLinks(children, scopeId, nodeId, href, propsAddedByLink, observerRef) {
-    const outerLink = (0, react_3.useContext)(OuterLinkContext);
-    const furthestExternalComponent = useFurthestExternalComponent();
-    const innerLink = (0, react_4.useMemo)(() => ({
-        scopeId,
-        nodeId,
-        furthestExternalComponent,
-    }), [scopeId, nodeId, furthestExternalComponent,]);
-    const router = useRouter();
-    const currentRoute = useCurrentRoute();
-    const route = (0, react_4.useMemo)(() => {
-        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 = (0, react_3.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 = (0, react_3.useCallback)((event) => {
-        if (!propsAddedByLink.href)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        openExternalLink(propsAddedByLink.href, '', '_blank');
-    }, [propsAddedByLink,]);
-    const onKeyDown = (0, react_3.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) {
-        react_6.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 = react_6.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 (0, react_8.createElement)(tag, // We need to pass the ref here again, otherwise it will be lost
-            {
-                ...props,
-                ref,
-            }, childChildren);
-        });
-    }
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(OuterLinkContext.Provider, {
-        value: innerLink,
-        children: replacedChildren,
-    });
-}
-function linkInfoIsCollectable(linkInfo) {
-    return !isUndefined(linkInfo == null ? void 0 : linkInfo.nodeId);
-}
-function isChildReplaceable(child) {
-    return (0, react_6.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 (0, react_3.useCallback)(async (hrefAttribute) => {
         var _a, _b, _c, _d, _e;
@@ -34821,24 +34966,6 @@ function resolvePageScope(pageLink, router) {
         siteCanonicalURL: void 0,
     });
 }
-var IgnoreErrors = class extends react_9.Component {
-    constructor() {
-        super(...arguments);
-        (0, chunk_A2PMVMFI_js_1.__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;
@@ -35011,18 +35138,18 @@ function openExternalLinkInCurrentTab(link, formRef) {
     linkElement.click();
     linkElement.remove();
 }
-var FormContext = react_11.default.createContext(void 0);
+var FormContext = react_10.default.createContext(void 0);
 exports.FormContext = FormContext;
-var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormContainer2({ action, children, redirectUrl, onSuccess, onError, onLoading, submitTrackingId, nodeId, ...props }, forwardedRef) {
-    const fallbackRef = react_11.default.useRef(null);
+var FormContainer = /* @__PURE__ */ react_10.default.forwardRef(function FormContainer2({ action, children, redirectUrl, onSuccess, onError, onLoading, submitTrackingId, nodeId, ...props }, forwardedRef) {
+    const fallbackRef = react_10.default.useRef(null);
     const ref = forwardedRef ?? fallbackRef;
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
-    const [state, dispatch,] = react_11.default.useReducer(formReducer, incompleteState);
+    const [state, dispatch,] = react_10.default.useReducer(formReducer, incompleteState);
     const { activeLocale, } = useLocaleInfo();
     const projectHash = (0, react_3.useContext)(FormContext);
-    const callbacks = react_11.default.useRef({
+    const callbacks = react_10.default.useRef({
         onSuccess,
         onError,
         onLoading,
@@ -35032,6 +35159,7 @@ var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormCon
         onError,
         onLoading,
     };
+    const submissionInProgressRef = react_10.default.useRef(false);
     async function redirectTo(link) {
         var _a, _b;
         if (isString(link)) {
@@ -35052,16 +35180,17 @@ var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormCon
     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',
         });
+        (0, react_11.startTransition)(() => dispatch({
+            type: 'submit',
+        }));
         addUTMTagsToFormData(data2, safeWindow.document);
         for (const [key7, value,] of data2) {
             if (value instanceof File)
@@ -35076,7 +35205,7 @@ var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormCon
                 activeLocale,
             });
             await submitForm(action, data2, projectHash);
-            (0, react_12.startTransition)(() => dispatch({
+            (0, react_11.startTransition)(() => dispatch({
                 type: 'success',
             }));
             (_d = (_c = callbacks.current).onSuccess) == null ? void 0 : _d.call(_c);
@@ -35085,12 +35214,13 @@ var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormCon
             }
         }
         catch (error) {
-            (0, react_12.startTransition)(() => dispatch({
+            (0, react_11.startTransition)(() => dispatch({
                 type: 'error',
             }));
             (_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;
@@ -35108,7 +35238,7 @@ var FormContainer = /* @__PURE__ */ react_11.default.forwardRef(function FormCon
             priority: 'background',
             continueAfter: 'paint',
         });
-        (0, react_12.startTransition)(() => dispatch({
+        (0, react_11.startTransition)(() => dispatch({
             type: anyEmptyRequiredFields(target) ? 'incomplete' : 'complete',
         }));
     };
@@ -35168,6 +35298,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 react_9.Component {
+    constructor() {
+        super(...arguments);
+        (0, chunk_A2PMVMFI_js_1.__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 = (0, react_3.useContext)(FormContext);
+    const enabled = (0, react_14.useSyncExternalStore)(noOpSubscribe, fast ? isPrioritized : isntPrioritized, getServerSnapshot);
+    const editorBarFeatures = (0, react_4.useMemo)(() => {
+        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__ */ (0, jsx_runtime_1.jsx)(IgnoreErrors, {
+        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_12.Suspense, {
+            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBar, {
+                framerSiteId,
+                features: editorBarFeatures,
+            }),
+        }),
+    });
+}
 function isSamePage(a, b) {
     if (a.routeId !== b.routeId)
         return false;
@@ -35264,8 +35449,8 @@ var useSendPageView = (currentRoute, currentRouteId, currentPathnameWithHash, cu
 };
 var defaultLocaleId = 'default';
 function useForceUpdate3() {
-    const [_, setForcedRenderCount,] = react_11.default.useState(0);
-    return [_, react_11.default.useCallback(() => setForcedRenderCount((v) => v + 1), []),];
+    const [_, setForcedRenderCount,] = react_10.default.useState(0);
+    return [_, react_10.default.useCallback(() => setForcedRenderCount((v) => v + 1), []),];
 }
 function updateScrollPosition(hash2, smoothScroll, isHistoryTransition) {
     const element = hash2 && document.getElementById(hash2);
@@ -35341,7 +35526,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,
@@ -35357,7 +35542,7 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     const { synchronousNavigationOnDesktop, } = useLibraryFeatures();
     const transitionFn = (0, react_4.useMemo)(() => {
         if (!synchronousNavigationOnDesktop || !isDesktop()) {
-            return react_12.startTransition;
+            return react_11.startTransition;
         }
         return (fn) => fn();
     }, [synchronousNavigationOnDesktop,]);
@@ -35599,38 +35784,46 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
     }));
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(RouterAPIProvider, {
         api,
-        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(LocaleInfoContext.Provider, {
+        children: /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(LocaleInfoContext.Provider, {
             value: localeInfo,
-            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(SynchronousSuspenseErrorBoundary, {
-                children: /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(SuspenseThatPreservesDom, {
-                    children: [
-                        /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(NotFoundErrorBoundary, {
-                            notFoundPage,
-                            defaultPageStyle,
-                            forceUpdateKey: dep,
-                            children: [
-                                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.Start, {}),
-                                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(WithLayoutTemplate, {
-                                    LayoutTemplate,
-                                    routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
-                                    style: defaultPageStyle,
-                                    children: (inLayoutTemplate) => {
-                                        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(jsx_runtime_1.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__ */ (0, jsx_runtime_1.jsx)(TurnOnReactEventHandling, {}),
-                        /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.End, {}),
-                    ],
+            children: [
+                EditorBar && /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBarLauncher, {
+                    EditorBar,
+                    fast: true,
                 }),
-            }),
+                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(SynchronousSuspenseErrorBoundary, {
+                    children: /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(SuspenseThatPreservesDom, {
+                        children: [
+                            /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(NotFoundErrorBoundary, {
+                                notFoundPage,
+                                defaultPageStyle,
+                                forceUpdateKey: dep,
+                                children: [
+                                    /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.Start, {}),
+                                    /* @__PURE__ */ (0, jsx_runtime_1.jsx)(WithLayoutTemplate, {
+                                        LayoutTemplate,
+                                        routeId: (currentRoute == null ? void 0 : currentRoute.abTestingVariantId) ?? currentRouteId,
+                                        style: defaultPageStyle,
+                                        children: (inLayoutTemplate) => {
+                                            return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(jsx_runtime_1.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__ */ (0, jsx_runtime_1.jsx)(EditorBarLauncher, {
+                                EditorBar,
+                            }),
+                            /* @__PURE__ */ (0, jsx_runtime_1.jsx)(TurnOnReactEventHandling, {}),
+                            /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MarkSuspenseEffects.End, {}),
+                        ],
+                    }),
+                }),
+            ],
         }),
     });
 }
@@ -35729,20 +35922,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;
@@ -36158,7 +36343,7 @@ function usePrefetch() {
 }
 MotionGlobalConfig.WillChange = WillChangeMotionValue;
 function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, EditorBar, defaultPageStyle, disableHistory, LayoutTemplate, siteCanonicalURL, }) {
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (isWebsite)
             return;
         MainLoop.start();
@@ -36183,9 +36368,7 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
                                 width: 'auto',
                             },
                             preserveQueryParams,
-                            editorBar: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBarLauncher, {
-                                EditorBar,
-                            }),
+                            EditorBar,
                             disableHistory,
                             LayoutTemplate,
                             siteCanonicalURL,
@@ -36196,12 +36379,12 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
         });
     }
     else {
-        const Wrapper = includeDataObserver ? DataObserver : react_11.default.Fragment;
+        const Wrapper = includeDataObserver ? DataObserver : react_10.default.Fragment;
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Wrapper, {
             children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(RoutesProvider, {
                 routes,
                 children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(NavigationWrapper, {
-                    children: react_11.default.isValidElement(RootComponent) ? RootComponent : react_11.default.createElement(
+                    children: react_10.default.isValidElement(RootComponent) ? RootComponent : react_10.default.createElement(
                     // @ts-expect-error to figure out how to type this properly, as tests are using different
                     // $$typeof symbol and isValidElement fails
                     RootComponent, {
@@ -36212,36 +36395,6 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
         });
     }
 }
-function EditorBarLauncher({ EditorBar, }) {
-    const libraryFeatures = useLibraryFeatures();
-    const [mounted, setMounted,] = (0, react_4.useState)(false);
-    const framerSiteId = (0, react_3.useContext)(FormContext);
-    const editorBarFeatures = (0, react_4.useMemo)(() => {
-        const features = {};
-        let key7;
-        for (key7 in libraryFeatures) {
-            if (libraryFeatures.hasOwnProperty(key7) && key7.startsWith('editorBar')) {
-                features[key7] = libraryFeatures[key7];
-            }
-        }
-        return features;
-    }, [libraryFeatures,]);
-    (0, react_2.useEffect)(() => {
-        (0, react_12.startTransition)(() => {
-            setMounted(true);
-        });
-    }, []);
-    if (!EditorBar || !framerSiteId || !mounted)
-        return null;
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(IgnoreErrors, {
-        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(react_13.Suspense, {
-            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBar, {
-                framerSiteId,
-                features: editorBarFeatures,
-            }),
-        }),
-    });
-}
 var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, react_7.forwardRef)(function ResolveLinksInner({ links, children, ...rest }, ref) {
     const router = useRouter();
     const { activeLocale, } = useLocaleInfo();
@@ -40857,7 +41010,7 @@ function useActiveTargetCallback() {
     }).current;
 }
 function useAddVariantProps(baseVariant, gestureVariant, variantProps2) {
-    return react_11.default.useCallback((id3) => {
+    return react_10.default.useCallback((id3) => {
         var _a, _b, _c;
         if (!variantProps2)
             return {};
@@ -40919,7 +41072,7 @@ function useHydratedBreakpointVariants(initial, mediaQueries, hydratedWithInitia
         if (variant !== baseVariant.current || variant !== basePropsVariant.current) {
             let updateStateAndRerender2 = function () {
                 baseVariant.current = basePropsVariant.current = variant;
-                (0, react_12.startTransition)(() => {
+                (0, react_11.startTransition)(() => {
                     forceUpdate();
                 });
             };
@@ -41045,7 +41198,7 @@ function useDataRecord(collection, variables) {
 }
 function useDynamicRefs() {
     const map2 = useConstant2(() => /* @__PURE__ */ new Map());
-    return react_11.default.useCallback((key7) => {
+    return react_10.default.useCallback((key7) => {
         const existing = map2.get(key7);
         if (existing)
             return existing;
@@ -41066,7 +41219,7 @@ function useSiteRefs() {
             siteCanonicalURL: void 0,
         });
     }, [route,]);
-    return react_11.default.useCallback((key7) => {
+    return react_10.default.useCallback((key7) => {
         if (!key7)
             return;
         const computedKey = `${path}-${key7}`;
@@ -41160,7 +41313,7 @@ function createGamepadPoller() {
     };
 }
 var gamepadPoller = /* @__PURE__ */ createGamepadPoller();
-var GamepadContext = /* @__PURE__ */ react_11.default.createContext(gamepadPoller);
+var GamepadContext = /* @__PURE__ */ react_10.default.createContext(gamepadPoller);
 exports.GamepadContext = GamepadContext;
 function getGamepadInputs() {
     let firstConnectedGamepad = null;
@@ -41210,16 +41363,16 @@ function isButtonPressed(button) {
     return button.pressed === true || button.value > 0;
 }
 function useGamepad(input, callback, { mapping, on, } = {}) {
-    const context = react_11.default.useContext(GamepadContext);
+    const context = react_10.default.useContext(GamepadContext);
     const settings = useConstant2(() => ({
         mapping: mapping ?? 'standard',
         on: on ?? 'keydown',
     }));
-    const stateRef = react_11.default.useRef({
+    const stateRef = react_10.default.useRef({
         pressed: false,
         handler: callback,
     });
-    const cb = react_11.default.useCallback((gamepad) => {
+    const cb = react_10.default.useCallback((gamepad) => {
         const { pressed, handler, } = stateRef.current;
         if (gamepad.inputs.includes(input) && settings.mapping === gamepad.mapping) {
             settings.on === 'keydown' && handler();
@@ -41240,10 +41393,10 @@ function useGamepad(input, callback, { mapping, on, } = {}) {
         }
         return () => context.unregister(cb);
     }, []);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         return () => context.unregister(cb);
     }, [cb, context,]);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         stateRef.current.handler = callback;
     }, [callback,]);
 }
@@ -41269,13 +41422,13 @@ function createShortcutDefinition(shortcut) {
     };
 }
 function useHotkey(shortcut, callback) {
-    const inTarget = react_11.default.useRef(true);
+    const inTarget = react_10.default.useRef(true);
     const shortcutDefinition = useConstant2(() => createShortcutDefinition(shortcut));
     useOnCurrentTargetChange((isCurrentTarget, isOverlayed) => {
         inTarget.current = isCurrentTarget && !isOverlayed;
         return () => inTarget.current = false;
     });
-    const eventHandler = react_11.default.useCallback((event) => {
+    const eventHandler = react_10.default.useCallback((event) => {
         if (!shortcutDefinition)
             return;
         if (!inTarget.current)
@@ -41285,7 +41438,7 @@ function useHotkey(shortcut, callback) {
         event.preventDefault();
         callback();
     }, [shortcutDefinition, callback,]);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         document.addEventListener('keydown', eventHandler);
         return () => document.removeEventListener('keydown', eventHandler);
     }, [eventHandler,]);
@@ -41313,8 +41466,8 @@ function useOnVariantChange(variant, callbackMap) {
     const isRenderingStaticContent = isStaticRenderer();
     if (isRenderingStaticContent)
         return;
-    const isActiveScreenRef = react_11.default.useRef(true);
-    const callbackMapRef = react_11.default.useRef(callbackMap);
+    const isActiveScreenRef = react_10.default.useRef(true);
+    const callbackMapRef = react_10.default.useRef(callbackMap);
     useOnCurrentTargetChange((isCurrent, isOverlayed) => {
         const isActiveScreen = isCurrent && !isOverlayed;
         if (!isActiveScreenRef.current && isActiveScreen) {
@@ -41324,7 +41477,7 @@ function useOnVariantChange(variant, callbackMap) {
         }
         isActiveScreenRef.current = isActiveScreen;
     }, []);
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (isActiveScreenRef.current) {
             const callback = callbackForVariant(callbackMapRef.current, variant);
             if (callback)
@@ -41351,16 +41504,16 @@ function setOverflow(blockDocumentScrolling, show) {
     });
 }
 function useOverlayState({ blockDocumentScrolling = true, } = {}) {
-    const [showOverlay, setShowOverlay,] = react_11.default.useState(false);
-    const callback = react_11.default.useCallback(async (show) => {
+    const [showOverlay, setShowOverlay,] = react_10.default.useState(false);
+    const callback = react_10.default.useCallback(async (show) => {
         await yieldToMain({
             priority: 'user-blocking',
             continueAfter: 'paint',
         });
-        (0, react_12.startTransition)(() => setShowOverlay(show));
+        (0, react_11.startTransition)(() => setShowOverlay(show));
         setOverflow(blockDocumentScrolling, show);
     }, [blockDocumentScrolling,]);
-    react_11.default.useEffect(() => () => {
+    react_10.default.useEffect(() => () => {
         void yieldToMain({
             priority: 'user-blocking',
             continueAfter: 'paint',
@@ -41380,11 +41533,11 @@ async function componentForRoute(route) {
     const { page: routeComponent, } = route;
     if (!routeComponent)
         return;
-    if (react_11.default.isValidElement(routeComponent))
+    if (react_10.default.isValidElement(routeComponent))
         return routeComponent;
     if (withPreload(routeComponent))
         await routeComponent.preload();
-    return react_11.default.createElement(routeComponent, {
+    return react_10.default.createElement(routeComponent, {
         key: route.path,
     });
 }
@@ -41396,7 +41549,7 @@ function usePrototypeNavigate({ preload, } = {}) {
     const navigation = useNavigation();
     const { getRoute, } = useRouter();
     const onCanvas = useIsOnFramerCanvas();
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (!navigation || onCanvas)
             return;
         preload == null ? void 0 : preload.forEach((componentOrRoute) => {
@@ -41423,51 +41576,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(() => { })
-            : react_11.default.isValidElement(target)
+            : react_10.default.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,
@@ -41587,7 +41740,7 @@ function useLoadMorePagination(totalSize, pageSize, hash2, paginateWithSuspended
             });
         };
         if (!paginateWithSuspendedLoadingState)
-            return renderNextPage(react_12.startTransition);
+            return renderNextPage(react_11.startTransition);
         return renderNextPage(startLoadingTransition);
     }, [totalPages, paginateWithSuspendedLoadingState,]);
     return {
@@ -41853,10 +42006,10 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         }
         const { isHovered: isHovered2, isPressed: isPressed2, isHoveredHasUpdated, isPressedHasUpdated, } = internalState.current;
         if (isHovered2 || isHoveredHasUpdated || isPressed2 || isPressedHasUpdated) {
-            (0, react_12.startTransition)(forceUpdate);
+            (0, react_11.startTransition)(forceUpdate);
             return;
         }
-        runUpdateIfVisible(() => (0, react_12.startTransition)(forceUpdate), pauseOffscreenFeatureOn && checkViewport);
+        runUpdateIfVisible(() => (0, react_11.startTransition)(forceUpdate), pauseOffscreenFeatureOn && checkViewport);
     }, [resolveNextVariant, forceUpdate, runUpdateIfVisible, pauseOffscreenFeatureOn, yieldOnTapFeatureOn,]);
     const setGestureState = (0, react_3.useCallback)(({ isHovered: isHovered2, isPressed: isPressed2, isError: isError2, }) => {
         const isPressedHasUpdated = isPressed2 !== internalState.current.isPressed;
@@ -41882,7 +42035,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
     const clearLoadingGesture = (0, react_3.useCallback)(() => {
         const { baseVariant: baseVariant2, } = internalState.current;
         internalState.current.loadedBaseVariant[baseVariant2] = true;
-        runUpdateIfVisible(() => (0, react_12.startTransition)(forceUpdate), true);
+        runUpdateIfVisible(() => (0, react_11.startTransition)(forceUpdate), true);
     }, [forceUpdate, runUpdateIfVisible,]);
     if (variant !== internalState.current.lastVariant) {
         const [nextBase, nextGesture,] = resolveNextVariant(variant);
@@ -41962,11 +42115,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();
@@ -41977,7 +42130,7 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
                     value: nodeId,
                     children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(CodeComponentBoundary, {
                         getErrorMessage: getErrorMessageForOverride.bind(null, scopeId, nodeId),
-                        fallback: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+                        fallback: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                             ...props,
                             ref,
                         }),
@@ -41995,7 +42148,7 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
                     collectErrorToAnalytics(appliedOverride.error);
                     hasErrorBeenLogged = true;
                 }
-                return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+                return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                     ...props,
                     ref,
                 });
@@ -42016,11 +42169,11 @@ function withCodeBoundaryForOverrides(Component17, { scopeId, nodeId, override,
             }
         }
     }
-    return react_11.default.forwardRef(CodeBoundaryForOverrides);
+    return react_10.default.forwardRef(CodeBoundaryForOverrides);
 }
-function tryToApplyOverride(Component17, override) {
+function tryToApplyOverride(Component18, override) {
     try {
-        const ComponentWithOverrides = override(Component17);
+        const ComponentWithOverrides = override(Component18);
         return {
             status: 'success',
             Component: ComponentWithOverrides,
@@ -42041,7 +42194,7 @@ function singleFrame() {
         frame.postRender(() => resolve());
     });
 }
-var withV1StrokeFX = (Component17) => (0, react_7.forwardRef)((props, forwardedRef) => {
+var withV1StrokeFX = (Component18) => (0, react_7.forwardRef)((props, forwardedRef) => {
     const { strokeEffectLength, strokeEffectGap, strokeEffectOffset, strokeEffectLoop, strokeEffectTotalLength, strokeEffectLoopType, pathLengthTransition, ...restProps } = props;
     const isCanvas = isStaticRenderer();
     const offset = useMotionValue(0);
@@ -42085,7 +42238,7 @@ var withV1StrokeFX = (Component17) => (0, react_7.forwardRef)((props, forwardedR
             strokeDashoffset: value,
         }
         : void 0;
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...restProps,
         ...effect,
         ref: forwardedRef,
@@ -42104,14 +42257,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__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
         });
     };
@@ -42154,17 +42307,17 @@ function createInputOutputRanges2(transformTargets, threshold, exitTarget) {
         outputRange: [-1, -1, ...outputRange,],
     };
 }
-var withVariantAppearEffect = (Component17) => react_11.default.forwardRef((props, forwardedRef) => {
+var withVariantAppearEffect = (Component18) => react_10.default.forwardRef((props, forwardedRef) => {
     if (RenderTarget.current() === RenderTarget.canvas) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...props,
             ref: forwardedRef,
         });
     }
     const [options, rest,] = extractPrefixedProps(props, keys2);
     const { visibleVariantId, obscuredVariantId, animateOnce, threshold, variantAppearEffectEnabled, targets, exitTarget, scrollDirection, } = options;
-    const [activeVariant, setVariant,] = react_11.default.useState(obscuredVariantId);
-    const animateState = react_11.default.useRef(false);
+    const [activeVariant, setVariant,] = react_10.default.useState(obscuredVariantId);
+    const animateState = react_10.default.useRef(false);
     const observerRef = useObserverRef(forwardedRef);
     useAppearEffect(observerRef, (appears) => {
         if (options.targets)
@@ -42176,7 +42329,7 @@ var withVariantAppearEffect = (Component17) => react_11.default.forwardRef((prop
         if (animateState.current === appears)
             return;
         animateState.current = appears;
-        react_11.default.startTransition(() => {
+        react_10.default.startTransition(() => {
             setVariant(appears ? visibleVariantId : obscuredVariantId);
         });
     }, {
@@ -42186,7 +42339,7 @@ var withVariantAppearEffect = (Component17) => react_11.default.forwardRef((prop
             y: threshold,
         },
     });
-    react_11.default.useEffect(() => {
+    react_10.default.useEffect(() => {
         if (scrollDirection)
             return;
         if (!targets)
@@ -42208,12 +42361,12 @@ var withVariantAppearEffect = (Component17) => react_11.default.forwardRef((prop
             if (variant === currentVariant)
                 return;
             currentVariant = variant;
-            react_11.default.startTransition(() => {
+            react_10.default.startTransition(() => {
                 setVariant(variant);
             });
         });
     }, [animateOnce, threshold, targets, props.variant, scrollDirection, exitTarget,]);
-    useScrollDirectionChange(scrollDirection, (variant) => react_11.default.startTransition(() => setVariant(variant)), {
+    useScrollDirectionChange(scrollDirection, (variant) => react_10.default.startTransition(() => setVariant(variant)), {
         enabled: variantAppearEffectEnabled,
         repeat: !animateOnce,
     });
@@ -42222,30 +42375,30 @@ var withVariantAppearEffect = (Component17) => react_11.default.forwardRef((prop
             return;
         const useObscuredVariant = !options.targets && !options.scrollDirection;
         const target = useObscuredVariant ? options.obscuredVariantId : void 0;
-        (0, react_12.startTransition)(() => setVariant(target));
+        (0, react_11.startTransition)(() => setVariant(target));
     });
     if (!('variantAppearEffectEnabled' in options) || variantAppearEffectEnabled === true) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...rest,
             variant: activeVariant ?? props.variant,
             ref: observerRef,
         });
     }
     else {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
             ...rest,
         });
     }
 });
 exports.withVariantAppearEffect = withVariantAppearEffect;
-var withVariantFX = (Component17) => react_11.default.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
+var withVariantFX = (Component18) => react_10.default.forwardRef(({ initial, animate: animate3, exit, ...props }, forwardedRef) => {
     const observerRef = useObserverRef(forwardedRef);
     const effect = usePresenceAnimation({
         initial,
         animate: animate3,
         exit,
     }, observerRef, true);
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...props,
         style: {
             ...(props == null ? void 0 : props.style),
@@ -42255,9 +42408,9 @@ var withVariantFX = (Component17) => react_11.default.forwardRef(({ initial, ani
     });
 });
 exports.withVariantFX = withVariantFX;
-var WindowContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var WindowContext = /* @__PURE__ */ react_10.default.createContext(void 0);
 exports.WindowContext = WindowContext;
-var useProvidedWindow = () => react_11.default.useContext(WindowContext);
+var useProvidedWindow = () => react_10.default.useContext(WindowContext);
 exports.useProvidedWindow = useProvidedWindow;
 function isDesignDefinition(d) {
     return d.type === 'master';
@@ -43001,6 +43154,27 @@ function createVariantName(weight, style2) {
     }
     return `${fontWeightNames[weight]}`;
 }
+var MapWithHash = class extends Map {
+    constructor() {
+        super(...arguments);
+        (0, chunk_A2PMVMFI_js_1.__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);
 }
@@ -43560,8 +43734,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) => {
@@ -45013,7 +45189,7 @@ function isValidVariationAxes(data2) {
 var FontStore = class {
     constructor() {
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'enabled', false);
-        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'bySelector', /* @__PURE__ */ new Map());
+        (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'bySelector', new MapWithHash());
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'loadedSelectors', /* @__PURE__ */ new Set());
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'getGoogleFontsListPromise');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'getFontshareFontsListPromise');
@@ -45027,20 +45203,29 @@ var FontStore = class {
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'builtIn');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'framer');
         (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'custom');
+        (0, chunk_A2PMVMFI_js_1.__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()) {
@@ -45412,7 +45597,7 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
                 const { left, right, top, bottom, center, centerX, centerY, aspectRatio: aspectRatio2, parentSize, width, height, rotation, opacity: _opacity, visible, _constraints, _initialStyle, name, positionSticky, positionStickyTop, positionStickyRight, positionStickyBottom, positionStickyLeft, 
                 // Remove the children and the componentIdentifier from the props passed into the component
                 componentIdentifier: originalComponentIdentifier, children: originalChildren, style: style2, duplicatedFrom, widthType, heightType, ...childProps } = frameProps;
-                children = react_11.default.Children.map(originalChildren, (child) => {
+                children = react_10.default.Children.map(originalChildren, (child) => {
                     if (!isReactChild(child) || !isReactElement(child)) {
                         return child;
                     }
@@ -45422,11 +45607,11 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
                             id: this.props.__layoutId,
                             children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(AutomaticLayoutIds, {
                                 enabled: false,
-                                children: react_11.default.cloneElement(child, childProps),
+                                children: react_10.default.cloneElement(child, childProps),
                             }),
                         });
                     }
-                    return react_11.default.cloneElement(child, childProps);
+                    return react_10.default.cloneElement(child, childProps);
                 });
                 frameProps = {
                     style: style2,
@@ -45532,7 +45717,7 @@ var PlainTextInput = /* @__PURE__ */ (0, react_7.forwardRef)(function FormPlainT
         });
         const newValue = e.target.value;
         onChange == null ? void 0 : onChange(e);
-        (0, react_12.startTransition)(() => setHasValue(!!newValue));
+        (0, react_11.startTransition)(() => setHasValue(!!newValue));
     }, [onChange,]);
     const eventHandlers = useCustomValidity(onValid, onInvalid, handleChange, onBlur, onFocus);
     if (type === 'hidden') {
@@ -45685,7 +45870,7 @@ var styles = /* @__PURE__ */ (() => [
 var FormPlainTextInput2 = /* @__PURE__ */ withCSS(PlainTextInput, styles, 'framer-lib-form-plain-text-input');
 exports.FormPlainTextInput = FormPlainTextInput2;
 var className = 'framer-form-boolean-input';
-var BooleanInput = /* @__PURE__ */ react_11.default.forwardRef(function FormPlainTextInput3(props, ref) {
+var BooleanInput = /* @__PURE__ */ react_10.default.forwardRef(function FormPlainTextInput3(props, ref) {
     const { inputName, type = 'checkbox', defaultChecked, onValid, ...rest } = props;
     const isCanvas = useIsOnFramerCanvas();
     const attributes = isCanvas
@@ -45810,7 +45995,7 @@ var styles2 = /* @__PURE__ */ (() => [
 ])();
 var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles2, 'framer-lib-form-boolean-input');
 exports.FormBooleanInput = FormBooleanInput;
-var Select = /* @__PURE__ */ react_11.default.forwardRef(function Select2(props, measureRef) {
+var Select = /* @__PURE__ */ react_10.default.forwardRef(function Select2(props, measureRef) {
     const { autoFocus, className: className2, inputName, required, hidden, defaultValue, selectOptions, style: style2, onValid, onChange, onBlur, onInvalid, onFocus, ...rest } = props;
     const eventHandlers = useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus);
     const key7 = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
@@ -45921,14 +46106,376 @@ var styles3 = /* @__PURE__ */ (() => [
 ])();
 var FormSelect = /* @__PURE__ */ withCSS(Select, styles3, 'framer-lib-form-select');
 exports.FormSelect = FormSelect;
-var Image2 = /* @__PURE__ */ react_11.default.forwardRef(function Image3(props, ref) {
+function useEscToClose(isOpen, close) {
+    (0, react_2.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 = (0, react_4.useRef)(callback);
+    latest.current = callback;
+    return (0, react_3.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 (0, react_7.forwardRef)(function LightboxEffect({ lightbox, lightboxClassName, onClick, ...props }, forwardedRef) {
+        const config = (0, react_3.useContext)(MotionConfigContext);
+        const fallbackRef = (0, react_4.useRef)(null);
+        const ref = forwardedRef ?? fallbackRef;
+        const decodePromiseRef = (0, react_4.useRef)();
+        const image = (0, react_4.useMemo)(() => createImageWithSrcSet(lightbox, props.background), [lightbox, props.background,]);
+        const [open, setOpen,] = (0, react_4.useState)(false);
+        const [openOverrides, setOpenOverrides,] = (0, react_4.useState)();
+        const onOpen = (0, react_3.useCallback)(() => {
+            if (!lightbox)
+                return;
+            if (open) {
+                (0, react_11.startTransition)(() => {
+                    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;
+                (0, react_11.startTransition)(() => {
+                    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 = (0, react_3.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 = (0, react_3.useCallback)((e) => {
+            e == null ? void 0 : e.stopPropagation();
+            (0, react_11.startTransition)(() => {
+                setOpen(false);
+            });
+        }, []);
+        useEscToClose(open, onClose);
+        (0, react_2.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 = (0, react_3.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__ */ (0, jsx_runtime_2.jsxs)(jsx_runtime_1.Fragment, {
+            children: [
+                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
+                    ...props,
+                    style: style2,
+                    onClick: handleClick,
+                    layoutId: props.layoutId ?? (lightbox ? fallbackLayoutId : void 0),
+                    ref,
+                    layoutDependency,
+                    transition,
+                }),
+                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(AnimatePresence, {
+                    children: open && lightbox && image && /* @__PURE__ */ (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+                        children: (0, react_dom_2.createPortal)(
+                        /* @__PURE__ */ (0, jsx_runtime_2.jsxs)(jsx_runtime_1.Fragment, {
+                            children: [
+                                /* @__PURE__ */ (0, jsx_runtime_1.jsx)(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: () => {
+                                        (0, react_11.startTransition)(() => {
+                                            setOpenOverrides(void 0);
+                                        });
+                                    },
+                                }),
+                                /* @__PURE__ */ (0, jsx_runtime_1.jsx)('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__ */ (0, jsx_runtime_1.jsx)('div', {
+                                        style: {
+                                            alignItems: 'center',
+                                            aspectRatio: aspectRatio2,
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            maxHeight: '100%',
+                                            position: 'relative',
+                                            width: '100%',
+                                            maxWidth: lightbox.maxWidth,
+                                        },
+                                        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(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__ */ (0, jsx_runtime_1.jsx)(BackgroundImageComponent, {
+                                                image,
+                                                alt: image.alt,
+                                                draggable: props.draggable,
+                                            }),
+                                        }),
+                                    }),
+                                }),
+                            ],
+                        }), getPortalContainer2()),
+                    }, 'backdrop'),
+                }),
+            ],
+        });
+    });
+}
+var Component16 = /* @__PURE__ */ react_10.default.forwardRef(function Image2(props, ref) {
     const { background, children, alt, draggable, fitImageDimension, style: styleFromProps, ...rest } = props;
     const style2 = {
         ...styleFromProps,
     };
     const intrinsicSize = (0, react_4.useMemo)(() => getIntrinsicSizeForBackgroundImage(background), [background,]);
     const [fallbackIntrinsicSize, setFallbackIntrinsicSize,] = (0, react_4.useState)();
-    react_11.default.useLayoutEffect(() => {
+    react_10.default.useLayoutEffect(() => {
         if (!(background == null ? void 0 : background.src))
             return;
         if (!fitImageDimension)
@@ -45969,7 +46516,8 @@ var Image2 = /* @__PURE__ */ react_11.default.forwardRef(function Image3(props,
         ],
     });
 });
-exports.Image = Image2;
+var Image3 = /* @__PURE__ */ withLightboxEffect(Component16);
+exports.Image = Image3;
 var frameFromElement = (element) => {
     const frame2 = Rect.fromRect(element.getBoundingClientRect());
     frame2.x = frame2.x + safeWindow.scrollX;
@@ -46316,7 +46864,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))
@@ -46325,6 +46873,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;
@@ -46332,7 +46882,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__ */ (0, jsx_runtime_1.jsx)('span', {
+            ref,
+            style: style2,
+            children: text,
+        });
+    }
     switch (tokenization) {
         case 'character':
         // When we want to animate "lines" that aren't split by newlines, but
@@ -46425,7 +46984,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;
@@ -46437,8 +46996,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':
@@ -46452,8 +47011,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:
@@ -46464,6 +47023,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,
@@ -46497,7 +47057,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,
                         });
@@ -46548,9 +47108,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;
@@ -46574,7 +47134,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:
@@ -46594,8 +47154,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();
@@ -46615,13 +47175,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': {
@@ -46658,8 +47225,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),
@@ -46764,13 +47336,12 @@ var RichTextContainer = /* @__PURE__ */ (0, react_7.forwardRef)(function RichTex
         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);
@@ -46816,11 +47387,11 @@ var RichTextContainer = /* @__PURE__ */ (0, react_7.forwardRef)(function RichTex
     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__ */ (0, jsx_runtime_1.jsx)(Component17, {
+            return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
                 ...rest,
                 ref: containerRef,
                 style: containerStyle,
@@ -46854,7 +47425,7 @@ var RichTextContainer = /* @__PURE__ */ (0, react_7.forwardRef)(function RichTex
             });
         }
     }
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component17, {
+    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
         ...rest,
         ref: containerRef,
         style: containerStyle,
@@ -47443,7 +48014,7 @@ function getSVGSize(svg) {
 var SVG = /* @__PURE__ */ (0, react_7.forwardRef)(function SVG2(props, forwardedRef) {
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props);
-    const layoutRef = react_11.default.useRef(null);
+    const layoutRef = react_10.default.useRef(null);
     const ref = forwardedRef ?? layoutRef;
     const providedWindow = useProvidedWindow();
     useMeasureLayout(props, layoutRef);
@@ -47501,7 +48072,7 @@ function sizeSVG(container, props) {
     svg.setAttribute('height', '100%');
 }
 function SVGStyleSheet() {
-    react_11.default.useInsertionEffect(() => {
+    react_10.default.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
     return null;
@@ -47511,7 +48082,7 @@ var SVGComponent = /* @__PURE__ */ (() => {
     return _a = class extends Layer {
         constructor() {
             super(...arguments);
-            (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'container', react_11.default.createRef());
+            (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'container', react_10.default.createRef());
             (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'svgElement', null);
             (0, chunk_A2PMVMFI_js_1.__publicField)(this, 'setSVGElement', (element) => {
                 this.svgElement = element;
@@ -47807,8 +48378,8 @@ var SVGComponent = /* @__PURE__ */ (() => {
 })();
 function useFontLoadStatus(fontSelectors = [], timeout = 5e3) {
     const missingFontSelectors = fontSelectors.filter((s) => !fontStore.isSelectorLoaded(s));
-    const [fontLoadStatus, setFontLoadStatus,] = react_11.default.useState(missingFontSelectors.length ? 'loading' : 'done');
-    react_11.default.useEffect(() => {
+    const [fontLoadStatus, setFontLoadStatus,] = react_10.default.useState(missingFontSelectors.length ? 'loading' : 'done');
+    react_10.default.useEffect(() => {
         if (!missingFontSelectors.length)
             return;
         setFontLoadStatus('loading');
@@ -47823,12 +48394,12 @@ function useFontLoadStatus(fontSelectors = [], timeout = 5e3) {
     return fontLoadStatus;
 }
 function TextStyleSheet() {
-    react_11.default.useInsertionEffect(() => {
+    react_10.default.useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
     return null;
 }
-var Text2 = /* @__PURE__ */ react_11.default.forwardRef(function Text3(props, forwardedRef) {
+var Text2 = /* @__PURE__ */ react_10.default.forwardRef(function Text3(props, forwardedRef) {
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props);
     const fallbackLayoutRef = (0, react_4.useRef)(null);
@@ -47856,7 +48427,7 @@ var Text2 = /* @__PURE__ */ react_11.default.forwardRef(function Text3(props, fo
         });
     }, [fonts,]);
     const implicitPathVariables = useImplicitPathVariables();
-    const interceptPageLinks = react_11.default.useCallback((event) => {
+    const interceptPageLinks = react_10.default.useCallback((event) => {
         const anchorElement = findAnchorElement(event.target, layoutRef.current);
         if (event.metaKey || !navigate || !anchorElement)
             return;
@@ -47872,7 +48443,7 @@ var Text2 = /* @__PURE__ */ react_11.default.forwardRef(function Text3(props, fo
         ref.addEventListener('click', interceptPageLinks);
         return () => ref.removeEventListener('click', interceptPageLinks);
     }, [interceptPageLinks,]);
-    const rawHTML = react_11.default.useMemo(() => {
+    const rawHTML = react_10.default.useMemo(() => {
         if (!props.rawHTML || onCanvas || !getRoute || !currentRoute)
             return props.rawHTML;
         return replaceFramerPageLinks(props.rawHTML, getRoute, currentRoute, implicitPathVariables);
@@ -48465,8 +49036,8 @@ function getRadialGradientTransform(heightFactor, widthFactor, centerAnchorX, ce
 }
 var SVGRoot = (props) => {
     const { id: id3, children, left, width, height, top, style: style2, _needsMeasure, } = props;
-    const inCodeComponent = react_11.default.useContext(ComponentContainerContext);
-    const ref = react_11.default.useRef(null);
+    const inCodeComponent = react_10.default.useContext(ComponentContainerContext);
+    const ref = react_10.default.useRef(null);
     useMeasureLayout({
         id: id3,
         // SVGRoot won't be rendered if the node is invisible.
@@ -49193,10 +49764,13 @@ function initialRouteComponent(component) {
 function useInitialRouteComponent(routes, homeNodeId) {
     var _a;
     const InitialRouteComponent = (_a = routes[homeNodeId]) == null ? void 0 : _a.page;
-    const [RouteComponent, setRouteComponent,] = (0, react_4.useState)(initialRouteComponent(InitialRouteComponent));
+    const [RouteComponent, setRouteComponent,] = (0, react_4.useState)(() => initialRouteComponent(InitialRouteComponent));
     (0, react_2.useEffect)(() => {
         if (withPreload(InitialRouteComponent)) {
-            void InitialRouteComponent.preload().then(setRouteComponent);
+            void (async () => {
+                await InitialRouteComponent.preload();
+                setRouteComponent(InitialRouteComponent);
+            })();
         }
     }, []);
     return RouteComponent;
@@ -49233,12 +49807,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:*',
@@ -49247,15 +49821,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',
     },