unframer 2.16.2 → 2.17.1

package/src/framer.js

@@ -517370,7 +517370,7 @@ function steps(numSteps, direction = 'end',) {
   };
 }
 
-// /:https://app.framerstatic.com/framer.5IYC6IGH.mjs
+// /:https://app.framerstatic.com/framer.43KQGWBL.mjs
 init_chunk_QLPHEVXG();
 import React4 from 'react';
 import { Suspense as Suspense3, } from 'react';
@@ -520160,7 +520160,10 @@ function getPathForRoute(route, {
   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,),);
@@ -520170,7 +520173,6 @@ function getPathForRoute(route, {
   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,);
@@ -520933,6 +520935,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 {
@@ -521043,9 +521048,10 @@ 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 || (Point = {}),);
@@ -527771,9 +527777,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];
@@ -536821,6 +536827,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 = useRef();
@@ -537594,8 +537604,8 @@ var withFX = (Component18) =>
         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__ */ jsx(Component18, {
@@ -538578,7 +538588,7 @@ var Polygon = {
       const d = (point2.x - x1) * (y2 - y1) - (point2.y - y1) * (x2 - x1);
       if (d === 0) continue;
       const localSign = d > 0;
-      sign ?? (sign = localSign);
+      sign ??= localSign;
       if (sign !== localSign) return false;
     }
     return true;
@@ -539156,6 +539166,81 @@ function Floating({
   );
 }
 var GeneratedComponentContext = /* @__PURE__ */ React4.createContext(void 0,);
+var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0,);
+var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
+var useLibraryFeatures = () => {
+  const context = React4.useContext(LibraryFeaturesContext,);
+  return context ?? {};
+};
+var GracefullyDegradingErrorBoundary = class extends 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__ */
+      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,);
 var LazyValue = class {
   constructor(resolver,) {
     this.resolver = resolver;
@@ -539209,12 +539294,6 @@ var LazyValue = class {
     }
   }
 };
