unframer 2.16.2 → 2.17.1

package/dist/framer.js

@@ -37,9 +37,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.defaultDeviceProps = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = exports.CustomCursorHost = 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.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.cancelSync = exports.cancelFrame = exports.callEach = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.BackgroundImage = exports.AnyInterpolation = exports.anticipate = exports.animations = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animateMini = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.addPointerInfo = exports.AcceleratedAnimation = exports.combinedCSSRules = void 0;
-exports.LazyValue = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isMotionValue = exports.isBrowser = exports.invariant = exports.InternalID = exports.Image = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.frameSteps = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = 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.Fetcher = exports.environment = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.domAnimation = exports.DOM = exports.distance = exports.dispatchKeyDownEvent = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = void 0;
-exports.SmartComponentScopedContainer = exports.Size = exports.sharedSVGManager = exports.Shadow = exports.Scroll = exports.RichText = exports.reverseEasing = exports.ResolveLinks = exports.RenderTarget = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.PresenceContext = exports.Polygon = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mirrorEasing = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = void 0;
-exports.LocaleInfoContext = exports.FormContext = exports.FetchClientProvider = exports.FramerLink = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.StyleSheetContext = exports.Stack = exports.SSRVariants = exports.SpringAnimator = void 0;
+exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isMotionValue = exports.isBrowser = exports.invariant = exports.InternalID = exports.Image = exports.GracefullyDegradingErrorBoundary = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.frameSteps = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = 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.Fetcher = exports.environment = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.domAnimation = exports.DOM = exports.distance = exports.dispatchKeyDownEvent = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = void 0;
+exports.Size = exports.sharedSVGManager = exports.Shadow = exports.Scroll = exports.RichText = exports.reverseEasing = exports.ResolveLinks = exports.RenderTarget = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.PresenceContext = exports.Polygon = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.ParentSizeState = exports.Page = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.nestedLinksCollector = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.Reorder = exports.MotionValue = exports.MotionGlobalConfig = exports.MotionContext = exports.MotionConfigContext = exports.motion = exports.mirrorEasing = exports.makeUseVisualState = exports.MainLoop = exports.m = exports.localPackageFallbackIdentifier = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = void 0;
+exports.LocaleInfoContext = exports.FormContext = exports.FetchClientProvider = exports.FramerLink = exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withParallaxTransform = exports.withMeasuredSize = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.ValueInterpolation = exports.useProvidedWindow = exports.useIsomorphicLayoutEffect = exports.useAnimation = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.StyleSheetContext = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.SmartComponentScopedContainer = void 0;
 exports._injectRuntime = _injectRuntime;
 exports.addActionControls = addActionControls;
 exports.addFonts = addFonts;
@@ -151,6 +151,7 @@ exports.resolvePageScope = resolvePageScope;
 exports.roundedNumber = roundedNumber;
 exports.roundedNumberString = roundedNumberString;
 exports.roundWithOffset = roundWithOffset;
+exports.safeCSSValue = safeCSSValue;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
 exports.setGlobalRenderEnvironment = setGlobalRenderEnvironment;
@@ -239,6 +240,7 @@ exports.useRouteElementId = useRouteElementId;
 exports.useRouteHandler = useRouteHandler;
 exports.useRouter = useRouter;
 exports.useScroll = useScroll;
+exports.useSiteRefs = useSiteRefs;
 exports.useSpring = useSpring;
 exports.useTime = useTime;
 exports.useTransform = useTransform;
@@ -516932,7 +516934,7 @@ function steps(numSteps, direction = 'end') {
         return clamp(0, 1, rounded / numSteps);
     };
 }
-// /:https://app.framerstatic.com/framer.5IYC6IGH.mjs
+// /:https://app.framerstatic.com/framer.43KQGWBL.mjs
 init_chunk_QLPHEVXG();
 const react_11 = __importDefault(require("react"));
 const react_12 = require("react");
@@ -519656,7 +519658,10 @@ function getHashForRoute(hash2, route, hashVariables) {
     const variables = Object.assign({}, route == null ? void 0 : route.elements, hashVariables);
     return resolvedHash.replace(pathVariablesRegExp, (m2, p1) => String(variables[p1] ?? m2));
 }
