@remotion/promo-pages 4.0.489 → 4.0.491

package/dist/homepage/Pricing.js

@@ -38,7 +38,7 @@ import { useMemo as useMemo52 } from "react";
 // ../design/dist/esm/index.mjs
 import * as React23 from "react";
 import * as React3 from "react";
-import { Fragment as Fragment2, jsx as jsx43 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx43 } from "react/jsx-runtime";
 import React52, { useCallback as useCallback27, useRef as useRef210, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -4386,13 +4386,12 @@ import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React39, { useMemo as useMemo37 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import {
-  Children,
+import React41, {
   forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
 import React40 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 import React42 from "react";
 import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
@@ -5282,26 +5281,20 @@ var continueRenderInternal = ({
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
-    if (h === handle) {
-      if (environment.isRendering && scope !== undefined) {
-        if (!scope.remotion_delayRenderTimeouts[handle]) {
-          return false;
-        }
-        const { label: label2, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
-        clearTimeout(timeout);
-        const message = [
-          label2 ? `"${label2}"` : "A handle",
-          DELAY_RENDER_CLEAR_TOKEN,
-          `${Date.now() - startTime}ms`
-        ].filter(truthy).join(" ");
-        Log.verbose({ logLevel, tag: "delayRender()" }, message);
-        delete scope.remotion_delayRenderTimeouts[handle];
-      }
-      return false;
-    }
-    return true;
-  });
+  const handleExists = scope.remotion_delayRenderHandles.includes(handle);
+  const timeoutEntry = scope.remotion_delayRenderTimeouts[handle];
+  if (handleExists && environment.isRendering && timeoutEntry) {
+    const { label: label2, startTime, timeout } = timeoutEntry;
+    clearTimeout(timeout);
+    const message = [
+      label2 ? `"${label2}"` : "A handle",
+      DELAY_RENDER_CLEAR_TOKEN,
+      `${Date.now() - startTime}ms`
+    ].filter(truthy).join(" ");
+    Log.verbose({ logLevel, tag: "delayRender()" }, message);
+    delete scope.remotion_delayRenderTimeouts[handle];
+  }
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => h !== handle);
   if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
@@ -5574,7 +5567,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.489";
+var VERSION = "4.0.491";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -5955,7 +5948,8 @@ var transformSchema = {
     max: 100,
     step: 0.01,
     default: 1,
-    description: "Scale"
+    description: "Scale",
+    defaultKeyframeOutput: "perceptual-scale"
   },
   "style.rotate": {
     type: "rotation-css",
@@ -6186,7 +6180,7 @@ var SequenceManagerRefContext = React11.createContext({
   current: []
 });
 var makeSequencePropsSubscriptionKey = (key) => {
-  return `${key.nodePath.join(".")}.${key.sequenceKeys.join(".")}.${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
+  return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
 var VisualModePropStatusesContext = React11.createContext({
   propStatuses: {}
@@ -6759,8 +6753,20 @@ var serializeStringInterpolationValue = ({
   }
   return values.slice(0, dimensions).map((value, index) => `${stringifyNumber(value)}${units[index]}`).join(" ");
 };
+var toSignedArea = (scale) => {
+  if (scale === 0) {
+    return 0;
+  }
+  return Math.sign(scale) * scale * scale;
+};
+var fromSignedArea = (area) => {
+  if (area === 0) {
+    return 0;
+  }
+  return Math.sign(area) * Math.sqrt(Math.abs(area));
+};
 function interpolateFunction(input, inputRange, outputRange, options) {
-  const { extrapolateLeft, extrapolateRight, easing } = options;
+  const { extrapolateLeft, extrapolateRight, easing, output } = options;
   let result = input;
   const [inputMin, inputMax] = inputRange;
   const [outputMin, outputMax] = outputRange;
@@ -6791,7 +6797,13 @@ function interpolateFunction(input, inputRange, outputRange, options) {
   }
   result = (result - inputMin) / (inputMax - inputMin);
   result = easing(result);
-  result = result * (outputMax - outputMin) + outputMin;
+  if (output === "perceptual-scale") {
+    const signedAreaMin = toSignedArea(outputMin);
+    const signedAreaMax = toSignedArea(outputMax);
+    result = fromSignedArea(result * (signedAreaMax - signedAreaMin) + signedAreaMin);
+  } else {
+    result = result * (outputMax - outputMin) + outputMin;
+  }
   return result;
 }
 function findRange(input, inputRange) {
@@ -6804,6 +6816,9 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var resolveOutputOption = (output) => {
+  return output ?? "linear";
+};
 var shouldExtendRightForEasing = (easing) => {
   return easing.remotionShouldExtendRight === true;
 };
@@ -6825,12 +6840,14 @@ var interpolateSegment = ({
   outputRange,
   easing,
   extrapolateLeft,
-  extrapolateRight
+  extrapolateRight,
+  output
 }) => {
   return interpolateFunction(input, inputRange, outputRange, {
     easing,
     extrapolateLeft,
-    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight,
+    output
   });
 };
 var interpolateNumber = ({
@@ -6839,6 +6856,7 @@ var interpolateNumber = ({
   outputRange,
   options
 }) => {
+  const output = resolveOutputOption(options?.output);
   if (inputRange.length === 1) {
     return outputRange[0];
   }
@@ -6863,7 +6881,8 @@ var interpolateNumber = ({
     outputRange: [outputRange[range], outputRange[range + 1]],
     easing,
     extrapolateLeft,
-    extrapolateRight
+    extrapolateRight,
+    output
   });
   for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
     const previousEasing = resolveEasingForSegment({
@@ -6883,7 +6902,8 @@ var interpolateNumber = ({
       outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
       easing: previousEasing,
       extrapolateLeft,
-      extrapolateRight: "extend"
+      extrapolateRight: "extend",
+      output
     });
     result += continuedSegmentValue - outputRange[segmentIndex + 1];
   }
@@ -6931,14 +6951,18 @@ var interpolateString = ({
       }
     }
   }
-  return serializeStringInterpolationValue({
-    kind,
-    values: [0, 0, 0].map((_, axis) => interpolateNumber({
+  const values = [0, 0, 0];
+  for (let axis = 0;axis < dimensions; axis++) {
+    values[axis] = interpolateNumber({
       input,
       inputRange,
       outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
       options
-    })),
+    });
+  }
+  return serializeStringInterpolationValue({
+    kind,
+    values,
     units,
     dimensions
   });
@@ -7022,6 +7046,12 @@ function assertValidInterpolatePosterizeOption(posterize) {
     throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
   }
 }
+function assertValidInterpolateOutputOption(output) {
+  if (output === undefined || output === "linear" || output === "perceptual-scale") {
+    return;
+  }
+  throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
+}
 function interpolate(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -7039,6 +7069,7 @@ function interpolate(input, inputRange, outputRange, options) {
   checkValidInputRange(inputRange);
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption(options?.posterize);
+  assertValidInterpolateOutputOption(options?.output);
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
@@ -7983,6 +8014,7 @@ var interpolateKeyframedStatus = ({
       easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
       extrapolateLeft: clamping.left,
       extrapolateRight: clamping.right,
+      output: status.output,
       posterize: status.posterize
     });
   } catch {
@@ -8223,7 +8255,7 @@ var getFlatSchemaWithAllKeys = (schema) => {
   const out = {};
   const addKey = (key, field) => {
     if (key in out) {
-      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+      return;
     }
     out[key] = field;
   };
@@ -8761,6 +8793,7 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.data.src,
           getStack: () => stackRef.current,
           startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
+          mediaFrameAtSequenceZero,
           volume: isMedia.data.volumes,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
@@ -8824,6 +8857,7 @@ var RegularSequenceRefForwardingFunction = ({
     isInsideSeries,
     registeredFrozenFrame,
     startMediaFrom,
+    mediaFrameAtSequenceZero,
     frozenMediaFrame
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -10774,7 +10808,9 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
         return;
       }
       if (data === undefined) {
-        current.src = EMPTY_AUDIO;
+        if (current.src !== EMPTY_AUDIO) {
+          current.src = EMPTY_AUDIO;
+        }
         return;
       }
       if (!data) {
@@ -10843,7 +10879,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       if (prevA.id === id) {
         const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
-          return prevA;
+          return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
         }
         changed = true;
         return {
@@ -10855,7 +10891,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
           audioMounted
         };
       }
-      return prevA;
+      return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
     });
     if (changed) {
       rerenderAudios();
@@ -10894,16 +10930,19 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
+  const sharedAudioTagElements = useMemo21(() => {
+    return refs.map(({ id, ref }) => {
+      return /* @__PURE__ */ jsx19("audio", {
+        ref,
+        preload: "metadata",
+        src: EMPTY_AUDIO
+      }, id);
+    });
+  }, [refs]);
   return /* @__PURE__ */ jsxs2(SharedAudioTagsContext.Provider, {
     value: audioTagsValue,
     children: [
-      refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx19("audio", {
-          ref,
-          preload: "metadata",
-          src: EMPTY_AUDIO
-        }, id);
-      }),
+      sharedAudioTagElements,
       children
     ]
   });
@@ -11364,6 +11403,7 @@ var useMediaInTimeline = ({
       showInTimeline: true,
       nonce: nonce.get(),
       startMediaFrom: 0 - startsAt,
+      mediaFrameAtSequenceZero: null,
       doesVolumeChange,
       loopDisplay,
       playbackRate,
@@ -12997,16 +13037,16 @@ var isMissingPaintRecordError = (error2) => {
   return error2 instanceof DOMException && error2.name === "InvalidStateError";
 };
 var missingPaintRecordMessage = "HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.";
-var resizeOffscreenCanvas = ({
-  offscreen,
+var resizePaintTarget = ({
+  target,
   width,
   height
 }) => {
-  if (offscreen.width !== width) {
-    offscreen.width = width;
+  if (target.width !== width) {
+    target.width = width;
   }
-  if (offscreen.height !== height) {
-    offscreen.height = height;
+  if (target.height !== height) {
+    target.height = height;
   }
 };
 var defaultOnPaint = ({
@@ -13022,7 +13062,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext23(false);
+var HtmlInCanvasAncestorContext = createContext23(null);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -13034,20 +13074,22 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext31(HtmlInCanvasAncestorContext);
+  const ancestor = useContext31(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const { isRendering } = useRemotionEnvironment();
+  const { isClientSideRendering, isRendering } = useRemotionEnvironment();
+  const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
+  const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
   const canvas2dRef = useRef22(null);
-  const offscreenRef = useRef22(null);
+  const paintTargetRef = useRef22(null);
   const divRef = useRef22(null);
-  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
+  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? "direct" : "offscreen"}`;
   const setLayoutCanvasRef = useCallback16((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
@@ -13070,17 +13112,19 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef22(false);
   const onInitCleanupRef = useRef22(null);
   const unmountedRef = useRef22(false);
+  const ancestorRef = useRef22(ancestor);
+  ancestorRef.current = ancestor;
   const onPaintCb = useCallback16(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
     }
-    const offscreen = offscreenRef.current;
-    if (!offscreen) {
-      throw new Error("HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)");
+    const paintTarget = paintTargetRef.current;
+    if (!paintTarget) {
+      throw new Error("HtmlInCanvas: paint target is not ready because the canvas is remounting");
     }
-    resizeOffscreenCanvas({
-      offscreen,
+    resizePaintTarget({
+      target: paintTarget,
       width: canvasWidth,
       height: canvasHeight
     });
@@ -13091,22 +13135,30 @@ var HtmlInCanvasContent = forwardRef9(({
       }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
-        let initImage = null;
-        try {
-          initImage = placeholderCanvas.captureElementImage(element);
-        } catch (error2) {
-          if (isMissingPaintRecordError(error2) && !isRendering) {} else if (isMissingPaintRecordError(error2)) {
-            throw new Error(missingPaintRecordMessage);
-          } else {
+        const currentOnInit = onInitRef.current;
+        if (!currentOnInit) {
+          initializedRef.current = true;
+        } else {
+          let initImage;
+          try {
+            initImage = placeholderCanvas.captureElementImage(element);
+          } catch (error2) {
+            if (isMissingPaintRecordError(error2) && canRetryMissingPaintRecord) {
+              continueRender2(handle);
+              return;
+            }
+            if (isMissingPaintRecordError(error2)) {
+              throw new Error(missingPaintRecordMessage);
+            }
             throw error2;
           }
-        }
-        if (initImage) {
           initializedRef.current = true;
-          const currentOnInit = onInitRef.current;
-          if (currentOnInit) {
+          try {
+            if (paintTarget instanceof HTMLCanvasElement) {
+              throw new Error("HtmlInCanvas: onInit requires an OffscreenCanvas paint target");
+            }
             const cleanup = await currentOnInit({
-              canvas: offscreen,
+              canvas: paintTarget,
               element,
               elementImage: initImage,
               pixelDensity: resolvedPixelDensity
@@ -13119,15 +13171,16 @@ var HtmlInCanvasContent = forwardRef9(({
             } else {
               onInitCleanupRef.current = cleanup;
             }
+          } finally {
+            initImage.close();
           }
         }
       }
-      const handler = onPaintRef.current ?? defaultOnPaint;
       let elImage;
       try {
         elImage = placeholderCanvas.captureElementImage(element);
       } catch (error2) {
-        if (isMissingPaintRecordError(error2) && !isRendering) {
+        if (isMissingPaintRecordError(error2) && canRetryMissingPaintRecord) {
           continueRender2(handle);
           return;
         }
@@ -13136,20 +13189,41 @@ var HtmlInCanvasContent = forwardRef9(({
         }
         throw error2;
       }
-      await handler({
-        canvas: offscreen,
-        element,
-        elementImage: elImage,
-        pixelDensity: resolvedPixelDensity
-      });
-      await runEffectChain({
-        state: chainState.get(canvasWidth, canvasHeight),
-        source: offscreen,
-        effects: effectsRef.current,
-        output: offscreen,
-        width: canvasWidth,
-        height: canvasHeight
-      });
+      try {
+        const currentOnPaint = onPaintRef.current;
+        if (currentOnPaint) {
+          if (paintTarget instanceof HTMLCanvasElement) {
+            throw new Error("HtmlInCanvas: onPaint requires an OffscreenCanvas paint target");
+          }
+          const paintResult = currentOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+          if (paintResult) {
+            await paintResult;
+          }
+        } else {
+          defaultOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+        }
+        await runEffectChain({
+          state: chainState.get(canvasWidth, canvasHeight),
+          source: paintTarget,
+          effects: effectsRef.current,
+          output: paintTarget,
+          width: canvasWidth,
+          height: canvasHeight
+        });
+      } finally {
+        elImage.close();
+      }
+      ancestorRef.current?.requestParentPaint();
       continueRender2(handle);
     } catch (error2) {
       cancelRender2(error2);
@@ -13161,7 +13235,7 @@ var HtmlInCanvasContent = forwardRef9(({
     continueRender2,
     cancelRender2,
     resolvedPixelDensity,
-    isRendering
+    canRetryMissingPaintRecord
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -13169,10 +13243,10 @@ var HtmlInCanvasContent = forwardRef9(({
       throw new Error("Canvas not found");
     }
     placeholder.layoutSubtree = true;
-    const offscreen = placeholder.transferControlToOffscreen();
-    offscreenRef.current = offscreen;
-    resizeOffscreenCanvas({
-      offscreen,
+    const paintTarget = usesDirectLayoutCanvas ? placeholder : placeholder.transferControlToOffscreen();
+    paintTargetRef.current = paintTarget;
+    resizePaintTarget({
+      target: paintTarget,
       width: canvasWidth,
       height: canvasHeight
     });
@@ -13181,13 +13255,19 @@ var HtmlInCanvasContent = forwardRef9(({
     placeholder.addEventListener("paint", onPaintCb);
     return () => {
       placeholder.removeEventListener("paint", onPaintCb);
-      offscreenRef.current = null;
+      paintTargetRef.current = null;
       initializedRef.current = false;
       unmountedRef.current = true;
       onInitCleanupRef.current?.();
       onInitCleanupRef.current = null;
     };
-  }, [onPaintCb, cancelRender2, canvasWidth, canvasHeight]);
+  }, [
+    onPaintCb,
+    cancelRender2,
+    canvasWidth,
+    canvasHeight,
+    usesDirectLayoutCanvas
+  ]);
   const onPaintChangedRef = useRef22(false);
   useLayoutEffect9(() => {
     if (!onPaintChangedRef.current) {
@@ -13226,11 +13306,15 @@ var HtmlInCanvasContent = forwardRef9(({
       ...style ?? {}
     };
   }, [height, style, width]);
-  if (isInsideAncestorHtmlInCanvas) {
-    throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
-  }
+  const ancestorValue = useMemo30(() => {
+    return {
+      requestParentPaint: () => {
+        canvas2dRef.current?.requestPaint?.();
+      }
+    };
+  }, []);
   return /* @__PURE__ */ jsx25(HtmlInCanvasAncestorContext.Provider, {
-    value: true,
+    value: ancestorValue,
     children: /* @__PURE__ */ jsx25("canvas", {
       ref: setLayoutCanvasRef,
       width: canvasWidth,
@@ -14102,6 +14186,22 @@ var Img = withInteractivitySchema({
   supportsEffects: true
 });
 addSequenceStackTraces(Img);
+var sourcePathToIdentityPrefix = (packageName) => {
+  if (packageName === "remotion") {
+    return "dev.remotion.remotion";
+  }
+  if (packageName.startsWith("@remotion/")) {
+    const normalizedPackageName = packageName.slice("@remotion/".length).replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+    return `dev.remotion.${normalizedPackageName}`;
+  }
+  throw new Error(`Unsupported Remotion package name: ${packageName}`);
+};
+var makeRemotionComponentIdentity = ({
+  packageName,
+  componentName
+}) => {
+  return `${sourcePathToIdentityPrefix(packageName)}.${componentName}`;
+};
 var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema,
@@ -14115,6 +14215,11 @@ var setRef = (ref, value) => {
     ref.current = value;
   }
 };
+var withSchema = (options) => {
+  const Wrapped = withInteractivitySchema(options);
+  addSequenceStackTraces(Wrapped);
+  return Wrapped;
+};
 var makeInteractiveElement = (tag, displayName) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
@@ -14154,15 +14259,17 @@ var makeInteractiveElement = (tag, displayName) => {
     });
   });
   Inner.displayName = displayName;
-  const Wrapped = withInteractivitySchema({
+  const Wrapped = withSchema({
     Component: Inner,
     componentName: displayName,
-    componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
+    componentIdentity: makeRemotionComponentIdentity({
+      packageName: "remotion",
+      componentName: displayName.slice(1, -1)
+    }),
     schema: interactiveElementSchema,
     supportsEffects: false
   });
   Wrapped.displayName = displayName;
-  addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
 var Interactive = {
@@ -14171,7 +14278,8 @@ var Interactive = {
   textSchema,
   premountSchema,
   sequenceSchema,
-  withSchema: withInteractivitySchema,
+  withSchema,
+  _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
   A: makeInteractiveElement("a", "<Interactive.A>"),
   Article: makeInteractiveElement("article", "<Interactive.Article>"),
   Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
@@ -15576,66 +15684,130 @@ var flattenChildren = (children) => {
     return flatChildren;
   }, []);
 };
-var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+var seriesSequenceSchema = {
+  durationInFrames: Interactive.baseSchema.durationInFrames,
+  name: Interactive.sequenceSchema.name,
+  hidden: Interactive.sequenceSchema.hidden,
+  showInTimeline: Interactive.sequenceSchema.showInTimeline,
+  freeze: Interactive.baseSchema.freeze,
+  layout: Interactive.sequenceSchema.layout
+};
+var SeriesSequenceInner = forwardRef14(({
+  offset = 0,
+  className = "",
+  stack = null,
+  _remotionInternalRender = null,
+  ...props2
+}, ref) => {
   useRequireToBeInsideSeries();
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({ ...props2, offset, className: className || undefined, stack }, ref);
+  }
   return /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
-    children
+    children: props2.children
   });
-};
-var SeriesSequence = forwardRef14(SeriesSequenceRefForwardingFunction);
+});
+var SeriesSequence = Interactive.withSchema({
+  Component: SeriesSequenceInner,
+  componentName: "<Series.Sequence>",
+  componentIdentity: "dev.remotion.remotion.Series.Sequence",
+  schema: seriesSequenceSchema,
+  supportsEffects: false
+});
 var SequenceWithoutSchemaWithRef = SequenceWithoutSchema;
+var validateSeriesSequenceProps = ({
+  durationInFrames,
+  offset: offsetProp,
+  index,
+  childrenLength
+}) => {
+  const debugInfo = `index = ${index}, duration = ${durationInFrames}`;
+  if (index !== childrenLength - 1 || durationInFrames !== Infinity) {
+    validateDurationInFrames(durationInFrames, {
+      component: `of a <Series.Sequence /> component`,
+      allowFloats: true
+    });
+  }
+  const offset = offsetProp ?? 0;
+  if (Number.isNaN(offset)) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+  }
+  if (!Number.isFinite(offset)) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+  }
+  if (offset % 1 !== 0) {
+    throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+  }
+  return offset;
+};
 var SeriesInner = (props2) => {
   const childrenValue = useMemo38(() => {
-    let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
-    return Children.map(flattenedChildren, (child, i) => {
+    const renderChildren = (i, startFrame) => {
+      if (i === flattenedChildren.length) {
+        return null;
+      }
+      const child = flattenedChildren[i];
       const castedChild = child;
       if (typeof castedChild === "string") {
         if (castedChild.trim() === "") {
-          return null;
+          return renderChildren(i + 1, startFrame);
         }
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but you passed a string "${castedChild}"`);
       }
       if (castedChild.type !== SeriesSequence) {
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
       }
-      const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
-      const durationInFramesProp = castedChild.props.durationInFrames;
-      const {
-        durationInFrames,
-        children: _children,
-        from,
-        name,
-        ...passedProps
-      } = castedChild.props;
-      if (i !== flattenedChildren.length - 1 || durationInFramesProp !== Infinity) {
-        validateDurationInFrames(durationInFramesProp, {
-          component: `of a <Series.Sequence /> component`,
-          allowFloats: true
-        });
-      }
-      const offset = castedChild.props.offset ?? 0;
-      if (Number.isNaN(offset)) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-      }
-      if (!Number.isFinite(offset)) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      if (offset % 1 !== 0) {
-        throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      const currentStartFrame = startFrame + offset;
-      startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
-        ref: castedChild.ref,
-        name: name || "<Series.Sequence>",
-        _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
-        from: currentStartFrame,
-        durationInFrames: durationInFramesProp,
-        ...passedProps,
-        children: child
+      const castedElement = castedChild;
+      validateSeriesSequenceProps({
+        durationInFrames: castedElement.props.durationInFrames,
+        offset: castedElement.props.offset,
+        index: i,
+        childrenLength: flattenedChildren.length
       });
-    });
+      return React41.cloneElement(castedElement, {
+        _remotionInternalRender: (resolvedProps, ref) => {
+          const durationInFramesProp = resolvedProps.durationInFrames;
+          const {
+            durationInFrames: _durationInFrames,
+            children: sequenceChildren,
+            offset: offsetProp,
+            controls,
+            stack,
+            from: _from,
+            name,
+            ...passedProps
+          } = resolvedProps;
+          const offset = validateSeriesSequenceProps({
+            durationInFrames: durationInFramesProp,
+            offset: offsetProp,
+            index: i,
+            childrenLength: flattenedChildren.length
+          });
+          const currentStartFrame = startFrame + offset;
+          const nextStartFrame = startFrame + durationInFramesProp + offset;
+          return /* @__PURE__ */ jsxs3(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx37(SequenceWithoutSchemaWithRef, {
+                ref,
+                name: name || "<Series.Sequence>",
+                _remotionInternalDocumentationLink: name ? undefined : "https://www.remotion.dev/docs/series",
+                _remotionInternalStack: stack ?? undefined,
+                controls: controls ?? undefined,
+                from: currentStartFrame,
+                durationInFrames: durationInFramesProp,
+                ...passedProps,
+                children: /* @__PURE__ */ jsx37(IsNotInsideSeriesProvider, {
+                  children: sequenceChildren
+                })
+              }),
+              renderChildren(i + 1, nextStartFrame)
+            ]
+          });
+        }
+      });
+    };
+    return renderChildren(0, 0);
   }, [props2.children]);
   return /* @__PURE__ */ jsx37(IsInsideSeriesContainer, {
     children: /* @__PURE__ */ jsx37(Sequence, {
@@ -16236,7 +16408,7 @@ addSequenceStackTraces(Folder);
 // ../shapes/dist/esm/index.mjs
 import React, { useCallback as useCallback26, useMemo as useMemo40, useRef as useRef29 } from "react";
 import { version } from "react-dom";
-import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs4 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -16438,7 +16610,7 @@ var RenderSvg = ({
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
   const videoConfig = Internals.useUnsafeVideoConfig();
   const reactSupportsTransformOrigin = doesReactSupportTransformOriginProperty(version);
-  const svg = /* @__PURE__ */ jsxs3("svg", {
+  const svg = /* @__PURE__ */ jsxs4("svg", {
     ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined,
     width,
     height,
@@ -16464,7 +16636,7 @@ var RenderSvg = ({
           }
           const prevX = prevInstruction.x;
           const prevY = prevInstruction.y;
-          return /* @__PURE__ */ jsxs3(React.Fragment, {
+          return /* @__PURE__ */ jsxs4(React.Fragment, {
             children: [
               /* @__PURE__ */ jsx40("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
@@ -16654,7 +16826,6 @@ var Arrow = Interactive.withSchema({
   schema: arrowSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Arrow);
 var shortenVector = (vector, radius) => {
   const [x, y] = vector;
   const currentLength = Math.sqrt(x * x + y * y);
@@ -17079,7 +17250,6 @@ var Callout = Interactive.withSchema({
   schema: calloutSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Callout);
 var makeCircle = ({ radius }) => {
   const instructions = [
     {
@@ -17142,7 +17312,6 @@ var Circle = Interactive.withSchema({
   schema: circleSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Circle);
 var makeEllipse = ({ rx, ry }) => {
   const instructions = [
     {
@@ -17200,7 +17369,6 @@ var Ellipse = Interactive.withSchema({
   schema: ellipseSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Ellipse);
 var makeHeart = ({
   height,
   aspectRatio = 1.1,
@@ -17339,7 +17507,6 @@ var Heart = Interactive.withSchema({
   schema: heartSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Heart);
 var getCoord = ({
   counterClockwise,
   actualProgress,
@@ -17494,7 +17661,6 @@ var Pie = Interactive.withSchema({
   schema: pieSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Pie);
 function polygon({
   points,
   radius,
@@ -17594,7 +17760,6 @@ var Polygon = Interactive.withSchema({
   schema: polygonSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Polygon);
 var makeRect = ({
   width,
   height,
@@ -17661,7 +17826,6 @@ var Rect = Interactive.withSchema({
   schema: rectSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Rect);
 var KAPPA = 0.5522847498307936;
 var CAP_HANDLE = 4 / 3;
 var curve = ({
@@ -17873,7 +18037,6 @@ var Spark = Interactive.withSchema({
   schema: sparkSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Spark);
 var star = ({
   centerX,
   centerY,
@@ -17984,7 +18147,6 @@ var Star = Interactive.withSchema({
   schema: starSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Star);
 var makeTriangle = ({
   length: length2,
   direction = "right",
@@ -18091,7 +18253,6 @@ var Triangle = Interactive.withSchema({
   schema: triangleSchema,
   supportsEffects: true
 });
-Internals.addSequenceStackTraces(Triangle);
 
 // ../svg-3d-engine/dist/esm/index.mjs
 function truthy2(value) {
@@ -19157,7 +19318,7 @@ var extrudeAndTransformElement = (options) => {
 
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
-import { jsx as jsx312, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
 import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef31 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -19216,11 +19377,11 @@ import * as React302 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
 import * as React322 from "react";
-import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs42 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
 import * as React372 from "react";
-import { jsx as jsx252, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
 import * as React38 from "react";
@@ -19228,12 +19389,12 @@ import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
 import React402 from "react";
 import * as React392 from "react";
-import { Fragment as Fragment22, jsx as jsx282 } from "react/jsx-runtime";
+import { Fragment as Fragment222, jsx as jsx282 } from "react/jsx-runtime";
 import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
 import * as React422 from "react";
-import * as React41 from "react";
+import * as React412 from "react";
 import * as React43 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
@@ -19343,7 +19504,7 @@ function createSlotClone(ownerName) {
 var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
 function createSlottable(ownerName) {
   const Slottable2 = ({ children }) => {
-    return /* @__PURE__ */ jsx43(Fragment2, { children });
+    return /* @__PURE__ */ jsx43(Fragment22, { children });
   };
   Slottable2.displayName = `${ownerName}.Slottable`;
   Slottable2.__radixId = SLOTTABLE_IDENTIFIER;
@@ -19640,7 +19801,7 @@ var Outer = ({
     description: "rect",
     transformations: centerOriented
   });
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     className: "relative",
     style: { width, height },
     children: [
@@ -23688,7 +23849,7 @@ var Select = (props) => {
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React36.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
+  return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs42(SelectProvider, {
     required,
     scope: __scopeSelect,
     trigger,
@@ -23720,7 +23881,7 @@ var Select = (props) => {
         }, []),
         children
       }) }),
-      isFormControl ? /* @__PURE__ */ jsxs4(BubbleSelect, {
+      isFormControl ? /* @__PURE__ */ jsxs42(BubbleSelect, {
         "aria-hidden": true,
         required,
         tabIndex: -1,
@@ -24228,7 +24389,7 @@ var SelectViewport = React36.forwardRef((props, forwardedRef) => {
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs2(forwardedRef, contentContext.onViewportChange);
   const prevScrollTopRef = React36.useRef(0);
-  return /* @__PURE__ */ jsxs4(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx242("style", {
       dangerouslySetInnerHTML: {
         __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`
@@ -24385,7 +24546,7 @@ var SelectItemText = React36.forwardRef((props, forwardedRef) => {
     onNativeOptionAdd(nativeOption);
     return () => onNativeOptionRemove(nativeOption);
   }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
-  return /* @__PURE__ */ jsxs4(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx242(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
     itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
   ] });
@@ -24644,7 +24805,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Trigger, {
+var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -24678,7 +24839,7 @@ var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref)
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
 var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
-  children: /* @__PURE__ */ jsxs52(Content2, {
+  children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
     position,
@@ -24700,7 +24861,7 @@ var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__P
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
+var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -25242,7 +25403,7 @@ function toSafeIndex(array, index2) {
 function toSafeInteger(number) {
   return number !== number || number === 0 ? 0 : Math.trunc(number);
 }
-var useLayoutEffect222 = globalThis?.document ? React41.useLayoutEffect : () => {};
+var useLayoutEffect222 = globalThis?.document ? React412.useLayoutEffect : () => {};
 var useReactId2 = React422[" useId ".trim().toString()] || (() => {
   return;
 });
@@ -27178,7 +27339,7 @@ function cn2(...inputs) {
 }
 
 // src/components/homepage/PricingBulletPoint.tsx
-import { jsx as jsx45, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs7 } from "react/jsx-runtime";
 var container3 = {
   display: "flex",
   flexDirection: "row",
@@ -27192,7 +27353,7 @@ var greyCircle = {
   backgroundColor: "var(--footer-border)"
 };
 var PricingBulletPoint = ({ text, checked, children }) => {
-  const checkmarkSVG = /* @__PURE__ */ jsxs6("svg", {
+  const checkmarkSVG = /* @__PURE__ */ jsxs7("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
@@ -27214,13 +27375,13 @@ var PricingBulletPoint = ({ text, checked, children }) => {
       })
     ]
   });
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     style: container3,
     children: [
       checked ? checkmarkSVG : /* @__PURE__ */ jsx45("div", {
         style: greyCircle
       }),
-      /* @__PURE__ */ jsxs6("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "fontbrand text-lg\t",
         children: [
           text,
@@ -27232,7 +27393,7 @@ var PricingBulletPoint = ({ text, checked, children }) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import { jsx as jsx46, jsxs as jsxs7, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs8, Fragment as Fragment9 } from "react/jsx-runtime";
 var Container = ({
   children
 }) => {
@@ -27276,7 +27437,7 @@ var icon = {
 };
 var PricingSlider = ({ value, onChange, min: min2, max: max2, step = 1, "aria-label": ariaLabel }) => {
   const percentage = (value - min2) / (max2 - min2) * 100;
-  return /* @__PURE__ */ jsxs7(Fragment9, {
+  return /* @__PURE__ */ jsxs8(Fragment9, {
     children: [
       /* @__PURE__ */ jsx46("style", {
         children: `
@@ -27333,7 +27494,7 @@ var textUnitWrapper = {
   flexDirection: "column"
 };
 var FreePricing = () => {
-  return /* @__PURE__ */ jsxs7(Container, {
+  return /* @__PURE__ */ jsxs8(Container, {
     children: [
       /* @__PURE__ */ jsx46(Audience, {
         children: "For individuals and companies of up to 3 people"
@@ -27364,7 +27525,7 @@ var FreePricing = () => {
             ...textUnitWrapper,
             alignItems: "flex-end"
           },
-          children: /* @__PURE__ */ jsxs7("a", {
+          children: /* @__PURE__ */ jsxs8("a", {
             target: "_blank",
             href: "https://www.remotion.dev/docs",
             className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
@@ -27388,7 +27549,7 @@ var FreePricing = () => {
   });
 };
 var EnterpriseLicense = () => {
-  return /* @__PURE__ */ jsxs7(Container, {
+  return /* @__PURE__ */ jsxs8(Container, {
     children: [
       /* @__PURE__ */ jsx46(Audience, {
         children: "For advanced needs"
@@ -27421,7 +27582,7 @@ var EnterpriseLicense = () => {
         checked: true
       }),
       /* @__PURE__ */ jsx46(PricingBulletPoint, {
-        text: /* @__PURE__ */ jsxs7("span", {
+        text: /* @__PURE__ */ jsxs8("span", {
           children: [
             /* @__PURE__ */ jsx46("a", {
               href: "https://www.remotion.dev/editor-starter",
@@ -27439,7 +27600,7 @@ var EnterpriseLicense = () => {
       }),
       /* @__PURE__ */ jsx46("div", {
         className: "flex flex-row justify-end",
-        children: /* @__PURE__ */ jsxs7("div", {
+        children: /* @__PURE__ */ jsxs8("div", {
           style: {
             ...textUnitWrapper,
             alignItems: "flex-end"
@@ -27466,7 +27627,7 @@ var EnterpriseLicense = () => {
 var SEAT_PRICE = 25;
 var RENDER_UNIT_PRICE = 10;
 var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "flex flex-row gap-3 cursor-pointer select-none items-center",
     onClick: () => onChange(!checked),
     children: [
@@ -27475,10 +27636,10 @@ var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
         onToggle: () => onChange(!checked),
         "aria-label": title
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "flex flex-col",
         children: [
-          /* @__PURE__ */ jsxs7("div", {
+          /* @__PURE__ */ jsxs8("div", {
             className: "fontbrand font-bold text-lg flex flex-row items-center gap-1",
             children: [
               title,
@@ -27528,7 +27689,7 @@ var CompanyPricing = () => {
   }, [formatPrice, totalPrice]);
   const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
   const showEnterpriseMessage = totalPrice >= 500;
-  return /* @__PURE__ */ jsxs7(Container, {
+  return /* @__PURE__ */ jsxs8(Container, {
     children: [
       /* @__PURE__ */ jsx46(Audience, {
         children: "For collaborations and companies of 4+ people"
@@ -27571,14 +27732,14 @@ var CompanyPricing = () => {
           transition: automatorsSelected ? "grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms" : "opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms"
         },
         inert: !automatorsSelected,
-        children: /* @__PURE__ */ jsxs7("div", {
+        children: /* @__PURE__ */ jsxs8("div", {
           className: "overflow-hidden",
           children: [
             /* @__PURE__ */ jsx46("p", {
               className: "text-sm text-muted fontbrand pt-3 pb-1",
               children: "Intended for companies launching applications and systems; such as video editors, prompt-to-video apps, embedding the Remotion Player, or any other automated video creation. A $100/mo Minimum Spend applies. Developers working on automation projects do not require a Seat."
             }),
-            /* @__PURE__ */ jsxs7("div", {
+            /* @__PURE__ */ jsxs8("div", {
               className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1",
               children: [
                 /* @__PURE__ */ jsx46("div", {
@@ -27592,14 +27753,14 @@ var CompanyPricing = () => {
                     "aria-label": "Number of renders"
                   })
                 }),
-                /* @__PURE__ */ jsxs7("div", {
+                /* @__PURE__ */ jsxs8("div", {
                   className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-right tabular-nums",
                   children: [
                     new Intl.NumberFormat("en-US").format(cloudRenders),
                     " Renders"
                   ]
                 }),
-                /* @__PURE__ */ jsxs7("div", {
+                /* @__PURE__ */ jsxs8("div", {
                   className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums",
                   children: [
                     "$",
@@ -27628,14 +27789,14 @@ var CompanyPricing = () => {
           transition: creatorsSelected ? "grid-template-rows 150ms ease-out, opacity 150ms ease-out 75ms" : "opacity 150ms ease-out, grid-template-rows 150ms ease-out 75ms"
         },
         inert: !creatorsSelected,
-        children: /* @__PURE__ */ jsxs7("div", {
+        children: /* @__PURE__ */ jsxs8("div", {
           className: "overflow-hidden",
           children: [
             /* @__PURE__ */ jsx46("p", {
               className: "text-sm text-muted fontbrand pt-3 pb-1",
               children: "Intended for low volume video creations through coding and prompting, and building motion design systems in a local environment. Get 1 Seat per user."
             }),
-            /* @__PURE__ */ jsxs7("div", {
+            /* @__PURE__ */ jsxs8("div", {
               className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1",
               children: [
                 /* @__PURE__ */ jsx46("div", {
@@ -27648,7 +27809,7 @@ var CompanyPricing = () => {
                     "aria-label": "Number of seats"
                   })
                 }),
-                /* @__PURE__ */ jsxs7("div", {
+                /* @__PURE__ */ jsxs8("div", {
                   className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center tabular-nums",
                   children: [
                     devSeatCount,
@@ -27656,7 +27817,7 @@ var CompanyPricing = () => {
                     devSeatCount === 1 ? "Seat" : "Seats"
                   ]
                 }),
-                /* @__PURE__ */ jsxs7("div", {
+                /* @__PURE__ */ jsxs8("div", {
                   className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums",
                   children: [
                     "$",
@@ -27673,14 +27834,14 @@ var CompanyPricing = () => {
       /* @__PURE__ */ jsx46("div", {
         style: { height: 14 }
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "flex flex-row items-baseline justify-end gap-2",
         children: [
           /* @__PURE__ */ jsx46("div", {
             className: "fontbrand text-muted text-sm",
             children: "Total"
           }),
-          /* @__PURE__ */ jsxs7(PriceTag, {
+          /* @__PURE__ */ jsxs8(PriceTag, {
             children: [
               totalPriceString,
               "/month"
@@ -27688,7 +27849,7 @@ var CompanyPricing = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs8("div", {
         className: "flex flex-col items-end",
         children: [
           /* @__PURE__ */ jsx46(BottomInfo, {
@@ -27696,7 +27857,7 @@ var CompanyPricing = () => {
             className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity mt-1",
             children: "The minimum is $100 per month for Remotion for Automators"
           }),
-          /* @__PURE__ */ jsxs7(BottomInfo, {
+          /* @__PURE__ */ jsxs8(BottomInfo, {
             "data-visible": showEnterpriseMessage,
             className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity mt-1",
             children: [
@@ -27722,7 +27883,7 @@ var CompanyPricing = () => {
             ...textUnitWrapper,
             alignItems: "flex-end"
           },
-          children: /* @__PURE__ */ jsxs7("a", {
+          children: /* @__PURE__ */ jsxs8("a", {
             href: "https://remotion.pro/dashboard",
             className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
             children: [
@@ -27746,12 +27907,12 @@ var CompanyPricing = () => {
 };
 
 // src/components/homepage/Pricing.tsx
-import { jsx as jsx47, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs9 } from "react/jsx-runtime";
 var Pricing = ({
   faqHref = "/docs/license/faq",
   faqLabel = "License FAQ",
   licenseHref = "https://github.com/remotion-dev/remotion/blob/main/LICENSE.md",
-  termsHref = "https://www.remotion.pro/terms"
+  termsHref = "/docs/license/terms"
 }) => {
   const faqLinkTarget = useMemo52(() => {
     return faqHref.startsWith("http") ? "_blank" : undefined;
@@ -27762,7 +27923,7 @@ var Pricing = ({
   const termsLinkTarget = useMemo52(() => {
     return termsHref.startsWith("http") ? "_blank" : undefined;
   }, [termsHref]);
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -27778,7 +27939,7 @@ var Pricing = ({
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs9("div", {
           style: {
             fontFamily: "GTPlanar"
           },