-var LibraryFeaturesContext = /* @__PURE__ */ React4.createContext(void 0,);
-var LibraryFeaturesProvider = /* @__PURE__ */ (() => LibraryFeaturesContext.Provider)();
-var useLibraryFeatures = () => {
-  const context = React4.useContext(LibraryFeaturesContext,);
-  return context ?? {};
-};
 function findAnchorElement(target, withinElement,) {
   if (target instanceof HTMLAnchorElement) {
     return target;
@@ -539949,13 +540028,13 @@ function useReplaceNestedLinks(nodeId, href, propsAddedByLink,) {
   const refCallback = useCallback((node) => {
     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;
   if (!router.getRoute || !router.currentRouteId) return void 0;
@@ -539994,6 +540073,7 @@ function resolveLinkInternal(href, router, implicitPathVariables, resolveSlugs2,
     hashVariables: combinedHashVariables,
     relative: false,
     preserveQueryParams: router.preserveQueryParams,
+    onlyHash,
   },);
 }
 function resolvePageScope(pageLink, router,) {
@@ -541167,75 +541247,6 @@ function usePrefetch() {
   }
   return React2.useCallback((request) => fetchClient.prefetch(request,), [fetchClient,],);
 }
-var GracefullyDegradingErrorBoundary = class extends 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__ */
-      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,
@@ -541251,6 +541262,8 @@ function PageRoot({
   locales,
   preserveQueryParams,
   EditorBar,
+  defaultPageStyle,
+  disableHistory,
   LayoutTemplate,
 },) {
   const {
@@ -541261,32 +541274,31 @@ function PageRoot({
     MainLoop.start();
   }, [],);
   if (isWebsite) {
-    return /* @__PURE__ */ jsx(GracefullyDegradingErrorBoundary, {
-      children: /* @__PURE__ */ jsx(MotionConfig, {
-        reducedMotion: isReducedMotion ? 'user' : 'never',
-        children: /* @__PURE__ */ jsx(FetchClientProvider, {
-          children: /* @__PURE__ */ jsx(CustomCursorHost, {
-            children: /* @__PURE__ */ jsx(FormContext.Provider, {
-              value: framerSiteId,
-              children: /* @__PURE__ */ jsx(Router, {
-                initialRoute: routeId,
-                initialPathVariables: pathVariables,
-                initialLocaleId: localeId,
-                routes,
-                collectionUtils,
-                notFoundPage,
-                locales,
-                defaultPageStyle: {
-                  minHeight: '100vh',
-                  width: 'auto',
-                },
-                preserveQueryParams,
-                enableAsyncURLUpdates,
-                editorBar: /* @__PURE__ */ jsx(EditorBarLauncher, {
-                  EditorBar,
-                },),
-                LayoutTemplate,
+    return /* @__PURE__ */ jsx(MotionConfig, {
+      reducedMotion: isReducedMotion ? 'user' : 'never',
+      children: /* @__PURE__ */ jsx(FetchClientProvider, {
+        children: /* @__PURE__ */ jsx(CustomCursorHost, {
+          children: /* @__PURE__ */ jsx(FormContext.Provider, {
+            value: framerSiteId,
+            children: /* @__PURE__ */ jsx(Router, {
+              initialRoute: routeId,
+              initialPathVariables: pathVariables,
+              initialLocaleId: localeId,
+              routes,
+              collectionUtils,
+              notFoundPage,
+              locales,
+              defaultPageStyle: defaultPageStyle ?? {
+                minHeight: '100vh',
+                width: 'auto',
+              },
+              preserveQueryParams,
+              enableAsyncURLUpdates,
+              editorBar: /* @__PURE__ */ jsx(EditorBarLauncher, {
+                EditorBar,
               },),
+              disableHistory,
+              LayoutTemplate,
             },),
           },),
         },),
@@ -541559,7 +541571,8 @@ var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwar
   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) {
@@ -541581,7 +541594,7 @@ var ResolveLinks = /* @__PURE__ */ withChildrenCanSuspend(/* @__PURE__ */ forwar
       }
       return {
         path: handleSlugs(unresolvedPathSlugs,),
-        hash: handleSlugs(unresolvedHashslugs,),
+        hash: handleSlugs(unresolvedHashSlugs,),
       };
     },);
   },);
@@ -542482,7 +542495,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;
   }
 };
@@ -542939,7 +542952,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;
@@ -543086,7 +543099,7 @@ var ScalarCase = class extends ScalarNode {
     if (input) {
       referencedFields.merge(input.referencedFields,);
       referencedOuterFields.merge(input.referencedOuterFields,);
-      isSynchronous && (isSynchronous = input.isSynchronous);
+      isSynchronous &&= input.isSynchronous;
     }
     for (
       const {
@@ -543096,15 +543109,15 @@ var ScalarCase = class extends ScalarNode {
     ) {
       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;
@@ -544886,7 +544899,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;
@@ -546490,14 +546503,34 @@ function useDataRecord(collection, variables,) {
   }, [collection, variables,],);
 }
 function useDynamicRefs() {
-  const map = useConstant2(() => /* @__PURE__ */ new Map());
+  const map2 = useConstant2(() => /* @__PURE__ */ new Map());
   return React4.useCallback((key7) => {
-    const existing = map.get(key7,);
+    const existing = map2.get(key7,);
     if (existing) return existing;
     const ref = createRef();
-    map.set(key7, ref,);
+    map2.set(key7, ref,);
     return ref;
-  }, [map,],);
+  }, [],);
+}
+var map = /* @__PURE__ */ new Map();
+function useSiteRefs() {
+  const route = useCurrentRoute();
+  const path = useMemo(() => {
+    return getPathForRoute(route, {
+      currentRoutePath: route == null ? void 0 : route.path,
+      currentPathVariables: route == null ? void 0 : route.pathVariables,
+      preserveQueryParams: false,
+      relative: false,
+    },);
+  }, [route,],);
+  return React4.useCallback((key7) => {
+    const computedKey = `${path}-${key7}`;
+    const existing = map.get(computedKey,);
+    if (existing) return existing;
+    const ref = createRef();
+    map.set(computedKey, ref,);
+    return ref;
+  }, [path,],);
 }
 function isFramerGamepadKeydownData(value,) {
   return isObject(value,) && value.mapping !== void 0;
@@ -546714,14 +546747,14 @@ function useNavigate() {
     return false;
   };
 }
-function callbackForVariant(map, variant,) {
-  if (map[variant]) return map[variant];
-  if (variant in map) return void 0;
-  return map.default;
+function callbackForVariant(map2, variant,) {
+  if (map2[variant]) return map2[variant];
+  if (variant in map2) return void 0;
+  return map2.default;
 }
 function useOnVariantChange(variant, callbackMap,) {
-  const isOnFramerCanvas = useIsOnFramerCanvas();
-  if (isOnFramerCanvas) return;
+  const isRenderingStaticContent = useIsStaticRenderer();
+  if (isRenderingStaticContent) return;
   const isActiveScreenRef = React4.useRef(true,);
   const callbackMapRef = React4.useRef(callbackMap,);
   useOnCurrentTargetChange((isCurrent, isOverlayed,) => {
@@ -547112,6 +547145,38 @@ function safeBaseVariant(targetVariant, fallbackVariant, validBaseVariants,) {
   return fallbackVariant;
 }
 var CycleVariantState = /* @__PURE__ */ Symbol('cycle',);
+function useRunCallbackIfPageIsVisible() {
+  const listenerRef = useRef();
+  const callbackRef = useRef();
+  const clean = useCallback(() => {
+    if (!listenerRef.current) return;
+    document.removeEventListener('visibilitychange', listenerRef.current,);
+    listenerRef.current = void 0;
+    callbackRef.current = void 0;
+  }, [],);
+  useEffect(() => {
+    return () => {
+      clean();
+    };
+  }, [clean,],);
+  return 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,
@@ -547127,7 +547192,15 @@ function useVariantState({
   const {
     wrapUpdatesInTransitions,
   } = useLibraryFeatures();
-  const internalState = React4.useRef({
+  const update = useCallback((useTransition) => {
+    if (useTransition) {
+      startTransition2(() => void forceUpdate());
+      return;
+    }
+    forceUpdate();
+  }, [forceUpdate,],);
+  const runUpdateIfPageIsVisible = useRunCallbackIfPageIsVisible();
+  const internalState = useRef({
     isHovered: false,
     isPressed: false,
     isError: false,
@@ -547144,7 +547217,7 @@ function useVariantState({
     cycleOrder: externalCycleOrder,
     transitions: externalTransitions,
   },);
-  const resolveNextVariant = React4.useCallback((targetBaseVariant) => {
+  const resolveNextVariant = useCallback((targetBaseVariant) => {
     const {
       isHovered: isHovered2,
       isPressed: isPressed2,
@@ -547162,8 +547235,19 @@ function useVariantState({
     );
     const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture,) : void 0;
     return [nextBaseVariant, nextGestureVariant,];
-  }, [validBaseVariants,],);
-  const setGestureState = React4.useCallback(({
+  }, [],);
+  const updateIfNeeded = 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 = useCallback(({
     isHovered: isHovered2,
     isPressed: isPressed2,
     isError: isError2,
@@ -547176,20 +547260,9 @@ function useVariantState({
       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) {
-        React4.startTransition(() => {
-          forceUpdate();
-        },);
-      } else {
-        forceUpdate();
-      }
-    }
-  }, [resolveNextVariant, forceUpdate, wrapUpdatesInTransitions,],);
-  const setVariant = React4.useCallback((proposedVariant) => {
+    updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, baseVariant2, isError2,);
+  }, [updateIfNeeded,],);
+  const setVariant = useCallback((proposedVariant) => {
     const {
       defaultVariant: defaultVariant2,
       cycleOrder,
@@ -547199,29 +547272,15 @@ function useVariantState({
     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) {
-        React4.startTransition(() => {
-          forceUpdate();
-        },);
-      } else {
-        forceUpdate();
-      }
-    }
-  }, [resolveNextVariant, wrapUpdatesInTransitions, forceUpdate,],);
-  const clearLoadingGesture = React4.useCallback(() => {
+    updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, false, true,);
+  }, [updateIfNeeded,],);
+  const clearLoadingGesture = useCallback(() => {
     const {
       baseVariant: baseVariant2,
     } = internalState.current;
     internalState.current.loadedBaseVariant[baseVariant2] = true;
-    React4.startTransition(() => {
-      forceUpdate();
-    },);
-  }, [forceUpdate,],);
+    runUpdateIfPageIsVisible(() => update(true,));
+  }, [runUpdateIfPageIsVisible, update,],);
   if (variant !== internalState.current.lastVariant) {
     const [nextBase, nextGesture,] = resolveNextVariant(variant,);
     internalState.current.lastVariant = nextBase;
@@ -547241,7 +547300,7 @@ function useVariantState({
     loadedBaseVariant,
   } = internalState.current;
   const addVariantProps = useAddVariantProps(internalState.current.baseVariant, internalState.current.gestureVariant, variantProps2,);
-  return React4.useMemo(() => {
+  return useMemo(() => {
     var _a;
     const variants = [];
     if (baseVariant !== defaultVariant) variants.push(baseVariant,);
@@ -547307,6 +547366,12 @@ function useVariantState({
     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,
@@ -549416,16 +549481,6 @@ var FontStore = class {
   }
 };
 var fontStore = /* @__PURE__ */ new 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,
@@ -550923,10 +550978,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,
@@ -551188,22 +551241,26 @@ var FitText = /* @__PURE__ */ forwardRef(({
   children,
   ...props
 }, ref,) => {
-  return /* @__PURE__ */ jsx(motion.svg, {
-    ref,
-    ...props,
-    viewBox,
-    children: /* @__PURE__ */ jsx(motion.foreignObject, {
-      width: '100%',
-      height: '100%',
-      className: 'framer-fit-text',
-      transform: `scale(${viewBoxScale})`,
-      style: {
-        overflow: 'visible',
-        transformOrigin: 'center center',
-      },
-      children,
-    },),
-  },);
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: FIXME: FitText might be inaccessible to screen readers because it’s wrapped in an svg
+    /* @__PURE__ */
+    jsx(motion.svg, {
+      ref,
+      ...props,
+      viewBox,
+      children: /* @__PURE__ */ jsx(motion.foreignObject, {
+        width: '100%',
+        height: '100%',
+        className: 'framer-fit-text',
+        transform: `scale(${viewBoxScale})`,
+        style: {
+          overflow: 'visible',
+          transformOrigin: 'center center',
+        },
+        children,
+      },),
+    },)
+  );
 },);
 var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref,) => {
   const {
@@ -551325,7 +551382,7 @@ var RichTextContainer = /* @__PURE__ */ 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__ */ jsx(FitText, {
           viewBox,
@@ -551346,7 +551403,7 @@ var RichTextContainer = /* @__PURE__ */ 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,
       },);
@@ -551358,7 +551415,7 @@ var RichTextContainer = /* @__PURE__ */ 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,
   },);
@@ -551598,7 +551655,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;
@@ -551771,7 +551828,7 @@ var supportsNativeParseHTML = /* @__PURE__ */ (() =>
   !isFirefox() && typeof Document !== 'undefined' && typeof Document.parseHTMLUnsafe === 'function')();
 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();
@@ -552516,7 +552573,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';
@@ -554071,6 +554128,7 @@ export {
   getMeasurableCodeComponentChildren,
   getPropertyControls,
   getWhereExpressionFromPathVariables,
+  GracefullyDegradingErrorBoundary,
   gradientForShape,
   Image2 as Image,
   imagePatternPropsForFill,
@@ -554182,6 +554240,7 @@ export {
   roundedNumber,
   roundedNumberString,
   roundWithOffset,
+  safeCSSValue,
   Scroll,
   scroll,
   scrollInfo,
@@ -554286,6 +554345,7 @@ export {
   useRouteHandler,
   useRouter,
   useScroll,
+  useSiteRefs,
   useSpring,
   useTime,
   useTransform,