-function getPathForRoute(route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, hashVariables, relative: relative2 = true, preserveQueryParams, }) {
+function getPathForRoute(route, { currentRoutePath, currentPathVariables, hash: hash2, pathVariables, hashVariables, relative: relative2 = true, preserveQueryParams, onlyHash = false, }) {
+    const resolvedHash = getHashForRoute(hash2, route, hashVariables);
+    if (onlyHash)
+        return resolvedHash ?? '';
     let currentPath = currentRoutePath ?? '/';
     if (currentPathVariables) {
         currentPath = currentPath.replace(pathVariablesRegExp, (m2, p1) => String(currentPathVariables[p1] || m2));
@@ -519666,7 +519671,6 @@ function getPathForRoute(route, { currentRoutePath, currentPathVariables, hash:
     if (pathVariables) {
         path = path.replace(pathVariablesRegExp, (m2, p1) => String(pathVariables[p1] || m2));
     }
-    const resolvedHash = getHashForRoute(hash2, route, hashVariables);
     const isSamePageHashNavigation = currentPath === path && resolvedHash;
     if (relative2) {
         path = computeRelativePath(currentPath, path);
@@ -520421,6 +520425,9 @@ function Point(x, y) {
     };
 }
 ((Point2) => {
+    Point2.isQuadrilateralPoints = (points) => {
+        return (points == null ? void 0 : points.length) === 4;
+    };
     Point2.add = (...args) => {
         return args.reduce((previousValue, currentValue) => {
             return {
@@ -520531,9 +520538,11 @@ function Point(x, y) {
         const angles = /* @__PURE__ */ new Map();
         for (let i = 0; i < points.length; i++) {
             const point2 = points[i];
-            angles.set(point2, Math.atan2(point2.x - centerPoint.x, point2.y - centerPoint.y));
+            if (!point2)
+                continue;
+            angles.set(point2, Math.atan2(point2.y - centerPoint.y, point2.x - centerPoint.x));
         }
-        return points.sort((a, b) => angles.get(a) - angles.get(b));
+        return points.sort((a, b) => (angles.get(a) ?? 0) - (angles.get(b) ?? 0));
     }
     Point2.sortClockwise = sortClockwise;
 })(Point || (exports.Point = Point = {}));
@@ -527216,9 +527225,9 @@ var deviceCodeComponentPresetIds = [
     '1440p',
     '4k',
 ];
-var devicePresetsMap = /* @__PURE__ */ devicePresets.reduce((map, preset) => {
-    map[preset.id] = preset;
-    return map;
+var devicePresetsMap = /* @__PURE__ */ devicePresets.reduce((map2, preset) => {
+    map2[preset.id] = preset;
+    return map2;
 }, {});
 function getDevicePreset(presetId) {
     return devicePresetsMap[presetId] ?? devicePresetsMap[defaultPresetId];
@@ -536025,6 +536034,10 @@ function useFXValues(values, enabled) {
     }, [effect, enabled,]);
     return effect;
 }
+function useIsStaticRenderer() {
+    const currentTarget = RenderTarget.current();
+    return currentTarget === RenderTarget.canvas || currentTarget === RenderTarget.export;
+}
 var loopOptionsKeys = /* @__PURE__ */ new Set(['loopEffectEnabled', 'loopTransition', 'loop', 'loopRepeatType', 'loopRepeatDelay',]);
 var useDelay = () => {
     const timeoutRef = (0, react_5.useRef)();
@@ -536757,8 +536770,8 @@ var withFX = (Component18) => react_11.default.forwardRef((props, forwardedRef)
             ref: forwardedRef,
         });
     }
-    const currentTarget = RenderTarget.current();
-    if (currentTarget === RenderTarget.canvas || currentTarget === RenderTarget.export) {
+    const isRenderingStaticContent = useIsStaticRenderer();
+    if (isRenderingStaticContent) {
         const animate4 = isVariantOrVariantList(props.animate) ? props.animate : void 0;
         const initial2 = isVariantOrVariantList(props.initial) ? props.initial : void 0;
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component18, {
@@ -537668,7 +537681,7 @@ var Polygon = {
             if (d === 0)
                 continue;
             const localSign = d > 0;
-            sign ?? (sign = localSign);
+            sign ??= localSign;
             if (sign !== localSign)
                 return false;
         }
@@ -538227,6 +538240,76 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
 }
 var GeneratedComponentContext = /* @__PURE__ */ react_11.default.createContext(void 0);
 exports.GeneratedComponentContext = GeneratedComponentContext;
+var LibraryFeaturesContext = /* @__PURE__ */ react_11.default.createContext(void 0);
+var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
+exports.LibraryFeaturesProvider = LibraryFeaturesProvider;
+var useLibraryFeatures = () => {
+    const context = react_11.default.useContext(LibraryFeaturesContext);
+    return context ?? {};
+};
+var GracefullyDegradingErrorBoundary = class extends react_7.Component {
+    constructor() {
+        super(...arguments);
+        __publicField(this, 'state', {
+            error: void 0,
+        });
+        __publicField(this, 'message', 'Made UI non-interactive due to an error');
+        __publicField(this, 'messageReport', 'If you are the author of this website, please report this issue to the Framer team via https://www.framer.community/');
+    }
+    static getDerivedStateFromError(error) {
+        return {
+            error,
+        };
+    }
+    componentDidCatch(error) {
+        var _a, _b;
+        window.__framer_hadFatalError = true;
+        if ('cause' in error) {
+            error = error.cause;
+        }
+        console.error(`${this.message} (see above). ${this.messageReport}.`);
+        const sampleRate = Math.random();
+        if (!((_a = this.context) == null ? void 0 : _a.codeBoundaries) && sampleRate > 0.01)
+            return;
+        if (sampleRate > 0.25)
+            return;
+        const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
+        (_b = window.__framer_events) == null ? void 0 : _b.push(['published_site_load_error', {
+                message: String(error),
+                stack,
+            },]);
+    }
+    render() {
+        var _a, _b;
+        const error = this.state.error;
+        if (!error)
+            return this.props.children;
+        const unwrappedError = 'cause' in error ? error.cause : error;
+        const closingHTMLComment = /-->/gu;
+        const closingHTMLCommentReplacement = '--!>';
+        const dom = isBot(navigator.userAgent) ? ((_a = document.getElementById('main')) == null ? void 0 : _a.innerHTML) || '' : // @FIXME: We should have a UI for fatal error recovery.
+            // We don't have a UI for fatal error recovery currently, so we just render nothing for regular users. If we were to throw, React would unmount too.
+            // We do render instead of throwing, so that:
+            // - `componentDidCatch` runs (if we throw here, it does not)
+            // - we can skip logging `Recoverable error during hydration`, because we know it was fatal.
+            '';
+        return (
+        // This has the caveat that we will slightly modify the DOM, but it appears to be fine in this case.
+        // The alternative would be to queue a new task that runs after and then set the innerHTML (= avoids the dummy-div), but that means we'll have DOM -> no DOM -> DOM transitions. With the div, we have DOM -> DOM and remove possible race-conditions.
+        /* @__PURE__ */
+        (0, jsx_runtime_1.jsx)('div', {
+            style: {
+                display: 'contents',
+            },
+            suppressHydrationWarning: true,
+            dangerouslySetInnerHTML: {
+                __html: `<!-- DOM replaced by GracefullyDegradingErrorBoundary due to "${unwrappedError.message.replace(closingHTMLComment, closingHTMLCommentReplacement)}". ${this.messageReport}: --><!-- Stack: ${(_b = error.stack) == null ? void 0 : _b.replace(closingHTMLComment, '--!>')} -->` + dom,
+            },
+        }));
+    }
+};
+exports.GracefullyDegradingErrorBoundary = GracefullyDegradingErrorBoundary;
+__publicField(GracefullyDegradingErrorBoundary, 'contextType', LibraryFeaturesContext);
 var LazyValue = class {
     constructor(resolver) {
         this.resolver = resolver;
@@ -538282,13 +538365,6 @@ var LazyValue = class {
     }
 };
 exports.LazyValue = LazyValue;
-var LibraryFeaturesContext = /* @__PURE__ */ react_11.default.createContext(void 0);
-var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
-exports.LibraryFeaturesProvider = LibraryFeaturesProvider;
-var useLibraryFeatures = () => {
-    const context = react_11.default.useContext(LibraryFeaturesContext);
-    return context ?? {};
-};
 function findAnchorElement(target, withinElement) {
     if (target instanceof HTMLAnchorElement) {
         return target;
@@ -539018,13 +539094,13 @@ function useReplaceNestedLinks(nodeId, href, propsAddedByLink) {
         if (isOnFramerCanvas || !shouldReplaceLink || !isValidLink)
             return;
         node.dataset.hydrated = 'true';
-    }, [isOnFramerCanvas, isValidLink, shouldReplaceLink,]);
+    }, [isValidLink, shouldReplaceLink,]);
     return [getChildren, refCallback,];
 }
 function resolveLink(href, router, implicitPathVariables) {
     return resolveLinkInternal(href, router, implicitPathVariables);
 }
-function resolveLinkInternal(href, router, implicitPathVariables, resolveSlugs2) {
+function resolveLinkInternal(href, router, implicitPathVariables, onlyHash, resolveSlugs2) {
     const pageLink = isLinkToWebPage(href) ? href : linkFromFramerPageLink(href);
     if (!isLinkToWebPage(pageLink))
         return isString(href) ? propsForLink(href).href : void 0;
@@ -539046,6 +539122,7 @@ function resolveLinkInternal(href, router, implicitPathVariables, resolveSlugs2)
         hashVariables: combinedHashVariables,
         relative: false,
         preserveQueryParams: router.preserveQueryParams,
+        onlyHash,
     });
 }
 function resolvePageScope(pageLink, router) {
@@ -540185,69 +540262,7 @@ function usePrefetch() {
     }
     return React2.useCallback((request) => fetchClient.prefetch(request), [fetchClient,]);
 }
-var GracefullyDegradingErrorBoundary = class extends react_7.Component {
-    constructor() {
-        super(...arguments);
-        __publicField(this, 'state', {
-            error: void 0,
-        });
-        __publicField(this, 'message', 'Made UI non-interactive due to an error');
-        __publicField(this, 'messageReport', 'If you are the author of this website, please report this issue to the Framer team via https://www.framer.community/');
-    }
-    static getDerivedStateFromError(error) {
-        return {
-            error,
-        };
-    }
-    componentDidCatch(error) {
-        var _a, _b;
-        window.__framer_hadFatalError = true;
-        if ('cause' in error) {
-            error = error.cause;
-        }
-        console.error(`${this.message} (see above). ${this.messageReport}.`);
-        const sampleRate = Math.random();
-        if (!((_a = this.context) == null ? void 0 : _a.codeBoundaries) && sampleRate > 0.01)
-            return;
-        if (sampleRate > 0.25)
-            return;
-        const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
-        (_b = window.__framer_events) == null ? void 0 : _b.push(['published_site_load_error', {
-                message: String(error),
-                stack,
-            },]);
-    }
-    render() {
-        var _a, _b;
-        const error = this.state.error;
-        if (!error)
-            return this.props.children;
-        const unwrappedError = 'cause' in error ? error.cause : error;
-        const closingHTMLComment = /-->/gu;
-        const closingHTMLCommentReplacement = '--!>';
-        const dom = isBot(navigator.userAgent) ? ((_a = document.getElementById('main')) == null ? void 0 : _a.innerHTML) || '' : // @FIXME: We should have a UI for fatal error recovery.
-            // We don't have a UI for fatal error recovery currently, so we just render nothing for regular users. If we were to throw, React would unmount too.
-            // We do render instead of throwing, so that:
-            // - `componentDidCatch` runs (if we throw here, it does not)
-            // - we can skip logging `Recoverable error during hydration`, because we know it was fatal.
-            '';
-        return (
-        // This has the caveat that we will slightly modify the DOM, but it appears to be fine in this case.
-        // The alternative would be to queue a new task that runs after and then set the innerHTML (= avoids the dummy-div), but that means we'll have DOM -> no DOM -> DOM transitions. With the div, we have DOM -> DOM and remove possible race-conditions.
-        /* @__PURE__ */
-        (0, jsx_runtime_1.jsx)('div', {
-            style: {
-                display: 'contents',
-            },
-            suppressHydrationWarning: true,
-            dangerouslySetInnerHTML: {
-                __html: `<!-- DOM replaced by GracefullyDegradingErrorBoundary due to "${unwrappedError.message.replace(closingHTMLComment, closingHTMLCommentReplacement)}". ${this.messageReport}: --><!-- Stack: ${(_b = error.stack) == null ? void 0 : _b.replace(closingHTMLComment, '--!>')} -->` + dom,
-            },
-        }));
-    }
-};
-__publicField(GracefullyDegradingErrorBoundary, 'contextType', LibraryFeaturesContext);
-function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, EditorBar, LayoutTemplate, }) {
+function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariables, routes, collectionUtils, notFoundPage, isReducedMotion = false, includeDataObserver = false, localeId, locales, preserveQueryParams, EditorBar, defaultPageStyle, disableHistory, LayoutTemplate, }) {
     const { enableAsyncURLUpdates, } = useLibraryFeatures();
     react_11.default.useEffect(() => {
         if (isWebsite)
@@ -540255,32 +540270,31 @@ function PageRoot({ RootComponent, isWebsite, routeId, framerSiteId, pathVariabl
         MainLoop.start();
     }, []);
     if (isWebsite) {
-        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(GracefullyDegradingErrorBoundary, {
-            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MotionConfig, {
-                reducedMotion: isReducedMotion ? 'user' : 'never',
-                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FetchClientProvider, {
-                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(CustomCursorHost, {
-                        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FormContext.Provider, {
-                            value: framerSiteId,
-                            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Router, {
-                                initialRoute: routeId,
-                                initialPathVariables: pathVariables,
-                                initialLocaleId: localeId,
-                                routes,
-                                collectionUtils,
-                                notFoundPage,
-                                locales,
-                                defaultPageStyle: {
-                                    minHeight: '100vh',
-                                    width: 'auto',
-                                },
-                                preserveQueryParams,
-                                enableAsyncURLUpdates,
-                                editorBar: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBarLauncher, {
-                                    EditorBar,
-                                }),
-                                LayoutTemplate,
+        return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(MotionConfig, {
+            reducedMotion: isReducedMotion ? 'user' : 'never',
+            children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FetchClientProvider, {
+                children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(CustomCursorHost, {
+                    children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FormContext.Provider, {
+                        value: framerSiteId,
+                        children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Router, {
+                            initialRoute: routeId,
+                            initialPathVariables: pathVariables,
+                            initialLocaleId: localeId,
+                            routes,
+                            collectionUtils,
+                            notFoundPage,
+                            locales,
+                            defaultPageStyle: defaultPageStyle ?? {
+                                minHeight: '100vh',
+                                width: 'auto',
+                            },
+                            preserveQueryParams,
+                            enableAsyncURLUpdates,
+                            editorBar: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(EditorBarLauncher, {
+                                EditorBar,
                             }),
+                            disableHistory,
+                            LayoutTemplate,
                         }),
                     }),
                 }),
@@ -540508,7 +540522,9 @@ var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, re
     const cloneWithPropsAndRef = useCloneChildrenWithPropsAndRef(ref);
     const promises = [];
     const resolvedLinks = links.map((link) => {
-        return resolveLinkInternal(link.href, router, link.implicitPathVariables, (unresolvedPathSlugs, unresolvedHashslugs) => {
+        if (!link)
+            return void 0;
+        return resolveLinkInternal(link.href, router, link.implicitPathVariables, link.refKey, (unresolvedPathSlugs, unresolvedHashSlugs) => {
             function handleSlugs(slugs) {
                 const result = {};
                 for (const slugKey in slugs) {
@@ -540531,7 +540547,7 @@ var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ (0, re
             }
             return {
                 path: handleSlugs(unresolvedPathSlugs),
-                hash: handleSlugs(unresolvedHashslugs),
+                hash: handleSlugs(unresolvedHashSlugs),
             };
         });
     });
@@ -541469,7 +541485,7 @@ var RichText = class {
         __publicField(this, 'cached');
     }
     resolve() {
-        this.cached ?? (this.cached = this.data.resolveRichText(this.pointer));
+        this.cached ??= this.data.resolveRichText(this.pointer);
         return this.cached;
     }
 };
@@ -541929,7 +541945,7 @@ var RelationalProject = class extends RelationalNode {
     constructor(input, projections, passthrough) {
         let isSynchronous = input.isSynchronous;
         for (const projection of projections) {
-            isSynchronous && (isSynchronous = projection.input.isSynchronous);
+            isSynchronous &&= projection.input.isSynchronous;
         }
         super(isSynchronous);
         this.input = input;
@@ -542061,20 +542077,20 @@ var ScalarCase = class extends ScalarNode {
         if (input) {
             referencedFields.merge(input.referencedFields);
             referencedOuterFields.merge(input.referencedOuterFields);
-            isSynchronous && (isSynchronous = input.isSynchronous);
+            isSynchronous &&= input.isSynchronous;
         }
         for (const { when, then, } of conditions) {
             referencedFields.merge(when.referencedFields);
             referencedOuterFields.merge(when.referencedOuterFields);
-            isSynchronous && (isSynchronous = when.isSynchronous);
+            isSynchronous &&= when.isSynchronous;
             referencedFields.merge(then.referencedFields);
             referencedOuterFields.merge(then.referencedOuterFields);
-            isSynchronous && (isSynchronous = then.isSynchronous);
+            isSynchronous &&= then.isSynchronous;
         }
         if (otherwise) {
             referencedFields.merge(otherwise.referencedFields);
             referencedOuterFields.merge(otherwise.referencedOuterFields);
-            isSynchronous && (isSynchronous = otherwise.isSynchronous);
+            isSynchronous &&= otherwise.isSynchronous;
         }
         super(referencedFields, referencedOuterFields, isSynchronous);
         this.input = input;
@@ -543768,7 +543784,7 @@ var Memo = class {
         this.nodes.set(hash2, node);
         const outputFields = node.getOutputFields();
         const relational = new RelationalProps(outputFields);
-        group ?? (group = this.addGroup(relational));
+        group ??= this.addGroup(relational);
         group.addNode(node);
         assert(relational.isCompatible(group.relational), 'Group has inconsistent relational props');
         return node;
@@ -545347,15 +545363,36 @@ function useDataRecord(collection, variables) {
     }, [collection, variables,]);
 }
 function useDynamicRefs() {
-    const map = useConstant2(() => /* @__PURE__ */ new Map());
+    const map2 = useConstant2(() => /* @__PURE__ */ new Map());
     return react_11.default.useCallback((key7) => {
-        const existing = map.get(key7);
+        const existing = map2.get(key7);
         if (existing)
             return existing;
         const ref = (0, react_14.createRef)();
-        map.set(key7, ref);
+        map2.set(key7, ref);
         return ref;
-    }, [map,]);
+    }, []);
+}
+var map = /* @__PURE__ */ new Map();
+function useSiteRefs() {
+    const route = useCurrentRoute();
+    const path = (0, react_6.useMemo)(() => {
+        return getPathForRoute(route, {
+            currentRoutePath: route == null ? void 0 : route.path,
+            currentPathVariables: route == null ? void 0 : route.pathVariables,
+            preserveQueryParams: false,
+            relative: false,
+        });
+    }, [route,]);
+    return react_11.default.useCallback((key7) => {
+        const computedKey = `${path}-${key7}`;
+        const existing = map.get(computedKey);
+        if (existing)
+            return existing;
+        const ref = (0, react_14.createRef)();
+        map.set(computedKey, ref);
+        return ref;
+    }, [path,]);
 }
 function isFramerGamepadKeydownData(value) {
     return isObject(value) && value.mapping !== void 0;
@@ -545581,16 +545618,16 @@ function useNavigate() {
         return false;
     };
 }
-function callbackForVariant(map, variant) {
-    if (map[variant])
-        return map[variant];
-    if (variant in map)
+function callbackForVariant(map2, variant) {
+    if (map2[variant])
+        return map2[variant];
+    if (variant in map2)
         return void 0;
-    return map.default;
+    return map2.default;
 }
 function useOnVariantChange(variant, callbackMap) {
-    const isOnFramerCanvas = useIsOnFramerCanvas();
-    if (isOnFramerCanvas)
+    const isRenderingStaticContent = useIsStaticRenderer();
+    if (isRenderingStaticContent)
         return;
     const isActiveScreenRef = react_11.default.useRef(true);
     const callbackMapRef = react_11.default.useRef(callbackMap);
@@ -545992,12 +546029,55 @@ function safeBaseVariant(targetVariant, fallbackVariant, validBaseVariants) {
 }
 var CycleVariantState = /* @__PURE__ */ Symbol('cycle');
 exports.CycleVariantState = CycleVariantState;
+function useRunCallbackIfPageIsVisible() {
+    const listenerRef = (0, react_5.useRef)();
+    const callbackRef = (0, react_5.useRef)();
+    const clean = (0, react_2.useCallback)(() => {
+        if (!listenerRef.current)
+            return;
+        document.removeEventListener('visibilitychange', listenerRef.current);
+        listenerRef.current = void 0;
+        callbackRef.current = void 0;
+    }, []);
+    (0, react_2.useEffect)(() => {
+        return () => {
+            clean();
+        };
+    }, [clean,]);
+    return (0, react_2.useCallback)((callback) => {
+        if (!document.hidden) {
+            callback();
+            clean();
+            return;
+        }
+        callbackRef.current = callback;
+        if (listenerRef.current)
+            return;
+        const listenerFn = () => {
+            var _a;
+            if (document.hidden)
+                return;
+            (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef);
+            clean();
+        };
+        listenerRef.current = listenerFn;
+        document.addEventListener('visibilitychange', listenerFn);
+    }, [clean,]);
+}
 function useVariantState({ variant, defaultVariant: externalDefaultVariant, transitions: externalTransitions, enabledGestures: externalEnabledGestures, cycleOrder: externalCycleOrder = [], variantProps: variantProps2 = {}, variantClassNames = {}, }) {
     const forceUpdate = useForceUpdate2();
     const isCanvas = useIsOnFramerCanvas();
     const validBaseVariants = useConstant2(() => new Set(externalCycleOrder));
     const { wrapUpdatesInTransitions, } = useLibraryFeatures();
-    const internalState = react_11.default.useRef({
+    const update = (0, react_2.useCallback)((useTransition) => {
+        if (useTransition) {
+            (0, react_13.startTransition)(() => void forceUpdate());
+            return;
+        }
+        forceUpdate();
+    }, [forceUpdate,]);
+    const runUpdateIfPageIsVisible = useRunCallbackIfPageIsVisible();
+    const internalState = (0, react_5.useRef)({
         isHovered: false,
         isPressed: false,
         isError: false,
@@ -546014,14 +546094,24 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         cycleOrder: externalCycleOrder,
         transitions: externalTransitions,
     });
-    const resolveNextVariant = react_11.default.useCallback((targetBaseVariant) => {
+    const resolveNextVariant = (0, react_2.useCallback)((targetBaseVariant) => {
         const { isHovered: isHovered2, isPressed: isPressed2, isError: isError2, enabledGestures: enabledGestures2, defaultVariant: defaultVariant2, } = internalState.current;
         const nextBaseVariant = safeBaseVariant(targetBaseVariant, defaultVariant2, validBaseVariants);
         const gesture = getGesture(enabledGestures2 == null ? void 0 : enabledGestures2[nextBaseVariant], isHovered2, isPressed2, false, isError2);
         const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture) : void 0;
         return [nextBaseVariant, nextGestureVariant,];
-    }, [validBaseVariants,]);
-    const setGestureState = react_11.default.useCallback(({ isHovered: isHovered2, isPressed: isPressed2, isError: isError2, }) => {
+    }, []);
+    const updateIfNeeded = (0, react_2.useCallback)((baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, isError2 = false, clearError = false) => {
+        const [nextBase, nextGesture,] = resolveNextVariant(nextBaseVariant);
+        if (nextBase === baseVariant2 && nextGesture === gestureVariant2)
+            return;
+        if (clearError)
+            internalState.current.isError = false;
+        internalState.current.baseVariant = nextBase || defaultVariant2;
+        internalState.current.gestureVariant = nextGesture;
+        runUpdateIfPageIsVisible(() => update(wrapUpdatesInTransitions || isError2));
+    }, [resolveNextVariant, runUpdateIfPageIsVisible, wrapUpdatesInTransitions, update,]);
+    const setGestureState = (0, react_2.useCallback)(({ isHovered: isHovered2, isPressed: isPressed2, isError: isError2, }) => {
         if (isHovered2 !== void 0)
             internalState.current.isHovered = isHovered2;
         if (isPressed2 !== void 0)
@@ -546029,47 +546119,20 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (isError2 !== void 0)
             internalState.current.isError = isError2;
         const { baseVariant: baseVariant2, gestureVariant: gestureVariant2, defaultVariant: defaultVariant2, } = internalState.current;
-        const [nextBase, nextGesture,] = resolveNextVariant(baseVariant2);
-        if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
-            internalState.current.baseVariant = nextBase || defaultVariant2;
-            internalState.current.gestureVariant = nextGesture;
-            if (isError2 || wrapUpdatesInTransitions) {
-                react_11.default.startTransition(() => {
-                    forceUpdate();
-                });
-            }
-            else {
-                forceUpdate();
-            }
-        }
-    }, [resolveNextVariant, forceUpdate, wrapUpdatesInTransitions,]);
-    const setVariant = react_11.default.useCallback((proposedVariant) => {
+        updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, baseVariant2, isError2);
+    }, [updateIfNeeded,]);
+    const setVariant = (0, react_2.useCallback)((proposedVariant) => {
         const { defaultVariant: defaultVariant2, cycleOrder, baseVariant: baseVariant2, gestureVariant: gestureVariant2, } = internalState.current;
         const nextBaseVariant = proposedVariant === CycleVariantState
             ? nextVariant(cycleOrder || [], baseVariant2 || defaultVariant2)
             : proposedVariant;
-        const [nextBase, nextGesture,] = resolveNextVariant(nextBaseVariant);
-        if (nextBase !== baseVariant2 || nextGesture !== gestureVariant2) {
-            internalState.current.isError = false;
-            internalState.current.baseVariant = nextBase || defaultVariant2;
-            internalState.current.gestureVariant = nextGesture;
-            if (wrapUpdatesInTransitions) {
-                react_11.default.startTransition(() => {
-                    forceUpdate();
-                });
-            }
-            else {
-                forceUpdate();
-            }
-        }
-    }, [resolveNextVariant, wrapUpdatesInTransitions, forceUpdate,]);
-    const clearLoadingGesture = react_11.default.useCallback(() => {
+        updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, false, true);
+    }, [updateIfNeeded,]);
+    const clearLoadingGesture = (0, react_2.useCallback)(() => {
         const { baseVariant: baseVariant2, } = internalState.current;
         internalState.current.loadedBaseVariant[baseVariant2] = true;
-        react_11.default.startTransition(() => {
-            forceUpdate();
-        });
-    }, [forceUpdate,]);
+        runUpdateIfPageIsVisible(() => update(true));
+    }, [runUpdateIfPageIsVisible, update,]);
     if (variant !== internalState.current.lastVariant) {
         const [nextBase, nextGesture,] = resolveNextVariant(variant);
         internalState.current.lastVariant = nextBase;
@@ -546080,7 +546143,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
     }
     const { baseVariant, gestureVariant, defaultVariant, enabledGestures, isHovered, isPressed, isError, loadedBaseVariant, } = internalState.current;
     const addVariantProps = useAddVariantProps(internalState.current.baseVariant, internalState.current.gestureVariant, variantProps2);
-    return react_11.default.useMemo(() => {
+    return (0, react_6.useMemo)(() => {
         var _a;
         const variants = [];
         if (baseVariant !== defaultVariant)
@@ -546140,6 +546203,14 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         variantClassNames,
     ]);
 }
+var reUnsafeCharacters = /[}{<>&;]/u;
+function safeCSSValue(value) {
+    if (!isString(value))
+        return 'none';
+    if (reUnsafeCharacters.test(value))
+        return 'none';
+    return value;
+}
 function withCodeBoundaryForOverrides(Component18, { scopeId, nodeId, override, inComponentSlot, }) {
     if (!shouldEnableCodeBoundaries()) {
         return override(Component18);
@@ -548241,13 +548312,6 @@ var FontStore = class {
 };
 var fontStore = /* @__PURE__ */ new FontStore();
 exports.fontStore = fontStore;
-Promise.allSettled = Promise.allSettled || ((promises) => Promise.all(promises.map((p) => p.then((v) => ({
-    status: 'fulfilled',
-    value: v,
-})).catch((e) => ({
-    status: 'rejected',
-    reason: e,
-})))));
 function CustomProperties({ children, customProperties, }) {
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)('div', {
         style: customProperties,
@@ -549572,10 +549636,8 @@ function getInitialEffectStyle(canPlay, canAnimate2, effect) {
 }
 function useTextEffect(config, ref, preview) {
     const elements = useConstant2(() => /* @__PURE__ */ new Set());
-    const isOnCanvas = useIsOnFramerCanvas();
-    const isOnExport = RenderTarget.current() === RenderTarget.export;
-    const isOnCanvasOrExport = isOnCanvas || isOnExport;
-    const canPlay = preview || !isOnCanvasOrExport;
+    const isRenderingStaticContent = useIsStaticRenderer();
+    const canPlay = preview || !isRenderingStaticContent;
     const state2 = React2.useRef({
         hasMounted: false,
         hasAnimatedOnce: false,
@@ -549823,7 +549885,10 @@ function createLineGroups(elements) {
     return groups2;
 }
 var FitText = /* @__PURE__ */ (0, react_4.forwardRef)(({ viewBoxScale, viewBox, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.svg, {
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: FIXME: FitText might be inaccessible to screen readers because it’s wrapped in an svg
+    /* @__PURE__ */
+    (0, jsx_runtime_1.jsx)(motion.svg, {
         ref,
         ...props,
         viewBox,
@@ -549838,7 +549903,7 @@ var FitText = /* @__PURE__ */ (0, react_4.forwardRef)(({ viewBoxScale, viewBox,
             },
             children,
         }),
-    });
+    }));
 });
 var RichTextContainer = /* @__PURE__ */ (0, react_4.forwardRef)((props, ref) => {
     const { __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, anchorLinkOffsetY, as: _as, bottom, center, children, environment: environment2 = RenderTarget.current, fonts = [], height, isEditable = false, left, name, opacity, positionSticky, positionStickyBottom, positionStickyLeft, positionStickyRight, positionStickyTop, right, rotation = 0, style, _initialStyle, stylesPresetsClassNames, text: plainText, top, verticalAlignment = 'top', visible = true, width, willChangeTransform, withExternalLayout = false, viewBox, viewBoxScale = 1, effect, ...rest } = props;
@@ -549926,7 +549991,7 @@ var RichTextContainer = /* @__PURE__ */ (0, react_4.forwardRef)((props, ref) =>
                 style: containerStyle,
                 layoutId,
                 transformTemplate: template,
-                'data-framer-name': name,
+                'data-framer-name': rest['data-framer-name'] ?? name,
                 'data-framer-component-type': 'RichTextContainer',
                 children: /* @__PURE__ */ (0, jsx_runtime_1.jsx)(FitText, {
                     viewBox,
@@ -549948,7 +550013,7 @@ var RichTextContainer = /* @__PURE__ */ (0, react_4.forwardRef)((props, ref) =>
                 viewBox,
                 viewBoxScale,
                 transformTemplate: template,
-                'data-framer-name': name,
+                'data-framer-name': rest['data-framer-name'] ?? name,
                 'data-framer-component-type': 'RichTextContainer',
                 children: processedChildren,
             });
@@ -549960,7 +550025,7 @@ var RichTextContainer = /* @__PURE__ */ (0, react_4.forwardRef)((props, ref) =>
         style: containerStyle,
         layoutId,
         transformTemplate: template,
-        'data-framer-name': name,
+        'data-framer-name': rest['data-framer-name'] ?? name,
         'data-framer-component-type': 'RichTextContainer',
         children: processedChildren,
     });
@@ -550195,7 +550260,7 @@ function imagePatternPropsForFill(fill, frame2, id3, includeTransform) {
         const validScaleX = realWidth / frame2.width;
         const validScaleY = realHeight / frame2.height;
         if (fit === 'tile') {
-            fill.backgroundSize ?? (fill.backgroundSize = 1);
+            fill.backgroundSize ??= 1;
             width = Math.round(fill.backgroundSize * (imageWidth / 2));
             height = Math.round(fill.backgroundSize * (imageHeight / 2));
             const layerPositionX = frame2.x ?? 0;
@@ -550372,7 +550437,7 @@ var supportsNativeParseHTML = /* @__PURE__ */ (() =>
 function domParser(html, type) {
     if (supportsNativeParseHTML && !type)
         return Document.parseHTMLUnsafe(html);
-    parser ?? (parser = new DOMParser());
+    parser ??= new DOMParser();
     return parser.parseFromString(html, type ?? 'text/html');
 }
 var useDOM = /* @__PURE__ */ isBrowser2();
@@ -551062,7 +551127,7 @@ var TextComponent = /* @__PURE__ */ (() => {
                 }
                 const dataProps = {
                     'data-framer-component-type': 'Text',
-                    'data-framer-name': name,
+                    'data-framer-name': rest['data-framer-name'] ?? name,
                 };
                 if (autoSize) {
                     asRecord(dataProps)['data-framer-component-text-autosized'] = 'true';