@remotion/promo-pages 4.0.490 → 4.0.492

package/dist/Homepage.js

@@ -941,6 +941,7 @@ import * as React6 from "react";
 import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
+import React9 from "react";
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
@@ -966,11 +967,11 @@ import { useContext as useContext13 } from "react";
 import { useContext as useContext12, useMemo as useMemo10 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 import { createContext as createContext14 } from "react";
-import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-import React12, { createContext as createContext15 } from "react";
+import React13, { createContext as createContext15 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import React13, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
+import React14, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
 import { useContext as useContext15, useRef as useRef5 } from "react";
 import { createContext as createContext16 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -982,7 +983,7 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React15, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -998,7 +999,7 @@ import {
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
-import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
 import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
@@ -1006,7 +1007,7 @@ import { jsx as jsx17 } from "react/jsx-runtime";
 import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback13 } from "react";
-import React22, {
+import React23, {
   forwardRef as forwardRef5,
   useContext as useContext28,
   useEffect as useEffect14,
@@ -1016,7 +1017,7 @@ import React22, {
   useState as useState14
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
-import React19, {
+import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
@@ -1040,7 +1041,7 @@ import {
 } from "react";
 import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
-import React20, {
+import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
@@ -1050,7 +1051,7 @@ import React20, {
   useState as useState12
 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import React21 from "react";
+import React22 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
@@ -1108,10 +1109,10 @@ import {
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
+import React30, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React30 from "react";
+import React31 from "react";
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
@@ -1120,14 +1121,14 @@ import {
   useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31 from "react";
+import React32 from "react";
 import { useMemo as useMemo34 } from "react";
 import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
-import React33 from "react";
-import React34, { createContext as createContext25 } from "react";
-import React35, { useContext as useContext35 } from "react";
+import React34 from "react";
+import React35, { createContext as createContext25 } from "react";
+import React36, { useContext as useContext35 } from "react";
 import { useCallback as useCallback24 } from "react";
 import {
   useCallback as useCallback22,
@@ -1138,7 +1139,7 @@ import {
   useState as useState20
 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React37, {
+import React38, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
@@ -1151,16 +1152,15 @@ import React37, {
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
-import React39, { useMemo as useMemo37 } from "react";
+import React40, { useMemo as useMemo37 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import {
-  Children,
+import React42, {
   forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
-import React40 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
-import React42 from "react";
+import React41 from "react";
+import { jsx as jsx37, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import React43 from "react";
 import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef15,
@@ -2238,6 +2238,7 @@ var InnerComposition = ({
   }
   const { folderName, parentName } = useContext9(FolderContext);
   const stack = compProps.stack ?? null;
+  const componentFromProps = "component" in compProps ? compProps.component : null;
   useEffect2(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -2255,6 +2256,7 @@ var InnerComposition = ({
       defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
       nonce: nonce.get(),
       parentFolderName: parentName,
+      componentFromProps,
       schema: schema ?? null,
       calculateMetadata: compProps.calculateMetadata ?? null,
       stack
@@ -2273,6 +2275,7 @@ var InnerComposition = ({
     width,
     nonce,
     parentName,
+    componentFromProps,
     schema,
     compProps.calculateMetadata,
     stack,
@@ -2331,11 +2334,30 @@ var Composition = (props) => {
   });
 };
 var componentsToAddStacksTo = [];
+var sequenceComponent = null;
 var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.490";
+var setSequenceComponent = (component) => {
+  sequenceComponent = component;
+};
+var getSequenceComponent = () => sequenceComponent;
+var getSingleChildComponent = (children) => {
+  const mountedChildren = React9.Children.toArray(children);
+  if (mountedChildren.length !== 1) {
+    return null;
+  }
+  const child = mountedChildren[0];
+  if (!React9.isValidElement(child)) {
+    return null;
+  }
+  if (typeof child.type !== "function" && typeof child.type !== "object") {
+    return null;
+  }
+  return child.type;
+};
+var VERSION = "4.0.492";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2935,7 +2957,7 @@ var sequenceSchemaDefaultLayoutNone = {
 var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
-var SequenceManager = React11.createContext({
+var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -2944,19 +2966,19 @@ var SequenceManager = React11.createContext({
   },
   sequences: []
 });
-var SequenceManagerRefContext = React11.createContext({
+var SequenceManagerRefContext = React12.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({
+var VisualModePropStatusesContext = React12.createContext({
   propStatuses: {}
 });
-var VisualModePropStatusesRefContext = React11.createContext({
+var VisualModePropStatusesRefContext = React12.createContext({
   current: {}
 });
-var VisualModeDragOverridesContext = React11.createContext({
+var VisualModeDragOverridesContext = React12.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
   },
@@ -2964,7 +2986,7 @@ var VisualModeDragOverridesContext = React11.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React11.createContext({
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -3128,7 +3150,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React12.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React13.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -5197,6 +5219,9 @@ var computeEffectiveSchemaValuesDotNotation = ({
         shouldResortToDefaultValueIfUndefined: false
       });
     }
+    if (field?.type === "asset" && typeof value === "string" && value.startsWith(FILE_TOKEN)) {
+      value = `${window.remotion_staticBase}/${value.slice(FILE_TOKEN.length)}`;
+    }
     if (value === undefined) {
       propsToDelete.add(key);
     }
@@ -5295,7 +5320,7 @@ var withInteractivitySchema = ({
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         controls: null,
         ref
@@ -5306,7 +5331,7 @@ var withInteractivitySchema = ({
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props.controls) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         ref
       });
@@ -5364,7 +5389,7 @@ var withInteractivitySchema = ({
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React13.createElement(Component, {
+    return React14.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -5390,6 +5415,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalDocumentationLink: documentationLink,
+  _remotionInternalSingleChildComponent: singleChildComponent,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
@@ -5536,7 +5562,8 @@ var RegularSequenceRefForwardingFunction = ({
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
-          frozenFrame: registeredFrozenFrame
+          frozenFrame: registeredFrozenFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       } else {
         registerSequence({
@@ -5561,11 +5588,13 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.data.src,
           getStack: () => stackRef.current,
           startMediaFrom: startMediaFrom ?? isMedia.data.startMediaFrom,
+          mediaFrameAtSequenceZero,
           volume: isMedia.data.volumes,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
-          frozenMediaFrame
+          frozenMediaFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       }
       return () => {
@@ -5592,7 +5621,8 @@ var RegularSequenceRefForwardingFunction = ({
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
-      frozenFrame: registeredFrozenFrame
+      frozenFrame: registeredFrozenFrame,
+      singleChildComponent: singleChildComponent ?? null
     });
     return () => {
       unregisterSequence(id);
@@ -5624,7 +5654,9 @@ var RegularSequenceRefForwardingFunction = ({
     isInsideSeries,
     registeredFrozenFrame,
     startMediaFrom,
-    frozenMediaFrame
+    mediaFrameAtSequenceZero,
+    frozenMediaFrame,
+    singleChildComponent
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -6126,7 +6158,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     ...props
   });
 };
-var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -6287,6 +6319,12 @@ var resolveAnimatedImageSource = (src) => {
   return new URL(src, window.origin).href;
 };
 var animatedImageSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   playbackRate: {
     type: "number",
@@ -6704,7 +6742,7 @@ var calculateMediaDuration = ({
 };
 var LoopContext = createContext18(null);
 var useLoop = () => {
-  return React16.useContext(LoopContext);
+  return React17.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -7555,7 +7593,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -7574,7 +7612,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) {
@@ -7643,7 +7683,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 {
@@ -7655,7 +7695,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
           audioMounted
         };
       }
-      return prevA;
+      return prevA.audioMounted === audioMounted ? prevA : { ...prevA, audioMounted };
     });
     if (changed) {
       rerenderAudios();
@@ -7694,16 +7734,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__ */ jsxs22(SharedAudioTagsContext.Provider, {
     value: audioTagsValue,
     children: [
-      refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx19("audio", {
-          ref,
-          preload: "metadata",
-          src: EMPTY_AUDIO
-        }, id);
-      }),
+      sharedAudioTagElements,
       children
     ]
   });
@@ -7720,7 +7763,7 @@ var useSharedAudio = ({
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React19.createRef();
+    const el = React20.createRef();
     const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
       audioContext: audioCtx.audioContext,
       ref: el
@@ -7739,7 +7782,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -8164,6 +8207,7 @@ var useMediaInTimeline = ({
       showInTimeline: true,
       nonce: nonce.get(),
       startMediaFrom: 0 - startsAt,
+      mediaFrameAtSequenceZero: null,
       doesVolumeChange,
       loopDisplay,
       playbackRate,
@@ -8290,7 +8334,7 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React20.createContext(null);
+var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
@@ -8503,7 +8547,7 @@ var getMediaSyncAction = (input) => {
   return { type: "none" };
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React21.useRef({
+  const lastUpdate = React22.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -9256,7 +9300,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
+  const effectToUse = React23.useInsertionEffect ?? React23.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -9797,16 +9841,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 = ({
@@ -9822,7 +9866,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,
@@ -9834,20 +9878,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") {
@@ -9870,17 +9916,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
     });
@@ -9891,22 +9939,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
@@ -9919,15 +9975,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;
         }
@@ -9936,20 +9993,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);
@@ -9961,7 +10039,7 @@ var HtmlInCanvasContent = forwardRef9(({
     continueRender2,
     cancelRender2,
     resolvedPixelDensity,
-    isRendering
+    canRetryMissingPaintRecord
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
@@ -9969,10 +10047,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
     });
@@ -9981,13 +10059,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) {
@@ -10026,11 +10110,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,
@@ -10758,6 +10846,12 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   ...transformSchema
 };
@@ -10968,7 +11062,7 @@ var makeInteractiveElement = (tag, displayName) => {
       _remotionInternalStack: stack,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
       outlineRef: refForOutline,
-      children: React29.createElement(tag, {
+      children: React30.createElement(tag, {
         ...props2,
         ref: callbackRef
       })
@@ -11032,7 +11126,7 @@ var Interactive = {
   Text: makeInteractiveElement("text", "<Interactive.Text>"),
   Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
 };
-var compositionsRef = React30.createRef();
+var compositionsRef = React31.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -11181,7 +11275,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React31.createContext(null);
+var MaxMediaCacheSizeContext = React32.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -11454,7 +11548,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React33.createContext(() => {});
+var SequenceStackTracesUpdateContext = React34.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -11480,7 +11574,7 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React34.createContext(null);
+var CurrentScaleContext = React35.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -11504,7 +11598,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var PixelDensityContext = React35.createContext(null);
+var PixelDensityContext = React36.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -11771,7 +11865,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
+  const effectToUse = React38.useInsertionEffect ?? React38.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -12147,20 +12241,20 @@ var OffthreadVideo = ({
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React39.useContext(CompositionManager);
-  const timelineContext = React39.useContext(TimelineContext);
-  const setTimelineContext = React39.useContext(SetTimelineContext);
-  const sequenceContext = React39.useContext(SequenceContext);
-  const nonceContext = React39.useContext(NonceContext);
-  const canUseRemotionHooksContext = React39.useContext(CanUseRemotionHooks);
-  const preloadContext = React39.useContext(PreloadContext);
-  const resolveCompositionContext = React39.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React39.useContext(RenderAssetManager);
-  const sequenceManagerContext = React39.useContext(SequenceManager);
-  const sequenceManagerRefContext = React39.useContext(SequenceManagerRefContext);
-  const visualModePropStatusesRefContext = React39.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React39.useContext(BufferingContextReact);
-  const logLevelContext = React39.useContext(LogLevelContext);
+  const compositionManagerCtx = React40.useContext(CompositionManager);
+  const timelineContext = React40.useContext(TimelineContext);
+  const setTimelineContext = React40.useContext(SetTimelineContext);
+  const sequenceContext = React40.useContext(SequenceContext);
+  const nonceContext = React40.useContext(NonceContext);
+  const canUseRemotionHooksContext = React40.useContext(CanUseRemotionHooks);
+  const preloadContext = React40.useContext(PreloadContext);
+  const resolveCompositionContext = React40.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React40.useContext(RenderAssetManager);
+  const sequenceManagerContext = React40.useContext(SequenceManager);
+  const sequenceManagerRefContext = React40.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React40.useContext(BufferingContextReact);
+  const logLevelContext = React40.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -12334,6 +12428,8 @@ var Internals = {
   BufferingProvider,
   BufferingContextReact,
   getComponentsToAddStacksTo,
+  getSequenceComponent,
+  getSingleChildComponent,
   CurrentScaleContext,
   PixelDensityContext,
   PreviewSizeContext,
@@ -12391,75 +12487,139 @@ var Internals = {
   fromField
 };
 var flattenChildren = (children) => {
-  const childrenArray = React40.Children.toArray(children);
+  const childrenArray = React41.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React40.Fragment) {
+    if (child.type === React41.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
     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 React42.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, {
@@ -12575,7 +12735,7 @@ var Still = (props2) => {
     durationInFrames: 1,
     fps: 1
   };
-  return React42.createElement(Composition, newProps);
+  return React43.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 var roundTo6Commas = (num) => {
@@ -13054,11 +13214,12 @@ var Config = new Proxy(proxyObj, {
 });
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
+setSequenceComponent(Sequence);
 addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 
 // src/components/team/TeamCards.tsx
-import { jsx as jsx40, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs4 } from "react/jsx-runtime";
 var LinkedInLogo = () => {
   return /* @__PURE__ */ jsx40("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -13113,14 +13274,14 @@ var TeamMemberCard = ({
   github,
   email
 }) => {
-  return /* @__PURE__ */ jsxs3("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4",
     children: [
       /* @__PURE__ */ jsx40("img", {
         src: image,
         className: "w-[250px] h-[250px] rounded-xl border-effect"
       }),
-      /* @__PURE__ */ jsxs3("div", {
+      /* @__PURE__ */ jsxs4("div", {
         className: "flex flex-col border-effect px-4 py-3 bg-pane",
         children: [
           /* @__PURE__ */ jsx40("h2", {
@@ -13138,7 +13299,7 @@ var TeamMemberCard = ({
           /* @__PURE__ */ jsx40("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs3("div", {
+          /* @__PURE__ */ jsxs4("div", {
             className: "gap-3 flex flex-row",
             children: [
               /* @__PURE__ */ jsx40("a", {
@@ -13173,7 +13334,7 @@ var TeamMemberCard = ({
   });
 };
 var TeamCardsLayout = () => {
-  return /* @__PURE__ */ jsxs3("div", {
+  return /* @__PURE__ */ jsxs4("div", {
     className: "flex flex-col gap-12 md:gap-4",
     children: [
       /* @__PURE__ */ jsx40(TeamMemberCard, {
@@ -13241,7 +13402,7 @@ var PersonalWebsite = () => {
 };
 
 // src/components/experts/ExpertsPage.tsx
-import { jsx as jsx43, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
 var arrowIcon = {
   height: 16,
   marginLeft: 10
@@ -13272,7 +13433,7 @@ var wrapperStyle = {
   paddingBottom: 100
 };
 var ExpertCard = ({ expert, Link }) => {
-  return /* @__PURE__ */ jsxs4("div", {
+  return /* @__PURE__ */ jsxs6("div", {
     className: "flex-1 rounded-[15px] flex flex-col md:flex-row gap-2 md:gap-4",
     children: [
       /* @__PURE__ */ jsx43(Link, {
@@ -13284,7 +13445,7 @@ var ExpertCard = ({ expert, Link }) => {
           className: "w-[250px] h-[250px] rounded-xl border-effect object-cover"
         })
       }),
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs6("div", {
         className: "flex flex-col border-effect px-4 py-3 bg-pane flex-1",
         children: [
           /* @__PURE__ */ jsx43(Link, {
@@ -13299,10 +13460,10 @@ var ExpertCard = ({ expert, Link }) => {
             className: "mt-2 mb-3 leading-normal font-brand",
             children: expert.description
           }),
-          /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsxs6("div", {
             className: "leading-6 mb-4",
             children: [
-              /* @__PURE__ */ jsxs4(Link, {
+              /* @__PURE__ */ jsxs6(Link, {
                 className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                 href: `/experts/${expert.slug}`,
                 children: [
@@ -13319,10 +13480,10 @@ var ExpertCard = ({ expert, Link }) => {
                   })
                 ]
               }),
-              expert.videocall ? /* @__PURE__ */ jsxs4(Fragment, {
+              expert.videocall ? /* @__PURE__ */ jsxs6(Fragment2, {
                 children: [
                   /* @__PURE__ */ jsx43("br", {}),
-                  /* @__PURE__ */ jsxs4("a", {
+                  /* @__PURE__ */ jsxs6("a", {
                     className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                     target: "_blank",
                     href: expert.videocall,
@@ -13347,7 +13508,7 @@ var ExpertCard = ({ expert, Link }) => {
           /* @__PURE__ */ jsx43("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsxs6("div", {
             className: "gap-3 flex flex-row flex-wrap",
             children: [
               expert.website ? /* @__PURE__ */ jsx43("a", {
@@ -13403,14 +13564,14 @@ var ExpertsPageContent = ({ Link }) => {
   }, []);
   return /* @__PURE__ */ jsx43("div", {
     className: "relative bg-[var(--background)]",
-    children: /* @__PURE__ */ jsxs4("div", {
+    children: /* @__PURE__ */ jsxs6("div", {
       style: wrapperStyle,
       children: [
         /* @__PURE__ */ jsx43("h1", {
           className: "experts-pagetitle",
           children: "Find a Remotion Expert"
         }),
-        /* @__PURE__ */ jsxs4("p", {
+        /* @__PURE__ */ jsxs6("p", {
           className: "experts-tagline",
           children: [
             "Get help by booking a call or hiring these freelancers to work on your Remotion project.",
@@ -13428,16 +13589,16 @@ var ExpertsPageContent = ({ Link }) => {
             })
           })
         }),
-        /* @__PURE__ */ jsxs4("div", {
+        /* @__PURE__ */ jsxs6("div", {
           style: infoCard,
           children: [
-            /* @__PURE__ */ jsxs4("svg", {
+            /* @__PURE__ */ jsxs6("svg", {
               viewBox: "0 0 661 512",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
               style: cardIcon,
               children: [
-                /* @__PURE__ */ jsxs4("g", {
+                /* @__PURE__ */ jsxs6("g", {
                   clipPath: "url(#clip0_1_2)",
                   children: [
                     /* @__PURE__ */ jsx43("path", {
@@ -13462,7 +13623,7 @@ var ExpertsPageContent = ({ Link }) => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs4("div", {
+            /* @__PURE__ */ jsxs6("div", {
               style: { flex: 1 },
               children: [
                 "Remotion Experts are independent freelancers with proven Remotion expertise and portfolios. However,",
@@ -13496,7 +13657,7 @@ var ExpertsPageContent = ({ Link }) => {
 import { useMemo as useMemo53 } from "react";
 
 // ../design/dist/esm/index.mjs
-import * as React23 from "react";
+import * as React24 from "react";
 import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx46 } from "react/jsx-runtime";
 import React52, { useCallback as useCallback27, useRef as useRef210, useState as useState22 } from "react";
@@ -14841,7 +15002,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React32, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
+import React33, { useEffect as useEffect21, useMemo as useMemo43, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -17609,7 +17770,7 @@ var PathInternals = {
 // ../shapes/dist/esm/index.mjs
 import React3, { useCallback as useCallback26, useMemo as useMemo42, useRef as useRef29 } from "react";
 import { version } from "react-dom";
-import { jsx as jsx44, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs7 } from "react/jsx-runtime";
 import { jsx as jsx210 } from "react/jsx-runtime";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { jsx as jsx45 } from "react/jsx-runtime";
@@ -17811,7 +17972,7 @@ var RenderSvg = ({
   const memoizedEffectDefinitions = Internals.useMemoizedEffectDefinitions(effects);
   const videoConfig = Internals.useUnsafeVideoConfig();
   const reactSupportsTransformOrigin = doesReactSupportTransformOriginProperty(version);
-  const svg = /* @__PURE__ */ jsxs5("svg", {
+  const svg = /* @__PURE__ */ jsxs7("svg", {
     ref: effects.length === 0 || !videoConfig ? setSvgRef : undefined,
     width,
     height,
@@ -17837,7 +17998,7 @@ var RenderSvg = ({
           }
           const prevX = prevInstruction.x;
           const prevY = prevInstruction.y;
-          return /* @__PURE__ */ jsxs5(React3.Fragment, {
+          return /* @__PURE__ */ jsxs7(React3.Fragment, {
             children: [
               /* @__PURE__ */ jsx44("path", {
                 d: `M ${prevX} ${prevY} ${i.cp1x} ${i.cp1y}`,
@@ -20518,8 +20679,8 @@ 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 jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx212, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx312, jsxs as jsxs8 } from "react/jsx-runtime";
 import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef31 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -20532,12 +20693,12 @@ import React72 from "react";
 import { jsx as jsx103 } from "react/jsx-runtime";
 import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx123 } from "react/jsx-runtime";
-import * as React36 from "react";
+import * as React362 from "react";
 import * as ReactDOM4 from "react-dom";
-import React112 from "react";
+import React11 from "react";
 import * as React82 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
-import * as React9 from "react";
+import * as React92 from "react";
 import * as React10 from "react";
 import { Fragment as Fragment5, jsx as jsx142 } from "react/jsx-runtime";
 import { jsx as jsx152 } from "react/jsx-runtime";
@@ -20547,15 +20708,15 @@ import * as React162 from "react";
 import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React14 from "react";
-import * as React152 from "react";
+import * as React142 from "react";
+import * as React15 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
-import * as React17 from "react";
+import * as React172 from "react";
 import * as React18 from "react";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React202 from "react";
-import * as React192 from "react";
-import * as React24 from "react";
+import * as React19 from "react";
+import * as React242 from "react";
 import * as React212 from "react";
 import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "react";
 import * as ReactDOM2 from "react-dom";
@@ -20573,7 +20734,7 @@ import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React352 from "react";
 import * as React312 from "react";
 import { useState as useState112 } from "react";
-import * as React292 from "react";
+import * as React29 from "react";
 import * as React302 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
@@ -20581,22 +20742,22 @@ import * as React322 from "react";
 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 * as React37 from "react";
+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";
+import * as React382 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
 import React402 from "react";
-import * as React392 from "react";
+import * as React39 from "react";
 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 React43 from "react";
+import * as React412 from "react";
+import * as React432 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
 import * as React44 from "react";
@@ -20648,7 +20809,7 @@ function useComposedRefs(...refs) {
   return React8.useCallback(composeRefs(...refs), refs);
 }
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React23[" use ".trim().toString()];
+var use = React24[" use ".trim().toString()];
 function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value;
 }
@@ -20657,25 +20818,25 @@ function isLazyComponent(element) {
 }
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React23.forwardRef((props, forwardedRef) => {
+  const Slot2 = React24.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    const childrenArray = React23.Children.toArray(children);
+    const childrenArray = React24.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React23.Children.count(newElement) > 1)
-            return React23.Children.only(null);
-          return React23.isValidElement(newElement) ? newElement.props.children : null;
+          if (React24.Children.count(newElement) > 1)
+            return React24.Children.only(null);
+          return React24.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx46(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx46(SlotClone, { ...slotProps, ref: forwardedRef, children: React24.isValidElement(newElement) ? React24.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx46(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
@@ -20684,20 +20845,20 @@ function createSlot(ownerName) {
 }
 var Slot = /* @__PURE__ */ createSlot("Slot");
 function createSlotClone(ownerName) {
-  const SlotClone = React23.forwardRef((props, forwardedRef) => {
+  const SlotClone = React24.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    if (React23.isValidElement(children)) {
+    if (React24.isValidElement(children)) {
       const childrenRef = getElementRef(children);
       const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React23.Fragment) {
+      if (children.type !== React24.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React23.cloneElement(children, props2);
+      return React24.cloneElement(children, props2);
     }
-    return React23.Children.count(children) > 1 ? React23.Children.only(null) : null;
+    return React24.Children.count(children) > 1 ? React24.Children.only(null) : null;
   });
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
@@ -20713,7 +20874,7 @@ function createSlottable(ownerName) {
 }
 var Slottable = /* @__PURE__ */ createSlottable("Slottable");
 function isSlottable(child) {
-  return React23.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React24.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -20770,7 +20931,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React32.useState({
+  const [state, setState] = React33.useState({
     progress: 0,
     isActive: false
   });
@@ -20782,7 +20943,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -20857,8 +21018,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React32.useState(0);
-  React32.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React33.useState(0);
+  React33.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -20943,7 +21104,7 @@ var useMousePosition = (ref) => {
   return angle;
 };
 var Faces = ({ elements, ...svgProps }) => {
-  return /* @__PURE__ */ jsx212(Fragment3, {
+  return /* @__PURE__ */ jsx212(Fragment32, {
     children: elements.map(({ points, color, crispEdges }, idx) => {
       return /* @__PURE__ */ jsx212("path", {
         d: threeDIntoSvgPath(points),
@@ -21002,7 +21163,7 @@ var Outer = ({
     description: "rect",
     transformations: centerOriented
   });
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "relative",
     style: { width, height },
     children: [
@@ -21434,7 +21595,7 @@ function composeRefs2(...refs) {
   return (node) => refs.forEach((ref) => setRef22(ref, node));
 }
 function useComposedRefs2(...refs) {
-  return React9.useCallback(composeRefs2(...refs), refs);
+  return React92.useCallback(composeRefs2(...refs), refs);
 }
 var Slot2 = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
@@ -21516,13 +21677,13 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React112.useRef(null);
-    const itemMap = React112.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React11.useRef(null);
+    const itemMap = React11.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx152(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs2(forwardedRef, context.collectionRef);
@@ -21531,12 +21692,12 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React112.useRef(null);
+    const ref = React11.useRef(null);
     const composedRefs = useComposedRefs2(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React112.useEffect(() => {
+    React11.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -21545,7 +21706,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React112.useCallback(() => {
+    const getItems = React11.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -21602,15 +21763,15 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React14.useRef(callback);
-  React14.useEffect(() => {
+  const callbackRef = React142.useRef(callback);
+  React142.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React152.useEffect(() => {
+  React15.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -21817,7 +21978,7 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
 }
 var count = 0;
 function useFocusGuards() {
-  React17.useEffect(() => {
+  React172.useEffect(() => {
     const edgeGuards = document.querySelectorAll("[data-radix-focus-guard]");
     document.body.insertAdjacentElement("afterbegin", edgeGuards[0] ?? createFocusGuard());
     document.body.insertAdjacentElement("beforeend", edgeGuards[1] ?? createFocusGuard());
@@ -22052,7 +22213,7 @@ function arrayRemove(array, item) {
 function removeLinks(items) {
   return items.filter((item) => item.tagName !== "A");
 }
-var useLayoutEffect22 = Boolean(globalThis?.document) ? React192.useLayoutEffect : () => {};
+var useLayoutEffect22 = Boolean(globalThis?.document) ? React19.useLayoutEffect : () => {};
 var useReactId = React202["useId".toString()] || (() => {
   return;
 });
@@ -23904,17 +24065,17 @@ var [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);
 var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 var Popper = (props) => {
   const { __scopePopper, children } = props;
-  const [anchor, setAnchor] = React24.useState(null);
+  const [anchor, setAnchor] = React242.useState(null);
   return /* @__PURE__ */ jsx213(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
 };
 Popper.displayName = POPPER_NAME;
 var ANCHOR_NAME = "PopperAnchor";
-var PopperAnchor = React24.forwardRef((props, forwardedRef) => {
+var PopperAnchor = React242.forwardRef((props, forwardedRef) => {
   const { __scopePopper, virtualRef, ...anchorProps } = props;
   const context = usePopperContext(ANCHOR_NAME, __scopePopper);
-  const ref = React24.useRef(null);
+  const ref = React242.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
-  React24.useEffect(() => {
+  React242.useEffect(() => {
     context.onAnchorChange(virtualRef?.current || ref.current);
   });
   return virtualRef ? null : /* @__PURE__ */ jsx213(Primitive.div, { ...anchorProps, ref: composedRefs });
@@ -23922,7 +24083,7 @@ var PopperAnchor = React24.forwardRef((props, forwardedRef) => {
 PopperAnchor.displayName = ANCHOR_NAME;
 var CONTENT_NAME = "PopperContent";
 var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
-var PopperContent = React24.forwardRef((props, forwardedRef) => {
+var PopperContent = React242.forwardRef((props, forwardedRef) => {
   const {
     __scopePopper,
     side = "bottom",
@@ -23940,9 +24101,9 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = usePopperContext(CONTENT_NAME, __scopePopper);
-  const [content, setContent] = React24.useState(null);
+  const [content, setContent] = React242.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [arrow4, setArrow] = React24.useState(null);
+  const [arrow4, setArrow] = React242.useState(null);
   const arrowSize = useSize(arrow4);
   const arrowWidth = arrowSize?.width ?? 0;
   const arrowHeight = arrowSize?.height ?? 0;
@@ -24002,7 +24163,7 @@ var PopperContent = React24.forwardRef((props, forwardedRef) => {
   const arrowX = middlewareData.arrow?.x;
   const arrowY = middlewareData.arrow?.y;
   const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
-  const [contentZIndex, setContentZIndex] = React24.useState();
+  const [contentZIndex, setContentZIndex] = React242.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
@@ -24053,7 +24214,7 @@ var OPPOSITE_SIDE = {
   bottom: "top",
   left: "right"
 };
-var PopperArrow = React24.forwardRef(function PopperArrow2(props, forwardedRef) {
+var PopperArrow = React242.forwardRef(function PopperArrow2(props, forwardedRef) {
   const { __scopePopper, ...arrowProps } = props;
   const contentContext = useContentContext(ARROW_NAME, __scopePopper);
   const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
@@ -24396,7 +24557,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React292.useLayoutEffect : React292.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React29.useLayoutEffect : React29.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -25032,9 +25193,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React36.useState(null);
-  const [valueNode, setValueNode] = React36.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React36.useState(false);
+  const [trigger, setTrigger] = React362.useState(null);
+  const [valueNode, setValueNode] = React362.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React362.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -25046,9 +25207,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React36.useRef(null);
+  const triggerPointerDownPosRef = React362.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React36.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React362.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx242(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs42(SelectProvider, {
     required,
@@ -25070,10 +25231,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx242(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx242(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React36.useCallback((option) => {
+        onNativeOptionAdd: React362.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React36.useCallback((option) => {
+        onNativeOptionRemove: React362.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -25101,7 +25262,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -25169,7 +25330,7 @@ var SelectTrigger = React36.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React36.forwardRef((props, forwardedRef) => {
+var SelectValue = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -25187,7 +25348,7 @@ var SelectValue = React36.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React36.forwardRef((props, forwardedRef) => {
+var SelectIcon = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -25198,9 +25359,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React36.forwardRef((props, forwardedRef) => {
+var SelectContent = React362.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React36.useState();
+  const [fragment, setFragment] = React362.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -25214,7 +25375,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -25234,20 +25395,20 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React36.useState(null);
-  const [viewport, setViewport] = React36.useState(null);
+  const [content, setContent] = React362.useState(null);
+  const [viewport, setViewport] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React36.useState(null);
-  const [selectedItemText, setSelectedItemText] = React36.useState(null);
+  const [selectedItem, setSelectedItem] = React362.useState(null);
+  const [selectedItemText, setSelectedItemText] = React362.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React36.useState(false);
-  const firstValidItemFoundRef = React36.useRef(false);
-  React36.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React362.useState(false);
+  const firstValidItemFoundRef = React362.useRef(false);
+  React362.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React36.useCallback((candidates) => {
+  const focusFirst2 = React362.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -25264,14 +25425,14 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React36.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React36.useEffect(() => {
+  const focusSelectedItem = React362.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React362.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -25301,7 +25462,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -25318,7 +25479,7 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React36.useCallback((node, value, disabled) => {
+  const itemRefCallback = React362.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -25327,8 +25488,8 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React36.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React36.useCallback((node, value, disabled) => {
+  const handleItemLeave = React362.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React362.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -25423,18 +25584,18 @@ var SelectContentImpl = React36.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React36.useState(null);
-  const [content, setContent] = React36.useState(null);
+  const [contentWrapper, setContentWrapper] = React362.useState(null);
+  const [content, setContent] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React36.useRef(false);
-  const shouldRepositionRef = React36.useRef(true);
+  const shouldExpandOnScrollRef = React362.useRef(false);
+  const shouldRepositionRef = React362.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React36.useCallback(() => {
+  const position = React362.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -25515,12 +25676,12 @@ var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React36.useState();
+  const [contentZIndex, setContentZIndex] = React362.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React36.useCallback((node) => {
+  const handleScrollButtonChange = React362.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -25554,7 +25715,7 @@ var SelectItemAlignedPosition = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -25584,12 +25745,12 @@ var SelectPopperPosition = React36.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React36.forwardRef((props, forwardedRef) => {
+var SelectViewport = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs2(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React36.useRef(0);
+  const prevScrollTopRef = React362.useRef(0);
   return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx242("style", {
       dangerouslySetInnerHTML: {
@@ -25638,14 +25799,14 @@ var SelectViewport = React36.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React36.forwardRef((props, forwardedRef) => {
+var SelectGroup = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx242(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx242(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React36.forwardRef((props, forwardedRef) => {
+var SelectLabel = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx242(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -25653,7 +25814,7 @@ var SelectLabel = React36.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React36.forwardRef((props, forwardedRef) => {
+var SelectItem = React362.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -25664,8 +25825,8 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React36.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React36.useState(false);
+  const [textValue, setTextValue] = React362.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -25683,7 +25844,7 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React36.useCallback((node) => {
+    onItemTextChange: React362.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx242(Collection.ItemSlot, {
@@ -25732,16 +25893,16 @@ var SelectItem = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React36.forwardRef((props, forwardedRef) => {
+var SelectItemText = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React36.useState(null);
+  const [itemTextNode, setItemTextNode] = React362.useState(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React36.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React362.useMemo(() => /* @__PURE__ */ jsx242("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -25754,17 +25915,17 @@ var SelectItemText = React36.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React36.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx242(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React362.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React36.useState(false);
+  const [canScrollUp, setCanScrollUp] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -25792,10 +25953,10 @@ var SelectScrollUpButton = React36.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React362.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React36.useState(false);
+  const [canScrollDown, setCanScrollDown] = React362.useState(false);
   const composedRefs = useComposedRefs2(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -25823,18 +25984,18 @@ var SelectScrollDownButton = React36.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React36.useRef(null);
+  const autoScrollTimerRef = React362.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React36.useCallback(() => {
+  const clearAutoScrollTimer = React362.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -25863,13 +26024,13 @@ var SelectScrollButtonImpl = React36.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React36.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx242(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React36.forwardRef((props, forwardedRef) => {
+var SelectArrow = React362.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -25880,12 +26041,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React362.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React36.useRef(null);
+  const ref = React362.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -25901,9 +26062,9 @@ var BubbleSelect = React36.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React36.useRef("");
-  const timerRef = React36.useRef(0);
-  const handleTypeaheadSearch = React36.useCallback((key) => {
+  const searchRef = React362.useRef("");
+  const timerRef = React362.useRef(0);
+  const handleTypeaheadSearch = React362.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -25913,11 +26074,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React36.useCallback(() => {
+  const resetTypeahead = React362.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React36.useEffect(() => {
+  React362.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -26006,7 +26167,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 = React37.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,
@@ -26021,7 +26182,7 @@ var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
+var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -26030,7 +26191,7 @@ var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
+var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -26039,8 +26200,8 @@ 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, {
+var SelectContent2 = React37.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
+  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,
@@ -26056,13 +26217,13 @@ var SelectContent2 = React372.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
+var SelectLabel2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs52(Item, {
+var SelectItem2 = React37.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,
@@ -26081,7 +26242,7 @@ var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
+var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -26114,19 +26275,19 @@ function composeEventHandlers2(originalEventHandler, ourEventHandler, { checkFor
 function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
-    const BaseContext = React38.createContext(defaultContext);
+    const BaseContext = React382.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const value = React38.useMemo(() => context, Object.values(context));
+      const value = React382.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx272(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
-      const context = React38.useContext(Context);
+      const context = React382.useContext(Context);
       if (context)
         return context;
       if (defaultContext !== undefined)
@@ -26137,11 +26298,11 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
-      return React38.createContext(defaultContext);
+      return React382.createContext(defaultContext);
     });
     return function useScope(scope) {
       const contexts = scope?.[scopeName] || scopeContexts;
-      return React38.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+      return React382.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
     };
   };
   createScope.scopeName = scopeName;
@@ -26162,7 +26323,7 @@ function composeContextScopes2(...scopes) {
         const currentScope = scopeProps[`__scope${scopeName}`];
         return { ...nextScopes2, ...currentScope };
       }, {});
-      return React38.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+      return React382.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
     };
   };
   createScope.scopeName = baseScope.scopeName;
@@ -26170,22 +26331,22 @@ function composeContextScopes2(...scopes) {
 }
 function createSlot2(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone2(ownerName);
-  const Slot22 = React392.forwardRef((props, forwardedRef) => {
+  const Slot22 = React39.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    const childrenArray = React392.Children.toArray(children);
+    const childrenArray = React39.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable3);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React392.Children.count(newElement) > 1)
-            return React392.Children.only(null);
-          return React392.isValidElement(newElement) ? newElement.props.children : null;
+          if (React39.Children.count(newElement) > 1)
+            return React39.Children.only(null);
+          return React39.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React392.isValidElement(newElement) ? React392.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React39.isValidElement(newElement) ? React39.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
@@ -26193,24 +26354,24 @@ function createSlot2(ownerName) {
   return Slot22;
 }
 function createSlotClone2(ownerName) {
-  const SlotClone2 = React392.forwardRef((props, forwardedRef) => {
+  const SlotClone2 = React39.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (React392.isValidElement(children)) {
+    if (React39.isValidElement(children)) {
       const childrenRef = getElementRef3(children);
       const props2 = mergeProps3(slotProps, children.props);
-      if (children.type !== React392.Fragment) {
+      if (children.type !== React39.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React392.cloneElement(children, props2);
+      return React39.cloneElement(children, props2);
     }
-    return React392.Children.count(children) > 1 ? React392.Children.only(null) : null;
+    return React39.Children.count(children) > 1 ? React39.Children.only(null) : null;
   });
   SlotClone2.displayName = `${ownerName}.SlotClone`;
   return SlotClone2;
 }
 var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
 function isSlottable3(child) {
-  return React392.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
+  return React39.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
 }
 function mergeProps3(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -26604,7 +26765,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;
 });
@@ -26638,7 +26799,7 @@ var NODES2 = [
 ];
 var Primitive2 = NODES2.reduce((primitive, node) => {
   const Slot3 = createSlot2(`Primitive.${node}`);
-  const Node2 = React43.forwardRef((props, forwardedRef) => {
+  const Node2 = React432.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot3 : node;
     if (typeof window !== "undefined") {
@@ -28540,7 +28701,7 @@ function cn2(...inputs) {
 }
 
 // src/components/homepage/PricingBulletPoint.tsx
-import { jsx as jsx48, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs9 } from "react/jsx-runtime";
 var container3 = {
   display: "flex",
   flexDirection: "row",
@@ -28554,7 +28715,7 @@ var greyCircle = {
   backgroundColor: "var(--footer-border)"
 };
 var PricingBulletPoint = ({ text, checked, children }) => {
-  const checkmarkSVG = /* @__PURE__ */ jsxs7("svg", {
+  const checkmarkSVG = /* @__PURE__ */ jsxs9("svg", {
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
@@ -28576,13 +28737,13 @@ var PricingBulletPoint = ({ text, checked, children }) => {
       })
     ]
   });
-  return /* @__PURE__ */ jsxs7("div", {
+  return /* @__PURE__ */ jsxs9("div", {
     style: container3,
     children: [
       checked ? checkmarkSVG : /* @__PURE__ */ jsx48("div", {
         style: greyCircle
       }),
-      /* @__PURE__ */ jsxs7("div", {
+      /* @__PURE__ */ jsxs9("div", {
         className: "fontbrand text-lg\t",
         children: [
           text,
@@ -28594,7 +28755,7 @@ var PricingBulletPoint = ({ text, checked, children }) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import { jsx as jsx49, jsxs as jsxs8, Fragment as Fragment9 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs10, Fragment as Fragment11 } from "react/jsx-runtime";
 var Container = ({
   children
 }) => {
@@ -28638,7 +28799,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__ */ jsxs8(Fragment9, {
+  return /* @__PURE__ */ jsxs10(Fragment11, {
     children: [
       /* @__PURE__ */ jsx49("style", {
         children: `
@@ -28695,7 +28856,7 @@ var textUnitWrapper = {
   flexDirection: "column"
 };
 var FreePricing = () => {
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs10(Container, {
     children: [
       /* @__PURE__ */ jsx49(Audience, {
         children: "For individuals and companies of up to 3 people"
@@ -28726,7 +28887,7 @@ var FreePricing = () => {
             ...textUnitWrapper,
             alignItems: "flex-end"
           },
-          children: /* @__PURE__ */ jsxs8("a", {
+          children: /* @__PURE__ */ jsxs10("a", {
             target: "_blank",
             href: "https://www.remotion.dev/docs",
             className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
@@ -28750,7 +28911,7 @@ var FreePricing = () => {
   });
 };
 var EnterpriseLicense = () => {
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs10(Container, {
     children: [
       /* @__PURE__ */ jsx49(Audience, {
         children: "For advanced needs"
@@ -28783,7 +28944,7 @@ var EnterpriseLicense = () => {
         checked: true
       }),
       /* @__PURE__ */ jsx49(PricingBulletPoint, {
-        text: /* @__PURE__ */ jsxs8("span", {
+        text: /* @__PURE__ */ jsxs10("span", {
           children: [
             /* @__PURE__ */ jsx49("a", {
               href: "https://www.remotion.dev/editor-starter",
@@ -28801,7 +28962,7 @@ var EnterpriseLicense = () => {
       }),
       /* @__PURE__ */ jsx49("div", {
         className: "flex flex-row justify-end",
-        children: /* @__PURE__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs10("div", {
           style: {
             ...textUnitWrapper,
             alignItems: "flex-end"
@@ -28828,7 +28989,7 @@ var EnterpriseLicense = () => {
 var SEAT_PRICE = 25;
 var RENDER_UNIT_PRICE = 10;
 var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     className: "flex flex-row gap-3 cursor-pointer select-none items-center",
     onClick: () => onChange(!checked),
     children: [
@@ -28837,10 +28998,10 @@ var SectionCheckbox = ({ checked, onChange, title, subtitle, children }) => {
         onToggle: () => onChange(!checked),
         "aria-label": title
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex flex-col",
         children: [
-          /* @__PURE__ */ jsxs8("div", {
+          /* @__PURE__ */ jsxs10("div", {
             className: "fontbrand font-bold text-lg flex flex-row items-center gap-1",
             children: [
               title,
@@ -28890,7 +29051,7 @@ var CompanyPricing = () => {
   }, [formatPrice, totalPrice]);
   const showMinimumMessage = automatorsSelected && creatorsPrice + automatorsPrice < 100;
   const showEnterpriseMessage = totalPrice >= 500;
-  return /* @__PURE__ */ jsxs8(Container, {
+  return /* @__PURE__ */ jsxs10(Container, {
     children: [
       /* @__PURE__ */ jsx49(Audience, {
         children: "For collaborations and companies of 4+ people"
@@ -28933,14 +29094,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__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs10("div", {
           className: "overflow-hidden",
           children: [
             /* @__PURE__ */ jsx49("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__ */ jsxs8("div", {
+            /* @__PURE__ */ jsxs10("div", {
               className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1",
               children: [
                 /* @__PURE__ */ jsx49("div", {
@@ -28954,14 +29115,14 @@ var CompanyPricing = () => {
                     "aria-label": "Number of renders"
                   })
                 }),
-                /* @__PURE__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("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__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("div", {
                   className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums",
                   children: [
                     "$",
@@ -28990,14 +29151,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__ */ jsxs8("div", {
+        children: /* @__PURE__ */ jsxs10("div", {
           className: "overflow-hidden",
           children: [
             /* @__PURE__ */ jsx49("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__ */ jsxs8("div", {
+            /* @__PURE__ */ jsxs10("div", {
               className: "flex flex-row items-center gap-3 sm:gap-4 w-full pt-3 pb-1",
               children: [
                 /* @__PURE__ */ jsx49("div", {
@@ -29010,7 +29171,7 @@ var CompanyPricing = () => {
                     "aria-label": "Number of seats"
                   })
                 }),
-                /* @__PURE__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("div", {
                   className: "fontbrand shrink-0 whitespace-nowrap w-[135px] sm:w-[150px] text-center tabular-nums",
                   children: [
                     devSeatCount,
@@ -29018,7 +29179,7 @@ var CompanyPricing = () => {
                     devSeatCount === 1 ? "Seat" : "Seats"
                   ]
                 }),
-                /* @__PURE__ */ jsxs8("div", {
+                /* @__PURE__ */ jsxs10("div", {
                   className: "fontbrand font-bold min-w-[60px] text-right shrink-0 whitespace-nowrap tabular-nums",
                   children: [
                     "$",
@@ -29035,14 +29196,14 @@ var CompanyPricing = () => {
       /* @__PURE__ */ jsx49("div", {
         style: { height: 14 }
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex flex-row items-baseline justify-end gap-2",
         children: [
           /* @__PURE__ */ jsx49("div", {
             className: "fontbrand text-muted text-sm",
             children: "Total"
           }),
-          /* @__PURE__ */ jsxs8(PriceTag, {
+          /* @__PURE__ */ jsxs10(PriceTag, {
             children: [
               totalPriceString,
               "/month"
@@ -29050,7 +29211,7 @@ var CompanyPricing = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex flex-col items-end",
         children: [
           /* @__PURE__ */ jsx49(BottomInfo, {
@@ -29058,7 +29219,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__ */ jsxs8(BottomInfo, {
+          /* @__PURE__ */ jsxs10(BottomInfo, {
             "data-visible": showEnterpriseMessage,
             className: "opacity-0 data-[visible=true]:opacity-100 transition-opacity mt-1",
             children: [
@@ -29084,7 +29245,7 @@ var CompanyPricing = () => {
             ...textUnitWrapper,
             alignItems: "flex-end"
           },
-          children: /* @__PURE__ */ jsxs8("a", {
+          children: /* @__PURE__ */ jsxs10("a", {
             href: "https://remotion.pro/dashboard",
             className: "font-brand text-brand flex flex-row items-center gap-1 no-underline",
             children: [
@@ -29108,12 +29269,12 @@ var CompanyPricing = () => {
 };
 
 // src/components/homepage/Pricing.tsx
-import { jsx as jsx50, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs11 } 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 = useMemo53(() => {
     return faqHref.startsWith("http") ? "_blank" : undefined;
@@ -29124,7 +29285,7 @@ var Pricing = ({
   const termsLinkTarget = useMemo53(() => {
     return termsHref.startsWith("http") ? "_blank" : undefined;
   }, [termsHref]);
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -29140,7 +29301,7 @@ var Pricing = ({
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs9("div", {
+        children: /* @__PURE__ */ jsxs11("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -29191,7 +29352,7 @@ var SectionTitle = ({
 };
 
 // src/components/homepage/AutomationsSection.tsx
-import { jsx as jsx54, jsxs as jsxs10, Fragment as Fragment11 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs12, Fragment as Fragment12 } from "react/jsx-runtime";
 var appPipeline = [
   {
     step: "01",
@@ -29212,7 +29373,7 @@ var appPipeline = [
   {
     step: "03",
     title: "Preview and render",
-    description: /* @__PURE__ */ jsxs10(Fragment11, {
+    description: /* @__PURE__ */ jsxs12(Fragment12, {
       children: [
         "Use the",
         " ",
@@ -29263,7 +29424,7 @@ var Arrow3 = () => /* @__PURE__ */ jsx54("svg", {
   })
 });
 var InlineLink = ({ href, children }) => {
-  return /* @__PURE__ */ jsxs10("a", {
+  return /* @__PURE__ */ jsxs12("a", {
     href,
     className: "mt-3 inline-flex flex-row items-center font-brand text-base font-semibold text-text no-underline sm:text-sm",
     children: [
@@ -29277,10 +29438,10 @@ var StudioIllustration = () => {
   return /* @__PURE__ */ jsx54("div", {
     className: illustrationFrame,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs10("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       className: "relative w-full max-w-[220px] rounded-md bg-pane px-4 py-6 fontbrand",
       children: [
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "absolute bottom-5 left-1/2 top-3 flex -translate-x-1/2 flex-col items-center",
           children: [
             /* @__PURE__ */ jsx54("div", {
@@ -29291,10 +29452,10 @@ var StudioIllustration = () => {
             })
           ]
         }),
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "space-y-4",
           children: [
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs12("div", {
               className: "grid grid-cols-[28px_1fr] items-center gap-3",
               children: [
                 /* @__PURE__ */ jsx54("div", {
@@ -29305,7 +29466,7 @@ var StudioIllustration = () => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs12("div", {
               className: "grid grid-cols-[28px_1fr] items-center gap-3",
               children: [
                 /* @__PURE__ */ jsx54("div", {
@@ -29316,7 +29477,7 @@ var StudioIllustration = () => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs12("div", {
               className: "grid grid-cols-[28px_1fr] items-center gap-3",
               children: [
                 /* @__PURE__ */ jsx54("div", {
@@ -29337,7 +29498,7 @@ var PropsIllustration = () => {
   return /* @__PURE__ */ jsx54("div", {
     className: illustrationFrame,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs10("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       className: "flex h-[124px] w-full max-w-[240px] flex-col justify-center whitespace-nowrap rounded-md bg-pane p-4 text-left font-mono text-base leading-6 text-text sm:text-sm sm:leading-5",
       children: [
         /* @__PURE__ */ jsx54("div", {
@@ -29368,12 +29529,12 @@ var PreviewIllustration = () => {
   return /* @__PURE__ */ jsx54("div", {
     className: illustrationFrame,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs10("div", {
+    children: /* @__PURE__ */ jsxs12("div", {
       className: "w-full max-w-[240px] rounded-md border border-solid border-muted bg-card-bg p-2 fontbrand",
       children: [
         /* @__PURE__ */ jsx54("div", {
           className: "relative flex h-[92px] items-center justify-center rounded-sm border border-solid border-muted bg-pane text-brand",
-          children: /* @__PURE__ */ jsxs10("svg", {
+          children: /* @__PURE__ */ jsxs12("svg", {
             className: "h-14 w-14 text-brand",
             viewBox: "-11.5 -10.23174 23 20.46348",
             fill: "none",
@@ -29413,7 +29574,7 @@ var PreviewIllustration = () => {
             ]
           })
         }),
-        /* @__PURE__ */ jsxs10("div", {
+        /* @__PURE__ */ jsxs12("div", {
           className: "mt-2 flex items-center gap-2",
           children: [
             /* @__PURE__ */ jsx54("div", {
@@ -29462,7 +29623,7 @@ var PipelineIllustration = ({ kind }) => {
   return /* @__PURE__ */ jsx54(RenderIllustration, {});
 };
 var AutomationsSection = () => {
-  return /* @__PURE__ */ jsxs10("div", {
+  return /* @__PURE__ */ jsxs12("div", {
     children: [
       /* @__PURE__ */ jsx54(SectionTitle, {
         children: "Create video apps and automations"
@@ -29475,13 +29636,13 @@ var AutomationsSection = () => {
         className: "py-4",
         children: /* @__PURE__ */ jsx54("dl", {
           className: "grid grid-cols-1 justify-items-stretch gap-5 lg:grid-cols-3 lg:justify-items-center lg:gap-0",
-          children: appPipeline.map((item) => /* @__PURE__ */ jsxs10("div", {
+          children: appPipeline.map((item) => /* @__PURE__ */ jsxs12("div", {
             className: "flex w-full flex-col rounded-lg border border-solid border-text/10 bg-card-bg px-4 py-5 text-left sm:px-5 lg:max-w-[300px] lg:rounded-none lg:border-y-0 lg:border-r-0 lg:border-l lg:bg-transparent lg:px-6 lg:py-0 lg:first:border-l-0",
             children: [
               /* @__PURE__ */ jsx54(PipelineIllustration, {
                 kind: item.illustration
               }),
-              /* @__PURE__ */ jsxs10("div", {
+              /* @__PURE__ */ jsxs12("div", {
                 className: "mb-2 flex items-center gap-2.5",
                 children: [
                   /* @__PURE__ */ jsx54("div", {
@@ -29506,7 +29667,7 @@ var AutomationsSection = () => {
           }, item.step))
         })
       }),
-      /* @__PURE__ */ jsxs10("div", {
+      /* @__PURE__ */ jsxs12("div", {
         className: "mt-8 flex flex-wrap justify-center gap-x-5 gap-y-2 fontbrand text-base text-muted sm:text-sm",
         children: [
           /* @__PURE__ */ jsx54("span", {
@@ -29527,7 +29688,7 @@ var AutomationsSection_default = AutomationsSection;
 
 // src/components/homepage/BackgroundAnimation.tsx
 import { useEffect as useEffect40 } from "react";
-import { jsx as jsx56, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
 var ry = 0.45;
@@ -29559,7 +29720,7 @@ var BackgroundAnimation = () => {
   }, [css]);
   return /* @__PURE__ */ jsx56("div", {
     className: " w-full h-full min-w-0 m-auto lg:relative lg:min-w-[700px] lg:max-w-[1200px] lg:ml-auto lg:left-auto pointer-events-none",
-    children: /* @__PURE__ */ jsxs11("svg", {
+    children: /* @__PURE__ */ jsxs13("svg", {
       className: "translate-y-[-30%] lg:translate-y-[-50%]",
       viewBox: "0 0 1 1",
       style: {
@@ -29614,7 +29775,7 @@ var BackgroundAnimation = () => {
 };
 
 // src/components/homepage/CommunityStatsItems.tsx
-import { jsx as jsx57, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs14 } from "react/jsx-runtime";
 var StatItemContent = ({
   content,
   width,
@@ -29647,10 +29808,10 @@ var Pill = ({ children, className }) => {
   });
 };
 var InstallsPerMonth = () => {
-  return /* @__PURE__ */ jsxs12(Pill, {
+  return /* @__PURE__ */ jsxs14(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -29658,7 +29819,7 @@ var InstallsPerMonth = () => {
         },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
-            content: "4M+",
+            content: "5M+",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -29689,10 +29850,10 @@ var InstallsPerMonth = () => {
   });
 };
 var PagesOfDocs = () => {
-  return /* @__PURE__ */ jsxs12(Pill, {
+  return /* @__PURE__ */ jsxs14(Pill, {
     className: "flex-col",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: { display: "flex", alignItems: "center", gap: 8 },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
@@ -29726,7 +29887,7 @@ var PagesOfDocs = () => {
     ]
   });
 };
-var TemplatesAndExamples = () => /* @__PURE__ */ jsxs12(Pill, {
+var TemplatesAndExamples = () => /* @__PURE__ */ jsxs14(Pill, {
   className: "w-[30%] flex items-center flex-row",
   children: [
     /* @__PURE__ */ jsx57(StatItemContent, {
@@ -29744,10 +29905,10 @@ var TemplatesAndExamples = () => /* @__PURE__ */ jsxs12(Pill, {
   ]
 });
 var GitHubStars = () => {
-  return /* @__PURE__ */ jsxs12(Pill, {
+  return /* @__PURE__ */ jsxs14(Pill, {
     className: "w-[30%] flex-col",
     children: [
-      /* @__PURE__ */ jsxs12("div", {
+      /* @__PURE__ */ jsxs14("div", {
         style: { display: "flex", alignItems: "center" },
         children: [
           /* @__PURE__ */ jsx57(StatItemContent, {
@@ -29784,7 +29945,7 @@ var GitHubStars = () => {
 var DiscordMembers = () => {
   return /* @__PURE__ */ jsx57(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs12("div", {
+    children: /* @__PURE__ */ jsxs14("div", {
       style: {
         width: "80%",
         display: "flex",
@@ -29792,7 +29953,7 @@ var DiscordMembers = () => {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs12("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -29841,7 +30002,7 @@ var DiscordMembers = () => {
 var Contributors = () => {
   return /* @__PURE__ */ jsx57(Pill, {
     className: "w-[30%]",
-    children: /* @__PURE__ */ jsxs12("div", {
+    children: /* @__PURE__ */ jsxs14("div", {
       style: { display: "flex", justifyContent: "center" },
       children: [
         /* @__PURE__ */ jsx57("div", {
@@ -29861,7 +30022,7 @@ var Contributors = () => {
             width: "65px"
           })
         }),
-        /* @__PURE__ */ jsxs12("div", {
+        /* @__PURE__ */ jsxs14("div", {
           style: {
             display: "flex",
             flexDirection: "column",
@@ -29889,14 +30050,14 @@ var Contributors = () => {
 };
 
 // src/components/homepage/CommunityStats.tsx
-import { jsx as jsx58, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs15 } from "react/jsx-runtime";
 var SectionLink = ({ href, children }) => /* @__PURE__ */ jsx58("a", {
   target: "_blank",
   href,
   className: "no-underline text-inherit contents",
   children
 });
-var CommunityStats = () => /* @__PURE__ */ jsxs13("div", {
+var CommunityStats = () => /* @__PURE__ */ jsxs15("div", {
   className: "m-auto max-w-[700px] text-center",
   children: [
     /* @__PURE__ */ jsx58(SectionTitle, {
@@ -29906,7 +30067,7 @@ var CommunityStats = () => /* @__PURE__ */ jsxs13("div", {
       className: "fontbrand text-center mb-10 -mt-4",
       children: "Join a thriving community of developers."
     }),
-    /* @__PURE__ */ jsxs13("div", {
+    /* @__PURE__ */ jsxs15("div", {
       className: "flex flex-wrap justify-between gap-4 w-full items-center",
       children: [
         /* @__PURE__ */ jsx58(SectionLink, {
@@ -29941,8 +30102,8 @@ var CommunityStats_default = CommunityStats;
 
 // ../player/dist/esm/index.mjs
 import { createContext as createContext32 } from "react";
-import { jsx as jsx59, jsxs as jsxs14 } from "react/jsx-runtime";
-import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment12 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment13 } from "react/jsx-runtime";
 import React57 from "react";
 import { useContext as useContext210, useEffect as useEffect41, useState as useState40 } from "react";
 import { useContext as useContext46, useLayoutEffect as useLayoutEffect18 } from "react";
@@ -29986,7 +30147,7 @@ import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
 import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo55, useState as useState82 } from "react";
 import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
-import { jsx as jsx94, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs52 } from "react/jsx-runtime";
 import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
 import { jsx as jsx104, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
@@ -29995,7 +30156,7 @@ import { useMemo as useMemo82 } from "react";
 import { jsx as jsx114, jsxs as jsxs82, Fragment as Fragment23 } from "react/jsx-runtime";
 import { useCallback as useCallback92, useMemo as useMemo112 } from "react";
 import { useCallback as useCallback82, useMemo as useMemo102, useRef as useRef92 } from "react";
-import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs92, Fragment as Fragment33 } from "react/jsx-runtime";
 import { useCallback as useCallback112, useMemo as useMemo132, useRef as useRef112, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
 
@@ -31542,7 +31703,7 @@ var PlayIcon = () => {
   });
 };
 var PauseIcon = () => {
-  return /* @__PURE__ */ jsxs14("svg", {
+  return /* @__PURE__ */ jsxs16("svg", {
     viewBox: "0 0 100 100",
     width: ICON_SIZE2,
     height: ICON_SIZE2,
@@ -31576,7 +31737,7 @@ var FullscreenIcon = ({
   const out = isFullscreen ? 0 : strokeWidth2 / 2;
   const middleInset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 / 2;
   const inset = isFullscreen ? strokeWidth2 * 1.6 : strokeWidth2 * 2;
-  return /* @__PURE__ */ jsxs14("svg", {
+  return /* @__PURE__ */ jsxs16("svg", {
     viewBox: `0 0 ${viewSize} ${viewSize}`,
     height: fullscreenIconSize,
     width: fullscreenIconSize,
@@ -31664,7 +31825,7 @@ var studioStyle = {
 };
 var BufferingIndicator = ({ type }) => {
   const style = type === "player" ? playerStyle : studioStyle;
-  return /* @__PURE__ */ jsxs24(Fragment12, {
+  return /* @__PURE__ */ jsxs24(Fragment13, {
     children: [
       /* @__PURE__ */ jsx214("style", {
         type: "text/css",
@@ -33149,7 +33310,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
       backgroundColor: hovered || isFocused ? "#eee" : "transparent"
     };
   }, [hovered, isFocused]);
-  return /* @__PURE__ */ jsxs53("div", {
+  return /* @__PURE__ */ jsxs52("div", {
     onPointerEnter: onMouseEnter,
     onPointerLeave: onMouseLeave,
     tabIndex: 0,
@@ -33276,13 +33437,13 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   }, [setIsComponentVisible]);
   return /* @__PURE__ */ jsx94("div", {
     ref,
-    children: /* @__PURE__ */ jsxs53("button", {
+    children: /* @__PURE__ */ jsxs52("button", {
       type: "button",
       "aria-label": "Change playback rate",
       style: button,
       onClick,
       children: [
-        /* @__PURE__ */ jsxs53("div", {
+        /* @__PURE__ */ jsxs52("div", {
           style: label2,
           children: [
             playbackRate,
@@ -34265,7 +34426,7 @@ var PlayerUI = ({
     showPosterWhenBufferingAndPaused && showBufferIndicator && !player.isPlaying()
   ].some(Boolean);
   const { left, top, width, height, ...outerWithoutScale } = outer;
-  const content = /* @__PURE__ */ jsxs92(Fragment32, {
+  const content = /* @__PURE__ */ jsxs92(Fragment33, {
     children: [
       /* @__PURE__ */ jsxs92("div", {
         style: outer,
@@ -36984,6 +37145,7 @@ var makeStableFramePool = () => {
     if (!context) {
       throw new Error("Could not create canvas context");
     }
+    context.clearRect(0, 0, stableCanvas.width, stableCanvas.height);
     context.drawImage(canvas, 0, 0);
     let released = false;
     const stableFrame = {
@@ -37670,6 +37832,9 @@ class MediaPlayer {
           }
           const canDecode = await videoTrack.canDecode();
           if (!canDecode) {
+            if (videoTrack.codec === "prores") {
+              return { type: "cannot-decode-prores" };
+            }
             return { type: "cannot-decode" };
           }
           if (this.isDisposalError()) {
@@ -38379,6 +38544,9 @@ var AudioForPreviewAssertedShowing = ({
           handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          throw new Error(`Encountered ProRes media for ${preloadedSrc}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+        }
         if (result.type === "success") {
           setMediaPlayerReady(true);
           setMediaDurationInSeconds(result.durationInSeconds);
@@ -39686,6 +39854,9 @@ var getSinks = async (src, logLevel, credentials, requestInit) => {
     }
     const canDecode = await videoTrack.canDecode();
     if (!canDecode) {
+      if (videoTrack.codec === "prores") {
+        return "cannot-decode-prores";
+      }
       return "cannot-decode";
     }
     const sampleSink = new VideoSampleSink(videoTrack);
@@ -39937,6 +40108,12 @@ var extractFrameInternal = async ({
   if (video === "cannot-decode") {
     return { type: "cannot-decode", durationInSeconds: mediaDurationInSeconds };
   }
+  if (video === "cannot-decode-prores") {
+    return {
+      type: "cannot-decode-prores",
+      durationInSeconds: mediaDurationInSeconds
+    };
+  }
   if (video === "unknown-container-format") {
     return { type: "unknown-container-format" };
   }
@@ -40088,6 +40265,12 @@ var extractFrameAndAudio = async ({
         durationInSeconds: video.durationInSeconds
       };
     }
+    if (video?.type === "cannot-decode-prores") {
+      return {
+        type: "cannot-decode-prores",
+        durationInSeconds: video.durationInSeconds
+      };
+    }
     if (video?.type === "unknown-container-format") {
       return { type: "unknown-container-format" };
     }
@@ -40173,6 +40356,15 @@ var addBroadcastChannelListener = () => {
           window.remotion_broadcastChannel.postMessage(cannotDecodeResponse);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          const cannotDecodeProresResponse = {
+            type: "response-cannot-decode-prores",
+            id: data.id,
+            durationInSeconds: result.durationInSeconds
+          };
+          window.remotion_broadcastChannel.postMessage(cannotDecodeProresResponse);
+          return;
+        }
         if (result.type === "cannot-decode-alpha") {
           const cannotDecodeAlphaResponse = {
             type: "response-cannot-decode-alpha",
@@ -40317,6 +40509,14 @@ var extractFrameViaBroadcastChannel = async ({
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
         return;
       }
+      if (data.type === "response-cannot-decode-prores") {
+        resolve({
+          type: "cannot-decode-prores",
+          durationInSeconds: data.durationInSeconds
+        });
+        window.remotion_broadcastChannel.removeEventListener("message", onMessage);
+        return;
+      }
       if (data.type === "response-network-error") {
         resolve({ type: "network-error" });
         window.remotion_broadcastChannel.removeEventListener("message", onMessage);
@@ -40487,6 +40687,9 @@ var AudioForRendering2 = ({
       if (result.type === "cannot-decode-alpha") {
         throw new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
       }
+      if (result.type === "cannot-decode-prores") {
+        throw new Error(`Encountered ProRes media for ${src}. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+      }
       if (result.type === "network-error") {
         handleError(new Error(`Network error fetching ${src}.`), new Error(`Cannot render audio "${src}": Network error while fetching the audio (possibly CORS).`), `Network error fetching ${src}, falling back to <Html5Audio>`);
         return;
@@ -40583,6 +40786,12 @@ var AudioForRendering2 = ({
 };
 var { validateMediaProps: validateMediaProps2 } = Internals;
 var audioSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...Internals.baseSchema,
   volume: {
     type: "number",
@@ -40693,6 +40902,35 @@ var Audio2 = Interactive.withSchema({
   schema: audioSchema,
   supportsEffects: false
 });
+var getVideoSequenceDuration = ({
+  durationInFrames,
+  loop,
+  playbackRate,
+  trimAfter,
+  trimBefore
+}) => {
+  if (loop || trimAfter === undefined) {
+    return durationInFrames;
+  }
+  const trimmedDuration = Internals.calculateMediaDuration({
+    trimAfter,
+    trimBefore,
+    playbackRate,
+    mediaDurationInFrames: Infinity
+  });
+  return Math.min(durationInFrames ?? Infinity, trimmedDuration);
+};
+var PRORES_DOCS_URL = "https://www.remotion.dev/docs/videos/prores";
+var proresDecoderNotEnabledMessage = (src) => {
+  return `Cannot decode "${src}": it is encoded with Apple ProRes, which WebCodecs does not support natively. ` + `ProRes decoding is not enabled by default. Register the ProRes decoder by calling ` + `registerProresDecoder() from "@mediabunny/prores" in your entry point, before registerRoot(). ` + `See ${PRORES_DOCS_URL}. ` + `(This is required to decode a ProRes source for both preview and rendering — it is unrelated to exporting a video as ProRes.)`;
+};
+
+class ProResDecoderNotEnabledError extends Error {
+  constructor(src) {
+    super(proresDecoderNotEnabledMessage(src));
+    this.name = "ProResDecoderNotEnabledError";
+  }
+}
 var cache2 = new Map;
 var cacheVideoFrame = (src, sourceCanvas) => {
   const { width, height } = sourceCanvas;
@@ -40941,6 +41179,9 @@ var VideoForPreviewAssertedShowing = ({
           handleError(new Error(`Cannot decode ${preloadedSrc}.`), `Cannot decode ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
         }
+        if (result.type === "cannot-decode-prores") {
+          throw new ProResDecoderNotEnabledError(preloadedSrc);
+        }
         if (result.type === "no-tracks") {
           handleError(new Error(`No video or audio tracks found for ${preloadedSrc}.`), `No video or audio tracks found for ${preloadedSrc}, falling back to <OffthreadVideo>`);
           return;
@@ -40951,6 +41192,10 @@ var VideoForPreviewAssertedShowing = ({
           hasDrawnRealFrameRef.current = true;
         }
       }).catch((error2) => {
+        if (error2 instanceof ProResDecoderNotEnabledError) {
+          onErrorRef.current?.(error2);
+          throw error2;
+        }
         const [action, errorToUse] = callOnErrorAndResolve({
           onError: onErrorRef.current,
           error: error2,
@@ -41248,6 +41493,12 @@ var VideoForRendering2 = ({
         handleError(new Error(`Cannot decode ${src}.`), new Error(`Cannot render video "${src}": The video could not be decoded by the browser.`), `Cannot decode ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
       }
+      if (result.type === "cannot-decode-prores") {
+        const proresError = new ProResDecoderNotEnabledError(src);
+        onError?.(proresError);
+        cancelRender3(proresError);
+        return;
+      }
       if (result.type === "cannot-decode-alpha") {
         handleError(new Error(`Cannot decode alpha component for ${src}.`), new Error(`Cannot render video "${src}": The alpha channel could not be decoded by the browser.`), `Cannot decode alpha component for ${src}, falling back to <OffthreadVideo>`, result.durationInSeconds);
         return;
@@ -41443,6 +41694,12 @@ var VideoForRendering2 = ({
 };
 var { validateMediaTrimProps: validateMediaTrimProps2, resolveTrimProps: resolveTrimProps2, validateMediaProps: validateMediaProps22 } = Internals;
 var videoSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...Internals.baseSchema,
   volume: {
     type: "number",
@@ -41462,6 +41719,7 @@ var videoSchema = {
     hiddenFromList: false,
     keyframable: false
   },
+  muted: { type: "boolean", default: false, description: "Muted" },
   loop: { type: "boolean", default: false, description: "Loop" },
   ...Internals.transformSchema
 };
@@ -41620,6 +41878,13 @@ var VideoInner = ({
   const mediaStartsAt = Internals.useMediaStartsAt();
   const videoConfig = useVideoConfig();
   const sequenceDurationInFrames = Math.min(durationInFrames ?? Infinity, Math.max(0, videoConfig.durationInFrames - (from ?? 0)));
+  const videoSequenceDuration = getVideoSequenceDuration({
+    durationInFrames,
+    loop: loop ?? false,
+    playbackRate: playbackRate ?? 1,
+    trimAfter,
+    trimBefore
+  });
   const basicInfo = Internals.useBasicMediaInTimeline({
     src,
     volume,
@@ -41667,7 +41932,7 @@ var VideoInner = ({
   return /* @__PURE__ */ jsx65(Sequence, {
     layout: "none",
     from: from ?? 0,
-    durationInFrames: basicInfo.duration,
+    durationInFrames: videoSequenceDuration,
     freeze,
     _remotionInternalStack: stack,
     _remotionInternalIsMedia: isMedia,
@@ -41771,7 +42036,7 @@ var getIndexFromPosition = (clientX, clientY) => {
 
 // src/components/homepage/Demo/Switcher.tsx
 import { useCallback as useCallback41 } from "react";
-import { jsx as jsx66, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs17 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
   const onPointerDown = useCallback41((e) => {
     e.stopPropagation();
@@ -41796,7 +42061,7 @@ var Switcher = ({ type, theme, onTap }) => {
       alignItems: "center",
       display: "flex"
     },
-    children: /* @__PURE__ */ jsxs15("svg", {
+    children: /* @__PURE__ */ jsxs17("svg", {
       style: { height: switcherSize / 2 },
       viewBox: "0 0 320 512",
       children: [
@@ -41814,7 +42079,7 @@ var Switcher = ({ type, theme, onTap }) => {
 };
 
 // src/components/homepage/Demo/Card.tsx
-import { jsx as jsx68, jsxs as jsxs16, Fragment as Fragment13 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs18, Fragment as Fragment14 } from "react/jsx-runtime";
 var arePositionsEqual = (a2, b2) => {
   return a2.every((pos, i) => {
     return pos.x === b2[i].x && pos.y === b2[i].y;
@@ -41991,7 +42256,7 @@ var Card2 = ({
       borderRadius: 13,
       cursor: "grab"
     },
-    children: /* @__PURE__ */ jsxs16(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs18(AbsoluteFill, {
       style: {
         backgroundColor: color,
         borderRadius: 12
@@ -41999,7 +42264,7 @@ var Card2 = ({
       className: "transition-opacity duration-200",
       children: [
         content,
-        withSwitcher ? /* @__PURE__ */ jsxs16(Fragment13, {
+        withSwitcher ? /* @__PURE__ */ jsxs18(Fragment14, {
           children: [
             /* @__PURE__ */ jsx68(Switcher, {
               onTap: onClickLeft,
@@ -42019,7 +42284,7 @@ var Card2 = ({
 };
 
 // src/components/homepage/Demo/CurrentCountry.tsx
-import { jsx as jsx69, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs19 } from "react/jsx-runtime";
 var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -42034,7 +42299,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
     frame,
     delay: 10
   });
-  return /* @__PURE__ */ jsxs17(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs19(AbsoluteFill, {
     style: { overflow: "hidden" },
     children: [
       /* @__PURE__ */ jsx69(AbsoluteFill, {
@@ -42052,7 +42317,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
           })
         })
       }),
-      /* @__PURE__ */ jsxs17(AbsoluteFill, {
+      /* @__PURE__ */ jsxs19(AbsoluteFill, {
         style: {
           alignItems: "center",
           justifyContent: "center"
@@ -42341,7 +42606,7 @@ var DisplayedEmoji = ({ emoji }) => {
 };
 
 // src/components/homepage/Demo/EmojiCard.tsx
-import { jsx as jsx75, jsxs as jsxs18, Fragment as Fragment14 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs20, Fragment as Fragment15 } from "react/jsx-runtime";
 var applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
   ref1.style.transform = `translateX(${transforms[0]}%)`;
   ref2.style.transform = `translateX(${transforms[1]}%)`;
@@ -42437,7 +42702,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
     });
   }, []);
   const env = useRemotionEnvironment();
-  return /* @__PURE__ */ jsxs18(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs20(AbsoluteFill, {
     style: {
       justifyContent: "center",
       alignItems: "center",
@@ -42469,7 +42734,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           children: /* @__PURE__ */ jsx75(DisplayedEmoji, {
             emoji: emojiIndex
           })
-        }) : /* @__PURE__ */ jsxs18(Fragment14, {
+        }) : /* @__PURE__ */ jsxs20(Fragment15, {
           children: [
             /* @__PURE__ */ jsx75("div", {
               ref: ref1,
@@ -42517,7 +42782,7 @@ var Minus = ({ leftOffset, minusSignOpacity }) => {
 };
 
 // src/components/homepage/Demo/DigitWheel.tsx
-import { jsx as jsx78, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs21 } from "react/jsx-runtime";
 var DURATION = 25;
 var items = 10;
 var NUM_WIDTH = 36;
@@ -42561,7 +42826,7 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
   const rotation = progresses.map((p, i) => {
     return p * offsets[i];
   }).reduce((a2, b2) => a2 + b2, 0) + rotations[0];
-  return /* @__PURE__ */ jsxs19("div", {
+  return /* @__PURE__ */ jsxs21("div", {
     style: {
       position: "relative",
       width: NUM_WIDTH,
@@ -42622,14 +42887,14 @@ var Wheel = ({ delay: delay2, digits, renderDigit, isLeadingDigit, isNegative })
 };
 
 // src/components/homepage/Demo/TemperatureNumber.tsx
-import { jsx as jsx79, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs25 } from "react/jsx-runtime";
 var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
   const temperatureInFahrenheit = temperatureInCelsius * 9 / 5 + 32;
   const celsiusDegree = Math.abs(temperatureInCelsius);
   const fahrenheitDegree = Math.abs(temperatureInFahrenheit);
   const paddedCelsiusDegree = String(celsiusDegree).padStart(fahrenheitDegree.toFixed(0).length, "0").split("");
   const paddedFahrenheitDegree = fahrenheitDegree.toFixed(0).padStart(paddedCelsiusDegree.length, "0").split("");
-  return /* @__PURE__ */ jsxs20("div", {
+  return /* @__PURE__ */ jsxs25("div", {
     style: {
       lineHeight: 1.1,
       fontFamily: "GTPlanar",
@@ -42677,13 +42942,13 @@ var TemperatureNumber = ({ theme, temperatureInCelsius }) => {
 };
 
 // src/components/homepage/Demo/Temperature.tsx
-import { jsx as jsx80, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
 var Temperature = ({ theme, city, temperatureInCelsius }) => {
   if (temperatureInCelsius === null) {
     return null;
   }
   return /* @__PURE__ */ jsx80(AbsoluteFill, {
-    children: /* @__PURE__ */ jsxs21(AbsoluteFill, {
+    children: /* @__PURE__ */ jsxs27(AbsoluteFill, {
       style: {
         alignItems: "center",
         justifyContent: "center",
@@ -42691,7 +42956,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
         paddingRight: 20
       },
       children: [
-        /* @__PURE__ */ jsxs21("div", {
+        /* @__PURE__ */ jsxs27("div", {
           style: {
             color: "#0b84f3",
             fontFamily: "GTPlanar",
@@ -42716,7 +42981,7 @@ var Temperature = ({ theme, city, temperatureInCelsius }) => {
 
 // src/components/homepage/Demo/TrendingRepos.tsx
 import { useMemo as useMemo60 } from "react";
-import { jsx as jsx81, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs28 } from "react/jsx-runtime";
 var TrendingRepoItem = ({ repo, theme, number }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -42738,7 +43003,7 @@ var TrendingRepoItem = ({ repo, theme, number }) => {
       opacity: progress
     };
   }, [progress, theme]);
-  return /* @__PURE__ */ jsxs25("div", {
+  return /* @__PURE__ */ jsxs28("div", {
     style: item,
     children: [
       number,
@@ -42769,7 +43034,7 @@ var TrendingRepos = ({ theme, trending }) => {
         paddingLeft: 20,
         paddingRight: 20
       },
-      children: /* @__PURE__ */ jsxs25("div", {
+      children: /* @__PURE__ */ jsxs28("div", {
         children: [
           /* @__PURE__ */ jsx81("div", {
             style: {
@@ -42902,7 +43167,7 @@ var Cards = ({
 };
 
 // src/components/homepage/Demo/Comp.tsx
-import { jsx as jsx87, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs29 } from "react/jsx-runtime";
 var getDataAndProps = async () => {
   const location = await fetch("https://utils.remotion.dev/location").then((res) => res.json());
   const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`).then((res) => res.json()).then((data) => {
@@ -42963,7 +43228,7 @@ var HomepageVideoComp = ({
       c2.free();
     };
   }, []);
-  return /* @__PURE__ */ jsxs27(AbsoluteFill, {
+  return /* @__PURE__ */ jsxs29(AbsoluteFill, {
     style: {
       backgroundColor: theme === "dark" ? "#222" : "#fafafa"
     },
@@ -43029,7 +43294,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.490";
+var VERSION2 = "4.0.492";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -43585,6 +43850,8 @@ var createAudioSampleSource = ({
   });
   return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
 };
+var nestedHtmlInCanvasSupport = null;
+var forceDisableHtmlInCanvasForTesting = false;
 var supportsNativeHtmlInCanvas = () => {
   if (typeof document === "undefined") {
     return false;
@@ -43592,6 +43859,121 @@ var supportsNativeHtmlInCanvas = () => {
   const ctx = document.createElement("canvas").getContext("2d");
   return typeof ctx?.drawElementImage === "function";
 };
+var runNestedHtmlInCanvasProbe = () => {
+  if (!supportsNativeHtmlInCanvas() || !document.body) {
+    return Promise.resolve(false);
+  }
+  const outer = document.createElement("canvas");
+  const inner2 = document.createElement("canvas");
+  const outerTarget = document.createElement("div");
+  const innerTarget = document.createElement("div");
+  const outerCtx = outer.getContext("2d");
+  const innerCtx = inner2.getContext("2d");
+  if (!outerCtx || !innerCtx || typeof outer.requestPaint !== "function" || typeof inner2.requestPaint !== "function") {
+    return Promise.resolve(false);
+  }
+  outer.layoutSubtree = true;
+  inner2.layoutSubtree = true;
+  outer.width = 4;
+  outer.height = 4;
+  inner2.width = 4;
+  inner2.height = 4;
+  Object.assign(outer.style, {
+    display: "block",
+    height: "4px",
+    left: "0",
+    pointerEvents: "none",
+    position: "fixed",
+    top: "0",
+    visibility: "visible",
+    width: "4px",
+    zIndex: "2147483647"
+  });
+  Object.assign(inner2.style, {
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  Object.assign(outerTarget.style, {
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  Object.assign(innerTarget.style, {
+    backgroundColor: "rgb(255, 0, 0)",
+    display: "block",
+    height: "4px",
+    width: "4px"
+  });
+  inner2.appendChild(innerTarget);
+  outerTarget.appendChild(inner2);
+  outer.appendChild(outerTarget);
+  document.body.appendChild(outer);
+  return new Promise((resolve) => {
+    let innerPainted = false;
+    let settled = false;
+    let timeout = null;
+    const settle = (supported) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      if (timeout !== null) {
+        window.clearTimeout(timeout);
+      }
+      outer.remove();
+      resolve(supported);
+    };
+    timeout = window.setTimeout(() => settle(false), 1000);
+    inner2.addEventListener("paint", () => {
+      try {
+        innerCtx.reset();
+        const transform = innerCtx.drawElementImage(innerTarget, 0, 0, 4, 4);
+        innerTarget.style.transform = transform.toString();
+        innerPainted = true;
+        requestAnimationFrame(() => outer.requestPaint());
+      } catch {
+        settle(false);
+      }
+    });
+    outer.addEventListener("paint", () => {
+      if (!innerPainted) {
+        return;
+      }
+      try {
+        outerCtx.reset();
+        if (typeof outer.captureElementImage !== "function") {
+          settle(false);
+          return;
+        }
+        const elementImage = outer.captureElementImage(outerTarget);
+        const transform = outerCtx.drawElementImage(elementImage, 0, 0, 4, 4);
+        elementImage.close();
+        outerTarget.style.transform = transform.toString();
+        const pixel = outerCtx.getImageData(2, 2, 1, 1).data;
+        settle(pixel[0] > 200 && pixel[1] < 20 && pixel[2] < 20 && pixel[3] > 200);
+      } catch {
+        settle(false);
+      }
+    });
+    inner2.requestPaint();
+  });
+};
+var supportsNestedHtmlInCanvas = () => {
+  if (forceDisableHtmlInCanvasForTesting) {
+    return Promise.resolve(false);
+  }
+  if (!nestedHtmlInCanvasSupport) {
+    nestedHtmlInCanvasSupport = runNestedHtmlInCanvasProbe();
+  }
+  return nestedHtmlInCanvasSupport;
+};
+var countLayoutSubtreeCanvases = (element) => {
+  return Array.from(element.querySelectorAll("canvas")).filter((canvas) => canvas.layoutSubtree === true).length;
+};
+var containsLayoutSubtreeCanvas = (element) => {
+  return countLayoutSubtreeCanvases(element) > 0;
+};
 var setupHtmlInCanvas = ({
   wrapper,
   div,
@@ -43633,14 +44015,36 @@ var drawWithHtmlInCanvas = async ({
   htmlInCanvasContext,
   element,
   scaledWidth,
-  scaledHeight
+  scaledHeight,
+  waitForRenderReady,
+  useElementImage
 }) => {
   const { ctx, layoutCanvas } = htmlInCanvasContext;
+  if (layoutCanvas.width !== scaledWidth || layoutCanvas.height !== scaledHeight) {
+    layoutCanvas.width = scaledWidth;
+    layoutCanvas.height = scaledHeight;
+  }
   await waitForPaint(layoutCanvas);
-  layoutCanvas.width = scaledWidth;
-  layoutCanvas.height = scaledHeight;
+  const nestedPaintCycles = useElementImage ? countLayoutSubtreeCanvases(element) * 2 + 1 : 0;
+  for (let i = 0;i < nestedPaintCycles; i++) {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    await waitForRenderReady();
+    await waitForPaint(layoutCanvas);
+  }
   ctx.reset();
-  ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  if (useElementImage) {
+    if (typeof layoutCanvas.captureElementImage !== "function") {
+      throw new Error("canvas.captureElementImage() is unavailable");
+    }
+    const elementImage = layoutCanvas.captureElementImage(element);
+    try {
+      ctx.drawElementImage(elementImage, 0, 0, scaledWidth, scaledHeight);
+    } finally {
+      elementImage.close();
+    }
+  } else {
+    ctx.drawElementImage(element, 0, 0, scaledWidth, scaledHeight);
+  }
   const offscreen = new OffscreenCanvas(scaledWidth, scaledHeight);
   const offCtx = offscreen.getContext("2d");
   if (!offCtx) {
@@ -43772,7 +44176,7 @@ function createScaffold({
   videoEnabled,
   defaultCodec,
   defaultOutName,
-  allowHtmlInCanvas,
+  useHtmlInCanvas,
   pixelDensity
 }) {
   if (!ReactDOM6.createRoot) {
@@ -43799,7 +44203,7 @@ function createScaffold({
   const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, "white"));
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
-  const htmlInCanvasContext = allowHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
+  const htmlInCanvasContext = useHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
   const errorHolder = { error: null };
   const root = ReactDOM6.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -44801,6 +45205,15 @@ var filterRequiresPrecompositing = (filter) => {
   }
   return null;
 };
+var snapshotTransformStyle = (computedStyle) => {
+  return {
+    display: computedStyle.display,
+    rotate: computedStyle.rotate,
+    scale: computedStyle.scale,
+    transform: computedStyle.transform,
+    transformOrigin: computedStyle.transformOrigin
+  };
+};
 var isReplacedElement = (element) => {
   return element instanceof HTMLImageElement || element instanceof HTMLVideoElement || element instanceof HTMLCanvasElement || element instanceof HTMLIFrameElement || element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLObjectElement || element instanceof HTMLEmbedElement;
 };
@@ -44851,7 +45264,8 @@ var getGlobalTransformOrigin = ({ transform }) => {
 };
 var calculateTransforms = ({
   element,
-  rootElement
+  rootElement,
+  transformStyleCache
 }) => {
   let parent = element;
   const transforms = [];
@@ -44861,10 +45275,19 @@ var calculateTransforms = ({
   let maskImageInfo = null;
   let filterForPrecompositing = null;
   while (parent) {
+    const cachedTransformStyle = transformStyleCache.get(parent);
+    const shouldReadComputedStyle = parent === element || cachedTransformStyle === undefined;
     const originalTransition = parent.style.transition;
     parent.style.transition = "none";
-    const computedStyle = getComputedStyle(parent);
+    const computedStyle = shouldReadComputedStyle ? getComputedStyle(parent) : null;
+    const transformStyle = computedStyle === null ? cachedTransformStyle : snapshotTransformStyle(computedStyle);
+    if (computedStyle !== null) {
+      transformStyleCache.set(parent, transformStyle);
+    }
     if (parent === element) {
+      if (computedStyle === null) {
+        throw new Error("Element computed style not found");
+      }
       elementComputedStyle = computedStyle;
       opacity2 = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
@@ -44887,9 +45310,9 @@ var calculateTransforms = ({
         }
       });
     }
-    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle, element: parent }) && hasAnyTransformCssValue(computedStyle);
+    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle: transformStyle, element: parent }) && hasAnyTransformCssValue(transformStyle);
     if (hasApplicableTransformCssValue || parent === element) {
-      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
+      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(transformStyle) ? transformStyle.transform : undefined;
       const matrix = new DOMMatrix(toParse);
       const resetTransforms = makeTransformResetter(parent);
       const { scale, rotate: rotate2 } = parent.style;
@@ -44904,7 +45327,7 @@ var calculateTransforms = ({
       const cleanup = resetTransforms(hasApplicableTransformCssValue);
       transforms.push({
         element: parent,
-        transformOrigin: computedStyle.transformOrigin,
+        transformOrigin: transformStyle.transformOrigin,
         boundingClientRect: null,
         matrices: additionalMatrices
       });
@@ -45496,7 +45919,8 @@ var drawBackground = async ({
         internalState,
         scale,
         onlyBackgroundClipText: true,
-        waitForPageResponsiveness: null
+        waitForPageResponsiveness: null,
+        waitForRenderReady: () => Promise.resolve()
       });
       onlyBackgroundClipText.setTransform(new DOMMatrix().scale(scale, scale));
       element.style.backgroundClip = originalBackgroundClip;
@@ -46650,13 +47074,15 @@ var processNode = async ({
   internalState,
   rootElement,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   let __stack = [];
   try {
     const transforms = __using2(__stack, calculateTransforms({
       element,
-      rootElement
+      rootElement,
+      transformStyleCache
     }), 0);
     const { opacity: opacity2, computedStyle, totalMatrix, dimensions, precompositing } = transforms;
     if (opacity2 === 0) {
@@ -46715,7 +47141,8 @@ var processNode = async ({
         internalState,
         scale,
         onlyBackgroundClipText: false,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        waitForRenderReady: () => Promise.resolve()
       });
       if (waitForPageResponsiveness !== null) {
         await waitForPageResponsiveness();
@@ -46816,29 +47243,25 @@ var applyTextTransform = (text, transform) => {
   }
   return text;
 };
+var wordSegmenter = new Intl.Segmenter("en", { granularity: "word" });
 var findWords = (span) => {
   const originalText = span.textContent;
-  const segmenter = new Intl.Segmenter("en", { granularity: "word" });
-  const segments = segmenter.segment(span.textContent);
-  const words = Array.from(segments).map((s) => s.segment);
+  const segments = Array.from(wordSegmenter.segment(originalText));
   const tokens = [];
-  for (let i = 0;i < words.length; i++) {
-    const wordsBefore = words.slice(0, i);
-    const wordsAfter = words.slice(i + 1);
-    const word = words[i];
-    const wordsBeforeText = wordsBefore.join("");
-    const wordsAfterText = wordsAfter.join("");
+  for (const { index: index2, segment } of segments) {
+    const wordsBeforeText = originalText.slice(0, index2);
+    const wordsAfterText = originalText.slice(index2 + segment.length);
     const beforeNode = document.createTextNode(wordsBeforeText);
     const afterNode = document.createTextNode(wordsAfterText);
     const interstitialNode = document.createElement("span");
-    interstitialNode.textContent = word;
+    interstitialNode.textContent = segment;
     span.textContent = "";
     span.appendChild(beforeNode);
     span.appendChild(interstitialNode);
     span.appendChild(afterNode);
     const rect = interstitialNode.getBoundingClientRect();
     span.textContent = originalText;
-    tokens.push({ text: word, rect });
+    tokens.push({ text: segment, rect });
   }
   return tokens;
 };
@@ -47127,10 +47550,10 @@ var drawText = ({
     const ctm = contextToDraw.getTransform();
     const blurScale = Math.hypot(ctm.a, ctm.b);
     const { strokeFirst } = parsePaintOrder(paintOrder);
+    const measurements = contextToDraw.measureText(originalText);
+    const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+    const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
     for (const token of tokens) {
-      const measurements = contextToDraw.measureText(originalText);
-      const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
-      const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
       const leading = token.rect.height - fontHeight;
       const halfLeading = leading / 2;
       const x = (isRTL2 ? token.rect.right : token.rect.left) - parentRect.x;
@@ -47185,7 +47608,8 @@ var handleTextNode = async ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -47203,7 +47627,8 @@ var handleTextNode = async ({
     internalState,
     rootElement,
     scale,
-    waitForPageResponsiveness
+    waitForPageResponsiveness,
+    transformStyleCache
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -47218,7 +47643,8 @@ var walkOverNode = ({
   rootElement,
   onlyBackgroundClipText,
   scale,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  transformStyleCache
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -47230,7 +47656,8 @@ var walkOverNode = ({
       internalState,
       rootElement,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   if (node instanceof Text) {
@@ -47243,7 +47670,8 @@ var walkOverNode = ({
       rootElement,
       onlyBackgroundClipText,
       scale,
-      waitForPageResponsiveness
+      waitForPageResponsiveness,
+      transformStyleCache
     });
   }
   throw new Error("Unknown node type");
@@ -47274,6 +47702,7 @@ var compose = async ({
   let __stack = [];
   try {
     const treeWalker = document.createTreeWalker(element, onlyBackgroundClipText ? NodeFilter.SHOW_TEXT : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
+    const transformStyleCache = new WeakMap;
     if (onlyBackgroundClipText) {
       treeWalker.nextNode();
       if (!treeWalker.currentNode) {
@@ -47293,7 +47722,8 @@ var compose = async ({
         rootElement: element,
         onlyBackgroundClipText,
         scale,
-        waitForPageResponsiveness
+        waitForPageResponsiveness,
+        transformStyleCache
       });
       if (val.type === "skip-children") {
         if (!skipToNextNonDescendant(treeWalker)) {
@@ -47326,17 +47756,21 @@ var createLayer = async ({
   cutout,
   htmlInCanvasContext,
   onHtmlInCanvasLayerOutcome,
-  waitForPageResponsiveness
+  waitForPageResponsiveness,
+  waitForRenderReady
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
   if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
+    const hasNestedHtmlInCanvas = containsLayoutSubtreeCanvas(element);
     try {
       const offCtx = await drawWithHtmlInCanvas({
         htmlInCanvasContext,
         element,
         scaledWidth,
-        scaledHeight
+        scaledHeight,
+        waitForRenderReady,
+        useElementImage: hasNestedHtmlInCanvas
       });
       onHtmlInCanvasLayerOutcome({ native: true });
       return offCtx;
@@ -47583,7 +48017,6 @@ var internalRenderMediaOnWeb = async ({
   muted,
   scale,
   isProduction,
-  allowHtmlInCanvas,
   sampleRate
 }) => {
   let __stack2 = [];
@@ -47597,7 +48030,7 @@ var internalRenderMediaOnWeb = async ({
       }
       htmlInCanvasLayerOutcomeReported = true;
       if (outcome.native) {
-        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://github.com/WICG/html-in-canvas");
+        Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, "Using Chromium experimental HTML-in-canvas (drawElementImage) for video frames. See https://remotion.dev/docs/client-side-rendering/html-in-canvas");
       } else if (outcome.shouldWarn) {
         Internals.Log.warn({ logLevel, tag: "@remotion/web-renderer" }, `Not using HTML-in-canvas: ${outcome.reason}`);
       }
@@ -47651,6 +48084,7 @@ var internalRenderMediaOnWeb = async ({
     if (signal?.aborted) {
       return Promise.reject(new Error("renderMediaOnWeb() was cancelled"));
     }
+    const useHtmlInCanvas = await supportsNestedHtmlInCanvas();
     const scaffold = __using2(__stack2, createScaffold({
       width: resolved.width,
       height: resolved.height,
@@ -47668,7 +48102,7 @@ var internalRenderMediaOnWeb = async ({
       initialFrame: 0,
       defaultCodec: resolved.defaultCodec,
       defaultOutName: resolved.defaultOutName,
-      allowHtmlInCanvas,
+      useHtmlInCanvas,
       pixelDensity: scale
     }), 0);
     const {
@@ -47679,27 +48113,6 @@ var internalRenderMediaOnWeb = async ({
       errorHolder,
       htmlInCanvasContext
     } = scaffold;
-    if (allowHtmlInCanvas && !htmlInCanvasContext) {
-      if (!supportsNativeHtmlInCanvas()) {
-        onHtmlInCanvasLayerOutcome({
-          native: false,
-          reason: "This browser does not expose CanvasRenderingContext2D.prototype.drawElementImage. In Chromium, enable chrome://flags/#canvas-draw-element and use a version that ships the API.",
-          shouldWarn: false
-        });
-      } else {
-        onHtmlInCanvasLayerOutcome({
-          native: false,
-          reason: "drawElementImage is available but canvas.requestPaint() is missing. Use a Chromium version that ships requestPaint.",
-          shouldWarn: true
-        });
-      }
-    } else if (!allowHtmlInCanvas) {
-      onHtmlInCanvasLayerOutcome({
-        native: false,
-        reason: "allowHtmlInCanvas is false; using the built-in DOM composer.",
-        shouldWarn: false
-      });
-    }
     const internalState = __using2(__stack2, makeInternalState(), 0);
     const pageResponsivenessController = createPageResponsivenessController({
       intervalInMilliseconds: pageResponsivenessIntervalInMilliseconds,
@@ -47718,6 +48131,17 @@ var internalRenderMediaOnWeb = async ({
       fps: resolved.fps,
       logLevel
     }), 0);
+    const waitForRenderReady = async () => {
+      await waitForReady({
+        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+        scope: delayRenderScope,
+        signal,
+        apiName: "renderMediaOnWeb",
+        internalState,
+        keepalive
+      });
+      checkForError(errorHolder);
+    };
     const artifactsHandler = handleArtifacts();
     const webFsTarget = outputTarget === "web-fs" ? await createWebFsTarget() : null;
     const target = webFsTarget ? new StreamTarget(webFsTarget.stream) : new BufferTarget;
@@ -47736,15 +48160,7 @@ var internalRenderMediaOnWeb = async ({
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        await waitForReady({
-          timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-          scope: delayRenderScope,
-          signal,
-          apiName: "renderMediaOnWeb",
-          internalState,
-          keepalive
-        });
-        checkForError(errorHolder);
+        await waitForRenderReady();
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
@@ -47802,15 +48218,7 @@ var internalRenderMediaOnWeb = async ({
             throw new Error("renderMediaOnWeb() was cancelled");
           }
           timeUpdater.current?.update(frame);
-          await waitForReady({
-            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-            scope: delayRenderScope,
-            signal,
-            apiName: "renderMediaOnWeb",
-            keepalive,
-            internalState
-          });
-          checkForError(errorHolder);
+          await waitForRenderReady();
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
@@ -47828,7 +48236,8 @@ var internalRenderMediaOnWeb = async ({
               cutout: new DOMRect(0, 0, resolved.width, resolved.height),
               htmlInCanvasContext,
               onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
-              waitForPageResponsiveness
+              waitForPageResponsiveness,
+              waitForRenderReady
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
@@ -47997,7 +48406,6 @@ var renderMediaOnWeb = (options2) => {
     muted: options2.muted ?? false,
     scale: options2.scale ?? 1,
     isProduction: options2.isProduction ?? true,
-    allowHtmlInCanvas: options2.allowHtmlInCanvas ?? false,
     sampleRate: options2.sampleRate ?? 48000
   }));
   return onlyOneRenderAtATimeQueue.ref;
@@ -48036,7 +48444,7 @@ var DemoErrorIcon = () => {
 };
 
 // src/components/homepage/Demo/DoneCheckmark.tsx
-import { jsx as jsx91, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs30 } from "react/jsx-runtime";
 var DoneCheckmark = () => {
   return /* @__PURE__ */ jsx91("div", {
     style: {
@@ -48049,7 +48457,7 @@ var DoneCheckmark = () => {
       justifyContent: "center",
       animation: "jump 0.2s ease-out"
     },
-    children: /* @__PURE__ */ jsxs28("svg", {
+    children: /* @__PURE__ */ jsxs30("svg", {
       viewBox: "0 0 20 20",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
@@ -48078,7 +48486,7 @@ var DoneCheckmark = () => {
 };
 
 // src/components/homepage/Demo/Progress.tsx
-import { jsx as jsx95, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs31 } from "react/jsx-runtime";
 var Progress = ({ progress }) => {
   const inner2 = makeCircle({
     radius: 10
@@ -48088,7 +48496,7 @@ var Progress = ({ progress }) => {
     closePath: false,
     radius: 10
   });
-  return /* @__PURE__ */ jsxs29("svg", {
+  return /* @__PURE__ */ jsxs31("svg", {
     viewBox: `0 0 ${inner2.width} ${inner2.height}`,
     style: { overflow: "visible", height: 22 },
     children: [
@@ -48111,7 +48519,7 @@ var Progress = ({ progress }) => {
 
 // src/components/homepage/Demo/Spinner.tsx
 import { useMemo as useMemo64 } from "react";
-import { jsx as jsx97, jsxs as jsxs30, Fragment as Fragment15 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs34, Fragment as Fragment16 } from "react/jsx-runtime";
 var viewBox2 = 100;
 var lines2 = 8;
 var className2 = "__remotion_spinner_line";
@@ -48124,7 +48532,7 @@ var Spinner2 = ({ size: size4, duration }) => {
       height: size4
     };
   }, [size4]);
-  return /* @__PURE__ */ jsxs30(Fragment15, {
+  return /* @__PURE__ */ jsxs34(Fragment16, {
     children: [
       /* @__PURE__ */ jsx97("style", {
         type: "text/css",
@@ -48280,7 +48688,7 @@ var RenderButton = ({ renderData, onError, playerRef }) => {
 };
 
 // src/components/homepage/Demo/DownloadNudge.tsx
-import { jsx as jsx99, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
 var origWidth = 77;
 var scale = 0.4;
 var Icon3 = () => {
@@ -48310,7 +48718,7 @@ var DownloadNudge = () => {
       paddingRight: 24,
       paddingTop: 18
     },
-    children: /* @__PURE__ */ jsxs31("div", {
+    children: /* @__PURE__ */ jsxs36("div", {
       children: [
         /* @__PURE__ */ jsx99(Icon3, {}),
         /* @__PURE__ */ jsx99("div", {
@@ -48330,7 +48738,7 @@ var DownloadNudge = () => {
 };
 
 // src/components/homepage/Demo/DragAndDropNudge.tsx
-import { jsx as jsx100, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs37 } from "react/jsx-runtime";
 var origWidth2 = 37;
 var scale2 = 0.4;
 var Icon5 = () => {
@@ -48360,7 +48768,7 @@ var DragAndDropNudge = () => {
       marginTop: 18
     },
     className: "ml-4 lg:-ml-5",
-    children: /* @__PURE__ */ jsxs34("div", {
+    children: /* @__PURE__ */ jsxs37("div", {
       children: [
         /* @__PURE__ */ jsx100("div", {
           style: {
@@ -48425,7 +48833,7 @@ var useElementSize2 = (ref) => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { jsx as jsx101, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs38 } from "react/jsx-runtime";
 var getFrameFromX2 = (clientX, durationInFrames, width2) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width2], [0, durationInFrames - 1], {
@@ -48634,12 +49042,12 @@ var PlayerSeekBar2 = ({
       position: "absolute"
     };
   }, [durationInFrames, inFrame, outFrame]);
-  return /* @__PURE__ */ jsxs36("div", {
+  return /* @__PURE__ */ jsxs38("div", {
     ref: containerRef,
     onPointerDown,
     style: containerStyle3,
     children: [
-      /* @__PURE__ */ jsxs36("div", {
+      /* @__PURE__ */ jsxs38("div", {
         style: barBackground2,
         children: [
           /* @__PURE__ */ jsx101("div", {
@@ -48866,7 +49274,7 @@ var TimeDisplay = ({ fps, playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayerControls.tsx
-import { jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs39 } from "react/jsx-runtime";
 var Separator2 = () => {
   return /* @__PURE__ */ jsx110("div", {
     style: {
@@ -48876,7 +49284,7 @@ var Separator2 = () => {
   });
 };
 var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
-  return /* @__PURE__ */ jsxs37("div", {
+  return /* @__PURE__ */ jsxs39("div", {
     className: "flex flex-row items-center bg-pane",
     children: [
       /* @__PURE__ */ jsx110(PlayPauseButton, {
@@ -48920,7 +49328,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 
 // src/components/homepage/Demo/ThemeNudge.tsx
 import React77 from "react";
-import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs40 } from "react/jsx-runtime";
 var origWidth3 = 37;
 var scale3 = 0.4;
 var Icon6 = () => {
@@ -48956,9 +49364,9 @@ var ThemeNudge = () => {
       position: "absolute"
     },
     className: "lg:top-3 lg:-right-6 right-0 top-0",
-    children: /* @__PURE__ */ jsxs38("div", {
+    children: /* @__PURE__ */ jsxs40("div", {
       children: [
-        /* @__PURE__ */ jsxs38("div", {
+        /* @__PURE__ */ jsxs40("div", {
           style: {
             fontFamily: FONTS.GTPLANAR,
             fontSize: 15,
@@ -48969,7 +49377,7 @@ var ThemeNudge = () => {
             marginTop: 5
           },
           children: [
-            /* @__PURE__ */ jsxs38("a", {
+            /* @__PURE__ */ jsxs40("a", {
               href: "#",
               onClick: toggleTheme,
               className: "bluelink",
@@ -48991,7 +49399,7 @@ var ThemeNudge = () => {
 };
 
 // src/components/homepage/Demo/index.tsx
-import { jsx as jsx115, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs41 } from "react/jsx-runtime";
 var style3 = {
   width: "100%",
   aspectRatio: "640 / 360",
@@ -49059,7 +49467,7 @@ var Demo = () => {
   const onError = useCallback55(() => {
     setError(true);
   }, []);
-  return /* @__PURE__ */ jsxs39("div", {
+  return /* @__PURE__ */ jsxs41("div", {
     id: "demo",
     children: [
       /* @__PURE__ */ jsx115("br", {}),
@@ -49067,17 +49475,17 @@ var Demo = () => {
       /* @__PURE__ */ jsx115(SectionTitle, {
         children: "Interactive demo"
       }),
-      /* @__PURE__ */ jsxs39("div", {
+      /* @__PURE__ */ jsxs41("div", {
         className: "max-w-[760px] mx-auto",
         children: [
-          /* @__PURE__ */ jsxs39("div", {
+          /* @__PURE__ */ jsxs41("div", {
             className: "h-[105px] relative",
             children: [
               /* @__PURE__ */ jsx115(DragAndDropNudge, {}),
               /* @__PURE__ */ jsx115(ThemeNudge, {})
             ]
           }),
-          /* @__PURE__ */ jsxs39("div", {
+          /* @__PURE__ */ jsxs41("div", {
             style: playerWrapper,
             children: [
               /* @__PURE__ */ jsx115(Player, {
@@ -49166,7 +49574,7 @@ var BlueButton = (props) => {
 };
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { jsx as jsx118, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs44 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState57([]);
   useEffect58(() => {
@@ -49179,10 +49587,10 @@ var EvaluateRemotionSection = () => {
     }
     setDailyAvatars(selectedAvatars);
   }, []);
-  return /* @__PURE__ */ jsxs40("div", {
+  return /* @__PURE__ */ jsxs44("div", {
     className: "flex flex-col lg:flex-row gap-2",
     children: [
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs44("div", {
         className: "card flex-1 flex flex-col",
         children: [
           /* @__PURE__ */ jsx118("div", {
@@ -49196,7 +49604,7 @@ var EvaluateRemotionSection = () => {
           /* @__PURE__ */ jsx118("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs40("div", {
+          /* @__PURE__ */ jsxs44("div", {
             className: "flex flex-row flex-wrap gap-2",
             children: [
               /* @__PURE__ */ jsx118("a", {
@@ -49223,7 +49631,7 @@ var EvaluateRemotionSection = () => {
           })
         ]
       }),
-      /* @__PURE__ */ jsxs40("div", {
+      /* @__PURE__ */ jsxs44("div", {
         className: "card flex-1 flex flex-col",
         children: [
           /* @__PURE__ */ jsx118("div", {
@@ -49237,7 +49645,7 @@ var EvaluateRemotionSection = () => {
           /* @__PURE__ */ jsx118("div", {
             className: "flex-1"
           }),
-          /* @__PURE__ */ jsxs40("div", {
+          /* @__PURE__ */ jsxs44("div", {
             className: "flex flex-row justify-between",
             children: [
               /* @__PURE__ */ jsx118("a", {
@@ -49270,13 +49678,13 @@ import { useEffect as useEffect59, useRef as useRef60 } from "react";
 
 // src/components/homepage/MakeVideosLinks.tsx
 import React80 from "react";
-import { jsx as jsx119, jsxs as jsxs41, Fragment as Fragment16 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs46, Fragment as Fragment17 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var MakeVideosLinkItem = ({ href, label: label3 }) => {
-  return /* @__PURE__ */ jsxs41("a", {
+  return /* @__PURE__ */ jsxs46("a", {
     className: "no-underline text-[var(--subtitle)] font-brand font-medium text-sm inline-flex flex-row items-center",
     href,
     children: [
@@ -49297,7 +49705,7 @@ var MakeVideosLinks = ({ links }) => {
   if (links.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs41(Fragment16, {
+  return /* @__PURE__ */ jsxs46(Fragment17, {
     children: [
       /* @__PURE__ */ jsx119("div", {
         className: "h-4"
@@ -49305,7 +49713,7 @@ var MakeVideosLinks = ({ links }) => {
       /* @__PURE__ */ jsx119("div", {
         className: "leading-6",
         children: links.map((link) => {
-          return /* @__PURE__ */ jsxs41(React80.Fragment, {
+          return /* @__PURE__ */ jsxs46(React80.Fragment, {
             children: [
               /* @__PURE__ */ jsx119(MakeVideosLinkItem, {
                 ...link
@@ -49320,9 +49728,9 @@ var MakeVideosLinks = ({ links }) => {
 };
 
 // src/components/homepage/MakeVideosAgentically.tsx
-import { jsx as jsx120, jsxs as jsxs44, Fragment as Fragment17 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs47, Fragment as Fragment18 } from "react/jsx-runtime";
 var MakeVideosAgentically = ({
-  title = /* @__PURE__ */ jsxs44(Fragment17, {
+  title = /* @__PURE__ */ jsxs47(Fragment18, {
     children: [
       /* @__PURE__ */ jsx120("span", {
         className: "text-[var(--subtitle)]",
@@ -49361,13 +49769,13 @@ var MakeVideosAgentically = ({
     observer.observe(current);
     return () => observer.unobserve(current);
   }, []);
-  return /* @__PURE__ */ jsxs44("div", {
+  return /* @__PURE__ */ jsxs47("div", {
     ref,
     className: "flex min-w-0 basis-0 flex-col flex-1",
     children: [
       /* @__PURE__ */ jsx120("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs44("video", {
+        children: showVideo ? /* @__PURE__ */ jsxs47("video", {
           ref: videoRef,
           muted: true,
           autoPlay: true,
@@ -49394,7 +49802,7 @@ var MakeVideosAgentically = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs44("div", {
+      /* @__PURE__ */ jsxs47("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx120("h2", {
@@ -49416,9 +49824,9 @@ var MakeVideosAgentically = ({
 
 // src/components/homepage/MakeVideosInteractively.tsx
 import { useRef as useRef61 } from "react";
-import { jsx as jsx121, jsxs as jsxs46, Fragment as Fragment18 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs48, Fragment as Fragment19 } from "react/jsx-runtime";
 var MakeVideosInteractively = ({
-  title = /* @__PURE__ */ jsxs46(Fragment18, {
+  title = /* @__PURE__ */ jsxs48(Fragment19, {
     children: [
       /* @__PURE__ */ jsx121("span", {
         className: "text-[var(--subtitle)]",
@@ -49436,13 +49844,13 @@ var MakeVideosInteractively = ({
   fallbackVideoSrc = "/img/editing-safari.mp4"
 }) => {
   const ref = useRef61(null);
-  return /* @__PURE__ */ jsxs46("div", {
+  return /* @__PURE__ */ jsxs48("div", {
     ref,
     className: "flex min-w-0 basis-0 flex-col justify-start items-start lg:mt-0 flex-1",
     children: [
       /* @__PURE__ */ jsx121("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs46("video", {
+        children: showVideo ? /* @__PURE__ */ jsxs48("video", {
           autoPlay: true,
           muted: true,
           playsInline: true,
@@ -49468,7 +49876,7 @@ var MakeVideosInteractively = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs46("div", {
+      /* @__PURE__ */ jsxs48("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx121("h2", {
@@ -49489,9 +49897,9 @@ var MakeVideosInteractively = ({
 };
 
 // src/components/homepage/MakeVideosProgrammatically.tsx
-import { jsx as jsx125, jsxs as jsxs47, Fragment as Fragment19 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs49, Fragment as Fragment20 } from "react/jsx-runtime";
 var MakeVideosProgrammatically = ({
-  title = /* @__PURE__ */ jsxs47(Fragment19, {
+  title = /* @__PURE__ */ jsxs49(Fragment20, {
     children: [
       /* @__PURE__ */ jsx125("span", {
         className: "text-[var(--subtitle)]",
@@ -49508,12 +49916,12 @@ var MakeVideosProgrammatically = ({
   videoSrc = "/img/what-is-remotion.webm",
   fallbackVideoSrc = "/img/what-is-remotion.mp4"
 }) => {
-  return /* @__PURE__ */ jsxs47("div", {
+  return /* @__PURE__ */ jsxs49("div", {
     className: "flex min-w-0 basis-0 flex-col flex-1",
     children: [
       /* @__PURE__ */ jsx125("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsxs47("video", {
+        children: showVideo ? /* @__PURE__ */ jsxs49("video", {
           muted: true,
           autoPlay: true,
           playsInline: true,
@@ -49532,7 +49940,7 @@ var MakeVideosProgrammatically = ({
           ]
         }) : null
       }),
-      /* @__PURE__ */ jsxs47("div", {
+      /* @__PURE__ */ jsxs49("div", {
         className: "font-brand",
         children: [
           /* @__PURE__ */ jsx125("h2", {
@@ -49554,7 +49962,7 @@ var MakeVideosProgrammatically = ({
 
 // src/components/homepage/NewsletterButton.tsx
 import { useCallback as useCallback56, useState as useState58 } from "react";
-import { jsx as jsx127, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs50 } from "react/jsx-runtime";
 var NewsletterButton = () => {
   const [email, setEmail] = useState58("");
   const [submitting, setSubmitting] = useState58(false);
@@ -49586,26 +49994,26 @@ var NewsletterButton = () => {
       className: "flex flex-col",
       children: /* @__PURE__ */ jsx127("div", {
         className: "w-full",
-        children: /* @__PURE__ */ jsxs48("div", {
+        children: /* @__PURE__ */ jsxs50("div", {
           className: "flex flex-col flex-1",
           children: [
             /* @__PURE__ */ jsx127(SectionTitle, {
               children: "Newsletter"
             }),
-            /* @__PURE__ */ jsxs48("form", {
+            /* @__PURE__ */ jsxs50("form", {
               onSubmit: handleSubmit,
               style: {
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ jsxs48("div", {
+                /* @__PURE__ */ jsxs50("div", {
                   className: "fontbrand text-center mb-10 -mt-4",
                   children: [
                     "Read about new features and noteworthy updates we have made on Remotion once in a while.",
                     " "
                   ]
                 }),
-                /* @__PURE__ */ jsxs48("div", {
+                /* @__PURE__ */ jsxs50("div", {
                   className: "flex flex-col md:flex-row gap-2 justify-center",
                   children: [
                     /* @__PURE__ */ jsx127(Input, {
@@ -49641,7 +50049,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/TrustedByBanner.tsx
-import { jsx as jsx128, jsxs as jsxs49, Fragment as Fragment20 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs51, Fragment as Fragment21 } from "react/jsx-runtime";
 var TrustedByBanner = () => {
   const logos = [
     {
@@ -49661,7 +50069,7 @@ var TrustedByBanner = () => {
     {
       id: "logo2",
       url: "https://www.musixmatch.com/",
-      light: /* @__PURE__ */ jsxs49("svg", {
+      light: /* @__PURE__ */ jsxs51("svg", {
         height: "40",
         viewBox: "0 0 229 48",
         fill: "none",
@@ -49721,7 +50129,7 @@ var TrustedByBanner = () => {
     {
       id: "logo3",
       url: "https://www.wistia.com/",
-      light: /* @__PURE__ */ jsxs49("svg", {
+      light: /* @__PURE__ */ jsxs51("svg", {
         height: "30",
         viewBox: "0 0 165 36",
         fill: "none",
@@ -49754,7 +50162,7 @@ var TrustedByBanner = () => {
       })
     }
   ];
-  return /* @__PURE__ */ jsxs49(Fragment20, {
+  return /* @__PURE__ */ jsxs51(Fragment21, {
     children: [
       /* @__PURE__ */ jsx128("h3", {
         className: "text-center mt-20 mb-10",
@@ -49920,7 +50328,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
 var MuxVideo = forwardRef41(MuxVideoForward);
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { jsx as jsx131, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs53 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
   "Captions",
@@ -50027,7 +50435,7 @@ var BuiltWithRemotionShowcase = () => {
       setIsMuted(newMutedState);
     }
   };
-  return /* @__PURE__ */ jsxs50("div", {
+  return /* @__PURE__ */ jsxs53("div", {
     ref: containerRef,
     children: [
       /* @__PURE__ */ jsx131(SectionTitle, {
@@ -50046,10 +50454,10 @@ var BuiltWithRemotionShowcase = () => {
       /* @__PURE__ */ jsx131("div", {
         className: "card flex p-0 overflow-hidden",
         "data-nosnippet": true,
-        children: /* @__PURE__ */ jsxs50("div", {
+        children: /* @__PURE__ */ jsxs53("div", {
           className: "flex-1 grid grid-cols-1 lg:grid-cols-2",
           children: [
-            /* @__PURE__ */ jsxs50("div", {
+            /* @__PURE__ */ jsxs53("div", {
               className: "w-full aspect-video lg:aspect-square relative overflow-hidden bg-[#eee] cursor-pointer",
               onClick: handlePlayPause,
               children: [
@@ -50113,7 +50521,7 @@ var BuiltWithRemotionShowcase = () => {
                 })
               ]
             }),
-            /* @__PURE__ */ jsxs50("div", {
+            /* @__PURE__ */ jsxs53("div", {
               className: "p-6 lg:p-10 flex min-w-0 flex-col justify-center",
               children: [
                 /* @__PURE__ */ jsx131("div", {
@@ -50131,7 +50539,7 @@ var BuiltWithRemotionShowcase = () => {
                 /* @__PURE__ */ jsx131("div", {
                   className: "h-5"
                 }),
-                /* @__PURE__ */ jsxs50("a", {
+                /* @__PURE__ */ jsxs53("a", {
                   className: "no-underline text-brand font-brand font-bold inline-flex flex-row items-center",
                   href: videoApps[activeTab].link,
                   children: [
@@ -50150,7 +50558,7 @@ var BuiltWithRemotionShowcase = () => {
           justifyContent: "center",
           display: "flex"
         },
-        children: /* @__PURE__ */ jsxs50("div", {
+        children: /* @__PURE__ */ jsxs53("div", {
           style: {
             fontFamily: "GTPlanar"
           },
@@ -50174,7 +50582,7 @@ var BuiltWithRemotionShowcase = () => {
 import { useState as useState61 } from "react";
 
 // src/components/homepage/GitHubButton.tsx
-import { jsx as jsx134, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs55 } from "react/jsx-runtime";
 var GithubIcon = () => {
   return /* @__PURE__ */ jsx134("svg", {
     viewBox: "0 0 496 512",
@@ -50186,7 +50594,7 @@ var GithubIcon = () => {
   });
 };
 var GithubButton = () => {
-  return /* @__PURE__ */ jsxs51("div", {
+  return /* @__PURE__ */ jsxs55("div", {
     className: "flex flex-row items-center text-base",
     children: [
       /* @__PURE__ */ jsx134(GithubIcon, {}),
@@ -50204,15 +50612,15 @@ var GithubButton = () => {
 };
 
 // src/components/homepage/GetStartedStrip.tsx
-import { jsx as jsx136, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs56 } from "react/jsx-runtime";
 var GetStarted = () => {
   const [clicked, setClicked] = useState61(null);
-  return /* @__PURE__ */ jsxs54("div", {
+  return /* @__PURE__ */ jsxs56("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [
       /* @__PURE__ */ jsx136("div", {
         className: "w-full lg:w-auto",
-        children: /* @__PURE__ */ jsxs54("div", {
+        children: /* @__PURE__ */ jsxs56("div", {
           className: "flex flex-row w-full relative",
           children: [
             clicked ? /* @__PURE__ */ jsx136("div", {
@@ -50275,9 +50683,9 @@ var GetStarted = () => {
 };
 
 // src/components/homepage/WriteInReact.tsx
-import { jsx as jsx137, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx137, jsxs as jsxs57 } from "react/jsx-runtime";
 var WriteInReact = () => {
-  return /* @__PURE__ */ jsxs56("div", {
+  return /* @__PURE__ */ jsxs57("div", {
     children: [
       /* @__PURE__ */ jsx137("h1", {
         className: "text-4xl sm:text-5xl lg:text-[5em] text-center fontbrand font-black leading-none text-balance",
@@ -50286,7 +50694,7 @@ var WriteInReact = () => {
         },
         children: "Make videos programmatically."
       }),
-      /* @__PURE__ */ jsxs56("p", {
+      /* @__PURE__ */ jsxs57("p", {
         style: {
           textShadow: "0 5px 30px var(--background)"
         },
@@ -50308,7 +50716,7 @@ var WriteInReact = () => {
 };
 
 // src/components/Homepage.tsx
-import { jsx as jsx138, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs58 } from "react/jsx-runtime";
 "use client";
 var makeVideosRowClassName = "mt-4 md:mt-6 flex flex-col lg:flex-row gap-10";
 var NewLanding = ({ colorMode, setColorMode }) => {
@@ -50317,7 +50725,7 @@ var NewLanding = ({ colorMode, setColorMode }) => {
     setColorMode,
     children: /* @__PURE__ */ jsx138("div", {
       className: "w-full relative",
-      children: /* @__PURE__ */ jsxs57("div", {
+      children: /* @__PURE__ */ jsxs58("div", {
         style: { overflow: "hidden" },
         children: [
           /* @__PURE__ */ jsx138("div", {
@@ -50327,12 +50735,12 @@ var NewLanding = ({ colorMode, setColorMode }) => {
           /* @__PURE__ */ jsx138("br", {}),
           /* @__PURE__ */ jsx138("br", {}),
           /* @__PURE__ */ jsx138("br", {}),
-          /* @__PURE__ */ jsxs57("div", {
+          /* @__PURE__ */ jsxs58("div", {
             className: "max-w-[500px] lg:max-w-[1000px] m-auto pl-5 pr-5 overflow-x-clip md:overflow-x-visible relative",
             children: [
               /* @__PURE__ */ jsx138(WriteInReact, {}),
               /* @__PURE__ */ jsx138("br", {}),
-              /* @__PURE__ */ jsxs57("div", {
+              /* @__PURE__ */ jsxs58("div", {
                 className: makeVideosRowClassName,
                 children: [
                   /* @__PURE__ */ jsx138(MakeVideosAgentically, {